Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on a responsive design in which there are 5 selections in the primary navigation. I'm thinking because there are only 5 I could use icons instead of a dropdown for the primary navigation. Thoughts?

enter image description here

share|improve this question
add comment

8 Answers

up vote 6 down vote accepted

Using a drop down for navigation doesn't seem like a good idea for the following reasons:

  • It is less discoverable as you have to select the drop down before you get to see what your options are.
  • It doesn't save a lot of space relative to the icons only. If you need more than 5, then consider a menu slider on the side, which is more common and more flexible. (Example of a menu slider below)
    enter image description here
  • It adds an additional tap / select when compared to icons. Generally fewer is better.
  • No ability to quickly scan for an option, as you lose most of the position, colour, and shape indicators that you get with icons.

I don't have the link at the moment, but an Australian newspaper did a lot of UX testing with variations on mobile navigation, and found that icons (with labels) worked best.

share|improve this answer
    
Can you give an example of the menu slider? Expandability is my main concern when using icons. –  Vijay Mar 13 '13 at 4:51
1  
@Vijay I Added an example to my answer –  JohnGB Mar 13 '13 at 11:32
    
The Facebook Messenger app for Android is a good example of (as) good (as you can get) menu slider UX. –  Christopher Woods Mar 16 '13 at 0:35
add comment

Buttons, always buttons. Big, thumb-friendly icons. Having to adapt your grip to use a dropdown is very annoyingly, and not every browser logically renders dropdowns (Opera's handling of dropdowns in WM6.5 is generally terrible).

In mobile land, the fewer the dropdowns, the better - anything which requires an activation click then a contextual click is prone to inaccurate tapping and frustration as you have to begin again.

share|improve this answer
3  
Why would you have to adapt your grip to use a dropdown, and why can't a dropdown be big and thumb sized? –  JohnGB Mar 13 '13 at 11:33
    
Oh they can be -- they just so rarely are. :( I hold my phone in my left hand, using my thumb to prod the screen - using a dropdown requires a tap to open then a tap further down the screen to make your choice. On a 5" screen, that's quite a lot of coverage. I can't properly reach all areas of the screen on an iPhone 5 when holding like this, and the new crops of smartphones have even bigger displays! I refuse to hold my phone in one hand and stab it with the other hand's index finger, that's so 2005. –  Christopher Woods Mar 16 '13 at 0:30
add comment

There are more questions that you need to answer before making this decision.

Will more options be added in the future? If so you may run out of room for all of the icons.

Are icons and drop downs the only options? How about a spinner?

If you choose a dropdown, can you safely assume that the user will already know what his/her other options are without first expanding it to explore?

Can the options easily be iconified? Let's face it, there are a lot of terrible icons out there. Sometimes you look at them and think, "what the heck does that button do anyway?"

share|improve this answer
    
Very good points! I'd always have voted for icons but now I had a project where we used icons in the first place. Now we are facing these problems: - the navigation has to grow but there is no real estate for more icons - not all sections can be representd well by an icon - the icon bar already requires many pixels - as well we have to cater for more elements like page titles and back links. all this takes away to much room of the content area –  John Sample Mar 13 '13 at 8:59
add comment

I would go for icons but as they can be somewhat ambiguous at times it might be a good idea to include some text.

http://yoo-s.com/images/photos/623.png

share|improve this answer
add comment

With your wireframe above either would "probably" work well.

On our team, it's not so much about whether a dropdown "renders" well (because it usually does, although I agree with Christopher's sentiment above). More importantly, we like to have all options visible to the user without them having to click on anything. Our team would unanimously vote for buttons. Definitely.

Hell, if you even DOUBLED the amount of options (based on your wireframe), another row of big fat buttons would probably be fine, usable, and logical for an end user.

share|improve this answer
add comment

I would opt for using icons. Since this is for a mobile device, the larger foot-print of the icons you've shown lends itself better to touch interfaces than say a dropdown/combobox. In other words, icons prevent "fat fingering". Also, by choosing icons as your primary navigation you are opening up your available, vertical screen real estate for further use. The combobox/drop down forces you to occupy that vertical space when its expanded. And what happens when your list of navigable/selectable options in that combobox increases? The vertical size also increases. Overall, I think icons are the best option for scalability and useability.

share|improve this answer
add comment

Unless your icons are really really obvious (a fork and a knife, a car, cogwheel, etc). I wouldn't recommend using any as there is always an icon which end up looking awkward at some point in time. Add the extra loading time and the extra cognitive load and it's pretty much a straight no.

What about simply having a "menu" link that your users will get instantly. Clicking on it will open a drawer or some sort of mobile friendly mega-menu.

share|improve this answer
    
Can you provide some example images to better clarify your comparisons? –  Vijay Mar 13 '13 at 4:53
    
I'm not really comparing anything, more stating that menus with icons often lead to concessions* in terms of usability which -the concessions- can have a greater impact on a mobile device than on a large screen device. *page load, real estate, redundant information between icon and label, etc –  TotemFlare Mar 13 '13 at 18:29
add comment

I would like to recommand icons as long as they will not be changed to be more in the future

share|improve this answer
2  
Can you explain why? –  JonW Mar 12 '13 at 19:20
add comment

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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