Thread
Popular posts
Hello @cengkuru,
The Icons vs Labels vs Icons & Labels is an ongoing debate in UI. I've tried to simplify my opinion below and hope this helps.
Summary:
Since there are few 'universally recognizable icons', it is suggested to use text labels along with icons to communicate meaning.
Research has shown that some icons may be difficult to memorize without training or experience and as a result, can be inefficient in conveying full meaning to the user.
Users tend to remember positions of elements rather than their graphic representations. This is why we expect the Site ID (logo) to be on the top left of a webpage or the search bar to be on the top or top right of a webpage. Hence, it is important to follow existing conventions when positioning text labels and icons.
Few universally recognizable icons include the 'close' icon, 'print' icon, 'search' icon, and the 'hamburger menu' icon:
There are, however, advantages to icons:
- Icons are small, save space, and can help simplify interfaces (especially mobile interfaces)
- When used appropriately, icons need no translation and can be inclusive for people of all cultures and backgrounds
- Icons can be visually appealing and can enhance the aesthetic of the design
- Universally recognizable icons work well alone to convey meaning (search icon, close icon, print icon, etc.)
As explained above, icons can be effective in conveying information if used appropriately. I suggest using icons along with text labels if your interface has space to accommodate both.
Conclusion:
If you choose to use icons only, ensure all icons have alt tags or title tags to assist visually-impaired users who are using screen readers. (In addition, make sure you make use of universally recognizable icons)
And if you choose to use text only, make sure you translate text for users who speak different languages
I suggest you use icons with text labels for desktop, and go with icons only for mobile if space is an issue.