How information is laid out on the page will have a direct impact on time a user needs to locate something. Clearly marking and grouping related information will reduce the time a user wastes looking for information.
Based on different factors such as how much information needs to be displayed or how the information will be used, different types of designs can be used.
Single Column
Use single column layout for the screen, and keep borders clean. This will make the flow of information easier for users.
Long Form
If there is a lot of information and displaying that in one long form will be problematic, then information can be divided into tabs.
Short Form
For shorter screens, simply use sections. Sections that are informative only should be collapsed by default so that users can focus on information that requires their attention.
Data Comparison
In both the cases i.e. tabs and sections, users will need to navigate between tabs and sections to find information. These design work well in most scenarios except when users need to compare information from different sections. A great option in such scenario is the card layout design. Card layout design allows users to expand/collapse cards, move them around so that only required information is on the screen in a location that helps the user perform a comparison.
Kanban Board
Kanban Board is a great pattern which is widely used in most Agile project tracking tools. This pattern as shown in the figure below provides three types of information in one glance.
- What are all the tasks
- What is the status of each task?
- Detailed information for each task (when selected)
A great benefit of all these designs is faster load times. Since information is grouped into tabs, sections or cards, it is not required to be loaded all at once. You can use the concept of lazy loading to greatly improve screen performance i.e. only load data when the user opens a section, tab or card.
Highlight Sections
Regardless of the layout you choose, you can further reduce the time required locating information by using highlighting sections. The idea is to either use a different color or some other notation to identify sections that need attention or input. That way, users can directly go to the sections that need attention, instead of going through each section trying to figure out the same.
Conditional Visibility
Users of enterprise apps are bombarded with a lot of information, one way to make sure that they do not see irrelevant fields is to use the concept of conditional visibility.
The idea of conditional visibility is simple, input fields that are dependent on other inputs should not be displayed at the time of form load. Loading all the fields can be a bit overwhelming and confusing. Dependent fields should only show up when their dependencies have been met. For example, in the screenshot below, the second question should only be asked if the answer to the first question is Yes, otherwise it is one additional field that takes time.
Another tip to remember is to use transitions instead of showing changes instantly. Users might not even get a chance to notice if a new field has appeared if it suddenly shows up. So, the dependent field should show up at the speed that user can actually see it got appearing on the form.
Want to learn more about UX Patterns? Download your copy of “UX Patterns for Enterprise Applications” here.