RECOMMENDED

All Tips

Support Icons With Labels
Support Icons With Labels

Support Icons With Labels

icon
accessibility
ux
ui
mobile

Icons can often confuse users or get misinterpreted by different people due to their experience level or even due to their culture.

Fix this accessibility issue is by adding a subtle text label near the icon which will describe its usage.

Keep this information in mind especially for mobile interfaces which don't support hover effects.

←Previous Tip

Visually Distinguish Elements

Visually distinguish elements by applying unique shapes, colors, copies, and/or icons. In that way, you ensure that visual hierarchy works perfectly and you avoid accessibility issues. To boost the strength of the visual effect use multiple attributes (color + icon) and not a single one (only color). The latter helps you avoid accessibility issues as well. Color blind people won't notice the color changes.

visual effect
ui
ux
button

Next Tip →

Use Labels Cleverly 2

A smart use case for labels is on color pickers with predefined values. Depending on the app's context you can even omit labels. Consider keeping them for color-blind people who struggle to identify colors though.

accessibility
labels
forms
ux

Become a Better Designer.
The Fun way.

Join 100s of developers, entrepreneurs & junior designers who strive to become better in UI & UX design with byte-sized, practical tips & examples!

Get notified about new tips & articles before anyone else!

  • "

    I love these little tips. It’s like Dribbble but actually useful.

    Martin LeBlanc

    CEO of Iconfinder

  • "

    I love UX & UI tips. Especially, when they are practical and presented in a very good way. Yours are meeting both criteria.

    Lisa Dziuba

    Head of Marketing at Abstract