Mobile Site Navigation and Content Context

Breadcrumbs provide context to your page and might be the answer to solving your mobile website navigation problems.

One of the challenges in mobile (handheld) website design is to design the main navigation. With so little available real estate on a small screen, your first instinct is the minimize the navigation by hiding it behind an icon. Some designers opt for having the main navigation at the bottom of the page. Both methods are abundant on the mobile web, and both have usability pros and cons.

Main navigation at the bottom of the page

Obviously having your main navigation at the bottom of your page forces the user to scroll and look for it. Luckily, scrolling on a handheld is a swipe with a finger or a thumb. So the user effort is minimal. However, it might not be intuitive to have navigation at the bottom of the page. This is probably why some designers have navigation at the top of the page.

Main navigation at the top behind an icon

ESPN.com among others, have the main navigation behind an icon at the top of the screen. Unfortunately there is no universal icon that users might recognize as navigation. From user testing I have learned that the little wayfinder icon just confused people. Also the little icon that resembles a list is not that intuitive. Users seem to have the most success finding the navigation with a little button labeled “menu”.

Lack of navigation and context

So now that you have your navigation behind your icon, it’s time to look at your page titles. On a desktop site you usually have your navigation displayed and with navigation status indicators, users are able to see in which context a certain page should be seen. Let’s say you are in a section called “Industries” and the page is called “Energy”. It’s safe to assume the majority of your users will understand that the page “Energy” belongs under “Industry”. However, on your mobile site you are hiding your main navigation. The user only sees “Energy” as a page title. There is no context since the navigation isn’t visible.

Breadcrumbs to the rescue


And here’s where are old friend the breadcrumb comes in. By using breadcrumbs at the top of the page, you’ll be able to provide much needed context.