Design Research / Article 2. First Published in June 2007, HCI Vistas Vol-III Author: Dr. Dinesh Katre

The icons or baby faces used as part of user interface have now turned into a major aspect of product branding. With powerful computers, enhanced graphics capabilities, advanced tools for illustration, and professionals to advocate rich user experience, icon design has become more important and complex than ever before! Windows Vista has raised the standard of quality icons even higher. An interface design project forced me to think about ’style’ in icon design. It raised some basic questions in my mind.

Stylish icons for product branding

Just a month ago, one of my teams got involved in an icon design assignment for a fairly complex telemedicine software product. It needed large number of icons to be created in just one-month duration. So less time! The product manager was keen on introducing stylized icons for unique branding of the product. Smart move! A designer from my team sketched wonderful icons with stylized shapes and forms. Visual semantics and comprehension of associated propositions (the messages) were discussed and various alternatives for each icon were evaluated. The style was approved. Basic guidelines were evolved collectively. Actual rendering activity began.

Short delivery schedule > Team effort > Inconsistency in the style of icons

The concepts to be depicted through icons were pretty complex too. We had to study the software features, requirements of users and developers within this time. Very short time was left for activities like conceptualization, sketching of alternatives, design, rendering, testing, fine tuning, sizing, converting to required formats .

After a few days while reviewing the progress, it was noticed that icons were good but slightly different in terms of the style. After much handholding, discussions and redoing, the job was completed. I realized that the designers were capable of designing good icons, but it was tough to maintain the consistency of style. The broad style guidelines were not helping beyond a limit. It wasn’t enough. Some more detailing was essential. Therefore I thought of working on the style attributes of icon design. The user interface design teams in other companies might have already faced such problems.

Gestalt psychology (e.g. law of similarity) can explain how we perceive the style in icon design. Try out a small experiment described in figure 1.

Figure 1. One can observe different levels of realism, color tints and rendering styles in the icons shown above. The lower box has many icons with different styles. Readers can try to identify the icons that belong to respective groups (A or B) presented above.

Let us now try and find answers to the basic questions pertaining to style in icon design.

• What is meant by style in icon design?

  The style is perceived through a consistent pattern / similarity of visual attributes visible in a group of icons. You need a group of icons to establish the style. As shown in figure 1, it is obvious that icon 1 belongs to group A and icon 5 belongs to group B.

  The list of attributes presented below should enable the team of designers in observing and understanding the stylistic attributes of icons.

• Which are the stylistic attributes of icons?
  

  I could think of 30 different attributes and each one having many sub-opitions. More are possible. Looks pretty large in number . But you can’t close your eyes on them. The style atributes applicable in our icon design project are indicated.

• How do we identify the stylistically misfit icons?

  A good designer follows the style guidelines quite intuitively. Many times user and designer both may not be able to spell out the reason but they can quickly identify an inconsistency or a misfit icon. Our eyes can quickly notice the odd icon. We can immediately sense the deviation in styling or change in the visual pattern.

At times, one has to change the style on purpose to make certain icons prominently noticeable. Don’t ever forget this!

• Why does this happen despite the guidelines?

  It is primarily because of human factors. Every designer is born with different proficiencies and limitations in terms of visualization and drawing capabilities. Individual drawing/rendering skills, perceptions, judgments and color preferences are different. The understanding, interpretation and implementation of guidelines can also defer from person to person. One may conveniently think that with less amount of style it should be easy to distribute the work among many designers..

But style-less icons are likely to lose their identity in the crowd
of applications. Software products designed using borrowed icons
(from shareware collections or other products) have no style
of their own. It weakens the branding theme.

• What are the possible ways to overcome problems related to style of icons?

1. Create sample icons which are representative of the complexity and overall range of icons required for the project. These icons should be best rendered and acceptable in terms of desired quality and style.

2. Define style guidelines (all attributes shown above as applicable) based on sample icon designs.

3. Sensitize the entire design team to understand the style sensitive attributes of icon design. Help them notice and feel each attribute of the style.

4. Select the designers whose style of designing/rendering is naturally similar.

5. Lead designer(s) to sketch and compose all icons before they get rendered.

6. Lead designer to monitor and guide the rendering (This is similar to the model of key animators and in-between artists followed in animation field).

7. Review the stylistic aspects as per the guidelines.

8. Ask users / designers / developers to identify the misfit icons in terms of style.
Proper definition of style attributes can be helpful in evaluating the consistency of style.

9. Refine.

There is another big advantage in documenting detailed style guidelines. It helps in expressing the complexity of icon design activity to developers. Many developers consider ‘icon design’ as a trivial activity.

‘Small icons, must be very easy’ is what they think.
It is software cosmetics afterall !

They won’t offer sufficient space, time, resources and freedom to interface designers.
But one must appreciate the fact that without good icons you are designing a faceless software!
What it can contribute to usability is another topic.
And a faceless product can’t stand the competition.

I had experimented with remote usability testing of icons and a paper is already published in 2004. It touches upon several aspects related to comprehension of icons. While searching on the web, I came across some useful links on icon style guidelines. My paper and the links are provided below.

Download
Katre D. S. (2004). Experimenting with UniFace: A Tool for Remote Usability Testing of Icons, ACM-SIGCHI-SI National Usability Conference Easy 2004, Bangalore, India.

References

Windows Vista Icon Development Guidelines
What’s New with Windows Vista„¢ Icons?
Windows Vista Icons : The Prototypes
Apple HCI Guidelines: Icon Genre and Families
Icon Theme Guidelines
Pictogram Design

Dr. Dinesh Katre presently heads the National Multimedia Resource Centre of C-DAC, Pune, India. He is the principle designer of many software products that deal with digital library, cultural informatics, e-learning, multimedia authoring and computer game design. He has special interest in the cognitive study of technology users and behavioral design of products. Journal of HCI Vistas is his community building initiative. It is meant to promote research oriented, multi-disciplinary thinking in the field of Human-Computer Interaction in India. This e-publication is open for usability practitioners and UX designers to publish short articles.

© Copyright 2007-2008