4 tips for better dashboard design - 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.

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.

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.

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

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.

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.

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

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.