8

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

8 Answers 8

6

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.

3
  • Can you give an example of the menu slider? Expandability is my main concern when using icons.
    – Vijay
    Mar 13, 2013 at 4:51
  • 1
    @Vijay I Added an example to my answer
    – JohnGB
    Mar 13, 2013 at 11:32
  • The Facebook Messenger app for Android is a good example of (as) good (as you can get) menu slider UX. Mar 16, 2013 at 0:35
5

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.

2
  • 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, 2013 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. Mar 16, 2013 at 0:30
3

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?"

1
  • 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 Mar 13, 2013 at 8:59
1

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.

1

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

0

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.

0

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.

2
  • Can you provide some example images to better clarify your comparisons?
    – Vijay
    Mar 13, 2013 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
    – SuperFluxx
    Mar 13, 2013 at 18:29
-1

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

1
  • 2
    Can you explain why?
    – JonW
    Mar 12, 2013 at 19:20

Your Answer

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

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