Blog: Secrets from the Chef

Designing an iconic language

Yegor GilyovAuthor: Yegor Gilyov
21 June 2007

Last fall I made a brief report at a conference organized by RusCHI and 1C in the context of celebrating the World Usability Day. I was talking about designing a user interface icon language. Following the “better later than never” principle, I hereby bring the same report to your attention in the form of text with illustrations.

Icon design is one of the main areas of activities of Turbomilk studio. We have produced literally thousands of icons so far. Our experience led us to formulating the following two rules-of-thumb:

  1. Before drawing an icon you need to elaborate its image very carefully.
  2. If you need to draw several icons, you need to think over images for the whole set of icons before proceeding with illustrating activities.

First rule is rather obvious, the second — may evoke some questions. However, our experience proves that ignoring this rule normally leads to a waste of time and sad outcomes. The surefire way of creating a set of icons falling apart along the way is to start generating icons one after another, in the alphabetic order, without looking ahead and with no clear vision of the whole picture. The opposite approach is what we call “designing an iconic language”. This method is described in details in the book by William Horton, “The Icon Book”. And now I will try to demonstrate you an example of what it is and how it is implemented.

The role of the guinea pig in our experiment will be played by a little made up application helping managers of small companies (similar to our studio) with sending invoices for the work performed.

The algorithm is simple: work is done, invoice is sent, money is received. We need to emphasize on the ability of the application to initially collect the information on work performed for a particular client with invoices generated later on, when the number of such jobs reaches a certain limit. Such scheme is closer to our real-life situation unlike what some similar programs are offering — restricting the records on work performed unless a respective invoice is already exists.

Here is the list of the main features of the application:

  • Invoices consist of lines.
  • The lines may represent records on services provided, goods sold and time worked.
  • A line may not be connected to an invoice. The line may be “free”, i.e. be “piled up”.
  • Normally a user will be storing the “free” lines in a “pile” in the process of performing work for clients and generating invoices based on the finished lines later on.
  • Invoices can be paid up in several installments.

Our next step is the list of all commands requiring icons. Please be patient. Icon design is a tedious work even on its preliminary stages.

Commands for managing the free lines:

  • Add line on service provided into pile
  • Add line on time worked into pile
  • Add line on product sold into pile
  • Delete line
  • Group (the selected) lines into invoice
  • Show (only) free lines
  • Show all lines

Commands for managing the invoices:

  • Add invoice
  • Delete invoice
  • Send invoice
  • Show unsent invoices
  • Show sent invoices
  • Show paid up invoices
  • Show all invoices

Commands for managing lines in invoices:

  • Add line on service provided into invoice
  • Add line on time worked into invoice
  • Add line on product sold into invoice
  • Move line from invoice into pile
  • Delete line completely

Commands for recording the money received:

  • Add payment
  • Delete payment

You must have noticed that the words in the list are color coded. This was done on purpose. The colors represent objects, actions, limiters and qualifiers. If we were patient enough and analyzed the commands’ integral parts properly, these parts would become the visual blocks for building icons fast and easy.

Objects:

  • line
  • invoice
  • payment

Limiters:

  • on service
  • on time worked
  • on product sold
  • tied up
  • free
  • unsent
  • sent
  • paid
  • all

Actions:

  • add
  • delete
  • group
  • show
  • send

Qualifiers:

  • from invoice
  • completely
  • into invoice
  • into pile

The next stage is the most creative. In the course of brainstorming we generate as many ideas for representing each element as possible.

Objects:

Objects

Limiters — line type:

Limiters - line type

Limiters — line status:

Limiters - line status

Limiters — invoice status:

Limiters - invoice status

Actions:

Actions

Qualifiers:

Qualifiers

Finally, we compose the needed icons based on the most promising results of brainstorming.

Icons for free line commands:

Icons for free line commands

Icons for invoice commands:

Icons for invoice commands

Icons for invoice line commands:

Icons for invoice line commands

Icons for incoming cash records:

Icons for incoming cash records

The unarguable advantage of this method lies in the ease of extending the set of icons once new functions appear in the application. Sometimes it just takes combining the existing elements, and sometimes new elements are required. Nevertheless the visual interface language remains integral and consistent provided the authors have enough will to stick to once approved rules of the visual grammar.

Terms of Use

These materials can be used for any purposes with obligatory indication of the author.

Comments

Good thinking here, guys. Normally when I tackle a big project the visual grammar evolves as I go, with the first icons getting occasional adjustments as later ones come together. But the object-action-limiter-qualifier construct is always there.

Reply iconmaster, 22 June 2007

Hi
I’ve been building up ideas for icons for a few years now, but not seen any info on good icon creations practice. It pleaseing to see that here are people out there who believe in good practice when building user interface’s.

Time & time again a see icons designs which mean little or nothing to the people using them.

Good job

Reply Tim, 12 August 2007

Very good article. thanks for sharing your know how!

Reply kaiser, 13 April 2008

I am only a beginner in icon designs and I couldn’t get a better start point.
Thanks a ton for sharing this article.

Reply vnayak, 6 June 2008

Leave a comment

You can log in with your twitter or facebook accounts. After authorisation on one of this sites, you'll be able to leave comments here.

Connect with Facebook

If you have an OpenID (for example myopenid.com), use it to authorise.

Log in with your Turbomilk account or register a new one.

Close