Writing

4 tips for better dashboard design - Part 2

A useful dashboard can be a daunting thing to design. Based on my experience during this project, I have put a list of tips to help you in the future - Part 2

In my previous post, I shared two dashboard UI (User Interface) design tips:  Use fewer borders and Separate visual from document hierarchy.

In this article, I will share the rest of the tips with you.

  1. Use fewer borders (see Part 1)
  2. Separate visual from document hierarchy (see Part 1)
  3. Labels are the last resort
  4. Not all elements need to be fluid

Let’s get to it.

Tip 3: Labels are the last resort

When you display the information (from the database), it is often to take the metadata-driven approach in UI (User Interface).

For example, it could look like Label: Value.

A card UI that uses Label: Value
A card UI that uses Label: Value

I found that this approach sometimes makes your design cluttered and it is challenging to present the hierarchy of the data since every piece of information is given equal weight.

In some situations, you may not need the labels to explain what a piece of data is by just looking at its format - additional this is not a form.

In this example, you can tell debora@gmail.com is an email address, 0400 1234 5678 is an Australian mobile number.

A card UI without using Label: Value
A card UI without using Label: Value

Without displaying the labels, it allows the users to easy to identify the information and emphasise the content structure in your design.

Combine labels and values

Without displaying the labels, it allows the users to easy to identify the information and emphasise the content structure in your design.

Even the content is not very clear without labels; you can combine the labels and values into a short sentence that can give the user the context.

For example, if you need to display the author and date in a file collaboration application interface, you could try By Dave at 6:30 am 10/04/19.

A UI example that combines labels and values
A UI example that combines labels and values

In this example, New message: 2 could simply become 2 new messages

A UI example that combines labels and values
A UI example that combines labels and values

Tip 4: Not all elements need to be fluid

If you have used the Bootstrap framework before, you know that it comes with a fluid grid system that simplifies the layout decision for the web developers to make.

Grid is handy, but it sometimes could be harmful to your design.

If you use a 12-column grid layout, each grid is 8.3333% wide. As long as your element width is multiple of 8.3333%, then we consider the element is on the grid.

I found that it makes more sense to use a fixed width in some cases.

For example, if you have a typical 2-column layout for an application that has the left sidebar and the main content area like below.

2-column layout in the width of 960px
2-column layout in the width of 960px

It may look fine at first, but if you start resizing the screen window, you find the sidebar becomes too wide. You could use that extra spacing for the main content instead.

2-column layout in the width of 1440px
2-column layout in the width of 1440px

Furthermore, the text in the sidebar wraps or truncates if you make the screen width below its reasonable minimum width.

2-column layout in the width of 600px
2-column layout in the width of 600px

In this example, you can see that it makes more sense to have fixed width on the sidebar and the main content area can be fluid to fill out the rest of the space.

2-column layout with the fluid content area
2-column layout with the fluid content area