Home > User Experience > 25 Icons With Universal Meaning. And 5 practical tips for improving the… | by uxplanet.org | Dec, 2020

25 Icons With Universal Meaning. And 5 practical tips for improving the… | by uxplanet.org | Dec, 2020

25 Icons With Universal Meaning. And 5 practical tips for improving the… | by uxplanet.org | Dec, 2020


And 5 practical tips for improving the usability of icons

Icons help designers avoid visual clutter, and make UI more aesthetically pleasing. But at the same time, not all icons are universally clear to our users. Usability suffers when users have a hard time decoding the meaning of an icon.

A user’s understanding of an icon is based on previous experience. That’s why it’s always better to use familiar icons.

In this list, we will share a collection of universally understood icons and some practical tips that will help you improve your product’s usability.

Home
Search
Filter
Edit / modify
Messages, mail
Folder
User profile
Infinite spinner
Print
Thumb up
Love
Notifications
Rate item
Bookmark
Share icon in iOS
Download item
Sound OFF/ON, Volume UP/Down
Delete item
Photo gallery, Photo camera
Video gallery, Video recording, Video conference
Settings
Play
Stop
Rewind
Calendar
More
Location
Secure

Familiarize yourself with icons commonly used on the platforms that you target. For example, all major platforms have different visual style for sharing icon.

Share in Android
Share in iOS (since iOS 7)
Share in Windows (prior to 2017)

Keep icons simple and schematic. Visualize essential characteristics of an object. By doing that you will speed up the design process (it will be easier to design icons for graphic designers) and improve icon recognition (it will be easier to understand the meaning of icons for users).

Too many details
Just enough details

But at the same time, do now oversimply the icon.

Oversimplified icon

If you must design a new icon, always test it. Give users five seconds to look at an icon and ask them what this icon means. If users tell you that they don’t know, this feedback will indicate that the design needs improvement.

Icon with a label works better than an icon alone or label alone. Text labels can reduce ambiguity and help users decode the meaning of icons.

Calendar

UIE conducted two experiments to test how people use icons. In the first experiment, they changed the pictures of the icons, but kept them in the same location. They found that users quickly adapted to the new imagery without much problem. In the second experiment, they kept the original pictures, but shuffled their locations on the toolbar. As a result, users really struggled with this. It means that the location of the icon is more important than visual imagery.

Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.



Source link