Shopping List Tray


Video didn't auto-play? Click on the thumbnail ☝️


What is it?

This is a pattern found in the Amazon app that allow users to quickly add products to an existing shopping list and compare those items with speed and easiness.

How does this interaction or pattern work?

Amazon app users can tap and hold on images found on the different product listings to reveal a mini-thumbnail and a tray at the bottom of the app.

The users can drag and drop that thumbnail into the tray which will display the last selected shopping list. The images of the tray point to the product listings of all the items contained in the shopping list.

Users can quickly navigate between the products by tapping the images. They can also minimize the tray which will reveal a floating action button that brings back the list tray.

How does it help or delight the user?

Improved Navigation and Speed.

Users can emulate browser behaviors like comparing products by opening multiple browser tabs.

This pattern also gives speed users by helping them move back and forth between products without relying on the standard navigation flow of the app, which is optimized to favor discoverability of products.

Contribution by:

Click the heart to save to your favorites

Other CX and UX Patterns