“I don’t care if you like the design! I want to know if you understand the meaning!”

That’s a phase I often use. It’s a modification of a quote by Antoine de Saint-Exupery in his famous book, The Little Prince, ”I don’t care if you like it! I want to know if you understand it!“

I use that phrase again and again because in the first place what we as designers have to keep in mind is that design is not art – art asks questions, whereas design should answer them. Design has an objective, a task, a purpose … Design is there to fill a need. 

We have to consider several things …

1st
Rely on recognition

I know designers love to be creative and innovative – but ask yourself: Is it absolutely necessary to reinvent the wheel. Use familiar icons that have become an industry standard. We all know that a little floppy disc icon is “save”; you can’t make that any easier or clearer. This remains true even though we no longer use floppy discs.

Even if it’s hard, we should accept if there’s a cultural agreement on what an icon means; the thing that inspired the icon doesn’t have to be around anymore – unless it’s absolutely necessary.

 

2nd
Keep it simple and Iconic

Keep icons clear, simple and easy. That means your icon should “say” what it means and mean what it “says”. If you’re uncertain as to whether your text is clear – test it with users or, at the very least, someone who is not part of your design team. If they don’t get it; go back to the drawing board.

While a level of realism can add interest to an icon design, it should not trump the icon’s ability to communicate simply and effectively. Icons should be simple. Icons always represent meanings and are like letters of an alphabet and behave like a language – they should always follow the same visual and grammatical rules. You should always ask yourself if your design is clear and easy and not too complicated. Be wary of placing too much detail and items into an icon or overly illustrating an icon. Icons should show unique characteristics of an action.

 

3rd
Design for the dimension

In a world of responsive design and highly diverse screen resolutions and sizes – smart watches, smartphones, phablets, tablets, laptops, desktop, interactive windows and boards – it’s tempting to design lush, detail-rich icons with a vector software like Adobe Illustrator, Concept Draw, SketchUp or Microsoft Visio. But that can easily backfire because what looks great when big will appear fuzzy when used for thumbnails. Ultimately you need an optimized design for each resolution. Using a vector software for the initial design, however, is an appropriate starting point. When you have your initial icon you have to clean it up in a raster graphics editing software like Adobe Photoshop, Gimp or Corel Photo-Paint.
There is, however, another way to do it. For SAP Fiori we use an icon font. The SAP icon font consists of scalable pictograms. The icons are essentially vector graphics. Thus, they can easily be resized without compromising their appearance.

 

4th
User experience factors in icon design

Regardless of whether you are designing for a small, manageable group of people or for an application that may be used by millions internationally, there are many things to consider in order to achieve a great user experience. When creating icons, experience, preferences, and cultural considerations are important. Symbols may differ for common elements that you may want to use for your designs.

 

 

Finally –  My special hint for designing an icon or deciding whether to use one at all

If it takes you more than a few seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate what you want it to.

 

 

 

 

Not logged in
  • Anonym  5 years ago

    I think that icons are overrated. If you follow these rules, use text over an icon. Take a look at the top of this page. I see Hello, Log out, Help, Contact us, a glass for search and a puppet-icon. I had to click this icon to see on the next page that My profile was written underneath the puppet-icon. Text instead of the icon would have helped me sooner.

    I think many (most of the) users prefer menu-item File and Save over the icon with the floppy disc.

    The application looks better with icons, but is more user friendly with text.

    • Holger Maassen   5 years ago

      Hi Marcel
      You are right – perhaps I wouldn’t say overrated but overused.
      But what you say is the essence of my article – wrote between the lines of the article.

      Part of the issue with icons is the speed with which we are developing new features. And there just a few well learned icons as the good old Floppy Disk for save or the ‘standard phone’ that looks like a phone handset that most of us haven’t touched in 20 years.