Product transitions
Transitions can help with focusing attention, masking latency, and creating a consistent experience in product. We use several different transition patterns in the product that all have their own benefits.
The Navigate pattern is used to quickly navigate to a new page. This is the most common pattern on web but has other applications across the product, like selecting a key page from the bottom navigation.
Video description: A 4-second video shows the Home Screen with a banner image of the bottom of three peoples legs with sneakers with display reading “Items certified by the brands you love” and a “Shop now” button. Below that a section for recently viewed items appears. The “My eBay” icon in the bottom navigation is selected and the new screen loads quickly with a subtle loading animation. The “Home” icon is selected and it quickly switches back to the Home Screen.
The Push pattern is our most common transition while navigating between pages on mobile platforms. It’s a clear signal for users who are browsing that they can always return to where they previously were.
Video description: A 4-second video shows the Home Screen with a banner image of 3 designer handbags on a sage green velvet couch with title copy that reads “Bag the best bargains” and recently viewed item images below. “Deals” is selected from the filter bar and the deals page slides in from the right. When the back button is selected on the upper left corner the Home Screen slides back in place from the left.
The Glide pattern is the most expressive way to transition from one page to another. This pattern creates a consistent experience from page to page by transferring key elements seamlessly.
Video description: A 5-second video shows a mobile Search for anything screen. Underneath the search field is a gallery of 2 products that bleed off the side of the screen. A small screen mosaic grid below the display copy “Picked for you”. A circular click indicator selects the image with a white sneaker and has a gliding transition to the product page. When the back button is selected the same gliding transition brings you back to the search screen.
The Reveal pattern is used to introduce new content such as snackbars, bottom sheets, modals, and popovers.
Video description: A 4-second video shows a search results mobile page of wall clocks. Underneath the filter bar there is a two column grid of product tiles. When “Filter” is selected from the filter bar a bottom sheet pops up from the bottom of the screen. It has a stacked list of 5 different “Condition” options, each with a checkbox followed by a blue button that reads “See 684 results”. When the “X” is selected the bottom sheet slides back down.
Loading is additive to other transition patterns. Almost every transition will likely have some sort of visible load state applied to it.
Though loading is used in several different ways across the product, its purpose never changes. It’s used to reduce friction when transitioning, focus the user’s attention, give them confidence that everything is working properly, and create the illusion of shorter wait times. For more info, see Loading overview.
Video description: A 4-second video shows a mobile search screen that reads “Outdoor furniture” in the search field. A list of suggested categories is listed below. The click indicator selects the return button on the keypad and a skeleton loader slides in from the left that is still loading. It has filter buttons on the top but the image tiles and copy are light gray. The images and copy appear at once in place of the gray elements. When the back button is selected it returns to the search screen.
