Introduction

information

Disclaimer:

  • This guideline is aligned with the UX Consistency Product Standard for colors, theming, typography and iconography (Fiori 3 Quartz Light), which might not be implemented yet in the product on which you’re working.
  • For designers who work on modeling, this guideline describes how we want to unify modeling across our products. For developers of the Galilei library, this guideline acts as specifications for future developments.

What does this mean for you?

Usage

A shape convey information about an object of the model. It can be added, moved, removed from the diagram.

Certain shapes can be resized, expanded or collapsed.

Shapes contain the minimal information to be recognized (by the type: with the shape size, the structure, the background color and the icon) and identified (by the name). Once identified, the user can select a shape to get more information (in the contextual right panel or in a pop-over) or to work directly with it.

The body of a shape contains additional information on the object, which can help the user to better understand its model and to decide which shape they select to execute their task.

The goal must be to include an appropriate amount of information.

If two tasks are important and one of them does not need a body, a solution may be to have a collapsible shape.

Anatomy

The anatomy of the shape is driven by the need to have a readable diagram at zoom=100%.

The Shape of the Shape

A shape is usually rectangular, wider than tall to ease the reading of the content that is mainly made of horizontal text.

A shape can be also a circle, a diamond, a square, etc. to directly represent the type of the object.

If a diagram must follow a notation given by a technology standard consortium like the Object Management Group then shapes are precisely defined in their specifications (e.g. BPMN 2.0 p.29-47)

Size

The width and the height of a shape must be specified when the zoom=100% scale and before any manual resize. The default dimension depends on the content that should be displayed in it.

If a shape contains only an icon, the size of the shape will depend on the icon size and the paddings.

If the shape contains some text, the default shape size will depend on the font size, padding, and the statistics on the length of that text in order to display 80% of them completely.

If it contains a list or a table, the height will depend on a number of items that will be displayed. Rows are displayed completely but columns can be truncated.

The default width of a shape is a multiple of 1rem.

If the shape has collapsed and expanded states, the size of these two states will be designed separately.

For example, the width of the collapsed shape state can be short, and the header gives two lines to display the header but when expanded, the width can be larger, and the header displays the name in one line only.

Orientation

A shape needs to have an orientation defined if the main relationships of the object represented give an information of sequence, or an information of hierarchy. In that case the orientation is the one defined by the diagram: horizontal or vertical.

In some cases, the orientation is given by constraints of the diagram itself and calculated by the auto-layout. So, it is possible to have in the same diagram shapes that are vertically oriented and shapes that are horizontally oriented.

The impact of the orientation on the shape is on the ports only. Both orientations must be considered when defining a shape which is oriented.

Don’t treat the orientation of a shape separately from the other shapes.

Do design first the auto-layout of the diagram and it will give specifications on which shapes need to have vertical, horizontal or both orientations in the design.

Content Areas

The shape is structured in 3 parts: a header (H), a body (B1 or B2) and a footer.

The header is compulsory. It usually contains the icon, the name and some buttons.

In the simplest shapes, there is only a header.

Body

If the shape can be expanded/collapsed, the body has two different content states.

The body of a collapsed shape is usually empty or may content a minimal amount of information extracted from the body of the expanded shape.

The footer is optional. (TBD)

Container Shapes

The body can contain other shapes: in this case, the shape is a “container” shape.

That representation shows implicitly the relationship of composition (i.e. content, inclusion) between the container and the embedded shapes.

Container shape must have a header and the body contains the shapes.

A shape container can be collapsed/expanded.

Expand/Collapse Button

Some shapes may need two contents, so two sizes, two content layouts: collapsed (A,B,C) and expanded (D,E)

One compulsory way to access to this toggle is an icon. This icon is in the header, before the name.

If the shape has already an icon, the collapse or expand button appears and replace that icon when the mouse is over the shape (C) and (D)

After clicking the expand icon (C), the shape is resized in a way that the collapse icon is at the same place. It allows the user to quickly expand a shape, see details and then collapse it.

The collapse or expand icon appears only when the mouse is over the collapsed shape or the header of the expanded shape.

Scrollbars

Scrollbars are forbidden inside shapes.

If the shape has fixed font size while zooming, the hidden information will be solved with zoom-in because more content could be displayed

If the shape has font size following the zoom, the content does not change with the zoom so the shape needs to be resizable.

Ports

A port is a symbol at the edge of the shape on which a connector must be plugged. Once connected, the port is the extremity of the connector. Ports are used to distinguish the information of the object that is concerned by the relationship.

Ports Without Symbol

Most of the time, the orientation of the relationship is sufficient (A) to discriminate between the input and the output, the origin and the destination, the previous and the next. Before the connection is done, the connector is created at the border of shape and the handle of the extremity that is not connected is displayed (B). This extremity is displayed outside the shape, touching the border at the port's position. By dragging this extremity, the user can lengthen the connector to reach the shape to connect.

Ports With a Symbol

In rare cases, ports have a permanent compulsory display (C) to define specific relationship, for example:

These ports can be hidden at the creation of the shape Specific Show/Hide commands can drive their visibility (e.g. context menu) and hover mechanism can display temporarily them for connection. If they are disconnected, these ports will remain visible.

Collapse and Expand Port

To allow the user to show or hide some related objects, an expand port is displayed in one or more relations exist (D). To hide the relationships and related objects, the collapse port replaces the expand port (E).

Port Position

The port position depends of the orientation of the shape and the nature of the port.

For a horizontal orientation:

Connecting points

The connectors that are not connected to the shape through ports will be moored to on one of the many positions predefined on the border of the shape.

Using flexible connecting points instead of ports give to the user the freedom to connect from any side and so give the freedom to position the shapes in the diagram.

Connecting to the central connecting point gives the auto-layout to possibility to choose on which side the connector extremity will be.

They are displayed only temporarily when the extremity of the connector is dropped on the shape. They are displayed symmetrically (horizontally and vertically).

In a shape, connecting points are not compatible with ports. But in a diagram, some shapes can have ports and other can have connecting points (e.g. tables and views can have connecting points and operators can have ports).

Resize Handles

Handles are selectable areas, at the corner and on the border of the shape that can be dragged to move or resize the shape.

They are displayed when the shape is selected but only if the shape can be resized.

The size of the handles is independent from the zoom value and is adapted to the pointing device capabilities. The visibility of the handles depends on the size of the shape on screen.

Badges

Badges display additional information that can be added to any type of shapes. See details in Shape Badges guideline.

Input Controls

Some diagrams may have a double usage: display a model and be used as a form.

In that case, shapes can contain input controls. The better use is to have the diagram in read-only. (i.e. the diagram structure is fixed, the shapes can be non-selectable if possible) and leave the interactivity, especially with the keyboard navigation, for the input.

States

States give a feedback to the user about the current interaction or an information about the object represented when the user interact with the diagram and during execution of commands.

Shapes have several states. Each state is a value of a status. The statuses are:

To follow the first UX Heuristics (System Status), each state must be represented on screen. The visual distinction between states is done by various and compatible representations of the shape - by a variation of colors or additional visual elements displayed on the shape - and various mouse cursors.

For each status, one and only one can have no representation: In fact, an absence of representation is a representation.

Pointing Device States

: The pointing device, usually a mouse, is over the object. This state is used to give a feedback to the user before selecting, dragging or calling the right click menu on the object.

: This is the default state.

Keyboard Device States

: The keyboard focus is put on the shape with the navigation keys. In that state a Space Key will select or unselect it.

: This is the default state.

Interaction States

: This is the default state.

: The shape is selected. In that case, the object represented by the shape is a member of the “Currently Selected Objects” set (CSO). Some areas of the floorplan will be updated with this CSO content. For example, the property pane displays the properties of the last selected object. Some commands will take in consideration this CSO when they are applied like Delete, Expand, Group, Hide.

For more information about the behavior of the CSO and more generally about behaviors and interactions between the diagram and the other areas, see the floorplans’ guidelines like the Diagram Builder Floorplan.

The selected shape have two different displays: one when the object is the only one selected and a one when there are several objects selected. However, form the object point of view, it is the same state.

: The shape is floating on the diagram, following the mouse, before existing in the diagram. This state is used when creating a new shape or dragging an external object into the diagram.

In some cases, the shape may be created in two steps by defining two points. (press, move and release or click, move and click). The Floating state correspond to the first step.

: In the case the shape needs to be created in two steps, The shape is under creation while the mouse is moving between the first position and the second position to create the shape.

: The structure or the shape of the shape is modified. Usually edition handles are displayed in addition to modify the geometry of the shape or the connector.

: The shape is on move.

: This state for a shape can be defined when a specific representation of the shape needs to be displayed during the process of resizing (for example: a simpler representation due to performance issues to smoothly follow the movement of the mouse cursor).

: Another shape or object is going to be dropped over that shape. With this state, the user will be sure to drop on that shape when he will release the button.

A state diagram describes the behavior of the shape in response to changing external stimuli:

Completion States

When the creation of complex shape needs several steps, the shape can have several intermediate representations to help the user to build and complete the shape definition.

The states cannot be listed here because they are very specific to each shape.

Note that creating too many temporary and specific representations can give an impression of complexity and finally could be counterproductive. To use with moderation.

Level of Detail States

In some cases, the content of the shape can change with the size of the shape. But it is not compulsory.

The main way to display several levels of detail is to have a Collapsed and Expanded content.

Another way is to drive the content structure by hiding or displaying some information according the size of the shape.

The content will change:

Each possible configuration of the shape will be considered as a level of detail state.

Importance States

: The shape is put in evidence during the execution of a specific command: for example, the search result, the impact analysis, the lineage analysis, the impact of an error, etc.

This feedback is different from the selected state because the user may want to interact with these objects (in particular selecting them to see their properties) while keeping this result displayed. When the command is ended, these objects lose their state.

: The shape has a discrete display in order to focus on the other shapes that will remain in a normal, selected, or found state. This state may be used temporarily during a command.

: No specific information on the shape. No visual alteration of the current interaction state.

States of Sub-Parts of Shapes

Some shapes include interactive content in addition to standard interactivity. For example, when a link between two tables is selected, then the columns involved in each table are highlighted.

The possible states for the sub-parts are:

Style

Colors

The default color @SAPUiBody is applied to the text in the shapes.

Shapes that include a header and a body:

The shapes that include only one area (meaning no separation between the header and the body) have only one background color.

Background colors don't represent the types of the object (such as Dimension, Table, View, Join, Merge, Filter), whereas icons play this role.

Background colors represent meta types: Data Objects (A), Central objects (B), Operators(C), etc...

<div> <div>Meta Type</div> <div>Background</div> <div>Border</div> <div>Fonts</div> </div> <div> <div>A - Data Objects</div> <div> <p>Header & Body:</p> <p>@sapGroup_ContentBackground</p> </div> <div>@sapNeutralBorderColor</div> <div> <p>Header & Body:</p> <p>@sapTextColor</p> </div> </div> <div> <div>B - Central objects (e.g. Fact-data objects, center of a star schema)</div> <div> <p>Header:</p> <p>@sapLegendBackgroundColor7</p> <p>Body:</p> <p>@sapGroup_ContentBackground</p> </div> <div>@sapNeutralBorderColor</div> <div> <p>Header & Body:</p> <p>@sapTextColor</p> </div> </div> <div> <div>C - Operators</div> <div>@sapLegendBackgroundColor6</div> <div> <p>@sapContent_</p> <p>ForegroundBorderColor</p> </div> <div> <p>Icon and Name:</p> <p>@sapLegendColor6</p> <p>Text if any:</p> <p>@sapTextColor</p> </div> </div>

Styles of Interactive States

When the user interacts with the mouse on the shape, the user must have feedback when the mouse is over the shape or not and if the shape has been selected or not. The combination gives 4 mains cases:

Light Interactive Style

When the diagram has a high level of interactivity ("Interactive View-Only" or "Edit" described in Diagram Components - Best Practices) the user works intensively in the diagram whenever an element is selected or not (move, resize, edit directly inside the shape, etc.) That's the reason why the interactive feedback of the shape's interactive states are light and keep the content's style of the shape unchanged.

The normal state (A):

border: 1px (independent from zoom factor),

depends on the color style of the object (described if the previous paragraph)

The hover state (B):

border: 1px (independent from zoom factor),

borderColor: @sapContent_Selected_Hover_Background,

shadow: color:@sapContent_Selected_Hover_Background alpha:0.5, blur 6px

The selected and hover state (C):

border: 2px (independent from zoom factor),

borderColor: @sapContent_Selected_Hover_Background,

shadow: color:@sapContent_Selected_Hover_Background alpha:0.5, blur 6px

The selected state (D):

border: 2px (independent from zoom factor),

borderColor: @sapContent_Selected_Hover_Background,

Button-like Interactive Style

When the diagram has a low level of interactivity (i.e. "Static View-only diagram" or "Basic View-only diagram" described in Diagram Components - Best Practices) the user can only interacts with objects by selecting them or expanding/collapsing them. For that reason, the style is near from UI components like list items or like buttons in toolbars:

The normal state (A):

depends on the color style of the object described if the previous paragraph)

The hover state (B):

font: @sapTextColor

background: @sapButton_Hover_Background

border: 2px (independent from zoom factor), borderColor: @sapContent_Selected_Hover_Background,

shadow: color:@sapContent_Selected_Hover_Background alpha:0.5, blur 6px

The selected and hover state (C):

font: @sapContent_Selected_TextColor

background: @sapContent_Selected_Hover_Background

The selected state (D):

font: @sapContent_Selected_TextColor

background: @sapContent_Selected_Background

Case of Shapes with body

In that case, there is not specific styles.

If the shape is resizable, 8 handles are displayed and they will augment the visibility of the selected shape. (More details about Resize Handles in Anatomy section)

When the shape has a separation between the header and the body, the background style is applied to the header only. The content of the body remains unchanged.

When there is no separation, for example when the shape is collapsed, the whole shape has the same background. The states are represented by:

Command Access

The design of the access of commands is key to have a global high level of usability when using diagrams. All the accesses are not necessarily though the shape directly but also through a sequence of interactions starting by selecting the object and then interacting with components that can be inside or outside the diagram.

This chapter lists a variety of possible accesses from the most specific and local to the most standard and global.

Most of the shape parts are directly selectable and start a command or an action:

Command can also be started through other ways:

Drag and Drop

There are four main different cases of drag and drop.

Each of these cases may have some sub-cases.

Contextual Toolbar

The contextual toolbar is an optional vertical (A) or horizontal toolbar (B) toolbar displayed when a shape or a connector is selected. It allows the user to quickly execute commands based on the currently selected object like for example create another object after it. The number of icon buttons is limited because the presence is important – an element is often selected. Icons of shapes and connectors can also be drag and dropped.

The contextual toolbar is half transparent to avoid hiding connectors. The contextual toolbar becomes opaque when the mouse is over it in order to select an icon.

The vertical toolbar is displayed at 8px (in viewport coordinates, i.e. independent from the zoom factor) on the right of the shape, vertically centered (C).

The horizontal toolbar is displayed at 8px on the top of the shape, horizontally left aligned (D).

Contextual Buttons

Some icons can be displayed individually at a specific location on the border of the shape when the shape is selected. Use that possibility if you need to display the action access when the shape is selected and if you cannot put the icon in the contextual menu or cannot use a port.

Context Menu

The context menu (sometimes called right-click menu) gives access to a list of commands that depends on the selected objects in the diagram. Each command will be applied on them.

The logic of access to this context menu, the type of commands that appears in in, the structure of this menu and sub-menus should be homogeneous through all shapes and connectors and in some extend through all the other components of the application. (This description is not part of this guideline)

All shapes and connectors must have a context menu.

Behavior and Interactions

Creating a Shape

A shape can be created by many ways:

<div> <div>Interaction</div> <div>Command Result</div> </div> <div> <div>Drag and drop an object into the diagram</div> <div>The shape will be created and the links with other objects that are already in the diagram will be also displayed in the diagram.</div> </div> <div> <div>Drag and drop an object on a shape</div> <div>Another shape with its connectors or simply a connector will be created to link the dropped object and the targeted object</div> </div> <div> <div>Drag and drop an object on a connector</div> <div>The dropped object will be inserted between the two shapes that are at the extremity of the connector</div> </div> <div> <div>Drag and drop a shape icon from the palette into the diagram</div> <div>The shape will be created at the dropped location without any specific connection to other shapes</div> </div> <div> <div>Drag and drop a shape icon from the palette on a shape</div> <div>A new shape with its connectors or simply a connector will be created to link the dropped object and the targeted object</div> </div> <div> <div>Drag and drop a shape icon from the palette on a connector</div> <div>A new shape will be inserted between the two shapes that are at the extremity of the connector</div> </div> <div> <div>Select a shape icon in the palette</div> <div>the object will be created and automatically linked to the currently selected object(s). If no object is selected or if the object cannot be linked to the selected object, the shape is floating</div> </div> <div> <div>Select a shape icon in the contextual toolbar of an object</div> <div>The shape will be created and automatically linked to the current object</div> </div> <div> <div>Drag a shape icon form the contextual toolbar of an object</div> <div>Same as above with the possibility to position the created shape</div> </div> <div> <div>Select a creation command in the context menu</div> <div>the shape will be created where the mouse has been pointed</div> </div>

Selecting

Shapes are selected when the user click anywhere on it except the collapse expand button.

Ctrl-Click add or remove the shape in the currently selected object.

When the diagram appears, it is possible to have one or several objects already selected.

Some commands, like search or impacts highlight some shapes without selecting them. During these commands, a specific command should be visible [at the top/in] every right-click menu in the diagram to select highlighted/found/impacted items. This will allow the user to execute another command based on the result of the search or the impact command after selecting it.

Moving

There is no specific handle to move the shape. And moving a shape is one of the most important interaction with selecting a shape.

If the shape is not selected, the selectable area to move is the whole shape. The mouse cursor does not change at the press but only when the mouse is moved because, after the press, the system does not know if the user will release to select or press and drag to move.

If the shape has already been selected, the selectable area to move is the header except the buttons in that area. The mouse cursor changes to the “move” cursor when it is over this area.

Resizing

The resize is done with handles only. The shape must have a minimal width and minimal height to stay visible and recognizable in the diagram at zoom 100%.

The resize of several shapes at the same time is possible. In that case, each shape has the same amount of pixel added or removed. (It’s not a ratio that is applied).

Modifiers

Once the handle has started, the keyboard modifiers will change the behavior of the resize:

<div> <div>Modifier</div> <div>Resize Behavior</div> </div> <div> <div>Ctrl</div> <div></div> </div> <div> <div>Alt</div> <div>Resize the opposite handle symmetrically</div> </div> <div> <div>Shift</div> <div>Keep the width/height ratio</div> </div> <div> <div>Option</div> <div>Declutch the sticky positioning</div> </div>

Adjusting the Size

If the display of the content of the shape can be optimized, then double-clicking on the right or the bottom handle will change the width of the shape or the height of the shape. If no calculation of the width can be proceeded based on the content of the shape, the double-click [V1] will reset the size to the default length [V2] will do nothing.

For example, if a collapsed shape header cannot display the name of the object entirely, a double-click on the right handle will expand the width to the minimal size that could display the name entirely. The behavior is harmonized with the resize of excel columns.

Resize of collapsed/expanded shapes

Resizing a collapsed shape will have no effect on the size of the expanded shape and vice versa.

Resizing Several Shapes Together

When several shapes and connectors are selected, resizing horizontally and/or vertically one selected shape will resize only:

and will give the same width and/or height of the one that is manipulated.

Selected connectors will be ignored and will behave normally like an unselected connector.

At the end of the resize, the currently selected objects remain selected.

Reuse Resized Shapes

When a shape is resized by a user, it means that the default size is not appropriate for legibility. If the object will be reused in another diagram, there is a high probability that the user – the same or another – would need to do the same job.

This can be avoided: By saving independently from the diagram, some information about the last dimensions set to the object, it would be possible to have good sized shapes when inserting a new object in the diagram.

Deleting Shapes

The deletion of a shape will delete the shape and the connectors to other shapes.

To know if this command should also delete the object that the shape represents, you need to consider the delete command as the opposite of the creation command.

If the creation of the shape creates the object, then the deletion of the shape will delete the object. If, since its creation, the object has been used by another diagram, the object will not be deleted.

If diagrams are not the only way to create the type of object that will be deleted, then a dialog box may be useful to give the choice to the user to delete the object with the shape or delete the shape only.

Hiding / Showing Shapes

There are four ways to manage the visibility of shapes:

If hiding is intended to be permanent, the user should delete the shapes to hide and create another diagram to have another view of its model.

Collapsing / Expanding Content

A shape can have two different contents

Collapse and expand commands are accessible through:

When the shape is expanded/collapsed, a specific auto-layout is done to limit the effect on shapes on the right and below it.

An expand just after a collapse, should not change the position of the shapes in the diagram.

Showing / Hiding Linked Objects

When the diagram is built automatically, for example to display the impact of the modification of an object, the result can be too big to display.

In that case, only a part of the diagram is displayed, for example by restricting the display to the first and second circle of relationships of a given object.

For the next levels, a symbol is displayed at the border on the shape. By clicking on it, the connectors and the shapes of objects having a relation with that object are displayed. This is analog to the expand/collapse of nodes in a tree.

If the object doesn’t not have any linked object, the symbol is not displayed.

Viewing Details

The content of the shape may display only a subset of the object’s attributes, even when expanded. To see more attributes, the several ways are:

Adding/Removing Port

If the shape works with ports, some optional ports may not be displayed by default.

To display optional ports, the command is in the right-click menu. There is one per type of port (e.g. “Add Input”, “Add Error Output”).

If another optional port cannot be added, the command is not displayed.

The command to remove a given port type is displayed only if one optional port has been added. This command is disabled if all ports are connected. The command is enabled if at least one port is not connected and so can be removed.

Changing “type”/object role.

Some objects have a specific role in the diagram, and it is sometimes important to represent it (e.g. the output table in a graphical view).

Whatever its representation (a different shape or a badge on the shape), a command should be available on the right-click menu of the shapes that are candidate to set this role.

Anyway, if the diagram must have at least one object with that role, the better solution remains to choose dynamically, and automatically which object should take this role at each step of the building of the diagram. The calculation may result in a wrong solution, but when the user chooses the right object, then the automatic attribution of the role will be disabled permanently.

Editing in the Shape

Some shapes may have editable content. This content cannot be selected or edited if the shape has not been selected previously.

For example, if the name of the shape is editable, a first click on the name – or on any part of the shape except the collapse/expand button in fact - will only select the shape, a second click on the name will show an input field to change the name and the keyboard focus will be on it.

Then the edition will behave as a form until the shape is deselected.

Zooming and Shape Content

There are two behavior of the size of the font against the zoom.

Some shapes have all their content that zoom with the shape: the font size and the shape size keep the same proportion.

Other shapes have their content that change as the shape is bigger or smaller. In that case, the font size is fixed. In consequence, the content changes in order fit inside the shape.

When the shape becomes smaller:

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.