0

What is a better approach for designing buttons for the web? Should the icon come before the text or after? Personally I think it really depends on the context of area but just wondered what would be a more 'standard' approach?

buttons

  • 1
    This is a bit of a cop out answer, but there is no graphic design police that I know of, so I would say whatever looks good in the the layout and makes sense in the context. – Joonas Jan 24 at 18:52
  • Of course. Personally apart from menu's, I prefer the icons on the right. It feels more natural to me. However, as you can see from the answers, it's only me that feels this way and that is what I meant by a 'standard'. – Abdul Sadik Yalcin Jan 25 at 9:57
2

I personally think the one on the left looks better.

We read English from Left→Right so it only makes sense to me that you see a green button with a check and then the "explanation" (Submit).


If the page is in a language such as Arabic or Hebrew where they read from Right to Left, then you should probably place the icon on the other side.

I read this R-L, therefore I see the ✅ (check) first.

hebrew

1

Most of the time the icons accompanied by text are perceived as a bulleted text, so its location to the left is visually more familiar.

Bullet in Exce

Image from Bullets in Excel


This bulleted perception increases when the icons accompany a text list as in a drop-down menu.

enter image description here

In these menus, the icons on the right usually have a different meaning than the text such as an alert or a detail of the item itself:

enter image description here


Always speaking perceptively, the icon is an image and the text a description of this image, and this is usually in this order, beyond the language: image + description

image + description

As in the photographs, the caption always goes after the image:

image + caption

More answers at ux.stackexchange same question

0

If it's anything but Hebrew the icon left then text. This follows the natural way people will see the visual language of the button. In cases like submit, next and back the position of the icon can help reinforce the visual language and better describe the button. In these cases context will dictate the position.

Let me know if this isn't clear.

  • 4
    Arabic is also Right to Left along with a few others. – WELZ Jan 24 at 17:52
  • Honestly, I was super proud I knew Hebrew was right to left. – user2520890 Jan 25 at 4:40
-1

From development perspective, the one on the left is a better choice. Assuming "submit" is live text, font size can be scaled up or down by site visitor using their browser settings. By keeping decorative element on the left, button text can be visually anchored to it, irrespective of font size. Having decorative element on the right will lead to all sorts of issues when text scales up or down, such as text too far away from the checkmark or overlapping it. This can be resolved, but with unnecessarily large amount of coding, and should be avoided in the first place.

  • 1
    As a front end developer, I have no idea what you're talking about with this answer. It's just as easy either way – Zach Saucier Jan 24 at 22:58

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.