What is an Intuitive Interface?
A user interface of a report, dashboard or application starts with the visual presentation. Therefore, the first interaction a user has with an interface is visual communication. Furthermore, today’s BI reports are evolving into more dynamic tools, which can offer users more flexibility to consume and interact with the data. Unlike static reports, these dashboards and reports can create a flow of interaction that closely aligns with the user’s work process. Both self-service tools (such as Power BI and Tableau) and IT-authored tools (Qlikview and Lumira Designer) offer rich capabilities for interactivity (such as filtering, bookmarking or drill-down). With power comes responsibilities, hence, these capabilities of BI tools give rise to more exciting challenges while designing an intuitive user-interface. In addition to visual design, our toolbox also includes interaction design, information architecture and writing. To design an intuitive interface, let’s first clarify what we want to achieve with our UI:
- Communicate clearly the content and functionalities of the dashboard. The user must understand what the interface does.
- Make information that users need, accessible.
- Facilitate users’ workflow and help them achieve their goal
To achieve the above objectives, here are the basic visual design guidelines you can follow:
Create a Strong and Clean Layout
A layout is the overall structure and arrangement of elements in an interface. It is also the first design element to make an impression on users’ visual perception. A good UI helps them quickly scan the interface, understand the composition of the dashboard and know where exactly to look for the information they need. A good layout needs to clearly differentiate different functional areas of the dashboard with visual elements such as boundaries or background color.
The common components of a dashboard interface include header and navigation or utility bar, filter panel, utility panel and visualization area. It is important to consistently arrange similar filtering controls and utilities together so that users can quickly find and perform the actions they need.
The example on the bottom is an enhanced design from the one on top. In this example, we create a strong distinction between different functional areas of the dashboard by using contrasting background colors.
When your dashboard has a lot of information, it can look quite cluttered. Chunking is to group elements that share the same content or functionality. Because we have the tendency to perceive grouped elements as one, chunking helps declutter the presentation and make it easier for users to consume information. Furthermore, grouping similar elements together let the user easily scan the overall structure of the content at first glance, while also letting them focus on one type of content at a time.
In the example above, elements are grouped by KPIs: Quantity, Revenue and Gross Margin. Instead of seeing 9 different visualizations, users will first see 3 groups of visualizations, and perceive each block as an individual element.
An alternative approach is to separate 3 groups by a subtle horizontal line and some generous padding. Here we can even remove the gray background and make the dashboard leaner.
Design with Consistency
All elements having the same role need to have consistent formatting or occupy the same space. This will help the users get familiarized with the functionality of the dashboard, quickly. Consistency needs to be maintained even for the very granular design elements, including those that are not easily spotted, since the slightest of difference in formatting can affect the readability of the report. Pay attention to the following:
- Similar elements need to have the same alignment
- Left alignment is recommended unless any other alignment is used to create a contrast
- Font size and colors of the text category (such as chart title, subtitle etc.)
- Icons: Similar icons need to offer the same functionality throughout the dashboard
- Labels: Similar looking labels need to show and mean the same thing throughout the dashboard
- Padding and Margin: Distances between two elements as well as the distance between an element and its container needs to stay consistent.
Use Negative Space with Intention
Negative space in design is defined as space not used to display any visual elements. However, it is not to be mistaken with the empty area that remains after all elements have been laid out. Negative space is an active element in Design that can serve the following purposes:
- Increase the readability of content by giving users’ eyes a break
- Separate different chunks of information and reduce clutter
- Create contrast to help users focus on the content
Therefore, space is something that needs to be added more often, rather than be filled, to create a more readable report.
In the example above, we decreased the font size of the dashboard title, yet the text becomes easier to read because there is more space around the letter. At the same time, we added space between the donut chart and the column chart/area chart. This makes it easier to focus on each visualization.
Simplify, Simplify and Simplify
To make important information more prominent and readable, remove all the noise. All visual elements that do not serve any unique purpose should be removed. Just keep in mind that every pixel of ink or additional word will make users’ brain work a bit more than necessary. Try removing extra visual elements or words to see if it is still easy enough to navigate through the dashboard/report. The general rule is: If you don’t notice or get lost in the information without an element, it does not need to be there in the first place.
In this example, we have simplified the chart title to show the dimension only. Since we have given each KPI a separate section, the data point is being represented can be easily understood.
By following these fundamental Visual Design Rules, you will be able to create an effective user interface for a report, dashboard or application without much effort. Now, Design Away!