How to design the UI dashboard

JunQian L.
3 min readOct 29, 2020

The UI dashboard gives users easy access to the information they need. With that in mind, the dashboard information needs to be easy-to-scan and contain only the key information. It requires the designer not only to take account of the interface, as the dashboard usually contain various types of data, so the designer also needs to understand the context behind the data and choose the best way to present it.

Photo by Carlos Muza on Unsplash

UI dashboard, it gives the users easy access to the information they need.

According to DataPine, there are four main types of dashboards to choose from:

  • Operational dashboards — this type of dashboard is used for business intelligence purposes and their goals are to measure, monitor, and manage operations with a more immediate or shorter time scale.
  • Analytical dashboards — these dashboards give the user a clear view of performance trends and potential problems.
  • Strategic dashboards — this type of dashboard lets the user track their main strategic goals via KPIs and work by analyzing the most essential information based on trends.
  • Tactical — used by mid-management to track performance and full of an array of data. This data is being used mostly to help formulate the strategies for growth in mid-management circles.

Adam Fard provides 14 ways to create an excellent UI for a dashboard in his article. In my post today, I followed some of the tricks to design a dashboard based on a layout that is very common and standard and summarized what I have learned in this process.

Below is the dashboard I design and it is for the user to view the sale performance of the products.

Key Takeaways:

  1. Understand who are the users and their needs, as it will determine what the information should be displayed in the dashboard. For example, as my dashboard is for the introduction of the sale performance, so besides the existing data, the users will also want to know how it performs compared to a certain time scale.
  2. Allow the user to customize the data in viewing, in the “earning summary”, the design makes it possible to show the data by weekly, monthly, and users could decide which model fits for their needs.
  3. The key numbers need to be emphasized which allows the users to have intuitive navigation of the information that important to them.

4.The other trick is to use the icons to enhance the visual interface and for the numbers, use a specific font type to make it stands out. Such as in my design, the font type is SF Pro Display, and to emphasize the numbers I used the DIN Alternate, which also provides a more elegant look.

Thank you for reading!

--

--