Data display

Data display will discuss how we display data in our UIs, which is critical to application success. Data display includes numbers, dates, times, images, icons and more. Watch the video to learn more. 

How we display data in our UIs is mission-critical to application success.

For instance, the display of numbers. At no time should a business user ever be confused about whether a figure is 100,000 or 1,000,000. Number separators (commas in the US and periods in most other parts of the world) are critical to the clear display of numbers.

Test yourself. How long does it take you to understand what this value is? Now compare it to how long it takes you understand this value? Make very sure you are always using number separators.

Clear display of dates and times help users avoid confusion. There are two primary displays of date and time to consider:

• Relative time, which gives a user a general idea of time to and from an event.
• Absolute time, which provides an exact time.

Use relative times when the user needs to get a general idea of when something happened or will happen. Most use cases for date/time in Pega applications will likely fall in this category.

Use absolute times when timestamps are critical. These should be used in more technical contexts. If using absolute time, always include both date and time. Examples may include audits or log history. Whichever format makes sense for your use cases make sure you are consistent.

Labels for production application data should be clear and concise. Oftentimes, the type of data is obvious to the user due to the format of the value, and thus the labels can be shortened.

For instance, in this example, the values are obviously dates, and therefore date can be removed from the labels. 

This makes the entire UI simpler.

Images and icons are actually two quite different things in UX. 

Images in enterprise applications are typically used to depict or identify products or parts or people. Images should be clear, professionally photographed, or illustrated, and checked for proper resolution on high-density displays.

An icon is used to represent a single action, such as edit or remove a navigation point, such as edit homepage, or the categorization of an item, such as locked.

An icon is used to represent a single action, navigation point, or categorization of an item. Icons should be used when an action, navigation point, or category is repeated in a UI, or throughout an application often enough that it becomes noisy and distracting. We can simplify the UI by replacing repeated words with icons, but only if the icon is instantly recognizable. Complex concepts or actions should not be represented by an icon. Each icon must have exactly one meaning and then used consistently throughout the application. For instance, a pencil should represent the 'edit' action only and not also other actions. However, if an icon is not immediately understood, you should contemplate whether an icon is better than words. This is easy to test on your teammates. Lastly, icons need to be consistently illustrated. Never mix and match icons found on the web. Inconsistent iconography leads to unprofessional applications.

Use the Pega icon set or another professional set of icons, and be consistent about when you use hollow versus filled icons. The Pega set includes both.

Check your knowledge with the following interaction.