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
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.
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:
Space is very limited (i.e., too small for text alone).
The icons are standardized (e.g., the “X” icon on a window Close button)
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.
humanfactors link regarding users knowing only six Word toolbar items is not working/leads to a non-existing page.
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:
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).
