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.
Level 2 elements lie “above” the main page content. They are non-modal and allow access to the base layer.
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.
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.
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.
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”.
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.
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.
Interactions indicate what will occur when triggered. There are no surprises.
Interactions trigger elements close to where they occur.
Start with simple interactions before considering 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.
