Icons vs. Dropdown for primary mobile navigation

Question

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?

Answer 1

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)
  
• 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.

Answer 2

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.

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

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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