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.

This UX.SE question discusses the use of text above vs. below images & videos, and in general the answers say to put text below images.

I'm thinking that it must be different with icons, since their purpose is much different than an image/video. I think it looks better with the text below the icon, and it is what I typically see on sites. But assuming that the user scans the information top down, they might be unsure of an icon's action before they read the text.

share|improve this question

4 Answers 4

up vote 21 down vote accepted

Lets look at the logic that why icons are used the first place. Icons make use of our "scanning" ability which is quicker than "reading".

If you put Text First then you are putting less efficient way to learn first and more efficient way later. Doesn't make sense.

Steve Krug in his book "Don't make me think" almost killed himself advocating not to use text where it is not required. If you think your icons are clear enough, you probebly don't need Text Labels to clarify them.

Lets learn some from bootstrap if we could, they are using small (16x16) icons which are complimented by Text labels after the icons. So in their approach scanning element (icon) is small and reading element (text) has increased visibility. It is kind of 50/50 blend of both approaches in which icon is available for you to "scan" and text if you want to "read" even though icon lies first and text later. But in this situation, I have almost always found myself "reading the text" instead of looking at the icons which are slightly difficult to spot and scan because of smaller size.

share|improve this answer
1  
This is the opposite of the advice here: ux.stackexchange.com/a/1803/47990 "For most situations, users learn correct interpretations better with text alone than with icons" –  Jon May 12 at 8:02

I would tend to say the accepted "standard" is: captions below, headings/titles above - same as print. Whether it is "better" is probably debatable, but it's been that way in many contexts.

  1. Newspaper figures - captions below, titles above.
  2. Software applications - generally menu icons are above the text version. In most applications for the Mac, if you choose to have the menu display both icon and text, the text will be under the icon.
  3. Logos with logotypes - rarely have the text on top of the logo.
  4. Other examples, exist I'm sure.

So, while the purpose of a generic icon might be different, the seemingly accepted representation is not. Basically, the icon is usually a large, language independent way of communicating, the text acts as a confirmation of sorts. Paste on the Ribbon for MS Word - whether it says "paste" or "pegar" doesn't change what the icon (iconically displayed), tells me as a user.

share|improve this answer

Another common way to incorporate labels with icons is to put the text next to icon (on the right side). I found it useful since the icon is still the primary actor due to it's appearance first on the left side. It is also useful for applications that need to reserve the height of the screen space. Usually common for actions buttons such as: Add, Delete, View, Edit...

share|improve this answer

In our application we mostly used icons without labels with reasonable/comfortable size. But we have provided options for the users who are novice to the application. i.e a single check box in a preferences to either show label below the icon or a tooltip(popup) when they hover on icon. This settings has been very effective until user gets familiar with the icons.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.