Shapes and colors of KPIs

Discussion Forum Design & UX Shapes and colors of KPIs
Viewing 4 posts - 1 through 4 (of 4 total)

Hello Community,

I’m looking for some advice on how to choose the best way to visualize KPIs.

I want to show three different states like a traffic light.

 

For now we’re using triangle, square and circle in red, yellow, green, but those aren’t necessarily accessible for colorblind people without an explanation.

Check-marks and crosses are pretty much universally understandable, but already used in other circumstances.

 

I don’t want to use traffic lights like the ones seen in the picture, because they would be too big, unhandy and ugly.

 

I hope I made my point clear, so I’m looking for ideas or a guideline on how to improve our visualizations.

Visual Designer
SAP SE

Hi Moritz,

 

There are many icons that can be used to display semantic type value states. In SAP Fiori applications there are generally two types of semantic icon that can help you to communicate your KPI.

  1. Semantic Message icons .
  2. System LED Life cycle icons.

 

1. Semantic Message icons

Direct communication of errors, warnings, success contexts.

Semantic Message type icons are a very direct way that convey meanings that are easily understandable to be things like error, warning, success. They use also the shapes that the LEDs have so that negative circle is the same as red LED circle. Warning triangle is the same as LED

 


Error Message Notification icon

The error message icon has been aligned to that of the Negative LED icon
in shape, however the exclamation mark helps to communicate the message of error more directly.
sap-icon://message-error


Warning Message Notification icon. 

The warning message icon is aligned to that of the Critical LED icon but may not have the same meaning to that of a life-cycle status.
 sap-icon://message-warning


 Success Message Notification icon

The success message icon is aligned to that of the Positive LED icon but may not have the same meaning to that of a life-cycle status.
 sap-icon://message-success

 

Examples of neutral message type icons:

  • icon-message-information
  • icon-question-mark


 Info / neutral Notification icon
 sap-icon://message-information

 Question /  neutral Notification icon
 sap-icon://question-mark

 

 

2. System LED Life cycle icons

Meanings linked to lifecycle contexts, products, objects etc., that may or may not signify error, warning type meanings.

The LED type icons have been used actually because they are different shapes from each other, do not need colors, so that anyone can learn them. The shapes are different so that they can be applied to life-cycle meanings that can be sometimes more abstract than that of the semantic message warning or error icons.

The LEDs were originally used in the context of traffic lights.. red circle with four beams of light, yellow triangle and green square. These are easily learned and do not require colors to be understood. for a very long time SAP Gui users are used to seeing these icons.


A Red traffic light that indicates a negative status:

Negative / Red status LED icon

Traffic light Red- Street sign Stop

Overload – Minus – Not equal to error  – Fire alert.
sap-icon://status-negative


An Orange/Yellow traffic light that indicates a critical status:

Critical but not Negative / In process/ Warning LED icon

Traffic light Yellow- Street sign Prepare

Neither good nor Bad. Low Capacity, slow down or hurry up.
sap-icon://status-critical


A Green traffic light that indicates a positive status:

Positive/ Completed/ Green LED icon

Traffic light Green- Street sign Go

Completed or currently working at optimal performance.

Available, on-track. Acceptable status.
sap-icon://status-positive


A Neutral state that indicates a neutral status:

Neutral/ Inactive LED icon

Street Sign – An Inactive state that is not negative,positive or critical.
 sap-icon://status-inactive

 

See the links that will take you directly to the icons available in the SAP icon font or visit the new open source icon explorer here, available as a tool with the UI5 Demokit.

 

Colors for semantic type icons:

Example of Belize theme colors for semantic value states.

There are color specifications on the fiori guidelines that cater for icon usages on light and dark backgrounds.

Please visit: https://experience.sap.com/fiori-design-web/colors/#semantic-colors

Accessibility two senses concept

Information has to be conveyed through at least two distinguishable sensory characteristics (color, shape, position, rarely sound) and described in text form.

We recommend to use an accompanying text or tool tip (but you may want to also consider phone where tool tips do not work. if that is your target platform) to give more ways for the user to understand what it is you want to communicate and to fulfil visual accessibility requirements.

Understanding
The purpose of the requirement is to ensure that information conveyed through sensory means has distinguishable sensory characteristics and is also described in text form. For example, if information is only conveyed using sensory characteristics (such as color, size, shape, rarely sound) and the information does not contain any textual description, then this information cannot be conveyed to a blind user.
The descriptive text should not only refer to visual characteristics such as color or shape.
For example, if information is conveyed using the same shapes and can only be distinguished by color, then a color-blind user might not be able to identify the information.

For more information please see https://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-understanding

Hi Gerard,

thanks a lot for the quick response.

That’s exactly what I was looking for.

Now I can sleep again at night. 😉

Visual Designer
SAP SE

My Pleasure

Enjoy the rest 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
 

You must be logged in to reply to this topic.