Amazon App: Differences in navigation patterns — UI/UX case study

iOS navigation vs Android navigation

Background

In terms of usability, one of the most important factors is Navigation. Thanks to Navigation, the user can know where he/she is, and how he/she can complete their tasks and goals. Navigation allows the users to know what is happening and where they are going along the way.

For this occasion, I analyzed the Amazon app to find the differences that exist in navigation patterns between iOS and Android.

Navigation Goals

The criteria in this analysis is how the Amazon app show the user this three things:

• Where am I?
• Where else can I go?
• What will I find when I get there?

and the differences in how iOS vs Android gives visual orientation with their pattern navigations.

Nav Bar

Tab bar has the ability to switch between different sections of an app, and also helps the user to know where he is and where he can go.

iOS There is a tab bar with 3 options (Home, Profile, My Cart) and another option that is a Burger menu to see the rest of the options. Also it indicates in blue the screen where the user is right now. There is a search bar in the top.

Android Instead a tab bar, Android has a top bar that shows a Burger menu, the logo that redirects user to Home, Search and My Cart. None of this options indicates when the user is in one of the options.

Burger Menu

A Burger button tells the user that they will find a menu with a variety of options, usually arranged on a hierarchical level. This option creates progressive disclosure when displaying primary features and shows secondary features only if the user wants to see them.

iOS — It is in the tab bar on the right There are the same options as in Android and they are distributed in the same way. Here you can see the secondary options in the same screen by displaying them down.

Android — Is in the top bar on the left It shows a side menu. For the secondary options it takes you to another screen, so the user needs to go back.

Navigation hub

The navigation hub is a page that shows in lists the navigation options where the user can go.

iOS — My profile There is a Navigation hub in My Profile section, however, the users can find these same options inside the Burger menu.

Android There is no Navigation hub there.

Veredict

iOS

Where is the user? — Great! The Tab bar indicates where the user is. The active section is shown by an icon with a state variant, in this case is color blue with a bar on top.

Where else can the user go? — Great! Thanks to icons the user can know that he can move to Profile, Cart, Search and to a menu.

What will the user found when he get there? — Great! The tab bar and the search bar will remain visible, so the user can return very easily, or move to other option.

Android

Where is the user? — Not great When the user goes to a specific section, what helps to guide him from where he is are the titles only, but in addition to that, there is no visual indicators to tell him in which section is there.

Where else can the user go? — Great! The user can view the Burger menu, go to Home when clicking in the logo, go to My Cart, and Search. Also there are another 3 options for go to Prime, Video and Music.

What will the user found when he get there? — Great! The top bar remains always visible with the Menu Burger, Home, Search and My Cart, so the user can go to that sections easily.

Thank you for giving me your time! Hopeful you enjoyed this case study. If you have any feedback, I’d like to hear from you. Let’s connect on LinkedIn.