Ever seen the dashboard of a car? In a quick glance, the driver is able to process all the information necessary for him to know as he kick starts the engine. Similarly, many businesses require dashboards that give them a quick summary of important metrics and data that can help them make informed decisions about their product or service. Dashboards require an interface that can help the user simplify huge chunks of data into small and concise pieces of information.
Designing an effective dashboard, however, can be quite challenging and even intimidating when you’re getting started from a blank canvas. Over the last year, we’ve had the opportunity to design multiple such dashboards. Here are a few things we’ve learned along the way:
The most important and basic thing to start with in the System Development Life Cycle (SDLC) is Planning. During the planning process, we as designers definitely need to communicate with the stakeholders to understand the requirements of the dashboard. However, before jumping into the userflows or wireframes, it’s important to talk to the user about their needs, the current difficulties they face understanding data, and the information that’s important for them to make the right business decisions through the dashboard.
A dashboard should be designed keeping in mind one user. If there are multiple users for a single dashboard, usually, different views need to be designed for each user — each user having access to different sets of information.
The content on the dashboard must be arranged such that all the chunks of information are easily accessible to the user. It is important for designers to understand that the information is organised in a way that makes sense for the user. Key information should stand out and should be quick for the user to understand in a glance.
One way to display information on a dashboard is to use the concept of a pyramid — where the top of the dashboard displays high level information and as the user drills down into more internal pages, the information starts getting more detailed and granular. By applying the pyramid approach, the information will be structured in a streamlined manner and would be easy for the user to absorb and access.
When a user logs in to the Ayopop Partner Dashboard, instead of overwhelming the user with too much data at once, we summarise it into small chunks. In order to avoid something called as Analysis Paralysis — a situation where a user might get too involved in the analysis without taking any action, in turn paralysing the results.
As seen below, the account and billing data is summarised such that the user can take a quick look at the numbers and understand the business performance, along with a simple graph that visualises the data
A good dashboard is intended as a gateway to get more detailed information or explore information progressively. On the Fazzdoc Dashboard, information has been grouped logically. For example, the details of each medical facility can be found under the ‘Medical Facilities’ menu, accessible from the navigation; upcoming appointments can be found under the ‘Appointments’ menu and so on…
In simple words, cognitive psychology is the way users process information or the way users deal with a product, depending on their mental ability to think, perceive, learn, memorise and reason. (source: Muzli)
Strictly speaking, as designers we can display an infinite number of graphs, statistics, and various other types of data representations, however, we should always think about the limits of human cognition. It’s important to not overdo with the number of graphs used, but instead use visualisations sparingly that make it easy for users to analyse and identify trends. Limiting the number of items users store in their short-term memory would be helpful when navigating around the dashboard.
This strategic dashboard reflects how the brand is performing over a period of time. Key data sets are presented to the user, always reflected against previous performance (shown as a percentage increase/decrease in the numbers). Comparison values add context to current numbers by comparing current numbers to historical values.
Dashboards are often full of information and can sometimes get confusing. The use of colors and standout UI elements can help highlight information that requires more attention. Having said that, try to keep colors to a minimum with enough contrast making it comfortable enough for the user to read the info available.
Humans have a tendency to stick with what they already know and are familiar with. Choosing an unfamiliar data visualisation is one of the most common design mistakes while designing any dashboard. It can break the experience of the user’s ability to view and understand the data easily. In most cases, we at Flolab are inclined to use graphics that would be familiar for most novice users; such as: bar/column charts, line charts or pie/donut graphs. Having said that, it’s important to pay attention to the kind of data you want to show the users and which visualisation works best for that data type. Here are some quick rules you can follow when designing these charts:
Pie charts are generally used to show percentage or proportional data and usually the percentage represented by each category is provided next to the corresponding slice of pie.
When using a Pie chart, try to keep the slices to 5 or less. The more the number of slices in a pie chart, the more difficult it is to represent data accurately to users. Use a different type of chart if you want to display more than 5 slices or show an expanded/detail view of smaller data sets in the pie chart.
Line graphs are used to track changes over short and long periods of time. When smaller changes in data exist over a period of time, line graphs can be used. Line graphs can also be used to compare changes over the same period of time for more than one group.
Your design styleguide might have its own set of colors, however, those colors may not always work for representing data in these visualisations. Make sure you have prepared a set of contrasting colors that work well for representing data on charts as well.
A bar chart is used when you want to show a distribution of data points or a comparison of metrics across different subgroups of your data. From a bar chart, we can see which groups are highest or most common, and how other groups compare against the others.
On the bar chart, you can create a better user experience by sorting data in ascending / descending order
Raw data is often complex and hard to process. Does your dashboard display a lot of data? Business applications such as analytics or advertising networks frequently display tables with thousands of cells, making it difficult to show important data while maintaining a clean design.
Avoid creating an indecipherable interface by letting your users choose what they would like to see. Simple filter and sorting features make organising large lists or tables a quick and easy one-click process.
When integrating data tables or lists, make sure they are interactive and the data is aligned correctly. A data table is a great solution when you need to show a lot of information for a large number of items.
Dashboards can make or break the experience for its users as they’re a powerful tool to communicate relevant business data. A dashboard must be able to inform the data that is important to its users simply and easily. Data by itself lacks meaning if it’s just laying around. It’s our responsibility as designers to give this data meaning and context by designing dashboards that are simple and easy to use.
***
All apps/features mentioned in the article have been designed by Flolab:
Ayopop | Android • iOS • Web
Ayopop helps Indonesians pay & manage their finances efficiently & smartly.
Cekaja | Web
Cekaja is a comprehensive financial and insurance comparison portal in Indonesia with hundreds of credit card, deposit and KTA products from dozens of banks.
Emporio Analytics | Web
Emporio Analytics enables analytics-driven shopper marketing. Emporio Analytics supports brands and retail companies to unleash the power of data analytics on the areas of Shopper Marketing, Category Management, Strategy and CRM.
Fazzdoc | Web • Android
Fazzdoc is a doctor booking application which also helps Indonesians simplify their healthcare bills.
Mind Therapy Clinic | Web
Mind Therapy Clinic provides integrated mental health treatments by Psychiatrists, psychologists & family, marriage, & child therapists
***
If you’re looking to build a mobile app or website, or just want to talk about design, reach out to us to have a chat.
***
