Does your mobile navigation work?

In Luke Wroblewski's excellent 5-minute video,  he pinpoints four considerations when deciding what will work best for your mobile app or website navigation:

  1. Content first, navigation second - Are you giving your visitors immediate value?

  2. Maintain context - Can your visitors explore their navigation options without losing their place?

  3. Pivot and explore - Are you providing "surprise" opportunities for your visitors to explore, or are they reaching dead ends? 

  4. Ergonomics of use - Is your navigation designed to be comfortable for human hands?

When we started designing mobile sites a couple of years ago, we always put the navigation at the bottom. At the time it was the most device-compatible way to provide big buttons on a small screen without interfering with content. Although the mobile web is now filled with whizzy interface tricks, some of which we do use, when it comes to menu navigation we still think this is one of the most user-friendly approaches - and it meets all of the best practices outlined above. 

Below is an example of this sort of menu navigation, borrowed from a client's website. It was originally built almost two years ago, with a few small refinements since. 

Content first. Menu "go to" button transports user to navigation at the bottom of the page (see next screenshot).
Does your mobile navigation work? (Screenshot 1)
Bottom navigation. Hands-friendly, with a trusty "Return to top" to ensure context isn't lost. Also provides surprise options for readers who reach the end of a page on their own accord.
Does your mobile navigation work? (Screenshot 2)


Goes to show that the simplest - and least tech-fancy approach - is often the most effective.

You can follow Luke Wroblewski on Twitter. We think he's pretty smart. :)