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'm currently working on a social network type system, and was wondering about the best practice for navigation. Would it be better to use Icons or Text? I was thinking a mixture, icons for some things, and text for others. Opinion?

Also, would it be a good idea to implement breadcrumbs?

My target audience is mainly novice computer users, but we are also aiming at computer literate people as well.

share|improve this question

closed as not constructive by Ben Brocka Aug 10 '12 at 17:28

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

add comment

3 Answers 3

Icons are notoriously ineffective at labels, being very difficult to interpret correctly without training or experience. For most situations, users learn correct interpretations better with text alone than with icons alone. See: Wiedenbeck, S (1999). The use of icons and labels in an end user application program: an empirical study of learning and retention. Behaviour & Information Technology, 18(2), p68-82.

Icons are especially bad for anything abstract, such as Profile or Groups, since abstract things generally do not have any strong visual image (e.g., how would an icon for Groups be different than an icon for Friends?). Similarly, icons are particularly bad for actions (e.g., Follow, Request Friendship, Post); it’s hard to clearly show a process with a picture. Yes, icons are used all the time in toolbars for actions, but toolbars were intended for experts, and nonetheless users are frequently confused by them (on average, users know only six Word toolbar items after regularly using Word for two years).

Icons can save space over text, but at the price of recognition. For small icons, such as 16x16 pixel, it’s very difficult for users to even recognize what they are supposed to be a picture of, let alone what the picture is supposed to stand for. One user I know thought the “floppy” icon for save was a picture of a TV (she was old enough to know what a floppy disk was). I personally used Word for years thinking the Track Changes icon was some sort of stylized Rosetta Stone. Expert users find it easier to rely on the memorized physical position of the toolbar controls rather than the icon labels to pick a control. Bigger icons (e.g., at least 32 by 32 pixels) can help recognition, but take so much space you’re better off using the space for a clear text label.

It’s extraordinary difficult to get icons right. Do not attempt to develop a new icon without extensive iterations of user testing. Even then, you may fail. Microsoft designers tried everything to make interpretable icons for Outlook’s toolbar before giving up and going with text labels on key controls.

Icon labels also make tech support difficult (e.g., “Click on the crowd of people with a blue circle around them,” versus “Click on ‘Group’”).

As rule of thumb, icons alone should only be permitted when at least two out of the following three conditions apply:

  1. Space is very limited (i.e., too small for text alone).

  2. The icons are standardized (e.g., the “X” icon on a window Close button)

  3. The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes, or a red rectangle to set a page background red).

In your case, #1 shouldn’t apply. If you’re running out of space on you web page, then your app is too complex for novices. #2 does not apply when you’ve novices because they won’t necessarily know any standards. You might think that #3 applies to navigation icons if each of your pages looks unique (and thus, each icon is a thumbnail of the page). However, your users won’t necessarily know or remember what your pages look like (e.g., how the Profile page looks different from the Privacy page), so that’s poor cue

Tooltips are required for icons when used alone, but are a poor substituted for text labels. You users shouldn’t have to use you app by groping around for things.

If space allows, icons can be combined with text to make certain items stand out more or add visual interest. It may also improve the scanability of the items, but good text labels can do this too. Users have been known to subjectively think an app is easier if it has icons, even when they don’t actually improve performance, so that’s another reason to have icons and text combined.

share|improve this answer
    
Michael, I would be interested what you think about buttons with combinations of icon and label? I think I read somewhere that image and text together are read faster and remembered better than image or text alone, so that would be my best guess (at least for important functions). –  Lisa Daske Aug 2 '10 at 8:26
    
I’ve also vague memory of a study from the 1980’s showing performance is best with icons and text combined, but I can’t find the cite now. I believe Wiedenbeck (cited above) showed no benefits for adding icons to text. Maybe icons can improve on the performance of text alone if you have the right icons, but maybe it’s hard to get the right icons. –  Michael Zuschlag Aug 3 '10 at 22:12
    
I just did a simple, non-scientific experiment. I covered up the icons on my Windows Task Bar (mine is oriented vertically, so all of the icons are on the left edge -- easily covered by a think sheet of paper). Finding the right application certainly felt more frustrating! But I find a noteworthy distinction here: The position/order of things in my taskbar -- indeed, even what items are present -- is dynamic. Having a easily identifiable icon, even if it meaningless (e.g. Google Chrome's icon has nothing to do with the web) allows me to hone in on it much quicker. –  Trinition May 22 at 15:25
add comment

My idea about usability of social networks is very simple: use styled text links for navigation. And use icons or icons + text for actions.

For example: Dashboard, Profile, Groups, Explore — is navigation. But “add to friends”, “follow”, “comment”, “fav” — is actions. So text is for navigations and icons is for actions.

Possibly helpful link:

share|improve this answer
add comment

Icons are often tempting but keep in mind that it's quite hard to get them right. There are some universally used and accepted icons (ie. reply, forward, back, print, etc.) but if your actions don't fall in those categories it may be better to use text.

If you opt for icons, make sure to test them -- simply show them to friends/family and ask them what they mean (ie. here you can find some info: 6 Ways to Test Icon Usability).

share|improve this answer
    
I think better advice is simply to pair text and icons in this case, instead of relying just on icons. –  Kzqai Sep 9 '11 at 18:54
add comment