I'm in the process of designing an iOS app menu, and the online version of this menu does not contain icons. After doing some R&D i've noticed that many iOS app menus do contain icons. From a UX perspective is it necessary to include them? I find the UI to appear a lot less cluttered without them
-
By menu do you mean a slide-out menu like this: cdn3.raywenderlich.com/wp-content/uploads/2013/02/… ?– mginnCommented May 5, 2015 at 0:22
-
Yes, that's exactly what I meant :) sorry if I wasn't clearer about it in the original question– user47821Commented May 5, 2015 at 0:33
-
Related: ux.stackexchange.com/questions/1795/…– Nicholas PappasCommented May 6, 2015 at 23:26
3 Answers
You need to take in consideration the context of the UX. Is this app intended to be used frequently? What age range the average user will be? Whats the final purpose of the app?
Icons can be good if there are few elements on your menu. If you have 10+ choices it might not be a good idea to include icons at all, it will be hard to read and will feel cluttered.
If your menu is simple with only a few options, it will probably be a good idea to include icons to quickly recognize each item without even reading each label.
I will quote the book Interaction design best practices. It is something to be taken in consideration in every UX.
Interaction design can be broken down into 5 dimensions: words, visuals, objects/space, time, and behavior. Words are interactions. Visuals and objects/space are what users interact with. Time is what users interact within. And finally, behavior is how users and the interface act and react.
Icons allow for more meaningful associations. While text items have the potential to look very similar, different images can let the user connect the idea of the image with the idea of the part of the app it navigates to. Using icons with the same meaning as in other apps can further help the user connect them to functionality, for instance, using an icon similar to the App Store's "Updates" icon immediately tells the user that that screen will involve some sort of download/update functionality.
This is similar to the design for Apple's Home screen. When you launch an app from the home screen, most likely you don't look for the app's title text. You recognize the icon, and click on it probably before you ever read the text beneath it.
If you are going to use images, they don't need to be complex or distracting. Simple, flat and colorful images make for the cleanest experience.
Example: the final product from AppCoda's implementation of the slide-out menu - image
-
"Icons in a menu can make the menu more accessible and familiar to the user." -- but icons are only meaningful based on previous experience, are therefor never intuitive, and are commonly interpreted differently from person to person. Colors also have meaning to different people (intended or not) and some don't quite see certain colors the way you intend. How does something that has no previous context and must be learned, or convey unintended meaning, or appear differently, help accessibility? Commented May 6, 2015 at 22:52
-
On the contrary, if an icon is similar to something the user has seen before (for instance a settings icons) they will instantly understand what that menu item links to. And it doesn't matter that people see them differently--after they use them once, they make an association between the image and the functionality. Just a list of text can look uniform with no memorable distinctions that allow a user to navigate efficiently.– mginnCommented May 6, 2015 at 23:01
-
"similar to something" is previous experience, and makes an assumption that the two apps use it same way (commonly untrue). Not "see[ing] something differently" is very important and a cornerstone of usability, where overcoming misinformation and miscommunication is kind of a big thing. Relying on "after they use them once [it's okay]" is just poor UX rationale for poor design. Comparing an app's launch icon to a series of icons in a menu is not relevant, as they are two completely different concepts. Commented May 6, 2015 at 23:21
-
What exactly is the difference? Both are used to navigate to specific functionality from a centralized location.– mginnCommented May 6, 2015 at 23:23
-
An example to use that does illustrate icons in menus -- Microsoft Office dropped icons out of their menu's some time ago - where they used to be prevalent; because they are distracting, meaningless and don't add anything. Commented May 6, 2015 at 23:23
It is probably only necessary to include icons for the following reasons (but in no particular order of importance, except maybe for the first one):
- If someone's life might be in danger or affected if not included, presumably because the icon contains important information that would otherwise not be conveyed.
- If whoever signs off on the design insists on it and your would lose your job (or get a bad performance review) if you didn't put it in.
- If you don't plan to use text in the menu (probably not a good idea...) and want to provide tooltip or hover-over using the icons as a call to action.
- If the style guide (whichever one that you are referencing) dictates that the menu should include icons.
- If you care about the opinions of people on this site and want to follow their advice (if it is to include them).
- If you test it against users and they get a better experience using the app with the icons.
-
If the OP didn't care about the advice of people on this site, he wouldn't have asked.– mginnCommented May 6, 2015 at 23:06
-
1@milesper Just a friendly reminder that these may often be opinions rather than advice, that's all...– Michael Lai ♦Commented May 6, 2015 at 23:17