Status Bar

  • 1 Research
  • 2 In Progress
  • 3 Feedback
  • 4 Done

Introduction

The Status Bar is used to display custom messages i.e. status messages, like the dataset that is currently in use or the connection status to a database to users. The Status Bar is displayed in the footer across the application, on all pages. These status messages can be updated when necessary or as required.

A status message typically has a header or title, an icon with a color and the actual message text. A tooltip is displayed when the user hovers over the entire message, if configured. A procedure can also be configured for each status message such that it is executed when the user click on the specific message. Texts in messages with a procedure is slightly darker and blue on hover.

Variants are also possible, e.g. a text and an icon but no header, a header and text without icon, or even only a text. In general, it is good advice to make status messages short and concise and only use elements that add value to the user. For example, when displaying relatively abstract terms (like supply or utilization rate) it might be difficult to find an appropriate icon. If it does not add extra information anyway, it is probably better to leave out the icon.

Icons

Icons can be given a color, but if no color is given icons will be dark grey (#898989).

Some best practices on using icons/colors:

  • Using many different colors for icons can make the Status Bar to busy and increase cognitive load.
  • It’s not advisable to use icons as an illustration of what is already written. For example, when the header says “Transport” using an icon of a truck. This doubles information without delivering extra value to users.
  • Colors can communicate meaning, like green for OK and red for error. One of the most common forms of color blindness is red-green color blindness. It is therefore good practice to not rely on color only to communicate meaning, but shape as well like a checkmark or warning-triangle.
  • Avoid using colors with not enough contrast. This makes it hard to see for users, especially when using a lower-quality screen or a projector.
  • When using different colors for icons, try to use a harmonious set of colors with matching lightness/saturation. This makes the interface calmer and helps users feel in control. This website has useful sets of colors that work together.
  • Too many and meaningless colors
  • Icons try to illustrate the word
  • Icons used that do not add value
  • Colors not harmonious
  • Colors too light
  • Neutral, harmonious coloring
  • Neutral icons, not trying to be an illustration of the word
  • Color conveys meaning: red for out of date data.
  • Icons convey meaning: cross for out of date data. Using both shape and color means better accessibility for colorblind people.
  • No icon used when it does not add value.

Procedure

Status bar messages can have a procedure configured that is executed when the user clicks the message. This can be used to give more detail or take action. Some example use cases are:

  • Message: new dataset available. Procedure: load updated dataset.
  • Message: number of available Distribution Center’s. Procedure: show a dialog page with a list of Distribution Center’s.
  • Message: current scenario. Procedure: go to scenario overview page.