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.  

When to Use

Use the comparison pattern if:

• 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.

Do not use the comparison pattern if:

• 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.

Components

The comparison pattern comprises the following components. All are mandatory: 

• Triggering action: Opens the comparison view for the selected items.
• Header area: Shows the most important characteristics for identifying and comparing items. Each item is represented by a card.
• Content area: Shows all characteristics needed for comparison. Each item is represented by a panel.

Behavior and Interaction

The expand/collapse header and pin/unpin header features work as described in the Dynamic Page article.

Adding More Items

If your users need to add more items while comparing, place an Add to Comparison action in the header. For more information, see Dynamic Page Layout – Header Title.

For adding more items, either show a dialog or the original page the user started from. Make sure that you display the items that are already in the comparison: in the dialog, also show the previously selected items; in the original page, keep the items selected.

Responsiveness

The comparison pattern adapts the number of visible items based on the screen size. If a card is no longer in the visible area, also hide its corresponding column in the panels.

On size S, there is only one visible card in the header area and its corresponding panels in the content area. Users can navigate left or right to see the next or previous item.

The comparison pattern maintains the scrolling position of the page when switching to the next or previous item. This feature helps the user focus on a certain characteristic while navigating through the items.

On size M and larger, always show two or more cards with their corresponding panel columns in the visible area.

Example

Top Tips

Compare apples with apples.

Wording

• For triggering the comparison, use a meaningful button text with the number of selected items in brackets. We recommend “Compare (<number of selected items>)”, for example, Compare (3).
• Use a page title that describes the task. We recommend “Compare <selected object type>”, for example, Compare Products.
• Use precise panel titles to describe the characteristics.

Cards

• Show only the most important information for an item on the card.
• If the cards contain only a title, subtitle, and image/avatar, show the dynamic page header in collapsed mode when starting the app.
• Link each item’s object page (if available) to the header area of the card. This gives users access to all the characteristics for a specific item to help them make a final decision.

Related Topics