The problem with icons

November 2, 2009

First an admission; I really enjoy the creative process of designing icons, symbols and pictograms. As well as creating visual metaphors for advertising design and interface function, I’ve created some of the most widely recognised symbols on UK roads, for the channel tunnel, emergency vehicle recovery, the millennium dome and many other national landmarks and scenarios. Last year my company produced an award-winning interactive educational program for the Institute of Cancer Research that included dozens of pictograms, both as educational representations and to drive ancillary navigation. It’s true to say I have experience in this area and that I’m ostensibly ‘pro-icon’. It’s also no secret that clients like icons. These days nobody wants command-line procedures or verbiage extending beyond two words. Ever-diminishing attention span, cultural convergence, technological advances and the growth of the design industries as a whole has enabled proliferation of the application of image-orientated design and instruction, from simplistic icons to elaborate illustration.

Such widespread ubiquity has created new lexicons and dialects, with age, race, gender and culture all still playing a significant role in understanding, in additional to ‘human factors’ such as experience, precedent, expectation, aptitude and perception. If a successful logo design must include the ‘five qualities of good design’ (simple, memorable, timeless, versatile and appropriate) consider how, as part of a complex interface what additional qualities a functional icon must possess. Desktop operating systems such as Windows and OSX are the best exemplars of an extensively researched and developed, mature, icon-driven graphical user interface. Handheld systems such as Symbian and Android are required to operate in a different paradigm, and must additionally build on user’s understanding of established convention. Where this legacy is shortened we see success and where extended, failure. One highly significant aspect of the iPhone’s tremendous success and international acclaim is the usability of the device, most of which is manifest in the icon-driven interface.

Usability considerations

However, even greater challenge lies with common productivity-focused, commercial business/consumer software that depends on users instinctively understanding small pictures in order to achieve objectives and be productive. Huge requirements are placed upon even experienced users, often in pursuit of advancement. When Microsoft introduced a ‘Ribbon’ (essentially a tabbed hierarchical toolbar) in their Office 2007 suite there was widespread outrage among users, disgruntled at having to learn new conventions of interaction in pursuit of productivity gains. In less focused environments where user attention spans diminish and the desire for instant gratification grows, so do the demands. The challenges are significant.

Widely recognised as the world’s leading usability expert, Jacob Nielsen, has published some revealing excerpts from the icon design and development process for Sun Microsystems from over fifteen years ago. It’s fair to say that increased ubiquity of technology and interactive systems means users are now more sophisticated, but the central tenets still stand. If there are five constituent qualities for successful logo design, there are additional considerations of approach required for interactive imagery such as:

Standardisation – if widely established and effective, use it
Common recognition – what typical users might expect
Cultural parity – for a global user-base
Recognisable hierarchy – proceduraly ordered
Minimal legacy – where possible, build on standards

Yet this complexity is often not considered with interactive applications and everyday objects. Understandably, many clients for whom I design and build media-rich interactive applications don’t always appreciate the extent to which new users, with no necessarily inherent understanding of the functionality, will falter when presented with icons. There are ways to manage this however. If complex interaction or functionality is presented, for example in an educational program, a ‘selective hierarchy’ can be constructed to manage user’s anticipation and expectation. In other words, show users only what they need, and work from broad aims to specific objectives. This is a convention of interaction widely used in commercial software. Context is also important, but less predictable or reliable where non-linear access is a prominent feature of design.

Greater meaning, clearer message

Certainly there is something of a paradox here. The more intuitive an icon function is then typically the less complex it tends to be. However, as technology advances we require more complex instruction and information to be conveyed by a single graphic symbol, and to an extent technology is facilitating this. With faster processors, higher resolution, greater colour depth and GUI advances, icons are able to depict more information, more clearly. With bigger and more colourful icons, texture, shape, perspective and depth can be utilised through use of pseudo 3D styling, meaning more functional data is conveyed, both on cognitive and emotional levels. Even in smaller form on handheld devices, resolution is sufficient to display an embedded progress bar, or various states of activity through use of subtle colour change and animation. In essence, they are now much less like icons and more akin to pictograms; instead of a single representative image they are conveying narrative, albeit simple instruction. Apple has a long and distinguished history both as pioneer and leading developer of Human Computer Interaction; their HCI guidelines and in particular the section on icon design make for interesting reading.

Real-world failings


Purchasing a relatively straightforward telephone answering machine for the home, my decision was based on brand reputation, build quality, feature list and overall design. Economies of scale means sales staff are often poorly placed to advise on comparative ease of use, so this aspect rarely becomes a deal breaker. The image above shows the main unit control fascia (manufacturer name removed). The 6-way circular control works well, utilising standard, established icons for play and stop, and by extension next and previous. It also doubles as volume controller (not signified) but is fairly intuitive given our understanding of consumer electronic devices.

Consider though, the abysmal representation of core functionality in the four buttons highlighted. Simplified in the extreme, these icons do not correlate with expectation, nor are they intuitive or even representative. Users might be forgiven for assuming the first button is a volume control – it isn’t. Even uniformity of presentation is ignored. Where a simple icon could not be devised, the manufacturer has eschewed this in favour of an “R” button. What does this mean exactly – Record, Replay Rewind, Repeat Review, Redo or Retrieve? A couple of well-placed words with an icon would dramatically improve understanding. Whilst not aesthetically pleasing and incurring additional regional production costs, this approach is vital where real-world products lack meta-data instruction such as tool tips to guide users. There are of course separate issues of usability surrounding the use of words, given the complexity of language, but a combined approach no matter how succinct, certainly minimises uncertainty.

Plan, test, deploy

The key to successful deployment of an icon-driven interface, either real world or virtual is to simplify, and thus minimise uncertainty, and where sequential or divergent interaction is offered, chunk down into constituent tasks. The importance of wide user-testing cannot be overestimated, and is a vital process where icon interaction plays a fundamental role. In such a scenario, icons should be utilised only as part of a cohesive, consistent design strategy that enables viability in context, and presents advancement though ordered, meaningful dialogue.

copyright © Christopher Walsh 2009

%d bloggers like this: