Introduction
A badge conveys status information about an object in relation with the model it’s inserted in. That’s the reason why the badge is straddled between the shape and the diagram background that represents the model.
Users expect to see a badge over a shape when the status information is meaningful in the context of looking at a diagram. The absence of badges, that must be the more frequent case, is also an information and gives the normal and neutral status of the badge.
This guideline explains when and how to display badges.
Usage
When end-users look at the model globally, even if the zoom factor is low or if the shape is hidden, the constant presence of a badge with a fixed size helps the user to have a trusted evaluation of the model (for example: no error badges mean a valid diagram) and help to find objects with a given status.
When end-users look more precisely at a shape, the visual presence of the badges that breaks the usual silhouette of the shape, warns him immediately of about a specific status.
Use a badge if:
- The status information has already been conveyed by a badge in another type of diagram.
- A user-feedback message concerning an object must be seen in the diagram after a user action.
- The user may have a strong interest to look for objects having badges, even if they are not visible in the viewport.
- You want to show temporary markers on shapes in the context of the diagram.
Don’t use a badge if:
- You want to force the user to read a user-feedback message after a user action. Use a message box for that.
- The information is, by nature, specific to a type of object. In that case, the attribute should be displayed inside the shape usually as an icon in the shape status bar. The user will look first for shapes of this type and then look for the presence of this attribute.
- The object status remains valid outside the context of the diagram. It means that the status is owned only by the shape so the feedback must be inside the shape in the shape status bar or only in the properties panel if it is less important.
- You want to say the object is OK: For normal cases, there is no badge.
Examples of badges
For example, in the case of a page displaying a list of objects and a diagram simultaneously, reference badges (D) can be displayed after doing a search in a list. Objects that are both in the result list and the diagram will have a badge in the list raw and a reference badge on the shape. This display will be temporary. Badges will disappear when the search input is reset.
Anatomy
Badges can be made of:
- a filled area with one up to 3 characters (see above examples A, B, C, D)
- an icon, (E)
- a filled area with an icon (F)
Border and background
The badge must be seen clearly over the shape that usually has a light color background, and over the model background.
A filled area with a dark background can be borderless and content is white (A, B, C).
A filled area with a light background must have a dark border and content (D, F).
The icon must be mostly filled with enough contrast (E).
The color of the badge is not the only way to convey the information.
Size
: the construction of the badge uses “viewport coordinates” and “world coordinates”
- Viewport coordinates are the coordinates on the screen (in pixel). They are independent from the zoom and the pan.
- World coordinates are the coordinates in the diagram canvas (in pixel) and are submitted to zooming and panning.
Badge dimensions are defined in viewport coordinates and are not resized with the zoom.
The height of badges is 16px.
The width for badge without text or having a 1-character text/figure is usually 16px (A). The width of the badge can be more depending on the text length (B).
Position of the badges
Several badges can be displayed at the same time on a shape.
The first badge area (A) is at the top left of the shape. Badges are disposed from left to right. The center of the first badge (C) is at 24px from the corner in viewport coordinates.
The second badge area (B) is at the top right of the shape. Badges are disposed from right to left. The center of the first badge (E) is at the top right corner.
Note: There is no badge at the top left corner to avoid the perception that the shape is owned by the badge. In right to left display, all these specifications are inverted.
Behavior and Interactions
Zoom and badge position
The spacing between two badges is 8px in viewport coordinates (E, D, C). If the shape width in viewport coordinate is lower than 24 times the number of badges (A, B), the spacing between badges center is the width of the shape divided by the number of badges.
When the zoom factor is lower than 0.66, icons may begin to overlap. In that case, the priority is given to the most temporary icon. For example, a marker that is displayed only during the execution of a command will be over an error badge; an error badge will be over a bookmark badge.
Selection
The mouse events grabbed by the badge are transmitted to the shape:
- when the mouse is over the badge, the shape is in the hover state (A)
- when the user clicks over the badge, the shape is selected and is in selected and hover state (B)
The badge itself does not have a state. The badge does not give any feedback of its shape’ state either.
The result after selecting the shape or selecting one of its badges is the same.
But selecting a shape with or without a badge may not result the same behavior. But in that case, it is due to the state of the shape, not of the presence of the badge.
For example, selecting a shape in error may force the display of the property panel, open and scroll to the right section where the first error is displayed where it can be corrected while it’s not the case when the shape is not in error.
Context menu and contextual toolbar
The badge is not considered as an object. It does not have its proper contextual menu, nor its contextual toolbar.
If, for example, a bookmark feature is allowed in a diagram, the bookmark toggle can be available in the contextual menu or the contextual toolbar of the shape (A). Then the badge appears on the shape (B).
Badges on virtual shelves
The status of the diagram is made by the status of all badges: If at least one shape is in error, the diagram is in error. To keep the status of the diagram visible according to the first usability heuristic, all badges must be displayed into the viewport (AB) at any time.
A badge that is hidden (AA) is projected on the border of the viewport on a virtual shelve (AH) at a position (AK) crossing the line (AJ) build between the initial position (AA) and the center of the screen (AG).
Selection of badges on virtual shelves
The selection of a badge selects the shape. It also moves the viewpoint to make the shape entirely visible on the border of the viewport with a given margin (BC, 32px in viewport coordinates) and with the smallest displacement of the badge. The badge of the top shelf (BJ) moves down (BK), the badge on the left side (BH) moves to the right (BI), etc.
Note: For more details on exact calculation and prototype, please contact jean-christophe.cros@sap.com.
Related Links
Support
If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.