1) Vertically On home page with logo and footer and then at bottom of each page

see on iphone http://j.mp/qpbN1A

enter image description here

2) Or horizontally like desktop websites

see on iphone http://stackoverflow.com

enter image description here

3) or vertically at bottom of home page and each inside page along with other elements

see on iphone http://bagcheck.com/ it's a website of well known UX Guy Luke Wroblewski

enter image description here

  • 4
    It depends how many options you have and how many are important. The horizontal option is great if you only have a handful of options as it uses very little valuable space. However if you have a significant number of items it becomes cumbersome, especially as the horizontal buttons should be fairly large. – Ben Brocka Sep 13 '11 at 12:43
  • Because I can't read the language of the first example, it's not clear to me which elements of that interface are the content, and which are the navigation controls. I suspect this will apply to others, too. Do you have an English-language alternative to the first example? – Jimmy Breck-McKye Sep 13 '11 at 12:43
  • @ Jimmy Breck-McKye - it's primary navigation of websites – Jitendra Vyas Sep 13 '11 at 12:58
  • @SirTapTap - DO you think last one is good. the page has long scroll in phone and Navigation at bottom. – Jitendra Vyas Sep 13 '11 at 12:59
  • 1
    @Jitendra Vyas my problem with that style is I have to hit the bottom before I get navigation; with a long page that could be annoying, but it depends what is at the bottom. A footer like that is a great place for "More/related articles" ect. If it has frequently used navigational elements I would prefer it at the top. – Ben Brocka Sep 13 '11 at 13:30

Top links are the most common, but you must take into account that a menu like that can get really hard to tap on small devices and that it could get messy when adding more elements.

Two alternatives are either adding a dropdown menu at the top (with all of the options of course) or adding a nav/more button that would show the vertical menu list (too many clicks IMO)

| improve this answer | |

I prefer the top because that is the web convention I am used to, first horizontally then virtually (the latter being more realistic for larger menus).

I also suggest top is best for a homepage because return users are likely to land there even when they intend to go straight to another page because it is hard to type a full url on a mobile device.

This may be just me however, see what the experts say...

| improve this answer | |

Brad Frost wrote a great round-up of mobile navigation patters recently. It's focused on responsive design, but the patterns could be employed more generally.

| improve this answer | |
  • 3
    Hi Travis. Can you reference the particular aspects of this article that are relevant to the OP question, and also why they are appropriate rather than just supplying a link to a blog page? – JonW Mar 7 '12 at 16:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.