by anthony on 05/13/14 at 12:07 pm
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.