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.

Buttons Icon before and after the text...

Assuming I'm optimizing for making it as fast and easy as possible for most users to find the button they need, what's the optimal ordering?

share|improve this question
8  
Most websites I've seen do icon first and then text, like e.g. YouTube. –  Rapptz Apr 21 at 9:21
2  
You should check out this article from UX Myths. uxmyths.com/post/715009009/myth-icons-enhance-usability - Based on that, if you still feel the need to use icons, it might be worth losing the 'person' part of the 'Send to friend' icon, just using an envelope, so that it's more universal. –  dennislees Apr 21 at 13:44
    
Note that ideally this answer might change depending on the user's language, since there are languages which do not read right-to-left... but in practice there's probably very little software that makes the effort to respond to this. Generally, unless you have a reason for doing something different, it's safest to mimic whatever's the platform default. –  keshlam Apr 22 at 4:56
4  
@keshlam: As the question does not ask whether the icon should be left or right, but whether it should come first or last, it is already reading-direction-agnostic. –  O. R. Mapper Apr 22 at 8:38
1  
@dennislees, I think it's interesting that the end of that uxmyths article has three unlabeled social media icons. –  Dan Bryant Apr 22 at 20:33

11 Answers 11

I would probably suggest icon first, then text; the text after the icon could then theoretically be any length (within reason), as opposed to the 'text first' approach which would leave your icon trailing behind in the distance.

Also languages like English, Greek and Latin, or ones written in Cyrillic script are all written and read from left to right (unlike languages like Hebrew and Arabic, which are right to left), so if your product is in the English language then it makes sense to have the icon before (to the left) so that it doesn't disrupt the flow of the button text.

See more text direction info here: http://www.w3.org/International/questions/qa-scripts#examples

share|improve this answer
6  
Strictly speaking, it makes just as much sense to have the icon before the text in Hebrew and Arabic, because naturally, with RTL reading, before means on the right. –  O. R. Mapper Apr 22 at 8:40
    
Thanks for adding that - I'll be honest, I've never written a site in Hebrew or Arabic before and did wonder about where the icon would sit in those cases. :) –  rpauldesign Apr 22 at 8:43
2  
“Cyrillic” isn’t a language. You meant “languages written in Cyrillic (script)”. –  Arnold Sakhnov Apr 22 at 11:01
    
Edited now, thanks for pointing that out. :) –  rpauldesign Apr 22 at 11:11

Icon align example

1. Align to left

  • (+) Icons are in line.
  • (+) Icon line is parallel to the line formed by the first letters of the words.
  • (+) No unnecessary gap between icon and text.
  • (+) Makes a good feel because of the similarity with list apperance where bullets are similar to icons.
  • (+) In case of action buttons, icon comes before text, so you can associate the action before reading the text, so doesn't need to read it.

2. After text

  • (+) No unnecessary gap between icon and text.
  • (-) Icons aren't in line.
  • (-) Feels like a crazy mirrored list.

3. Align to right

  • (+) Icons are in line.
  • (-) Unnecessary gap between icon and text.
  • (-) Feels like a mirrored list.
share|improve this answer

Icons first and text after.

Read more here: Should Arrows be Placed Before Link Text or After to have a better understanding some reasons behind it, although the icons might be different but certainly serving the same purpose.

You can see from Apps like Google Mail

enter image description here

share|improve this answer
    
What's interesting here is that there's quite a lot of whitespace between the icon and the text, and the button/tab borders are rather subtle compared to the Q. Also the icons (at least for the inactive tabs) appear to be lighter than the text (I don't use that view in gmail but it looks that way from your screengrab and that fits google's styles). The text stands out quite clearly in this example. –  Chris H Apr 22 at 11:11
    
Instead of giving a link and telling people to go and read the answer there, can you summarize the content of that link here in your answer? Otherwise it's not really an answer, it's just a link to somewhere else. This is a Question and Answer site, not a link aggregator. –  JonW Apr 22 at 11:54

The human brain scans images much faster than text. This makes sense, as our visual systems are just giant image recognition systems evolved to scan a constant stream of images for important patterns (a predator, a fruit that isn't poisonous). As a result, familiar images don't have much cognitive overhead. Reading text however will generate much more load, as you are processing multiple images and putting it all together to figure out what the text says. On a web page the user will not read (or even notice) every detail on the page. Rather their eyes will scan (top to bottom, left to right in western cultures) without reading more than 1 consecutive word until something that might be what they were looking for catches their attention.

Your job is to make scanning easier, so put the icon where the user will see it first (on the left in western cultures). If you don't have an instantly recognizable icon for something then put the most informative word first.

share|improve this answer
1  
To add to this, the presence of the image first can enable the person to read the text faster than without it! Human brains are giant inference engines, and with the picture seen first, concepts related to that picture are more easily accessed than via a "cold start". Read Thinking, Fast and Slow by Daniel Kahneman for more info on this. –  ErikE Apr 24 at 0:48

My opinion on this is that it is better to have the 'fixed width' element (the icon) on the left, this means that if your interface contains several of these buttons atop each other the icons will line up nicely assuming your buttons are left aligned.

This will allow users to quickly scan over the area and identify what the buttons do without having to read the full text. On the other hand if you place the icons on the right users will have to scan over the whole text anyway to find the icon, not only will this take longer but makes the button moot in the first place as an aid in speeding up recognition of the button's function.

There is a point regarding right to left languages focusing differently on interfaces, however if you wished to customize for these languages properly you would want to make the whole layout based around right aligned elements instead of just moving icons across a button, in effect there are more issues involved and you may be best crossing that bridge when you come to it.

share|improve this answer

Also keep on mind your two types of users: new and returning. Sometimes, it is returning visitors are more likely to benefit from an icon. For example, when I pull up Google maps directions, which I do often, I have learned to look for "mode of transportaton" icons. There is no text, but if there were, having it in front would be disruptive. A lot of Google's UI innovations optimize for the long term, require initial learning but then are very efficient.

share|improve this answer

I would recommend using one or the other but not both. However, if you are set on using both, I would, as others have suggested, consider the cultural reading order and place the icon in front of the text. In english it would be on the left, and in say Arabic it would be on the right.

Icons, in my humble opinion, should serve the purpose of foregoing the user reading text, allowing them to be more productive. This is why the quicklaunch buttons in Microsoft Office Applications (and others) work, even without text. The assumption is that the disk icon will save, the curly arrow left will undo, the curly arrow right will redo, the printer icon will print the displayed document and the magnified page will preview the document.

Microsoft Office 2007 Excel Quick Launch Bar

Keep in mind though, this only works if you use the icons in the context that they are commonly understood. If a user clicks the printer icon but something other than printing occurs then the icon isn't used correctly and your users can get frustrated.

If you are using icons to simply make the user experience feel more "pretty" and productivity isn't as important, then I would say image before text, any other time, I would suggest one or the other.

share|improve this answer

In english and other left to right (LTR) languages it makes most sense in having the icon first.

The icon on the left is also a very common pattern among most software, if you think of it as a "bullet point" for the label, it becomes a simple way that draws attention to the button and is more recognisable for the user.

For example a user wants to print, they see the print icon and without reading the word - they click print. Where as if you had the icon last, they would scan the button ltr and read the word then seeing the icon taking more time.

If the user doesn't recognise the icon, they will see the icon and then read the word - and after multiple use would become to recognise that icon becoming faster in selecting that action.

share|improve this answer

We ought to remember that we are visual beings, we associate better with pictures and colors rather than text. So, icons shouldn't just be cosmetic enhancement when used in buttons. The icon should be obvious enough for users so that they could easily recognise what that button does without even reading the text.

So, based on the theory above, I believe that icon should be the primary focus of the button and hence should come first.

And do notice that on some responsive websites, texts inside the buttons are hidden after you resize the browser to certain width.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer

If you have to read the text first before you get to the icon, then there's really no need for the icon.

(Put the icon first)

share|improve this answer

From a graphic point of view, if you have the icons before the text, then the button will be heavier on the left side and will be unbalanced because:

  1. the button will be immediately followed by text that is usually left aligned
  2. the text is usually capitalized, which means that you have a large letter on the left and an a small letter on the right end

enter image description here

By having the icon after the text, and filling in the space between the text and the icon with space, you will have a more symmetrical look. The heavy weight of the icon will compensate the asymmetry posed by capicalization (left-side heavy, right-side light).

enter image description here

share|improve this answer
1  
I don't quite agree that it looks more symmetrical to have the icon on the end (I don't equate an icon as having the same visual weight as a capital letter) And I also don't quite follow as to why that is a good thing anyway if it were the case? –  JonW Apr 22 at 11:57
1  
While I take your point about the symmetry, I don't find that the right side is as practical. It takes more work for me to hit the right side button than the left side button. You can always increase the symmetry by adding a bit of space to the left of the text. In fact, you have squeezed the right border of the square against the text so that it's smaller than the square's left border. To my mind this is the biggest reason that the symmetry looks off, not the placement of the square on the left. There should be as much space to the left of the text as there is above and below it. –  BobRodes Apr 22 at 13:02
    
@BobRodes You are right that I squeezed the text, but it is the same if I didn't and the button was longer. I don't get your point about hitting the right side of the button. The whole thing is a single button, the blue square is meant to be a (non-button) icon. –  sawa Apr 22 at 13:04
1  
That's precisely what I'm disagreeing with. It is not the same. You can't put the borders out of symmetry and argue at all convincingly that the lack of symmetry is due to another reason. –  BobRodes Apr 22 at 13:07
    
Aha. I didn't realize that the whole thing was a button, and yes, I did think that you were saying to press the blue icon. Nevertheless, I prefer the left side for the icon. –  BobRodes Apr 22 at 13:09

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.