5 Guidelines for Designing Better Icons
Are you having trouble choosing the right icon for a specific problem? Working with your developer to get the best possible result for your client? This article will give you an insight into principles, problem solving and collaboration required to come up with something that fits!
Guiding Principles
Icons are among the most important visual aspects of web design. The level of detail, style and application depend on a number of different things. I have recently been working on a number of websites that require very specific icons to communicate subtle metaphors.
This post will go through a recent example, where I was required to create a warning icon for a document error state. It will be a linear guide of my thought process and collaboration with the developer, but also touch on the following guiding stages:
- Understand the Problem
- Take a Holistic Approach
- Appreciate That Simple is Better
- Consider Context
- Understand Semiotics
This post isn’t supposed to be comprehensive, but will benefit you by walking through a real world example.
1. Understand the Problem
Sometimes you’ll be building your website from scratch and need to generate a number of icons to communicate certain things visually. Often you’ll have a request come in from a developer or client for a unique icon. The request in this example came from a developer. He needed an error state icon for a document. At first he suggested a dark page icon with an X behind it to be used in cases where a document type is not supported, or a document fails to load for some reason. He had something like this in mind:
Not bad right? I stripped it back a bit and sent this to him…
But, we agreed it needed to reference the document icon somehow since it was specifically for a document load error.
2. Take a Holistic Approach
We needed to consider the icon set as a whole, so we kicked a few other ideas around.
“What about the ‘alerts’ icon?”
we thought. But that was already in use for clinical alerts.
When dealing with a complete icon set it is important to have an understanding of the set of icons. Otherwise you might accidentally reuse a metaphor which has already been used somewhere else.
3. Appreciate That Simple is Better
Then we considered the document icon with a triangle around it:
This was just a suggestion from the dev, but experience told me that it was too complex. It made for an awkward metaphor that’s wasn’t communicating directly enough.
4. Consider Context
I next made the suggestion that we should use a big ‘X’ within a circle.
This wasn’t optimal either, as the message communicated was one of danger! It was probably way too over the top.
The lesson here is to consider the context of your icon. Colour and visual weight is an important way to communicate this. For example, red is traditionally used to warn people, whereas lighter colors like gray are more neutral and sub-communicate that everything is ok!
5. Understand Semiotics
Sub-communication is a semiotic language; something which is also eminent in typography.
For example, a decorative font sub-communicates a feminine character, whereas a hand drawn font may sub-communicate something more playful and child-like.
What are you trying to sub-communicate with your icon?
For example, with the document error icon I tried to recall error messages which subcommunicated in a way that didn’t create too much panic.
I remembered the error messages I’d get when my internet connection went down; they were perfect. Not too over the top, but subtly letting the user know something is wrong.
Definitely the right direction.
This last example from the Chrome browser was perfect for what I needed! Subtle, but letting the user know that something is wrong. Everything from the size of the icon to the grey colour used helps the user understand the severity of the problem, but is not so over the top as to cause panic.
The final icon created in this instance was simple, but also communicated the right message.
Conclusion
The art of using icons is something that needs a bit of experience and an eye for design, but it can be addressed by following certain principles such as those we’ve discussed. If your icon is too ambiguous, but the metaphor fits then consider using a label as a visual cue to help users identify the information. Thanks for reading, feel free to share your own icon design experiences in the comments!
