I’m looking for some advice on how to choose the best way to visualize KPIs.
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.
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.
- Semantic Message icons .
- 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
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.
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.
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.
Examples of neutral message type icons:
Info / neutral Notification icon
Question / neutral Notification icon
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.
Negative / Red status LED icon
Traffic light Red- Street sign Stop
Overload – Minus – Not equal to error – Fire alert.
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.
Positive/ Completed/ Green LED icon
Traffic light Green- Street sign Go
Completed or currently working at optimal performance.
Available, on-track. Acceptable status.
Neutral/ Inactive LED icon
Street Sign – An Inactive state that is not negative,positive or critical.
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.
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.
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
thanks a lot for the quick response.
That’s exactly what I was looking for.
Now I can sleep again at night. 😉
Enjoy the rest 🙂
You must be logged in to reply to this topic.