With the ever increasing popularity of mobile devices, widgets and gadgets there has also been a proliferation of icons. This is also due to the fact that the quality and resolution of displays, even in small devices, has increased considerably.
Computer icons have existed for a very long time. They were first developed as a tool for making computer interfaces easier for novices to understand in the 1970s at Xerox Palo Alto Research Centre. Icon-driven user interfaces were later made popular by the Apple Macintosh and Microsoft Windows operating systems.
So what is an ‘Icon’. It is not a religious image as the term created by the ancient Greeks, was coined.
In computing, an Icon is an image, picture, or symbol representing a concept. They started out as small 16×16 pixels in size and only in black and white or green and black. Today they can be of any size up to 512×512 pixels and in millions of colours.
Is a picture worth a thousand words?
When I was a student at the University of Kent in Canterbury studying Computer Science in the last 80’, I had just started understanding HCI (Human-Computer Interaction) concepts. Back then personal computers were just starting to become available. The focus was on the ’technology’ that was constantly evolving and less about the ‘user’.
I was fortunate as a research fellow at Canterbury to go to a weeklong summer conference on User Interfaces in Scandinavia in 1989 and I jumped at the opportunity. There were over 500 attendees students and practitioners. Speakers such as James D. Foley and Andy van Dam, Ben Shneiderman, Brian W Kernigham (C) and Alan Cooper (Visual Basic) to name but a few. From diverse backgrounds, MIT and numerous cognitive science/ HCI departments of US and European universities.
It was the one event that changed my whole prospective on Computing. I realised the speakers were talking the same language I was trying to, in the software industry, and have been ever since, that the ‘User’ needs to be at the centre of the design process. This is important when designing User Interfaces not only for computer software but for any consumer product.
During the breakout periods we were set a task to design some meaningful icons. In those days applications had just started to have one level of Undo and Redo so no icons had been designed let alone standardised. In fact I had not yet seen or used an application that had such a feature.
The only tools we were handed were a piece of engineering paper and a pencil. My icons were chosen and later I used them in commercial products I designed in the early 90s. That experience taught me an important HCI lesson I have never forgotten. Although it is true that in certain circumstances ‘a picture may be worth many words’ it is also true that a badly designed image is ‘worth less than a word’. However if well designed, you can with a blob of pixels, represent a task, feature or tool.
This diagram shows my original design for Undo and Redo. Obviously it was language dependent but if you compare it to what we are use to using today (*), with no labels can you tell, without thinking, which is which?
When is an icon out of date?
An icon should not date. Like all pictorial symbols that have to follow basic rules such as clean, simple, easy to read and meaningful… Computer icons should not be tied to something that is transitory like the hardware we store computer data on. The classic MS Save icon is out of date. Try explaining to a child today why the save icon looks like something they have never seen or heard of before. You will be met by ‘What is a floppy disk?’. And even if you can find a dusty box somewhere in the garage or loft/attic it is not really worth explaining.
The issue is that icons should not be based on a computer storage medium because it was known to be evolving, so bound to change. Which is why the Open and Save icons in gDoc Fusion instead use a similar metaphor for Save as it does for Open…
Mixing Text and Icons
There is nothing wrong in combining Text with Icons. Not everyone relates to images in the same way. Some of us relate to words better then images and vice versa. A combination of even one word and a well designed image can mean ‘more than a thousand words’ and appeal to a wider user base.
This leads me to another useful design technique for icons I have found through observations in usability labs; to help make applications easier to approach by users. In gDoc Fusion, unlike other applications, instead of a blank screen users are presented with the ‘welcome screen’. This demonstrates a way of using Icons as representations of ‘Views’ on the world of ‘Documents’.
This not only makes gDoc Fusion easier to access by being less daunting for novice users but also encourages a way of approaching common document tasks.
One of my driving principles in User Interfaces design, ‘making the users life easier’.
