Professional Documents
Culture Documents
The Evolution of Icons: how computer icons have changed over 40 years
Sardjawati Suleiman
Student No: 04052484 15 August 2005
3. Icons for the computer interface ................................................................ 6 4. Theory of icon creation ................................................................................ 8
What is an icon and why use them in HCI? ...................................................... 9 Why do icons work? ......................................................................................... 10 Symbol and icon types ......................................................................................11 Computer interface, icons and metaphor ....................................................... 12 Metaphors in icon creation ............................................................................. 13 Icons as visual language ..................................................................................15 The evolution of icons in computer interfaces ................................................ 16
Appendix A: Abbreviations and acronym glossary .................................... 27 Appendix B: List of websites relating to icon creation............................... 28 Bibliography.................................................................................................... 28
List of Figures
Figure 1: Icons in context: this thesis seeks to focus on computer icons ....................... 2 Figure 2: oNLine System demonstration 1968: a hypertext system using a computer mouse (Wikipedia, 2005d photos used under Creative Commons License) 3 Figure 3: The original Xerox Star GUI, 1980, four years before the Macintosh (Wikipedia 2005d graphic used under Creative Commons License) ............ 4 Figure 4: From Mouse to Windows: time line of major developments relating to evolution of icons within GUI (based on Wichary, 2003) ................................. 5 Figure 5: OS market share as derived from Internet server access 2003, 2004, and 2005 to July (W3Schools 2005) ....................................................................... 6 Figure 6: The Icon Creation Wheel: a creative rubric for developing computer icons .... 7 Figure 7: Peircean Triad as applied to a Print icon (adapted from Barr et al 2003) .... 10 Figure 9: Ideas for metaphor use in creating icons by icon type .................................. 14 Figure 10: Examples of culturally dependent metaphor icons ...................................... 14 Figure 12: Maximum and Minimum icon resolutions for current major operating systems, 2005................................................................................................ 18 Figure 13: Macintosh OS X icons at varying colour depths and sizes ......................... 20 Figure 14: Example of materials: paper, plastic, metal and glass ................................ 21 Figure 15: Icons featuring multiple element compositions ........................................... 21 Figure 16: Summary of multiple recommended work ow ideas for icon creation (multiple sources) .......................................................................................... 22
The Evolution of Icons: how computer icons have changed over 40 years
Keywords: Computer icons, human computer interaction (HCI), graphical user interface (GUI)
Abstract This dissertation seeks to explain how computer icons have come to be so widely used in HCI over the past 40 years. It presents a simple rubric of icon creation in the hope that this will aid understanding of the complexities of creating better icons. The thesis demonstrates that although the WIMP-GUI model is seen as less than ideal, an estimated 90 per cent of computers use it. With no clear alternatives at present, icon technology has been improved signicantly over time and some early weaknesses have been at least partly alleviated. Icons are now ubiquitous parts of the interface for almost all computer users and have signicant advantages in making computers relatively easier to use, particularly for novices. This conrms theories from cognitive psychology that show how human use and understanding of iconlike symbols predates HCI. I briey introduce some of the concepts and ideas likely to be most useful for creators of icons. This is followed by key points on the technicalities, aesthetics, and practical creation processes needed in order to create icons that work. While the past success of icons is dened purely in terms of diffusion within the marketplace, they now form an integral part of modern HCI.
The Evolution of Icons: how computer icons have changed over 40 years
Figure 1 illustrates the focus of the dissertation. It refers to the broad issue of human computer interaction (HCI; see Appendix A for full list of abbreviations) and user interfaces (UI). The body of research relating to HCI is large, but the subset that refers to icons has surprisingly little cohesion, particularly in tracing their 30 years of historical evolution. The thesis begins by considering this history in the context of computer interface evolution, but then presents a four part rubric as a guide to how icons can be understood and efciently created.
Human needs
require
Tasks to be performed
making use of
making use of
COMPUTER ICONS
Computer tools
commonly using a
needing
The Evolution of Icons: how computer icons have changed over 40 years
1960s: command line interface Before GUI, keyboard input was the usual method of HCI, using a command line interface (CLI). Keyboard input is still used in even the latest GUI and advanced computer users still argue that CLI is the fastest and most efcient UI as interaction is so precise. Consequently, professional programmers often use CLI. Although different again, Archy, a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only the keyboard in order to speed interaction. However, CLI is difcult to learn. For all but the most basic operations, a user must learn commands, type them accurately, and interpret the computer response. This
Figure 2: oNLine System demonstration 1968: a hypertext system using a computer mouse (Wikipedia, 2005d photos used under Creative Commons License)
The Evolution of Icons: how computer icons have changed over 40 years
requires familiarity with a keyboard and high nger dexterity, creating difculties for novices, and the very young or elderly. As a result, before GUI, computers were used predominantly by experts, were difcult to commercialise, and were largely limited to text based operations. For these reasons other, more intuitive UI were sought.
1970s: a tale of the mouse In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used to click on words. Based on early work by Vannevar Bush (Wikipedia 2005c), this was one of the rst direct manipulation UI. The importance of this event for computing is so well recognised that it has been called the mother of all demonstrations (Wikipedia, 2005d). In 1970, the mouse was rened by Bill English at the Xerox PARC research labs, introducing the rollerball mechanism still common today. Led by Alan Kay, Xerox PARC went on to develop the rst GUI operating systems (OS) based on WIMP and the rst icons were born. This developed into the rst commercial GUI called Xerox Star (Figure 3). By the late 1970s, Apple had begun to adapt many Xerox PARC ideas for its own use (Pang 2001; Tuck 2001). For reasons of cost, Apple discarded some of the more sophisticated features of Xeroxs icons, such as names within icons and icons that
Figure 3: The original Xerox Star GUI, 1980, four years before the Macintosh (Wikipedia 2005d graphic used under Creative Commons License)
The Evolution of Icons: how computer icons have changed over 40 years
Amiga OS 3.5
NeXTSTEP
OS/2 2.0 Windows 3.1 Macintosh System 7 Windows 3.0 Windows 95 Mac OS 8
Windows 2000
Windows Vista
Windows XP Mac OS X
1960
Figure 4: From Mouse to Windows: time line of major developments relating to evolution of icons within GUI (based on Wichary, 2003)
changed state (Kay 1990; Smith, Irby et al 1982). Some of these features are only now beginning to reappear (see Section 11 below).
1980s: Apple introduces GUI Apple introduced its own icons in the Lisa computer in 1983, and rened them further for the Macintosh OS in 1984. This was the rst computer using a WIMP-GUI to nd enduring success. The rest, so to speak, is history. Microsoft Windows 1.0 appeared in 1985 using the same principles developed by Xerox, and over the next 30 years numerous other WIMP-GUI have come and, mostly, gone (see Figure 4; Wichary 2003; Tuck 2001).
2005: Which GUI do you use? Today, it is difcult to estimate the exact proportion of computers that use WIMP-GUI, but we do know which OS are used when browsing the Internet and it is reasonable to assume that the proportions are similar for all computers (see Figure 5). In mid-2005, more than 90 per cent of all computers used a version of Microsoft Windows and 3 per cent used Macintosh. A further 3.5 per cent used Linux, which, while less certain,
Sketchpad (Sutherland)
Mouse (Englebart)
Xerox Star
Xerox Alto
1965
1970
1975
1980
1985
1990
1995
2000
2005
The Evolution of Icons: how computer icons have changed over 40 years
100
80 % of internet users
60
40
20
0 2003
Windows
2004
Macintosh
Linux
2005
Unknown
Note: Windows includes WIndows XP, Windows 2000, Windows 98, Windows NT and Windows 95 Macintosh includes Mac OS 9 and Mac OS 10
Figure 5: OS market share as derived from Internet server access 2003, 2004, and 2005 to July (W3Schools 2005)
probably means the GNOME or KDE GUI, so in total around 96.5 per cent of all computers probably use WIMP-GUI today. The WIMP-GUI rst appeared over 40 years ago and its market dominance grew over the last 30 years. Today icons are common in interfaces for mobile phones, personal digital assistants (PDAs), MP3 players, digital cameras and so on. People learn to recognise and interact with icons from an early age (Moyes 1994). While some hope for an improved HCI solution, icon use is intuitive and, clearly, successful.
The Evolution of Icons: how computer icons have changed over 40 years
icons (see Appendix B for some examples). This is a change from the past when icons and symbols were mostly developed by in-house designers (Marcus 2003; Pezzoni and Chavis 1996). Today even Microsoft and Apple outsource some of this work to consultants. Icons have become increasingly sophisticated and their creation has become a specialisation. However, creating professional level icons requires a multidisciplinary expertise that covers aspects of HCI, user experience, graphic design, and ideally even knowledge of some cognitive psychology theory. Figure 6 presents a rubric for the icon creation process, seeking to cover all of the most important aspects from understanding the
Figure 6: The Icon Creation Wheel: a creative rubric for developing computer icons
The Evolution of Icons: how computer icons have changed over 40 years
theory to actually producing icons. It has four core elements: 1. Theory 2. Technical aspects 3. Aesthetics 4. Processes Each of these is considered in turn. Together they present a systematic method for icon creation.
The Evolution of Icons: how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time. Even in research proposing so-called post-WIMP solutions, icons or similar representative graphics (not always called icons) are often still proposed (van Dam, 1997). Icons are part of WIMP, but non-WIMP interfaces do not preclude an evolved form of icons.
What is an icon and why use them in HCI? It is debatable which came rst, computer icons or research into computer icons. Icons were certainly not just a brainstormed idea. Alan Kay, generally recognised as the originator of icons in GUI, did considerable study on how to make HCI as humane as possible: The work of Papert convinced me that [...] interface design [should be] intertwined with learning. Bruner convinced me that [...] it is best to learn something kinesthetically, then iconically, and nally the intuitive knowledge will be in place [to] allow the more powerful [...] symbolic processes to work. (Kay 1990: p. 195)
Kays goal, however, was simply to make his revolutionary interface as useful and as easy to learn as possible. He summarises this goal as: Doing with Images makes Symbols. (Kay 1990: p. 196, original capitalisation)
The interface that Kays team devised, and which he later helped to implement in the Macintosh, remains fundamentally unchanged today. A multitude of studies have later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI. While impossible to summarise all this work here, a little understanding can go a long way and the following areas provide signicant benecial understanding to anyone concerned with icon creation.
The Evolution of Icons: how computer icons have changed over 40 years
Why do icons work? Icons are, therefore, symbols, which leads us back to cognitive psychology and human understanding of, and afnity for, visual information. This is the eld of semiotics (Chandler 2002) which itself developed from the study of signs by Peirce (1931: in Barr et al 2003). Peirce described our understanding of symbols as three interacting relations that trigger semiosis to create meaning (Figure 7). The effect relation determines how users perceive the relation between the Object and the Interpretant (Barr et al 2003). Simultaneously, the representation relation requires the symbol to clearly convey the Objects meaning. Finally, the interpretation relation denes a users interaction with the representamen. A simplied explanation of this is that users should correctly perceive the meaning of an icon, the function it represents, and its perceived use. Again, Peirces work was mostly applied to computer icons in hindsight, but, whether knowingly or not, Susan Kare, the designer who created the rst icons for Macintosh and for Windows 3.0, summarises this theory when she says: An icon is successful if you can tell someone what it is once and they dont forget it. (Zuckerman 1996).
Figure 7: Peircean Triad as applied to a Print icon (adapted from Barr et al. 2003)
10
The Evolution of Icons: how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and, in doing so, full the succinct rule for success that Kare proposes.
Symbol and icon types In addition to this system of interpretation, Peirce developed numerous classications of signs, of which the following taxonomy is useful for icon creation: Iconic Signs represent meaning by resemblance. For example, a document icon visually resembles the document le it will represent when printed Indexical Signs represent function. For example, a printer toolbar icon represents the print function Symbolic Signs relate meaning purely through convention. For example, a triangle rotated 90 is widely recognised as Play, but only by convention. Furthermore, there are three commonly used icon types within WIMP-GUI and these can be related directly to Peirces taxonomy: Application icons: denote specic software programmes, and usually launch the programme by double clicking Toolbar icons: occur within software programmes (including the OS), on toolbars and in menus, and usually activate functions by single clicking Object icons or System icons: represent folders, documents, and objects other
Type of computer icon Application icon Examples Iconical Peirces taxonomy Indexical Symbolic Lo M M M Hi M Hi M Lo Toolbar icon Object icon
Key: Hi: highly appropriate M: moderately appropriate Lo: less appropriate Figure 8: Proposals for icon creation by type as related to Peirces taxonomy
11
The Evolution of Icons: how computer icons have changed over 40 years
than software programmes Understanding Peirces taxonomy provides a rough goal when creating icons of each type (Figure 8). Iconic symbols are less suitable for Application icons as these represent an intangible software function. Toolbar icons are most likely iconical (actual objects) or indexical (specic functions), but can also be symbolic (the undo command for instance). Object icons are generally tangible parts of the UI such as folders and therefore mostly recognisable iconical icons. These remain general ideas rather than rules, but are useful when conceptualising icons.
Computer interface, icons and metaphor Use of metaphors within the WIMP-GUI model form a major stream of research (see Draper 1996; Gentner and Nielson 1996; Hemenway 1982; Honeywell 1999b; Matsey 1996; Richards, Barker et al 1994; Rohrer 1995; Smilowitz 1996; Tarpey 2003). This is related to, but quite different from, using a metaphor when creating a symbol such as an icon (see below). Metaphors used in GUI are conceptual metaphors used to add a recognisable element to the UI for novice users. The so-called computer desktop is now a universal theme in modern GUI. Icons sit on top of this desktop and extend the metaphor by representing documents, folders, and waste paper baskets. Understandably, the computer desktop has been an easy target for criticism due to its over simplication (Gentner and Nielson 1996; Rohrer 1995). However, Kay (1990: pp. 199-202) dismissed the idea of this metaphor altogether. While a computer desktop may be a metaphor of a genuine desktop, Kay points out that the two are different entities simply employing the same label. A computer desktop is a far more powerful (or magic in Kays words) entity. He also notes: My main complaint is that metaphor is a poor metaphor for what needs to be done [through a computer interface]. (Kay 1990: p. 199)
This highlights a gap between post hoc research and the original HCI aims. Normans argument (1990; 2002) that any UI should be practically invisible, making apparent
12
The Evolution of Icons: how computer icons have changed over 40 years
only the task at hand, supports this view of UI metaphor research being diversionary. Draper (1996) also notes that metaphor merely acts on the users understanding of the interface: [Metaphors provide a] system for improving the guessability of a system by referring to its parts by names of entities in some other world [...] This can also be done in a command line language as well as in a mouse and icon interface. (Draper 1996)
The assumption is that users know a real desktop before they use an electronic one, but today, as computer use begins in primary school or before, that is not necessarily such a given assumption. As the WIMP-GUI is now so widely used and well tested, many of the original UI metaphors are taken for granted, and so take on their own meaning and, arguably, cease to be metaphors at all.
Metaphors in icon creation Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but not equivalent. Whether one accepts the desktop as a metaphor of a desk or simply as a computer term, using a postage stamp icon for an e-mail programme is undisputedly a metaphor for the applications function. Every user has a preexisting knowledge of real life objects and an innate understanding of signs and symbols, so using metaphors for icons leverages that knowledge. Both Apple and GNOME interface guidelines emphasise metaphor use for icons (Apple Computer 2005b; GNOME 2005), although Microsoft does not (Microsoft Corporation 2005). Apple advises: Take advantage of peoples knowledge of the world by using metaphors to convey concepts and features of your application. Metaphors are the building blocks in the users mental model of a task. Use metaphors that represent concrete, familiar ideas, and make the metaphors obvious. (Apple Computer 2005a)
13
The Evolution of Icons: how computer icons have changed over 40 years
Type of computer icon Application icon Examples of icon metaphors Metaphor Use M Lo Lo Key: Hi: highly appropriate M: moderately appropriate Lo: less appropriate Figure 9: Ideas for metaphor use in creating icons by icon type Toolbar icon Object icon
Metaphors are used for all icon types, and allow a greater range of design options particularly for application icons. They are less appropriate for toolbar and object icons since they could obscure understanding of function (Figure 9). However, Galitz (1997: p. 529) recommends traditional images rather than newer ones since they are more widely recognised. In this vein, modern GUIs have standardised some metaphors into established usage, for example the magnifying glass icon meaning search (Hicks 2004: p. 7; Marstall 2004). Use of metaphors can be problematic as many are culturally based and can cause confusion when software is used in international markets as most is nowadays. For example, Stop signs and post boxes (Figure 10) are different from country to country, although American versions are now so common in GUI that, again, they are widely understood. Metaphors based on body parts should be avoided so as not to cause offences (see Section 10). The American and Japanese ignorance of the British V sign is an example. In addition, metaphors can be needlessly obscure. In the Macintosh OS, users may not
14
The Evolution of Icons: how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also a metaphor). As Marstall (2004) points out, metaphors allow icons to encapsulate almost any idea and stimulates standardised visual language. Moreover, while some traditional users and HCI experts worry about the excessive use of icons, the use of metaphors, rather than more direct iconical symbols alone, can also add a level of visual enjoyment to the experience of using a computer.
Icons as visual language Icons are widely recognised and accepted in many forms of UI. Many have become standardised and so contribute to a new form of visual language that computer users now take for granted (Hurford 2004; Marcus, 2003). This too relates back to theory. Written Chinese, which also originates from pictures, demonstrates the human ability to read pictures with semantic meaning in the same way we interpret icons (Honeywell 1999a; Kurnianwan et al 2001; Marcus 2003: p. 40-2; Marstall 2004). Romanscript language readers use the left (analytical) side of their brains, while speakers of Chinese-based languages are said to use the right (artistic) side of their brain. A consequence of this is that signicantly fewer Chinese and Japanese suffer problems such as dyslexia because symbol recognition is more intuitive (Spaeth 2003). We naturally understand symbols and there are many systems that use them (see International Organization for Standardization, 2005). There are at least two examples of visual languages developed based on our ability to recognise symbols. They are Charles K. Blisss Blissymbolics and Yukio Otas LoCos (Lovers Communication System) (see Marcus, 2003). Both employ sets of symbols that have been successfully shown to aid communication across cultures and by people unable to use more complex writing systems. Symbols are naturally intuitive and pervasive in all societies and elds. It is natural, therefore that icons should have been successful as a means of HCI.
15
The Evolution of Icons: how computer icons have changed over 40 years
The evolution of icons in computer interfaces However, since the 1984 Macintosh, both WIMP-GUI and icon use have been criticised. This criticism suggests that icons are: Too difcult/abstract/obscure/small to understand Not colourful enough/too colourful Culturally based Irrelevant due to text labels Over the past 30 years, however, icons have evolved markedly. Wichary (2003) showed how icons changed and improved, solving some, though not all, of these criticisms. Figure 11 illustrates icon evolution after 1980, from simple, black and white symbols, to 128 x 128 pixel, fully photo-realistic, scalable graphics. Now that icon use is ubiquitous and so widely understood, arguably icon interaction is often transparent, progressing towards what Norman (1990) required as an invisible interface. By the recent high standards, any icon that is not immediately understood clearly fails in its purpose and there are still many such examples, but on the whole, icons are today much better than they were even ve years ago. Icons will continue to improve, partly as their creators better understand the concepts described here. In addition to some basic theory, icon creators need to understand technical, aesthetic principles and to have a clear path for icon development. These are discussed in the following sections.
16
Year 1-bit 1-bit 1-bit 1-bit 2-bit 1-bit 8-bit 4-bit 4-bit 4-bit 4-bit 8-bit 4-bit 8-bit 8-bit 4-bit 8-bit 24-bit 24-bit 32-bit 32-bit 8-bit 8-bit 8-bit Isometric Isometric Isometric Isometric Some isometric Isometric Isometric Isometric Some isometric Isometric, Front Front Front Some shading Some shadows, improved consistency Consistent use of shadows Highly consistent, 26 isometric slant Inconsistent, later 8-bit icons added Front Designed by Susan Kare Varied Varied Initially 1-bit, but colour introduced early on. Shading common Front Varied dimensions & states Front Highly inconsistent Front Many icons still in use Front Lisa used non-square pixels Front Document & folder icons still used today, icons change dependent on state of object represented
OS
Resolution
Colour
Transparency
Perspective
Comments
1981
Xerox Star
72 x 72
1983
Lisa
48 x 24
1984
Macintosh
32 x 32
1985
Windows
32 x 32
1985
Amiga
Various
1985
TOS`
32 x 32
1989
NeXTSTEP
48 x 48
1990
Windows 3.0
32 x 32
1991
Mac OS 7
32 x 32
1992
Windows 3.1
32 x 32
1993
OS/2 2.0
32 x 32
The Evolution of Icons: how computer icons have changed over 40 years
17
1994
Mac OS 8
32 x 32
1995
Windows 95
32 x 32
1996
Mac OS 8.5
32 x 32
1997
BeOS
32 x 32
Isometric grid non-symmetric, clear colour scheme used Mirror view of Mac OS 8 Heavy dithering Original designs, better shading Photo-realistic. Highly visible when scaled Clear colour scheme and strong icon design style Photo-realistic
1998
IRIX
Vector
1999
Amiga OS 3.5
48 x 48
2000
Windows 2000
32 x 32
2001
Max OS X
128 x 128
2001
Windows XP
48 x 48
2006
Windows Vista*
256 x 256
Note:
Figure 11: Evolution of icons (compiled and expanded from Wichary, 2003)
The Evolution of Icons: how computer icons have changed over 40 years
Mac OS X Min Application icons Toolbar icons Object icons 16 x 16 16 x 16 16 x 16 Max 128 x 128 32 x 32 128 x 128
Figure 12: Maximum and Minimum icon resolutions for current major operating systems, 2005
Icon size Icon size is determined by pixel resolution. This differs by OS and by icon type (see Figure 12), and it is important to understand how icon sizes change as users interact with the UI. If an icon is too small, for instance, it becomes difcult to use (Lee 2003). In addition, as monitor resolutions increase, actual icon size on screen is proportionately reduced. Until a UI is invented to replace WIMP entirely, icons will continue to increase in size as an aid to clarity, but creators need to be aware of current icon minimum and maximum required sizes.
Icon style and consistency Icons should form a clear role in HCI, going well beyond simply looking pretty. With the exception of some application icons, almost all icons are created in sets with similar style and it is essential that the style provides a high level of consistency in order to aid
18
The Evolution of Icons: how computer icons have changed over 40 years
understanding and memorisation. Icon consistency was rightly criticised in early GUI designs, but it has gradually improved. As part of this, the production of stock icons is becoming a major business, providing software developers with off the shelf icon sets featuring consistent style. Style and consistency is apparent in three factors laid out in OS guidelines, and icon creators endeavour to make all three aspects consistent throughout an icon set: Perspective, lighting, and shadows Colour use and transparency Materials, icon details, and composition Perspective, lighting and shadows The earliest icons were simple, two-dimensional graphics. Modern icons are usually isometric, with Microsoft even providing a specic isometric grid in its guidelines. Apple recommends that application icons appear to be sitting in front of the user on a desk, while toolbar icons appear to be on a shelf. Equally, isometric icons have a recommended lighting angle and corresponding use of shadows. Since the introduction of Mac OS X, photo-realistic icons have became common too. Such details allow for more easily recognised and memorised icons, but remain only guidelines, with many application icons created with different perspectives. Once again, consistency of style within a particular icon set should be the overall goal, although a set that is too removed from the general style of an OS would look out of place.
Colour use and transparency Used correctly, colour helps convey meaning and aid learning of icon functions (Galitz 1997: p. 528). Colour icons appeared at a surprisingly early date, but it is only with the advance in hardware capabilities that 32-bit (16.7 million colours) icons have appeared, allowing enhanced contrast, shadows and lighting. Recent icons also include 8-bit transparency to further dene icons in relation to the background. Again, consistency is
19
The Evolution of Icons: how computer icons have changed over 40 years
vital, and some guidelines recommend specic colour palettes (Microsoft Corporation 2005). There remains a major problem with colour, however. In all major UI, too much colour can be distracting, especially when an icon is shrunk, so icon creators need to produce a single icon in various sizes and colour depths. Figure 13 illustrates this problem. It shows a fairly complex, decorative icon for OS X in its 13 forms. As the colour depth and icon size decreases, it becomes progressively more difcult to see. For the best results, each icon must be prepared individually in each size and colour depth. However, with the exception of the smaller toolbar icons, current guidelines encourage icon creation to begin with the largest resolutions and highest bit depths. This can cause problems, so icon creators must be aware of how their designs look at smaller resolutions and be prepared to adjust them individually to improve readability.
Materials, icon details and composition Icons are becoming increasingly sophisticated in their graphic representation. Apple recommends that icons should be realistic. Windows XP guidelines suggest a simpler, slightly cartoon-ish nish. But, as a point of style, creators can choose appearances
20
The Evolution of Icons: how computer icons have changed over 40 years
based on any material such as glass, metal, wood and so on (Figure 14). In addition, icons are now large enough to include multiple elements. This offers the opportunity for metaphors and object realism, but, like colour, can become distracting and cluttered (see Figure 15). Hodgkinson and Bell (2000: p. 274) suggest a useful rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon. Again, simplicity and consistency are vital, with multiple elements only used where they clearly add to meaning and understanding (Horton 1996: p. 371-2; Galitz 1997: p. 524; Apple Computer 1996; PyrusMalus 2005).
21
The Evolution of Icons: how computer icons have changed over 40 years
Figure 16: Summary of recommended work ow ideas for icon creation (multiple sources)
elsewhere (GNOME 2005; Hicks 2004; Hodgkinson and Bell, 2000; Horton 1996; Iconfactory, 2005; Marstall 2005; McCown 2005; Pezzoni and Chavis 1996). These are summarised in Figure 16.
Preparation Perhaps because some experts consider it too obvious to include, Hicks (2004: 6-7) is the only reference that notes the importance of prior research and of studying existing
22
The Evolution of Icons: how computer icons have changed over 40 years
icons. A better understanding of existing icons helps with the initial brainstorming and concept drawings. At this point, the general design, scope, and composition of icons needs to be xed with the client.
Drawing The actual method for drawing icons depends largely on individual preference and choice of software tools, but the process shown in Figure 16 ts with that suggested by Apple, Microsoft and Hicks. Individual elements will each undergo the same process. After, ideally, receiving further feedback from the client, the designer can produce relevant resource les ready to be slotted into the software package.
User feedback: professional and practical Arguably, at this point we reach the most important stage: user testing and feedback. Something that has received much research attention (Eisen 1990; Christou and Jacob 2003; Moyes 1994; Seoul 1996). Recognised interface gurus are never shy of giving opinions about what is a good or bad icon (Gentner and Nielson 1996; Nielsen 1990; Raskin 2000: pp. 168-75), but, in the end, the users views are paramount. In addition to Kares show once, remember always rule (see page 10), if novice users can understand an icon, it will generally work well. One commentator even goes as far as saying: The [best] User Interface Guru is your mum. (Jones 2003)
For those lacking the testing budgets of large companies, this is excellent advice and a practice used by even famous designers on occasion. If beta users can safely interpret the icons and interact with them correctly, and the programmer is also happy, the nal icon versions can then be produced and an icon set is born.
23
The Evolution of Icons: how computer icons have changed over 40 years
24
The Evolution of Icons: how computer icons have changed over 40 years
11. Conclusion
Through the use of computers, icons have permeated our everyday lives. No longer just a tool for experts, computers appear in all kinds of electronic items, making difcult tasks easier and quicker. Since 1984, the Microsoft Windows and the Macintosh OS have become pervasive throughout personal computers, and both use WIMP-GUI, meaning that icons are now a standard feature of computer use everywhere. While WIMP-GUI continues to have its detractors, icons have become relatively sophisticated and, arguably, increasingly well designed. This thesis proposes a systematic rubric for the necessary knowledge for icon creation. There has been many previous studies of icons at a more micro level and practical guidelines for design are also common, but the detailed synopsis presented here is rather unique. Given greater space, a more detailed discussion of theory would be helpful for some, but at present, it is hoped that the rubric is practically useful.
Current and future development of icons Icons are a new visual language that has evolved in the age of new media. Although experts seek for a better solution, general users of GUI now accept icons as readily as they do road signs or even written words. Future generations will learn icons at an even earlier age and accept them with even less cognitive effort. In recent years, technical aspects of computer icons have advanced signicantly. Icons have become larger and more photo-realistic, and therefore capable of better expression of meaning. Icon creation has become more consistent and standardised even across different OS. This too is a process of learning that has occurred through the 40 years of history behind personal computing and GUI. As hardware becomes more powerful, ever more complex icon graphics become possible and as the market for PCs has concentrated into just a handful of OS, so marketing has promoted the standardisation of the GUI sometimes referred to as a process of being forced into a critical mass.
25
The Evolution of Icons: how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI. Indeed, it is signicant that advanced computer users often revert to keyboard input, spurning direct manipulation with the mouse wherever possible in order to speed up their interaction (Raskin 2000; Raskin 2005). Others may argue that a pretty interface may detract from completing the nal task at hand (as suggested by Norman, 1990; 2002). There is still, therefore, plenty of room for improvement in HCI, and icons too will continue to improve and develop, particularly, again, in terms of consistency and standardisation.
What will replace icons and when? Icons are a part of the WIMP model of GUI, but are often found in newer, experimental models too. At present, apart from some remaining CLI, there are no widely used UI to replace WIMP-GUI in the general market. Until one appears, icons will remain. Icons will, however, evolve. We can already envisage the use of 3-D and hologrammatic icons, although it is unlikely these would add signicantly to icon functionality. More important, many newer icons will change state, either through animation or replacement, to reect changes to the object they represent. These already exist in, for example, picture folder icons in Windows XP, or the iCal icon in Mac OS X. Looking further into the future, it is almost certain that computers will one day be controlled by voice or even thought alone, eventually removing the need for both the mouse and the keyboard. Further innovations, such as hologrammatic projection displays, may even reduce physical display sizes far below the current minimum. Even then, icons may survive as a means to represent data and objects. Such things remain largely in the realms of science ction for the present, but they are unlikely to stay there for too long. The humble computer icon that became known to the mass market back in 1984 is no longer a simple, 32 x 32 pixel, black and white graphic symbol. It is now full colour and large enough to be appreciated as a work of art. Icons will continue to evolve and remain part of our computing experience for many years to come.
26
The Evolution of Icons: how computer icons have changed over 40 years
27
The Evolution of Icons: how computer icons have changed over 40 years
Bibliography
Apple Computer (2005a) Human Inferface Design Principles. [http://developer.apple.com/ documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGHIDesign/chapter_ 4_section_2.html ] Accessed: 20 July 2005. Apple Computer (2005b) Introduction to Apple Human Interface Guidelines. [http://developer. apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIntro/ chapter_1_section_1.html#//apple_ref/doc/uid/TP30000894] Accessed: 20 July 2005. Barr, P., J. Noble and R. Biddle (2003). Icons R Icons. ACM International Conference Proceedings No. 36, Fourth Australian User Inferface Conference on User Interface,
28
The Evolution of Icons: how computer icons have changed over 40 years
Adelaide, Australia: 25-32. Chandler, Daniel (2002) Semiotics: the basics, London, Routledge. Christou, G. and R. J. K. Jacob (2003). Evaluating and Comparing Interaction Styles. Lecture Notes in Computer Science 2844 : 406-9. Draper, S. W. (1996) Interface Styles. [http://www.psy.gla.ac.uk/~steve/IntStyles.html] Accessed: 20 July 2005. Eisen, H. A. (1990). Iconer: A Tool for Evaluating Icons. SIGCHI Bulletin 21 (3) January: 23-5. Galitz, W. (1997). Create Meaningful Icons. in W. Galitz, The Essential Gide to User Interface Design. New York, Chichester, John Wiley: 521-39. Gentner, D. and J. Nielson (1996). The Anti-Mac Interface. Communications of the ACM 39 (8): 70-82. GNOME (2005) Gnome 1.0 Usability Project: Chapter 9. Icons. [http://developer.gnome.org/ projects/gup/hig/1.0/icons.html] Accessed: 20 July 2005. Grudin, J. (1990). The Computer Reaches Out: The Historical Continuity of Interface Design. CHI90 Proceedings, ACM: 261-8. Hemenway, K. (1982). Psychological Issues in the Use of Icons in Command Menus, Proceedings of the 1982 conference on Human factors in computing systems, Gaithersburg, Maryland: 20-3. Hicks, J. (2004). Creating Application Interface Icons. Design Inight 1 (2) October: 6-11. Hodgkinson, R. and D. Bell (2000) Bits & Pcs: Design Icons for Software Interfaces. [http:// www.techscribe.co.uk/ta/icons.htm] Accessed: July 2005. Honeywell, P. (1999a). Designing Icons for the Graphical User Interface. Digital Creativity 10 (2): 67-78. Honeywell, P. (1999b) Evaluating Appropriate Interface Metaphors. [http://w3icons.com/pdf/ EvaluatingInterface.pdf] Accessed: March 2005. Horton, W. (1996). Designing Icons and Visual Symbols. Conference on Human Factors in Computer systems, 1996, ACM: 371-2. Hurford, J. R. (2004). Human Uniqueness, Learned Symbols and Recursive Though. European Review 12 (4) October: 551-65. Iconfactory (2005) Getting Started with Icon Design. [http://www.iconfactory.com/developer. asp] Accessed: 20 July 2005. International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page. [http://www.iso.org/]. Accessed 1 August 2005. Jones, H. (2003) Great UI Design Lies. Kuro5hin 11 January [http://www.kuro5hin.org/story/2 003/1/10/44810/0235]. Accessed: July 2005. Kay, A. (1990). User Interface: A Personal View. in Brenda Laurel (ed.) The Art of Human Interface Design. Reading, Mass., Addison-Wesley: 191-207. Kurniawan, S. H. G., Ravindra S.Shih, Heloisa M. (2001). Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons. Proceedings of the HCI International 2001: Universal Access in HCI: Towards an Information Society for all, Mahwah, New Jersey: 367-71. Lee, J. (2003) We Could Just Start Carrying around Pictures of Saints or Something. [http:// sediment.semifat.net/entry/2003/07/08-175509.html] Accessed: 20 July 2005. Mandelkern, D. (1993). Guis: The Next Generation. Communications of the ACM 36 (4): 3640. Marstall, J. (2004) A Word Wrapped in Light. [http://www.rewheeldesign.com/sparkplug/ articles/] Accessed: 10 May 2005.
29
The Evolution of Icons: how computer icons have changed over 40 years
Marstall, J. (2005) The Icon Canvas. [http://www.iconmaster.com/tutorials2.php] Accessed: 20 July 2005. Matsey, G. (1996) Icon Development. [http://www.acm.org/chapters/trichi/newsletters/aug96/ icon.html] Accessed: 20 July 2005. McCown, M. (2005) How to Make an Icon. [http://www.railheaddesign.com/downloads/ various/How_To_Make_An_Icon.sit] Accessed: 20 July 2005. Microsoft Corporation (2005) Creating Windows Xp Icons. [http://msdn.microsoft.com/ library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp] Accessed: 20 July 2005.Marcus, A. (2003). Icons, Symbols, and Signs: Visible Languages to Facilitate Communication. Interactions. 10: 37-43. McCormack, J. (2002). Evolving for the Audience. International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds): 14. Moyes, J. (1994). When Users Do and Dont Rely on Icon Shape. CHI 94, Boston, MA, ACM: 283-4. Negroponte, N. (1990). The Noticeable Difference. in Brenda Laurel (ed.) The Art of HumanComputer Inferface Design. Reading, Mass., Addison-Wesley: 245-6. Nielsen, J. (1990). Designing User Interfaces for International Use. Amsterdam, Netherlands, Elsevier. Norman, D. A. (1990). Why Interfaces Dont Work. in Brenda Laurel (ed.) The Art of HumanComputer Inferface Design. Reading, Mass., Addison-Wesley: 209-19. Norman, D. A. (2002). The Design of Everyday Things. New York, NY, Basic Books. Pang, A. S. K. (2001) Of Mice and Zen: Product Design and Invisible Innovation in the Apple Mouse, Green Library, Stanford University [http://instruct1.cit.cornell.edu/courses/ sts355/micezen.pdf]. Peirce, C. S. (1931). Collected Papers. Cambridge, Mass., Harvard University Press. Pezzoni, M. J. and J. C. Chavis (1996). Icon Development at Sas Institute from a DesignersPerspective. Visual Communication: Society for Technical Communication [http://www.stc.org/confproceed/1996/PDFs/PG424428.PDF] PyrusMalus (2005) Designing Icons: If a Picture Is Worth a Thousand Words, How Many Is an Icon Worth? [http://www.pyrusmalus.com/] Accessed: 20 July 2005. Raskin, J. (2000). The Humane Interface: New Directions for Designing Interactive Systems. Boston, Addison-Wesley. Raskin, J. (2005). About Archy. [http://rchi.raskincenter.org/aboutrchi/index.php] Accessed: 20 July 2005. Richards, S., P. Barker, A. Banerji, C. Lamont and K. Manji (1994) The Use of Metaphors in Iconic Interface Design. [http://www.intellectbooks.com/iconic/metaphor/metaphor. htm] Accessed: May 2005. Rohrer, T. (1995) Metaphors We Compute By: Bringing Magic into Interface Design. [http:// philosophy.uoregon.edu/metaphor/gui4web.htm ] Accessed: May 2005. Seoul, Y. E.. (1996) A Study on the Icon Design Process in the Environment of Multimedia. [http://www.idemployee.id.tue.nl/g.w.m.rauterberg/conferences/CD_doNotOpen/ADC/ nal_paper/428.pdf] Accessed: 20 July 2005. Shneiderman, B. (1982). The Future of Interactive Systems and the Emergence of Direct Manipulation. Behavior and Information Technology 1 : 237-54. Smilowitz, E. D. (1996) Do Metaphors Make Web Browsers Easier to Use? [http://www. baddesigns.com/mswebcnf.htm] Accessed: March 2005. Smith, D. C., C. Irby and R. Kimball (1982). The Star User Inferface: An Overview. AFIPS 1982 National Computer Conference: 515-28.
30
The Evolution of Icons: how computer icons have changed over 40 years
Spaeth, A. (2003). Minds at Risk. Time. 1 September. [http://www.time.com/time/asia/ magazine/printout/0,13675,501030908-480333,00.html] Sutherland, I. E. (2003) Sketchpad: A Man-Machine Graphical Communication System, Computer Laboratory, Cambridge University. Tarpey, A. M. (2003) Logos, Icons, and Metaphors. [http://www.ischool.utexas.edu/~atarpey/ ResearchPaper/introduction.html] Accessed: December 2004. Tuck, M. (2001) The Real History of the Gui. [http://www.sitepoint.com/] Accessed: May 2005. van Dam, A. (1997). Post Wimp Interfaces. Communications of the ACM 40 (2): 63-7. W3Schools (2005) Browser Statistics [http://www.w3schools.com/browsers/browsers_stats. asp]. Accessed 1 August 2005. Wichary, M. (2003) One Thousand Square Pixels of Canvas. [http://www.aresluna.org/ guidebook/articles/onethousandsquarepixelsofcanvas] Accessed: 20 July 2005. Wikipedia (2005a) Icon (Disambiguation). [http://en.wikipedia.org/wiki/Icon_ %28disambiguation%29] Accessed: 20 July 2005. Wikipedia (2005c) Vannevar Bush. [http://en.wikipedia.org/wiki/Vannevar_Bush] Accessed: 16 July 2005. Wikipedia (2005d) oNLine System. [http://en.wikipedia.org/wiki/Image:On_Line_System_ FJCC_1968.jpg] Accessed: July 2005. Wikipedia (2005e) Xerox Star Desktop. [http://en.wikipedia.org/wiki/Image:Xerox_star_ desktop.jpg] Accessed July 2005. Zanino, M. C., R. Agarwal and J. Prasad (1994). Graphical User Interfaces and Ease of Use: Some Myths Examined. SIGCPR 94, Alexandria, Virginia, ACM: 142-54. Zuckerman, L. (1996). The Designer Who Made the Mac Smile. New York Times. New York.
31