16/09/2013 - admin

Flat icons: avoiding semantic mistakes when creating them

avoiding semantic mistakes in flat icons   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. unified icons

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. icon integration

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. quora up and down votes icon

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. iOS7 notes and newstand icons

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.   phone icon

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. Charts 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. messages icon

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. AB-Testing 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. windows mobile vs google   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”

  1. mohiddinNo Gravatar
    November 25th

    Very very nice article about icons.most of the designers ignore this basic rules.

  2. Thanks a lot. keep tuned for more awesome articles.

Leave a Reply to admin