10

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.

4 Answers 4

22

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.

1
  • 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, 2014 at 8:02
3

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.

1

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...

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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