Icons placed next to button labels are like bullet points placed next to items in a list. Both can make information easier to find and scan, as long as they’re placed in the right spot.
Eyetracking research has shown that users scan from the left in a vertical movement. In order for icons to serve as a visual scanning aid, users need to see them before they see the button label. Placing them to the left of your button label allows users to see the icon first. If you place icons to the right of your button label, they’re not helping users scan because users see them last. If users read the label first, your icon serves no purpose other than decoration. Icons describe button labels, not the other way around.
Icons are also misplaced on button labels with body text. Users scan from the left in a top-down vertical direction. This means when you place icons to the left-center of button labels with body text, users will see the button label before the icon. This doesn’t help users scan. To make your icons a visual scanning aid, align the icon with the button label instead of centering it with the button label and body text. Users will then be able to scan easier because they’ll see the icon first.
Icons and bullet points work similarly. Bullet points are effective because they draw attention from the rest of the text on a page. Icons are effective because they draw attention from the rest of the text on an interface. If users can’t find your button labels easily, they’ll have trouble navigating your site. Place them where they’re easy to scan, and they’ll be able to find your buttons in less time with less work.
Book
Affiliate
What’s your take on right-pointing arrows in buttons with CTAs like “Apply Now »” or “Next »” for example?
Those are affordances, not icons, that belong on the right. Affordances describe what’s a button. Icons describe where that button takes you.
…Signifiers (Whispers quietly while smirking)
http://www.alice.id.tue.nl/references/norman-2008.pdf
In reply to Anthony, I don’t know where he stands now in 2023, but an affordance is not a graphical representation, it’s an abstract concept: it’s the possibility for an interaction given someone’s abilities and their environment. Common mistake in UX/UI. Thus, an arrow is not an affordance, it can be the signifier of an affordance, and is definitely a symbol/icon. I’m curious though as to why they should be placed on the right in that case? Is it backed up by any research?
Short and to the point. Thank you!