Flat icons: avoiding semantic mistakes when creating them
There’s no doubt that icons are an essential part of any website, and as one of the most important features, their function is to give a visual touch to a structure which, otherwise, would be plain text and lines. Icons are powerful visual tools that usually represent something out there in the real world; they are good at portraying and explaining things to new users -better than word do- and when they’re used correctly, they can transmit a message without requiring a lot of space. Images are easily recognizable, and the brain can process them faster than words; they reduce the amount of information the brain needs to deal with, thus making the process of icon creation a fundamental part of every website.
But during this creative process, the focus tends to be placed on how it looks, not on what it stands for; this leads to designing an incredibly beautiful icon, but not a very functional one. Flat design reduces this issue by getting rid of a lot of merely decorative things, and forces designers to synthesize the message in a very concrete junction of symbols. Nonetheless, even a flat icon has some mistakes, most of them related to semantics. With that in mind, the purpose of this article is to show you where these mistakes are and how to fix them to create great and meaningful flat icons.
The commons of a good icon
It’s not an easy task to identify whether an icon will work or not, but icon design tends to follow general web design trends; for example, when website layouts evolved from animated to skeuomorphic, and then became flat, icon design followed that course as well; that process ensures the necessary integration with the rest of the content and it allows good overall performance. But sometimes, another fact affects icon design, and that’s the personal choice of its creator, who decides which trend to follow; this can cause problems but, no matter what, there are a few universal features that apply to great icons, making them, of course, both visually and conceptually functional. For example
Icons need a visual unification
Which helps creating a more compelling website, ordering contents (and even highlighting it) and setting them as part of a group, not as a single entity. This can be achieved by using the same color scheme, fitting them into a specific shape or adding effects.
There has to be harmony with the rest of the website and its content
This can be achieved through the use of colors, shapes and styling with the purposes of contrasting –if the website has a photographic base– or integrating –if the overall design is based on flat elements–. When the purpose is contrasting, the icons tend to be navigational since they draw a lot of attention to them while the integration is more suited for websites with clear tones, which don’t need to catch the attention of the user and work as references or “lighters” for other type of content.
Making a conceptual impact...
It’s even more important than design itself. The icon needs to be easy to understand, meaningful, sturdy and simple. Good examples of conceptual impact are the up and down arrows that some websites and forums like Reddit or Quora have in order to give a hierarchy to every post; they imply movement and its presence is essential.
The misleading use of images in icons
Sometimes designers have a hard time integrating images while composing an icon, mainly because of the importance of the message it needs to communicate. When the designer fails in this task, the icon itself becomes useless or misleading. This happens because:
The designer is not skilled enough..
to identify and group different notions into a simple concept to put them into the icon. For example, the notions of the newsstand and notes icons in iOS7 have a tendency to be complicated and confusing. In this case, the designers assume users already own an iOS device, but new users will be lost for sure when they stumble upon these two apps.
The use of material things to represent behaviors
and motivate an action brings an innate issue, and it’s the consequential loss of meaning when such thing is replaced with an improved technological advance, which is going to be treated up next.
Iconic symbols and the problem with obsolete imagery
Looking back into the earlier times of computers, images acquired relevance and became necessary when operating systems started implementing graphics. In order to reduce the space taken by words, icons are perfect ways to indicate an action must be performed, and they are still relevant and very useful nowadays, not only for websites but for every kind of graphic interface. But time goes by, and 20 years later, a new generation of users arises. Younger generations, for example, know about the existence of 3.5-inch disks through computer history books, and the symbol we’ve always considered being an accurate representation of the action “save” is now obsolete. The “save” dilemma puts on the table a larger discussion: the importance of universal symbolism for user interfaces. This question in StackExchange, asked 2 years ago, has still been answered all over the internet and it gives us an insight of what’s been discussed. There are a lot of valid views, varying from funny examples about how a save icon should look, to those who are in favor of not changing it, and many more replies to a never-ending topic.
This discussion, as many others do, provides a hint of what not to do when designing flat icons like the ones we create for mobile devices, the use of any hardware reference is not recommendable because hardware tends to become obsolete over time. This video illustrates the point of obsolesce perfectly:
It also shows that younger generations are getting unaware of things we (the old ones) take for granted on a regular basis, like the usual phone icon; it is turning obsolete, and it’s generating, surprisingly, not that much controversy than the “save” feature, but that doesn’t make it less important. Nevertheless, the other side of the discussion has a good point too: future generations know for a fact what’s the purpose of that icon when you ask them, even though they do not know what object represents in real life. So in that way, the object represented became worthless, not its meaning. It somehow manages to leave its “physical state” to become a concept. It manages to transcend.
Improving the semantics of icons
When designing an icon, it is important to have in mind the message you want your audience to catch. It needs to be shown with a clear voice and using the simplest way to represent it. Some of the things you can do to improve the clarity of your message to use it in an icon is to:
Study and understand your target audience
This is important for a number of reasons, from getting to set the tone of your message to using the correct images for achieving the best results. For this, be sure to check and analyze your website data, who is visiting your website, and most importantly, which parts of your website have a low performance.
Image: Ricardo Salazar
Use universal concepts when designing your icons
This means it’s important to use images that don’t expire. The usual conversation bubbles are a great and simple way to illustrate any kind of messaging since it is used a universal symbol that may expire only if humans start communicating telepathically.
Perform an AB Test on your website..
or email campaign including icons, with different colors, styles and in different locations. This way you’ll know which icons give the best results. AB testing can be performed easily in, let’s say, your next newsletter campaign. Automated email delivery systems like Mailchimp allow the option to set a campaign and send it to two different groups with different layouts so you can analyze which icons to use and which ones to ignore.
Image via Wired
Icons need visual aids to fulfill a goal
This is very noticeable in the windows 8 user interface. There are no references at all that something is a button or an image. There’s no visual aid to know if there’s a call to action. You just tap, and hope something happens. However, this can be fixed by adding little shadows and other design elements to improve the recognition of a call to action.
Icons will change over time; there’s no doubt about it. But we have to start thinking in ways of making them universal. The first step is done, which was replacing text with images. Now we need to find the suitable meaning for those that can cause trouble over time. By having a universal standard for iconography, these issues might be reduced to styling, not meaning.
2 Responses to “Flat icons: avoiding semantic mistakes when creating them”