Most B2B software includes displays of data, including dashboards and charts. While many of them are purely informational, the most important ones allow its users to interact with the data, or trigger some actions (either within the platform or outside of it). Just to give you some examples of possible actions:
- For a retail business, triggered actions include ordering more of a certain product, cancelling orders, creating invoice, etc.
- For a professional training company, HR professionals who monitor training compliance data may see the need to encourage or congratulate an employee depending on their success at completing the assigned training. Many of the managers and HR people prefer to do that in person instead of relying on impersonal emails that admin site allows them to generate.
Some of the display design can mean a matter of life and death as in the now infamous Chernobyl control room and the Three Mile Island Nuclear Power Plant, two places where the data display’s design was far from being human centered. Flawed display design cost untold number of human lives and a far reaching environmental disaster following the disaster in April of 1986 in Ukraine, and in Pennsylvania in 1979. I lived relatively close to Chernobyl (in Hungary) at the time of the explosion, but only decades later did I come to realize how easily that tragedy could have been avoided. Risk-tolerant tourists now can book a tour to visit the site in Ukraine and marvel at the dysfunctional design.
Designing data displays requires a deep understanding of the system, the admin’s needs for sources of information, and the risks that go with not having access to the right data at the right time. A tall order for a UX professional unless they can collaborate with an SME.
But there are some general principles to help.
N Principles of Display Design
Based on Attention
1. Make salience compatible with importance
Some pieces of information are more important than others, in fact, there is a whole hierarchy in information architecture. Accordingly, the most important information needs to be the most salient, and the less important pieces less salient. Otherwise, users get confused and or overwhelmed with the abundance of alerts competing for their attention.
2. Minimize information access cost
Information access cost is the time and effort it takes to locate the right page / graph / table needed. Good design makes sure that cost of traveling between frequently accessed sources is small. A related principle is
3. Display Mental Proximity
If the user needs to integrate two or more sources of information in order to complete a task, it is crucial that the user perceives those sources as clearly connected to each other (mental proximity) as possible. When we look at a line graph, we need to integrate the ups and downs of the line with the legend and the values. This is often achieved by having the various elements close to each other (proximity), but there are other ways to make the connection salient, such as using the same color and/or format, adding a line, etc. The reverse applies as well – avoid using the same color, pattern if you want to separate elements.
4. Avoid resource competition
If you need to communicate multiple unrelated pieces of information to the user, use different modalities. For example, speed of a car can be seen visually on a dashboard, but the alert about seat belt is auditory (which can get very annoying).
5. Make the assets easy to discern and discriminate
When looking at a lot of information (e.g., dashboards, charts, maps), users do not want to engage in a “spot the difference” game. In other words, consumers of displays can get easily overwhelmed by minute differences as they demand a lot of cognitive resources.
Color One common example is a map with hues of one or two colors, which makes discerning the differences a challenge.
Text Hard-to-read, not legible text makes scanning very difficult. One way around it the Tallman method, which highlights difference
in drug names by capitalizing discriminating letters and making them bold is an example of making labels more. This is one of the techniques the FDA approved to avoid look-alike and sound-alike (LASA) drug names. (source)
Similarity causes confusion. Similarity is the ratio of similar features to different features. Thus, AJB648 is more similar to AJB658 than 48 is similar to 58, even though in both cases only a single digit is different. Where confusion could be serious, the designer … should highlight dissimilar ones in order to make them distinctive.
Lee and Wickens
Sources consulted:
- Wickens, C. D., & Liu, Y. (2017). Designing for people: An introduction to human factors engineering. Createspace Independent Publishing Platform.
- https://www.fda.gov/drugs/medication-errors-related-cder-regulated-drug-products/fda-name-differentiation-project, retrieved on 23/2/2024
