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 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.

Adeel Javed - UX Patterns For Improving Worker Engagement

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.

Adeel Javed - UX Patterns For Improving Worker Engagement

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 user perform comparison.

Adeel Javed - UX Patterns For Improving Worker Engagement

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)

Adeel Javed - UX Patterns For Improving Worker Engagement

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 user opens a section, tab or card.

Highlight Sections

Regardless of the layout you choose, you can further reduce 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, uses can directly go to the sections that needs 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, second question should only be asked if the answer to first question is Yes, otherwise it is one additional field that takes time.

Adeel Javed - UX Patterns For Enterprise Applications

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.

Adeel Javed - UX Patterns For Enterprise Applications