Introduction

The wizard floorplan guides users to complete a complex and long task as they follow steps. However, it’s challenging for users to keep track of the progress or remember all entered values as they proceed multiple steps. By having a summary card in the wizard, users will be able to easily refer to entered values and get an overview on upcoming steps. Also, the card can include an overview that summarizes the expected result of the task being processed in the wizard such as the total cost of a new object.

Usage

A summary card can be optionally based on the severity and the complexity of a task done in the wizard.

Anatomy

Image
<div> <div>Badge</div> <div>Name</div> <div>Description</div> </div> <div> <div></div> <div></div> <div>contains the overview about the wizard. For example, total cost or estimate of a new object, or any critical information that users need to consider throughout all steps.</div> </div> <div> <div></div> <div></div> <div>lists all configurable items of the wizard. The area is scrollable in case the height of the panel is not enough for its content. Also, users can collapse or expand the panel.</div> </div> <div> <div></div> <div>(optional)</div> <div>groups related items.</div> </div> <div> <div></div> <div></div> <div>a key-value pair of each configuration available in the wizard.</div> </div>

Behavior & Interactions

Placement

The card is placed on the right-most side of the screen and its position is fixed. The space between the card and the right edge (A) is 3 rem. The rest of the area is reserved for the actual content of the wizard.

Image

Responsiveness

The width of the summary card is fixed (20.25 rem) so it remains the same in any window size. Only the content area will be resized when the window size changes.

The height of the component grows as more items are added to the details panel. However, give 1 rem space between the component and the footer (or the bottom of the page). If the component can’t display all items, add the scrollbar to the details panel to make all items accessible.

Image

Update Content

All items in the summary card should be immediately updated when users change a corresponding item in the wizard. Inconsistency in values between the summary card and the wizard will confuse users and slow down their task.

Best Practices

As the card can include a long list of items in the details panel, separate related items into groups to reduce users’ cognitive load. They should be able to easily read the contents, recognize items, and relate them to ones in the wizard.

Design the overview that serves your use case best

The overview of the summary card provides the most critical information that users can refer to during the entire process. When you design the overview, consider using different visual elements such as a chart or large text to emphasize the information.

1
Overview Do.png
do
false
The total estimate of a new instance stands out as it's directly related to pricing. In addition to that, the data tiering pyramid summarizes the entire setup of a new object being configured in the wizard.

Good short UI copies

Rewrite long UI copies of items so that they can fit into the narrow summary card. This can simplify the content and help users understand the info immediately. In case the short UI copy doesn’t work, consider using a popover that can be triggered from the label.

2
UI Copies Do.png
do
false
Keep the label short. If you want to provide additional details from the card, use a link that opens a popover.
UI Copies Dont.png
dont
false
Use long UI copies in the summary card. They will flow in multiple lines and hinder legibility and readability.

Specifications

<div> <div>Badge</div> <div>Name</div> <div>Specification</div> <div>Details</div> </div> <div> <div>A</div> <div>Overview</div> <div>Padding: 1rem</div> <div>Padding: 16px</div> </div> <div> <div></div> <div></div> <div></div> <div></div> </div> <div> <div>B1</div> <div>Icon</div> <div> <p>Width: 2.75rem</p> <p>Height: 2.5rem</p> <p>Icon (Expand): sap-icon://slim-arrow-down</p> <p>Icon (Collapse): sap-icon://slim-arrow-up</p> </div> <div> <p>Width: 44px</p> <p>Height: 40px</p> <p>Icon (Expand): sap-icon://slim-arrow-down</p> <p>Icon (Collapse): sap-icon://slim-arrow-up</p> </div> </div> <div> <div>B2</div> <div>Title</div> <div> <p>Font size: @sapFontHeader4Size</p> <p>Color: @sapTitleColor</p> </div> <div> <p>Font size: 18px</p> <p>Color: #32363A</p> </div> </div> <div> <div>C</div> <div>Group Title</div> <div> <p>Font size: @sapFontSize</p> <p>Padding: 0.25rem bottom</p> <p>Color: @sapTitleColor</p> <p>Font weight: bold</p> <p>Color: @sapContent_LabelColor</p> <p>Font weight: bold</p> <p>Color: @sapContent_LabelColor</p> <p>Font weight: regular</p> </div> <div> <p>Font size: 14 px</p> <p>Padding: 4 px bottom</p> <p>Color: #32363A</p> <p>Font weight: bold</p> <p>Color: #6A6D70</p> <p>Font weight: bold</p> <p>Color: #6A6D70</p> <p>Font weight: regular</p> </div> </div> <div> <div>D</div> <div>Item</div> <div> <p>Font size: @sapFontSize</p> <p>Font weight: bold</p> <p>Padding: 0.25rem bottom</p> <p>Color: @sapContent_LabelColor</p> <p>Color: @sapTextColor</p> </div> <div> <p>Font size: 14 px</p> <p>Font weight:</p> <p>Padding: 4 px bottom</p> <p>Color: #6A6D70</p> <p>Color: #32363A</p> </div> </div> <div> <div>E</div> <div>Space between Groups</div> <div>Height: 1 rem</div> <div>Height: 16 px</div> </div> <div> <div>F</div> <div>Paddding</div> <div>Padding: 0.625rem 1rem 1.375rem 1rem</div> <div>Padding: 10px 16px 22px 16px</div> </div>

Resources

SAP HANA Cloud Central

Click "Create Instance" on the Instances page (home page) to access the wizard with the summary card.

Wizard Floorplan