Last Update: July 02, 2022

Platform: Web

Designer: Matthias Stenzl

Intro

The comparison pattern allows users to select items from a list and display them side-by-side. This makes it easier to compare the characteristics of multiple items.

In SF we have extended requirements regarding the flexibility and efficiency of the UI. We need to change the selection of the items without forward/backwards navigation to other pages.

Usage

Users need to compare two or more similar items.
Users need to compare versions of the same item.
You are using the Dynamic Page Layout.
There is no business need for displaying items side-by-side. Don’t use the pattern purely for visualization.
You want to display only one item. In this case, use the Object Page Floorplan instead.

Structure and Components

The standard solution provides two UIs that are used one after the other. It starts with list view and multiple selection via check boxes. By clicking the compare button in the header of the list view the user gets navigated to a second screen, to find the selected item as card view in the header with line items below ordered in columns.

Comparison_Pattern_Intro_Selection_1.86-1100x915.png

1.) Select items from a list

Comparison_Pattern_Desktop_L_1.86-1100x915.png

2.) Compare selected items in columns

Comparison_Pattern_Desktop_L_Snapped_1.86-1100x915.png

3.) Reduce header, enlarge middle part

In SF we use a more flexible solution. From a list view, grid view or matrix view the user can open via icon one or several The cards react as overlays above the initial UI.

Comparison SF Specific 1.PNG

1.) Open object card from list via icon

Comparison SF Specific 2.PNG

2.) Open more object cards

Behavior & Interaction

In SF calibration we´re using three kind of UIs for the comparison of employees:

Calibration List View
Performance View
Pay X Performance View

In all three views, the user can open with a click on an icon a talent card which will floating above the UIs. The cards can be moved horizontally in both directions. User can open multiple cards to compare up to 5-6 employees until the entire interface is covered with cards. The cards can be slid out of the UI to the right to reveal the content behind them.