6

I sometimes get in a bit of a muddle around which is the best position for an icon within a button i.e. left of the text or right of it. I was wondering if there is an easy way to determine the best positioning, or if perhaps I should just always place the icon on one particular side?

See these examples I've prepared.

Left Aligned:

This one seems more obviously comfortable on the left

shotlist button

Left Aligned (feels weird):

In this instance it feels odd to have it before the text, like the arrow is instructional and should follow the text

continue button

Right Aligned:

So maybe this way around works better for that sort of use case. But it feels inconsistent to be changing alignments and also means design more variations which is more work to create and maintain dev-wise as well

next button

I know the text is different in each and I'm not concerned with that, it was just the examples I had to hand from the project I am working on

Should I evaluate each on a case-by-case basis or perhaps just stick with one alignment e.g. left, and run with it?

6

I had a similar situation when I was designing an accordion menu. here you can find the related article.

For navigation items such as previous and next I would use the icon based on the direction i want to point. (right placed icon for next, left placed icon for previous). For other cases left aligned icons feels more familiar.

  • oh great, thanks. interesting test :) so essentially the test seems to show it benefits the user to locate the icon to the left of the text? In so far as it makes their actions quicker and makes them not feel like they have to click on the icon itself. Apart from in the directional cases that is – Chris Aug 13 '15 at 10:43
  • exactly. according to test results left located icons makes the interaction faster too. I remember in one of our ATM interface, people were touching only the icon and not the button itself. After years of use, this caused the parts of ATM screens which include icons become old much faster than the rest of the screen. – Hakan Isik Aug 13 '15 at 11:14
  • I can't read the article, so I don't know if it is covered as accordion, but carets for dropdown menus are often placed on the right nowadays (kind of a "the text is the main identifier, but there is more to see"). This is the only other exception I can think of (with "Next") for the icon feeling more natural on the right of the text. – Chop Aug 20 '15 at 8:56
2

It depends on the reason you are using an icon in addition to the Text. In the examples that you have mentioned, I see two different reasons why the icon has been included

  1. Icon is being used to visually represent the task. Like you have done for the Shortlist button. Over time users would recognise the icon and not need the supporting text for their decision. In such cases it makes sense to put it in front because eventually once the icon is familiar to users they can act on the button the moment they see the icon.

  2. Icon is being used to add cues to the text. Buttons such as "Next" and "Continue" often use an icon to communicate a subtle direction of the task. Especially on Mobile these directional symbols also have an associated animation to further emphasize the feeling of moving forward. Keeping the icon after the text is important here because by themselves they do not mean much. Let me give an obvious example to explain the point... Imagine a button with an Up arrow followed by the word scroll. Till the user does not know what the action is (which in this case, is scroll) the up arrow does not mean anything. Hope this explains the point

read through the following links for more discussions and perspectives on this topic

Should arrows be placed before link text or after

When a button contains text..

1

To me, it depends if it's to perform an action or for the flow. For the flow, you'd want to "point" people in a timeline direction (as with the next button, where the arrow is after the text), where it a "back button" than the arrow would be in front of it, as per convention. The position of "actionable" icons, to me, doesn't seem to affect a whole lot, as long as they are, per gestalt principle of proximity, close enough so that you can make the connection, in most cases, placing the icon at front will have the closest proximity, since icons are mostly floating either left or right.

Test it out with users using an A/B test and see if there's a noticeable delay in using one way or the other.

Also, regarding consistency, you're allowed to break it if the need really calls for it. (but don't try to find an excuse for doing it differently).

1

Yes the position of icons is critical in buttons especially if you are working multi lingual applications. Having worked on web applications with Arabic as the primary language, I can tell you it is important that the right-to-left culture or vice versa is reflected in all aspects of UI, including placement of icons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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