Interaction levels

Interaction design heavily impacts the overall product experience. Our system aims to keep interactions simple and direct.

Considerations

Predictable

Interactions indicate what will occur when triggered. There are no surprises.

Proximity

Interactions trigger elements close to where they occur.

Simple

Start with simple interactions before considering complexity.

Levels

There are 4 levels of interaction, each increasing in complexity.

Video description: A 18-second video shows a search results page on mobile with product images in a grid. A number 1 appears and points to quick filters on page at the top. Scrolling down the page number 2 appears and points to a filter button sitting above the page. The filter button is pressed, and number 3 appears and points to an opened mobile with filter options. The modal is closed and the cart icon button in the top right is pressed. Number 4 appears and points to the new page which is now the cart screen.

00:00

On page
Above page
Modal
New page

1. On page

On-page elements can be directly manipulated and cause a change in state immediately after an interaction. They can include level 1 elements like text fields or buttons.

When to use

Form entry
Quick filtering
Title and label editing

Examples

Text field
Button
Quick filter
Selection control
Tab
Pagination
Expansion
Toggle button

Video description: A 5-second video shows a mobile screen of on page quick filtering titled “What are you into?”. It contains a stacked masonry group of colorful illustrated category image cards titled, “Electronics”, “Collectibles” and “Sneakers”. Each pressed in that order as the screen scrolls. Their text pills become darker with a checkmark appearing on the side indicating they have been selected. An outline also appears around the selected cards.

2. Above page

Level 2 elements lie “above” the main page content. They are non-modal and allow access to the base layer.

When to use

Temporarily surfacing supplemental actions or information.
Transient messaging.
Presenting information without obstructing the primary content

Examples

Tooltip
Menu
Snackbar
Popover

Video description: A 5-second video shows a mobile search results screen with images stacked in a grid for men’s running shoes. There are small heart icons outlined in black in the upper right corner of each product image tile. The top left heart is tapped on the product and it fills itself gray. When tapped a snack bar animates on the bottom of the screen with the message “Item added to your wishlist” and an option to “Undo”.

3. Modal

Level 3 elements lie 2 layers “above” the base layer and block access to the main content until dismissed.

Only one modal element should be present at a time. If multiple modal elements are being used, either dismiss the modal and replace it, or use a new page.

When to use

When access to the primary content is distracting.
When the user needs to acknowledge something before continuing.
Content that must be explicitly saved and submitted.

Examples

Modal
Alert
Bottom sheet
Panel

Video description: A 4-second video shows a view item screen on mobile. The color field is selected and a modal window pops up from the bottom of the screen with color swatch options and text inside. The color option light grey is selected. When “x” is selected the modal closes.

4. New page

Complex experiences with multiple steps and interactive elements should use a dedicated page with an optional focused header. This allows for use of all other levels of interaction and improves the overall accessibility of the experience.

This can take the form of a hub and spoke navigation model or a fullscreen dialog on mobile.

When to use

Multi-step experiences
Complex data management
Listing flows
Detail views

Examples

Focused header (TBA)
Create a coupon
Create buyer groups
Edit multiple listings

Video description: A 5-second video shows a selling landing screen on mobile. The “List an item” cta button is tapped and a skeleton loading screen appears as the new page’s content loads. The skeleton disappears as the “Create a listing” page finishes loading.

Change log

Date	Notes
Jun, 2024	Updated to eBay Evo
Feb, 2022	Separated levels into distinct sections with level prefix Added new visual examples Added when to use lists Added list of example use cases Added links to other patterns