Contents
Icons can be placed next to labels to both clarify an action and call attention to a button. There are certain instances where an icon will suffice in place of a text label, but use icon buttons cautiously. Do place the icon on the right side of the button after the text.
When should you use icons?
Icons can be effective when they are used to improve visual interest and grab the user’s attention. Provide Functionality and Feedback. Imagine a video player with the words play and pause compared to the icons currently used. Icons allow us to communicate an idea quickly.
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.
Should icons be labeled?
Icons Need a Text Label (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.) Icon labels should be visible at all times, without any interaction from the user.
What is a UI icon?
UI icons are the graphical representation of a functionality, concept, a specific entity, and the application itself. An icon can resonate with the real-life object, like a lock to denote that it will unlock and lock the particular feature of an application.
What is the standard size for an icon?
The size most commonly used size on this list is ’24 x 24′ as it is a standard size for menus within Windows 7 and 3rd-party software. When creating ICO files specifically for menus, rather than app icons, 16 x 16, 24 x 24 & 32 x 32 are the three most common sizes used.
Which is the best icon, a label or an icon?
The best icon is a text label. I hope all of this made clear that icons can easily break the most important characteristic of a good user interface: clarity. So be very careful, and test! And when in doubt, always remember this: the best icon is a text label.
Where to place icons next to button labels?
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.
Can you replace an icon with a label?
Icons are an essential part of many user interfaces. The thing is: more often than not, they break clarity. Just replace them by a text label. Or an icon plus label. Icons are an essential part of many user interfaces. The thing is: more often than not, they break clarity. Just replace them by a text label. Or an icon plus label.
When to use icons and when to not use icons?
If you’ve ever wondered when you should use an icon — or an icon with a label, or just a label — download my FREE ‘When to Use Icons’ Cheat Sheet. It’s a simple series of Yes/No questions that will help you determine when (and when not) to use an icon.