Interaction design heavily impacts the overall product experience. Our system aims to keep interactions simple and direct.
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.
| Date | Notes |
|---|---|
| Jun, 2024 |
|
| Feb, 2022 |
|
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.
Navigating to a new page. The first page is the selling landing page. 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. The close button in the upper right is tapped to go back to the previous page.
On a view item screen, a drop down is tapped to change the color of a product. A popover sheet animates from the bottom with color swatch options and text inside. A new color is chosen and then it is cancelled.
A search results page with stacked item tiles of shoes. The top left tile’s save button is tapped, filling the heart with color. In tandem, a snack bar animates on the bottom of the screen letting the user know the item has been added to their watchlist.
An anatomy sequence for levels of interaction. Number 1 points to quick filters on page at the top of a search results page. Scrolling down the page, number 2 points to a filter button sitting above the page. The filter button is pressed, and number 3 points to an opened modal with filter options. The modal is closed and the cart icon button in the top right is pressed. Number 4 points to the new page which is now the cart screen.
An example of on page quick filtering containing a stacked masonry group of colorful illustrated category image buttons. One by one, “Electronics”, “Collectibles” and “Sneakers” categories are pressed. 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.