When developing a dashboard, why user experience is important.

Are you a developer publishing to a large community of users? Or are you developing some self service visualisations, and wanting to engage, influence and impress your peers and/or customers?

Engaging users is critical to maximising value from your visual analytics and data. User experience is key to this for the following reasons:

• A good user experience will help drive adoption. The more people that are using it then the more value an organization can get from its data investment.  
• Users can find the insight they need more quickly. This makes for greater productivity and better decisions.  
• People will enjoy using it and if they enjoy the experience they are more likely to explore and experiment, driving further insight and inspiration!

What type of dashboards do we develop?

From a business view point, we can classify dashboards into four types:

1. Strategic - Focused on long-term strategies and high-level metrics.
2. Tactical - To track progress toward goals by immediately drilling into the dashboard data.
3. Analytical - Typically includes simple graphical elements and a lot of flexibility for detailed analysis.
4. Operational - Help business users see what is happening now, flagging any issues that need immediate attention.

Identifying the type of dashboard that needs to be developed will help you determined how the user will engage, and how often, with the dashboard.

What considerations to take into account?

Affordance

When we mention affordance, we are referring to the relationship between an object, its environment, and its users. The purpose of affordances is to attract the attention of the user to a set of possible interactive actions i.e. essential design cues to the user that indicates a process of completing a task.

A visual affordance to distinguish between active and inactive buttons

Affordances can also take other forms. You can have your data conditionally coloured to attract attention when something happens. For example, when a value falls below a certain point a KPI can include an affordance to change the text to red. This sends an alert to the user to take action.

Colour matters

Does colour matter? Yes, it does. Colours plays an important function with regards to how the users interact with the dashboard. Consideration also needs to be made regarding people who have some type of colour based visual impairment.

For people with protanopia or deuteranopia the colors red and green are seen more as muddied yellow/brown colours. These forms of red-green colour blindness are the most common forms of colour blindness. 

This is especially worth noting since so many people in BI like to visualize KPIs using the traffic light analogy (RAG: red is bad, yellow is a warning, green is good). For red/green colour blind users these colour coded KPI indicators aren’t as effective.  

The best practice recommendation is to use different shapes as well as different colours as performance indicators to make your designs more accessible. Perhaps you use a red empty circle to denote bad and a green full circle for good. Perhaps a triangle warning icon that only appears when a KPI is at an unacceptable level. Using both shape & colour as indicators increases the usability of your app for all users. The same holds true for other visualizations. Lines, bars, and pie slices can all be confusing and difficult to distinguish when the colours are distorted. 

Contrast

Contrast is where something stands out against all of the other things around it.

You can achieve this in a variety of ways and for a variety of reasons. When everything is different, nothing stands out. When there is consistency you can use contrast for emphasis and gain the user’s attention.

Filters

Filters are an essential part of a dashboard, allowing users to focus on certain aspects of their data. The question is not if they should be used so much as where to place them.

Left Placement: Building a dashboard allows your page to scroll vertically so you can stack your filters down the left side of the page. This also allows you to simultaneously filter and see the results of those selections in real time as the filters and visualisations are sitting side-by-side.

Top placement: Another viable placement option is along the top of an application. This is especially useful when creating a dashboard app and embedding the app into an existing website with a relatively narrow fixed width. By not placing the filters down the left it gives more space for larger visualisations.

Top placement also means that the primary content of your application is pushed farther down the page. This means users may need to scroll down the page to see the result of their filter selections, then scrolling back up to clear or change those selections.

Logos, Icons and Images

Some may say that using screen real estate for image objects is wasteful. If that were the case, why would they be used on websites, in advertising space and on products?

The reason is that logos, icons and images assist with visual appeal and brand identity, among other things. Here are a few considerations and ideas as to how to best use graphics within your applications:

• Use corporate logos or specific project logos to help reinforce a sense of identity and trust in the application.
• Icons can be very effective at reinforcing recurring themes or domains within the data and should be used consistently across sheets
• Make sure your graphics are well suited to their use. Get the balance right between a small file size (good for performance) and quality. Transparent .PNG images tend to work well as a file format.
• Companies tend to put a lot of effort into the design aesthetic of public facing material. This is a great source of design ideas and graphics. Make sure to check out assets such as annual reports, corporate presentation templates and company websites for some great material.
• Don’t use excessive numbers of graphic objects, they should be an accompanying feature to the analytics objects, not the main event (landing pages can be the exception). 

Interaction Cost

Interaction Cost is the total effort (mental and physical) a user must spend to interact with something.

Physically it is the number of clicks, the amount of finger gestures on touch devices, as well as the amount of scrolling a user must use to navigate. Mentally it is the cognitive burden (cognitive load) of remembering where items are located in the interface, comprehending the information presented to you, scanning for content relevant to your needs, or waiting for a page to load while remembering what you just read.

Reading a data visualisation has a very low interaction cost because it is entirely passive, but the exploration of data increases the interaction cost. The rate of that increase depends on the successfulness of the interface.

Forcing a user to make more clicks, having to scroll too far down the page, navigating between many windows / pages, or reoccurring objects inconsistently placed around an experience are all examples of things that will increase the cost of interaction. In general, the higher the interaction cost, the lower the user satisfaction.

Less is more

Less is more is saying that the less ornamentation you have in your design, the more powerful it is. Basically, the less decorative stuff you cram into a design the more useful it becomes to people.

Like the move toward modernism in architecture more than a hundred years ago, the UX design pendulum of style has shifted away from the highly ornamental, 3D, glossy, shadowy, bubbly, skeuomorphic design style. Designers have moved away from intricately ornamental interfaces. Today’s modern user interface style is a cleaner, simpler, flatter style of design.

But it shouldn’t be completely flat. After all, you still want to include certain affordances to indicate to users that some objects are selectable while others are not. Google’s Material Design does a nice job creating a balance. They have simplified their design style to be mostly flat but they use shadow and subtle gradients to increase the visibility of different elements.

Space and symmetry

A layout of visualisation objects that are symmetric and beautiful, will be more appealing and users are more likely to want to engage with the content.

Here are a couple of simple methods to managing

• Try to leave a space between objects and to the edge of the screen, this avoids user claustrophobia and delineates objects nicely
• Arrange objects symmetrically, as symmetry is appealing to the eye
• Group objects together that have a strong relationship or shared relevance

Object Usage

Objects are charts, KPIs, text boxes, maps, extensions, etc. Clusters of KPIs could be considered a single object group so these standards could be applied to the group (e.g. using a text box to appear as a title for the group.

1. Objects should have a title that describe the content and a subtitle that provides the definition of the measures used.
2. Objects should have a footnote that states the source (i.e. the functional team of the data owner e.g. Finance, Operations, etc.) of the data.
3. Choosing which chart style to use, should follow good practice for data presentation.

Choosing the right chart

We are often asked “what is the right chart for my data?” Unfortunately there is no secret decoder ring to point at data and see what kind of chart would work best.

I found the following image as a great example of determining which chart to utilise:

https://extremepresentation.typepad.com/files/chart-chooser-2020.pdf

Kite Marking

As Developers, we need to balance agility and quality alongside freedom and control. A kitemark applied to all the dashboards that we create, is a fantastic way to support the decision making and drive actions to continually improve data governance and quality.