Amazon Hamburger Cards
Screenshots powered byGetScreenshot Screenshot API
✋ What is it?
This is a solution found in the Amazon app. When users open the sidebar menu (a.k.a hamburger menu) in the Amazon app, they will notice that the unused space is filled with a row of cards that extend horizontally, beyond the available viewport. There's a small floating arrow icon affordance that when tapped automatically scrolls the screen to the cards area. Amazon uses these cards to feature special promotions like giveaways and to promote their social shopping feed, Spark.
🤲 How does this interaction or solution work?
Amazon is a complex app with a daunting amount of features, functionalities, browsing paths and states. Adding a new feature can be a challenge for an app of this nature. To overcome these challenges, Amazon takes advantage of all the available app real estate to create new interactions an entry points to specific user flows.
In this particular case, Amazon takes advantage of the unused available viewport real estate that results from opening a sidebar menu. When Amazon users open the sidebar menu, they will notice that an entirely new layer of functionality will get superimposed over the first level of the app. This new layer includes the traditional sidebar or hamburger menu listings but also consists of a row of cards that float to the left of the menu.
User can navigate to this area by swiping right or by tapping the floating red button that sits between the list and the cards. When users enter into this new horizontal fold of the screen they can see a row of cards with different community-oriented programs like Amazon Giveaways and Amazon Spark (a social shopping feed where shoppers can get advice and socialize their purchases).
🙌 How does this interaction or solution work?
Optimized Real Estate and Layout
Adding features to an already feature-rich app is a significant user experience challenge. In this case, Amazon takes advantage of a common functionality layer to introduce a new program and promote existing ones. Taking advantage of an unused area of real estate, as the area to the right of the sidebar menu is a smart way to optimize app real estate and create productive layouts.
Users benefit from this by having a consistent app experience that doesn't bloat the app with features and that surfaces new functionality through subtle channels. This helps users to create new helpful mental models for useful features, without interfering with their shopping experience.
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.