With this article, I’m introducing a new blog post category called #MobileUX. This will consist of articles related to anything and everything UX for mobile.
Leaders in e-commerce like Amazon, Walmart, etc., have all adopted mobile pretty early. What caught my attention while doing research was, they all use the wonderful hamburger menu as their navigation solution on mobile devices. Now, I don’t mean to say that it’s not the best solution, but it’s definitely not the only solution.
The other kind of menu that I see widely used is the tabbed menu. Facebook, Pinterest and Medium (recently update) are some great examples of that. But, these are all social sites. There are hardly any e-commerce apps using the tabbed menu.
Hence, I decided to spend some time toying with the idea of tabbed menu for an e-commerce app and below is a rough wireframe that I ended up doing.
Introducing the tab menu
The idea here is pretty straightforward. You are on the home screen and at the bottom of the apps screen, you have the tabs for shop (home screen), cart, store locator and account. On the header of the app you have the branding, search and browse (by category or subcategory).
By using tabs for navigation, I am not hiding away the most important actions that I want my users to take, which are browsing and searching for products, viewing cart and updating/viewing account. They are available to my users at all times, leading to (much) higher engagement ratio and conversion rates.
Hamburger could be a great way of saving space, but at the expense of causing frustration to your users, higher bounce rate and lower conversion. By saving space and hiding navigation in an off-canvas drawer, you are adding unnecessary secondary items and way too many nested levels of navigation.
So, why is it that we haven’t seen tabbed menu (which has existed for quite a long time), used by e-commerce shops? What do you think?