Checklist for perfect dashboard design
Tags: UX, UI Design, Best Practices, Dashboard, Charts

Checklists are powerful tools to help you maintain consistency and good practice in a very easy and convenient way. Using checklists ensures that you won’t forget anything and will allow you to delegate tasks effectively.

Below you could find a dashboard design checklists that will make sure you do not miss out any vital steps.

✅ Define success criteria

It is essential to have a clear business goal that you want to achieve and how success will be measured. This will help you to establish a more result-driven process.

✅ Create personas

Your dashboard starts and ends with your users, so it is crucial to define who your users are.

✅ Define a problem you are trying to solve

Knowing what problem you are trying to solve will help you define what type of the dashboard you need. Also ask yourself what type of decisions need to be made looking at your dashboard.

✅ Define key performance indicators and what insights need to be highlighted

Identifying the right information to include is important to the success of your dashboard. Also remember that it is crucial to show insights and not only data. Also consider what filtering or comparing options might be useful for the user.

✅ Choose the best way to present your data

Ask yourself if the chart is the best way to represent the data and if yes, which type of chart. Include all hover states and tooltips in design and if there is need to take the user to a different view or expanded details provide that information in your design specification. If you design for mobile define what happens if the user presses taps, double taps or hard presses the chart. Also always put data in the context.

✅ Select the right colors to present information

Do the colors express the emotional context of the charts? For example, red color is not good to show a positive tendency.

✅ Define how your dashboard will perform with big numbers

This is very important especially in FinTech applications where switching between different currencies would drastically change numbers users see. Also a mobile phone has a limited space, therefore be careful that the large numeric data is not cut.

✅ Define empty states

Here take in consideration two possibilities that one piece of data is absent for some reason or that the user has no permission to see data. Will you hide this piece, make it gray or create a blocked state if the user does not have right permissions?

✅ Define behaviour of loading states

For some charts, you might need to do some calculations locally, so you will need the loading state to show the user that your application is working. Also take in consideration how you want to load a page, chart by chart or you want that user see all data together when it is ready.

✅ Define system feedback and errors

If any increase/drop in numbers would require immediate attention and actions you will need to implement notifications to trigger user attention. Also take in account any type of errors that might occur. Could users easily access further information or a help section if needed?

✅ Accessibility check

The most important information in a dashboard must fit on a single screen. Is there a workaround for operating without a mouse or on a mobile phone? Don’t forget to check for text sizes, color blindness and contrast.

✅ Consistency check

Did you check if your elements already exist in the design system or you had to introduce a new UI element, behaviour, color or text style? Make sure that all elements are updated in your library.

✅ Tested on 5 users

Prepare clickable prototype to test design property. Try to use real data in your design as it will increase quality of the user tests.

✅ Developer handover prepared

Make sure that all behaviours are written down and that design is accessible via collaboration tools (Zeplin, Abstract etc).

More design checklists coming soon. Follow to stay updated ;)

. . .

References:

Free Charts UI Kit by Mimi to help you create beautiful dashboards. It has more than 60 charts, carefully crafted and designed in light and dark mode.

What you should know before designing dashboard https://uxplanet.org/best-practice-for-powerful-dashboard-ac4c3ddca016

Data-heavy applications: How to design perfect charts https://uxplanet.org/data-heavy-applications-how-to-design-perfect-charts-c0c893fef6de