Status Displays

Icons vs. Text Labels | Placement | Legend | Binary States | Multiple States | Status Display that Can also Initiate Functions | State vs. Function | Visualization |

Status displays inform users about the progress of processes, or about the state of objects. They are an important source for feedback to users.

 

Icons vs. Text Labels

Implement status displays, e.g. states like OK, Ready, Counted, Changeable, Locked, etc. as small icons, or text.

Note: For an overview of the available status icons see Status Icons Guidelines in SAP R/3 Icons.

Figure 1: Icons used as status display in a table

Usually icons are to be preferred, especially if used in tables, because they consume less space (see figure 1).

Text labels are preferable for states with a more complex meaning that cannot be visualized through icons, or for states for which no suitable icons exist.

 

Placement

Place status displays close to the object they refer to.

 

Legend

Note that icons are seldom self-explaning, they can only be used for fast recognition. Therefore, explain the meanings of the used status icons in a legend. Use text for the explanation. Also maintain the tool tips for the icons to explain their meaning .

If status icons are used in a table, place the legend below the table.

 

Binary States

Often binary states are of an on/off kind (unipolar, e.g. ready vs. not ready). In this case, usually display the status in the "on" state only.

Exception: There are suitable status icons for both states.

If the binary state is bipolar, e.g. positive vs. negative, display both states through the respective status icons or texts.

For an overview of the available status icons see Status Icons Guidelines in SAP R/3 Icons. Use text, if there are no suitable icons available.

 

Multiple States

In some cases more than two states have to be visualized. Ratings, for example, may either be unipolar or bipolar and have from 3 to 9 steps. There may also be states, which are more semantically defined and may not even form some sort of scale. These states often require texts, because there are no suitable status icons available.

For an overview of the available status icons see Status Icons Guidelines in SAP R/3 Icons. Use text, if there are no suitable icons available.

 

Status Display that Can also Initiate Functions

Implement status displays which also initiate a function, thus are also pushbuttons, as small icons, or text with hyperlinks.

Examples

  • Views, e.g. header, items
  • Sorted up, sorted down

A typical example are table functions, which may be toggled between two states (e.g. sort up/down). In this case, we recommend to display:

  • The status icons/texts next to each other, or
  • Only the status icon/text for the current status and exchange the icons/texts whenever the state changes

The latter variant takes less space and is to be preferred.

 

State vs. Function

If status icons also serve as functional icons, there is often confusion about which state to indicate by the icon, namely:

  • The current state, or
  • The target state (which often is a synonym for the function)

Recommendation: Display the current state, not the target state, or function.

 

Visualization

Status icons should be visually distinct from function icons on pushbuttons to avoid confusion with respect to which icons can be clicked and which not.

Note: Currently icons in tables that also initiate functions can be distinguished from pure status icons only by the different cursor shapes, which appear when the cursor is moved over the icon.

 

top top

Source:  SAP Interaction Design Guide for Internet Application Components