Reglas para la creación de iconos claros e intuitivos

Have you ever looked at an icon and struggled to figure out what it meant? Users do this all the time with icons they’re not familiar with. And there are only a small set of icons that users are universally familiar with. This is why when you use icons in your designs it’s important to make them clear and intuitive. Here are a few solid rules to follow so that your icons don’t leave users scratching their heads.

1. Always Label Your Icons, Unless Space is Limited

Unless the icons you’re using are universally recognized (i.e. play, print, close, help), you should always label them. The one other exception is if you simply don’t have enough space to add labels. This can happen when you have a large set of icons together, or when the control area is in a confined space such as on a mobile display. When this is the case, use tooltips to show users the labels on mouse hover. But if your icon is on a mobile display, there is no hover so you really can’t use tooltips. This is why icon intuitiveness on mobile displays is so important.

No space for labels with multiple icons packed together. Tooltips help clear up confusion.

2. Always Represent Both the Icon Action and Object

To make your icon as intuitive as possible, always make sure that your icon represents both the action and object. First, you’ll need to pick a concrete object for the icon that most users can easily recognize. Then, you’ll need to design the object in a way that illustrates the icon’s action. A clever example of this is the image of a paper airplane for sending email. You have the paper that represents the email and the paper folded in the shape of an airplane that represents the act of sending.

Paper airplane icon shows a clear action and object.

3. Always Group Similar Icons Together

Icons that function similarly belong together. This way users can quickly and easily find all the options they need to complete their task. When icons are grouped, it’s difficult to label them individually lack due to the lack of space. But when you group similar icons together you can label each group to make their functions clearer. This not only makes groups of icons easier to scan, but it helps users understand the general function of all the different icons by sets instead of one by one.

Icons that share a similar function are labeled and grouped together.

4. Always Keep the Icon Order and Placement Consistent

Users don’t just rely on how an icon looks to understand its function. They also rely on the icon order and placement. One study found that it’s easy for users to adapt to a change in icon appearance, but far harder for them to adapt to a change in icon location. Their results suggest that the “location of the icon is more important than the visual imagery. People remember where things are, not what they look like” [1]. A change in icon location could make the user’s head spin. So find an ideal place for your icons and keep them there even when you redesign your interface.

Icon order and placement stay consistent despite design changes.

5. Always Give Your Icons a Common Visual Motif

Icons that share a common visual motif look and feel more together. If you have a set of icons on your interface that share a common visual motif, users can easily tell which icons are a family and which ones aren’t by the colors and styles they share. This helps them intuitively figure out which icons behave similarly. When you find a common visual motif for a set of icons, it’s important that you keep the motif consistent at every level.
An example of visual motif inconsistency is the strikethrough icon for text editors. Most editors represent the bold icon with a bolded ‘B’, the italics icon with an italicized ‘I’ and the underline icon with an underlined ‘U’. But the mistake that they make with the strikethrough icon is that they use a strikethrough on the letters ‘ABC’ instead of the letter ‘S’. This is visually inconsistent with the other text editing options and can confuse users. In fact, one study found that 100% of the users they tested understood the bold, italics and underline icons, but only 54.55% understood the strikethrough icon [2]. That difference is huge for a slight visual motif inconsistency.

The other icons follow a consistent visual motif. But the strikethrough icon breaks it by not using the letter ‘S’.

6. Avoid Using Icons for Abstract Actions

It’s better to use icons for concrete actions than abstract ones because with concrete actions you have clear objects to work with that similarly represent an action. With abstract actions you have to go out of your way to think of an object that is commonly associated with an action. When you finally think of one, you still run the risk of users interpreting it differently.
In the same study, they found that more than half of the users they tested didn’t understand the icons for ‘undo’ and ‘redo’ [2]. These abstract actions were represented with an arrow pointing to the left and right. These arrows can easily have multiple meanings to any user as they are commonly used for different actions on interfaces. Instead of just using arrows in this situation, it would have been better to use the ‘undo’ and ‘redo’ abbreviations ‘Un’ and ‘Re’ with a small arrow pointing back and forward. Arrows by themselves can have multiple meanings. But if you add a unique element that resembles the action, you’ll make the icon clear and intuitive.

Arrows alone can have multiple meanings. Adding ‘Un’ and ‘Re’ to them makes users think of the specific action.

7. Avoid Using Icon Images That are Too Metaphoric

There’s often a tendency to use metaphoric imagery on icons when images visually similar to an action aren’t obtainable. However, this can sometimes backfire if the metaphoric image isn’t closely associated with the action it represents. Using an image of scissors to represent the action ‘cut’ is easy to understand because most people associate scissors with cutting things. However, using an image of a chain link to represent hypertext linking is not as easy to understand because most people have not closely associated the two. The same study found that 64.71% of the users they tested did not understand the chain icon for hypertext linking [2].

Perhaps a better image choice for hypertext linking is one that follows the visual motif of the bold, italics and underline icons that 100% of the users understood in the study. The letter ‘L’ in the hypertext link style is an image that represents both the icon action and function. Naturally, the letter ‘L’ stands for linking. And to represent the function, the ‘L’ would look blue and have an underline. The underline icon also has an underline in it. But what distinguishes the link icon from that one is its blue color and unique letter. You can even make the underline in the link icon a pixel thicker to make it more distinct. This new approach to the link icon is clear, intuitive and miles away from using the image of a chain link.

People don’t associate a chain link with a web link. But they do associate the color blue and an underline with a web link.

8. Avoid Giving Your Icons Too Much Specific Detail

Most designers want their icons to look pretty. But some designers go overboard and give their icons too much specific detail. Sometimes it’s so specific that it looks more like a photo than an icon. If the icon looks too specific it can prevent users from understanding the icon’s general meaning. One article compares an image of a house in various levels of detail for the ‘home’ icon. When the house has too much detail, it starts to look like a photo of a specific house down the street. But when the house only displays the key characteristics that form the general concept of a house (i.e. roof, chimney, door), the house starts to look more like a ‘home’ icon [3]. A balance in detail is important in making your icons clear and intuitive. When you’re using a concrete object for your icon, only pick out the few common characteristics that all other objects like that share and omit the rest.

Rooftop, chimney and door are the only characteristics needed to tell users that the icon means ‘home’.

9. Avoid Using 3D Perspectives and Heavy Drop Shadows on Small Icons

Using 3D perspectives and heavy drop shadows on your icons can make them compelling, realistic and enhance visual communication. However, using them on small icons can make them muddy and confusing.

3D perspectives are best used on large or medium-sized icons because users can still interpret their perspective. However, when the icon is scaled to a small size, the accuracy of the perspective starts to fade away, and users find themselves looking at the icon at an unfamiliar angle. With small icons, use a flat, straight-on perspective so that users can recognize the icon through its distinct shape.

Heavy drop shadows on small icons can also confuse users. When your drop shadow is too heavy, it can make your icons unrealistic and murky. If your icon needs a shadow, reduce its size and make it tight. This way the shadow will slightly enhance the icon instead of interfering with its outlines and shape.

At small sizes, 3D perspectives and drop shadows make icons look less beautiful and confusing.

Conclusion

There are many benefits to using icons on your user interface. One big benefit is how they conserve the space of your controls. Another benefit is how they can make your controls more understandable across cultures. Most of all, icons can make your interface actions easier to learn and find. But your users won’t experience any of these benefits if your icons aren’t clear and intuitive. The first step in making your icons clear and intuitive is to know and follow these nine rules. The last step is to know when to break them.

< Vía: uxmovement.com