Amazon Shopping List Tray

✋ What is it?

This is a solution found in the Amazon app that allows users to quickly add products to an existing shopping list and compare those items with speed and easiness. They can do this by dragging and dropping images to a virtual tray that shows up once the drag interaction starts.

🤲 How does this interaction or solution 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 that show up in 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 this interaction or solution work?

Improved Navigation and Speed.

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

This solution 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 the discoverability of products.


That's it! If you like the content, consider subscribing to Waveguide Next, a newsletter / blog where I share new examples and lessons on User Experience.