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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
Using a drop down for navigation doesn't seem like a good idea for the following reasons:
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.
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.
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?"
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.
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.
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.