The Minute UX™ series: one-minute reads about website problems I’ve discovered in numerous UX audits.
The most common mobile navigation problem is when a menu tab has two functions: (1) tapping the section title goes to a page, and (2) tapping an arrow or plus symbol opens submenu links. The problems with this are:
- If users tap the arrow or plus sign to open the submenu, they may miss content on the main section page because they don’t realize the section title is a link.
- Conversely, users may tap the section title and not discover the submenu links.
- If they tap somewhere between the section title and the arrow or plus symbol, where will they go? When people don’t know where they are going, that’s poor UX. (Some menus address this by placing a dividing line between the two target areas on the tab, which is better but still not ideal).
The iPhone UI (left) shows how mobile nav should work. No matter where you tap, the tab has one function (either to open a page or to open a submenu, but not both). People are trained to navigate mobile websites by device conventions and that makes this tap behavior intuitive.
The example on the right shows a common problem: the menu tabs have two functions: one to open a page when the title is tapped, another to open a submenu if an arrow or plus sign is tapped.
This is easily fixed: match the functionality of iPhone UI. You also need to make sure that the section overview is the first page listed on the submenu. Check out my in-depth post about this as well as some common desktop navigation issues.