GUIdebook: Graphical User Interface galleryHome > Books > “The icon book”
GUIsTimelinesScreenshotsIconsSoundsSplashesApplicationsAdsVideosArticlesBooksTutorialsExtras
Go backBooksThe icon book

“The icon book” front cover
This image can be zoomed
William Horton
The icon book
Visual symbols for computer systems and documentation

John Wiley & Sons, 1994
432 pages
ISBN: 0-4715-9901-8

A very good book, explaining in depth all things iconic: from history and theory of the icon design, through various classifications of icons, to development and testing. Hundreds of icons serve as an example in the book and on the attached diskette (650 KB). What’s impressive is that they are not just lifted from various GUIs, but drawn by author especially for this occassion (however, the book also contains various real life case studies). Impressive and inspiring, even 10 years after the publish date.
Buy at Amazon.com

Back cover blurb

The following paragraphs are quoted verbatim from the back cover:

User-interface icons are much more than on-screen decorations. Icons play an integral role in enhancing end-user productivity and an application’s overall success. Written by a seasoned design professional, The Icon Book presents clear, step-by-step guidelines for designing instantly recognizable, fully understandable, and reliably memorable computer icons and icon sets for domestic and international use. You’ll find heavily illustrated, research-based accounts on every aspect of the icon design process – from initial planning to refining and testing techniques – plus real-world insights for avoiding problems that can occur in translation to international markets. The Icon Book:
Presents strategies and methods for encoding meaning in icons, developing iconic languages and a consistent design style, using color and other design tools, and achieving management goals
Offers suggestions for representing complex, “unpicturable” concepts and indicates when not to use icons
Includes a comprehensive icon glossary
A valuable resource for user-interface designers, developers, programmers, computer-based trainers, graphic and multimedia designers, and technical writers

William Horton is President of William Horton Consulting and the author of several books, including Illustrating Computer Documentation and Designing and Writing Online Documentation.

Contents

1. Icons in perspective1
What are icons?2
Why use icons? 3
To help users work smarter3
To represent visual and spatial concepts
To save space4
To speed search4
For immediate recognition5
For better recall5
So users do not have to read 5
To help interfaces go global6
The ancestry of icons7
Cave drawings and petroglyphs7
Pictographic languages 7
Folk art8
Esoteric and occult symbols 9
Marks of ownership9
Travel signs10
Interstellar greetings11
Designed iconic languages11
Icons totally replace words14
Icons are no better than words14
Icons make products easier to use15
Icons must be perfectly obvious15
Icons are pictures15
Designing icons is pure art16
For more information16
2. How icons work17
What people do with icons18
Decode an icon18
Recognize an icon19
Search for an icon20
Activate an icon20
How people process visual images 21
Naive model of visual processing21
Richer model of visual processing21
Where does meaning come from?22
Context contributes to meaning23
The user’s mind completes meaning25
One icon can have multiple meanings27
How does the user react to the icon? 29
The message30
Enablers30
Noise31
What are we designers to do?31
For more information32
3. Representing ideas graphically33
The subject directly34
Subject itself34
Action being performed35
Person experiencing emotion35
A related or associated object 37
Logical analogies37
Metaphors and figures of image42
Conventions45
Textual identifiers47
Initials and punctuation marks48
Math symbols49
Labels50
Identifying trait50
Spatial arrangement51
Spatial mapping51
Spatial analogy51
Spatial grouping54
Geometric elements and properties56
Graphical elements57
Graphical properties61
Dynamic characteristics69
Arbitrary object73
For more information73
4. Showing relationshops75
Showing similarity76
Cluster the objects76
Connect the objects76
Box the objects77
Use similar graphical properties78
Arrange in a pattern78
Summary: Showing similarity80
Showing difference80
Separate by blank space81
Separate with rules and lines81
Vary more graphical properties82
Increase the difference82
Juxtapose opposites83
Summary: Showing difference84
Showing importance84
Show the object in motion 85
Heighten contrast 85
Use brighter colors86
Enlarge the object 87
Give the object a distinctive shape87
Point to the object88
Frame the object88
Put the object in front89
Increase detail in the object89
Put the object in a position of power90
Summary: Showing importance90
Showing depth92
Overlap92
Scale94
Elevation95
Shade and shadow96
Linear perspective97
Aerial perspective98
Color perspective98
Summary: Showing depth 99
Showing changes or motion100
Arrows 100
Speed lines 102
Shake lines 103
Ghost images 104
Sequence of snapshots 105
Posture of action 106
Pregnant moment107
Summary: Showing changes or motion 108
For more information108
5. Designing an iconic language111
Why a language?112
What is an iconic language?112
List concepts115
Design basic symbols for vocabulary116
Actions 116
Objects118
Qualifiers of actions 118
Limiters of objects 119
Relationships among objects120
States of being 121
Identifiers122
Set up rules for combining symbols124
Antithesis125
Addition 126
Overlap127
Specification 128
Arrange the display131
Group icons 132
Position icons132
Make organization clear133
For more information 136
6. Drawing icons137
Draw with appropriate realism and detail138
Photographic realism 138
Simplified drawing140
Caricature141
Outline142
Silhouette143
Make objects recognizable144
Use characteristic viewpoint144
Exaggerate crucial concepts145
Use depth effects consistently 145
Cast consistent shadows 148
Design for the screen151
Beware of jaggies151
Fatten diagonal lines 154
Positive or negative contrast?154
Flat or 3D ink?155
Arranging the objects156
Balance156
Symmetry158
Stability158
Vary the image160
Various numbers of colors 160
Various sizes 160
Different styles160
Draw on a grid-template161
For more information162
7. Color in icons163
Rule one: Design in black and white first164
Use color redundantly164
Select robust color combinations 165
Decide why you are using color166
To direct attention 167
To speed search 168
To aid recognition 169
To show organization170
To rate or quantify171
To represent color itself172
To attract and please users 173
To reinforce or arouse emotions175
Choosing colors176
Use as few colors as you can176
Rely on learned associations 176
Pick harmonious colors178
Pick colors systematically179
Avoid common problems180
Ensure legibility 180
Do not distract viewers 181
Compensate for color blindness181
For more information182
8. Standard parts of the icon183
Borders184
Should you use a border?184
Drawing the border 186
Controlling interaction between image and border192
Background193
Emphasize the image193
Express a message 195
Group and classify195
Show status 196
Labels196
Typography 196
Writing style198
Timing 200
Location201
Size and shape of the icon 204
The size205
What shape should an icon be?209
Typical sizes and shapes210
Test210
Sizes and clearances 211
For more information 212
9. Icons for specific purposes213
Program identifier214
Data file216
Command selector218
Window and field controls219
Mode signal or toggle switch221
Status indicator222
Change display to show condition 222
Vary details to show status223
Vary visual properties to show display characteristics223
Activity indicator224
Value or progress indicator224
Cursor226
Shape for the task 226
Point precisely227
Give feedback228
Movement control in a display233
Movement along a sequence233
Movement in two dimensions234
Movement in three dimensions235
Movement coordination236
Mouse action237
Button press238
Keyboard shortcuts for menu actions238
On-screen synonyms for keyboard actions239
For more information240
10. Icons for international products241
Emphasize icons242
Remove or translate text242
Words and abbreviations242
Letters243
Punctuation marks244
Avoid culture-specific symbols244
Puns and verbal analogies244
Gestures245
Mythological and religious symbols246
Animals246
Colors247
Body parts248
Provincialism249
Consider reading and scanning direction249
Showing text250
Implying order or sequence250
Implying value or virtue251
Solutions251
Generalize images252
Suppress unimportant details253
Show generic people253
Take care with hands254
Show the best-known version256
Mix several versions257
Use abstract symbols 257
Create international symbols258
Natural features 258
Modes of transportation258
Sports and games259
Consumer goods259
Office implements260
World news260
Communication media260
Science and technology261
Other professions261
Body language262
Use international signs262
Translate labels262
Leave room for translation263
Write labels for reliable translation263
Select qualified translators264
Consider how you display labels264
Review and test265
What if icons are not 100% universal?266
For more information267
11. Managing development
Process of designing icons269
Gather information about users and tasks271
Analyze the product273
Design the iconic language273
Design icons274
Test groups of icons274
Integrate icons into the interface and test again275
Revise, revise, revise275
Who should design icons?275
Getting ideas276
Developing and maintaining skills277
Get training277
Play games 278
Tools of the trade279
Sketching supplies280
Scanners281
Drawing programs281
Icon editors282
Database283
Staying on schedule and within budget284
Standardizing icons285
What to standardize285
Format for standards285
Enforcing standards286
Copyright issues286
12. Testing icons289
Test early and often290
Formative testing291
Comparative testing292
Evaluative testing292
Make testing realistic293
Recruit reliable test subjects293
Educate test subjects294
Help test subjects to act naturally295
Test performance296
Measure performance objectively296
Look for subjective cues too297
Test image-meaning association297
Open-ended meaning-for-image tests297
Multiple-choice meaning-for-image tests298
Image-for-meaning tests299
Image-meaning matching300
Categorization tests301
Usability tests301
Analyzing results302
13. Editing icons303
Checklist for good icons304
Understandable304
Unambiguous304
Informative305
Distinct305
Memorable306
Coherent307
Familiar307
Legible307
Few308
Compact309
Attractive 309
Extensible309
Problem objects310
Letters and arbitrary shapes310
Animals 310
Hand gestures311
Humorous icons 311
Emotional associations312
Faces312
Refining icons313
Consistency 314
Simplicity316
For more information319
14. Forms, formulas, and checklists321
Forms321
Users322
Tasks323
User-task matrix324
Basic iconic components325
Brainstorming326
Icon sketches327
Stylesheet for icons328
Analyze test results333
Icon design charter334
Calculating translucency335
Estimating costs336
Checklist for editing icons337
Understandable337
Unambiguous337
Informative337
Distinct337
Memorable338
Coherent338
Familiar338
Legible338
Few539
Compact339
Attractive 339
Extensible340
15. Case study in icon design341
About The Writer’s Pocket Almanack342
Pull-down menus344
Pop-up menus 345
Buttons346
Remote control 346
Analyze and plan346
Constraints347
Users and context347
Functions348
Design the iconic language349
Analyzing the commands349
Brainstorming350
Developing the grammar358
Draft the icons361
Display the icons364
The Remote Control364
The StackFinder367
Observations368
Test the design368
Revise and redesign370
Changes370
More changes372
Recap373
16. Icon starter set375
Instructions for the Starter Set disk395
Installing the Starter Set 395
Viewing the Starter Set 396
Editing the icons396
Index397

Page added on 7th October 2005.

Copyright © 2002-2006 Marcin Wichary, unless stated otherwise.