7

On a mobile site I'll be putting the main navigation at the bottom of the page so that the main content is visible without having to scroll past lots of navigation options. (As per w3c recommendations) I'll be adding in an anchor link at the top (along with a link to the Home and possibly 'Back') to take the user to the navigation at the bottom, so my question is: What should the anchor link say?

Go To Navigation? Jump To Menu? Show Menu? Navigation? More?

What is the most intuitive wording for this anchor link so the user is aware that clicking it will take them to the navigation menu? Depending on the device the space will be limited so a lengthy: 'Show Full Navigation' or similar is probably out.

I've trawled the mobile webspace to see what the conventions are here and there don't seem to be any standards - infact many sites don't even have an anchor link at all, i'm not sure if this is really the best practice though.

Improve this question
5
  • What specific links are going to be in the navigation menu?
    – dnbrv
    Jan 3, 2012 at 13:34
  • It will be a mobile-optimised version of the full site, so will have everything currently available in the main site. It'll probably be stripped back overall though so not as many sections are selectable at any one point as can be on the full site (which has mega-dropdown menus) so the user will have to enter specific sections to be able to view the sublevels but everything will be available.
    – JonW ♦
    Jan 3, 2012 at 13:59
  • So it's a content site not an app, right?
    – dnbrv
    Jan 3, 2012 at 14:02
  • Yes, correct. Although W3C state that naviation can be placed at the end of the page with a link to it from the top there is no discussion of how to handle this link, so I'm wondering if there is any experience of this out there in UX.SE land.
    – JonW ♦
    Jan 3, 2012 at 14:14
  • Perhaps "navigation" is too "technical" for casual users? I don't know, that's just my personal assumption. Also, conceptually at least, it's a bit odd you need navigation to get to the navigation...
    – agib
    Jan 3, 2012 at 15:13

3 Answers 3

Reset to default
7

Bagcheck uses a similar navigation style with a downward arrow as a pointer to the navigation in the page footer.

Bagcheck navigation (Image from http://www.alistapart.com/articles/organizing-mobile/)

Normally, I would suggest matching the button name or icon as closely to the user goal (i.e., Where else can I go from here?) rather than an ambiguous down arrow that is describing what the interface (the viewport) is doing. If the user wants to go "down", he/she will scroll down, right? So I would use "Menu" or an icon resembling a menu.

However, in this case the location of the menu at the bottom of the page may have additional value that is worth enforcing its use as more of a "pointer" to the menu. For conventional top-to-bottom browsing, it's effectively removing an additional click for opening a menu, going back, or a "jump to top" button that would be needed to access a top menu. Also, it may be preferred over having a top AND a bottom menu, where the user might be confused as to how and why the two menus may be different. We're sort of conditioned to expect nav menus to be different than footers, which generally contain more small print, disclaimers, and infrequent navigation, so this consolidated navigation may help alleviate any undue searching.

And so, as a compromise between the two, I might actually try the word "Menu" with a down arrow to indicate that it's jumping you to the page footer. You'll have to do a little testing to see what works best though. :)

Hope that helps!

Improve this answer
4
  • Also to note is that bagcheck.com has designed their menu block to fit and fill the screen. The apparent effect to the user is that if they click the menu button they are taken to the menu page immediately, rather than waiting for a load (when in actuality they have simply been scrolled down to the bottom of the page). Another site that does this is m.ski.com (resize your browser window to typical iPhone dimensions to appreciate the effect).
    – Erics
    Jan 4, 2012 at 0:27
  • 1
    Additional noteworthy observation: m.ski.com.au used to have a simple square rectangle icon for the menu button, now they have a more literal [+ menu] button. Perhaps they found the more literal button had greater affordance that outweighed the impact to visual design.
    – Erics
    Jan 4, 2012 at 0:32
  • @Matt - The same I suggested
    – Jitendra Vyas
    Jan 4, 2012 at 4:53
  • 1
    Matt, I'm going to mark this as the accepted answer because of the AListApart link you provided. That's more-or-less what I was after (somewhere with a decent study of the issue of navigation on a mobile). I think I'll try to aim for 'menu▼' rather than just a triangle as it's more descriptive, but it's great to see other example sites. Thanks again!
    – JonW ♦
    Jan 4, 2012 at 11:20
2

I saw this pattern in an article a while ago (and I can't find now). What they suggested is hiding the navigation menu in a pull-down and fixing the positioning on top so that it's always available. The visual cue consists of a thin bar on top of a color slightly different from the body background and a button in the middle that either reads "Menu" or just have the downward triangle. The menu itself is presented as an overlay with optional animation for opening/closing.

image

Improve this answer
1

Only an icon of down arrow ▼ would be sufficient with matching color scheme.

This example is available on mobile version of this site.

Or you can icon like this (right top)

enter image description here

Width is limited on Phone so text would be long.

Go To Navigation? Jump To Menu? Show Menu? Navigation

Improve this answer
1
  • Thanks for the suggestion. I would probably include the down arrow but I don't believe that it will be sufficient on it's own without an associated label. StackExchange users can be presumed to be more web-savvy than other web users so I would prefer to include a label as well as the arrow in this instance - Unless of course there is research backing up the suggestion that an arrow alone is sufficent.
    – JonW ♦
    Jan 3, 2012 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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