![Page 1: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/1.jpg)
1
Windows, Icons, Menus, Pointers:
Icon Design
This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Last updated by Valerie Summet, Emory University. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb. 2011.
![Page 2: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/2.jpg)
2/28
Opportunity
• Talk by Ben Shneiderman Information Visualization for Knowledge
Discovery: Electronic Health Records and Social Networks
Goizueta Business School, Rm 334 March 4, 2011 - 11am-12:30pm
![Page 3: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/3.jpg)
3/28
What is an Icon?
icon (def), n., pl. icons, icones1. A picture, image, or other representation2. (Eastern Ch.) a representation in painting,
enamel, etc. of some sacred personage, as Christ or a saint or angel, itself venerated as sacred.
3. (Logic) a sign or representation which stands for its object by virtue of a resemblance or analogy to it
Also, eikon, ikon. [t. L, t. Gk.: m. eikon likeness, image] –Syn. 2. See image.
![Page 4: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/4.jpg)
4/28
On a Computer, Icons:• Are usually small • Play a key role in Direct Manipulation• Might or might not “look like” that which they
represent:
![Page 5: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/5.jpg)
5/28
Icons provide
Layout flexibility Potential for faster recognition Potential for faster selection Opportunity for double coding Language-independent representation Opportunity for confusion
– How to interpret?– Too many– Not unique
![Page 6: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/6.jpg)
6/28
Icons can be used to represent
Objects Classes of objects Tools Actions Actions on class of objects Properties (attributes) Relations …….
![Page 7: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/7.jpg)
7/28
Icons Depict Objects
Squares Lines Connectors Text Charts ....
![Page 8: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/8.jpg)
8/28
Icons Depict Different Classes of Objects
Useful for relatively few objects of any one class
Ex: Based on icons only, which are pictures?
![Page 9: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/9.jpg)
9/28
Not as Useful when all Objects are of Same Class!
Doesn't tell me anything except that I have a lot of folders.
Have to use the text instead.
The icons are still useful in that they make a big target for selection
![Page 10: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/10.jpg)
10/28
Another Example (plus History!)
![Page 11: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/11.jpg)
11/28
Icon Depict Tools
• Icons which represent the objects used to perform the actions
![Page 12: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/12.jpg)
12/28
Icons Depict Actions
Actions represented by abstract icons
Actions represented by showing before and after
![Page 13: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/13.jpg)
13/28
Icon Design
• Relies on drawing ability – hire someone to do it (there are standards and ways to critique icon design)
• Avoid meaningless, gratuitous use of icons
• Too many icons hinder usability and understandability
![Page 14: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/14.jpg)
14/28
Icon Design Guidelines
• Represent object or action in a familiar and recognizable manner
![Page 15: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/15.jpg)
15/28
Icon Design Guidelines
• Make the selected icon clearly distinguishable from surrounding unselected icons Design twice for two states
• Make each icon distinctive
• Make each icon stand out from background
• Make icons harmonious members of icon family
• Avoid excessive detail
• Limit number of icons
• “Double code” with text name/meaning
![Page 16: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/16.jpg)
16/28
Double Coding Example
• Here’s how NOT to do it!
(Found in a Georgia Tech parking garage)
• Why not?• What's the right
way?
![Page 17: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/17.jpg)
17/28
Icon Design - Ambiguities
• Icons from America On Line (circa 1995)• Inconsistencies?
Two different icons represent the same object, i.e., Software Library
Same icon represents two different objects, ie, Software Library and Geographic Store
• Which is the (bigger) problem?
![Page 18: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/18.jpg)
18/28
Icon Design - Abstractions
• Is the symbolic aspect of the icon meaningful?
• Icons or logos?
![Page 19: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/19.jpg)
19/28
Use a Graphics Alphabet
• Use a basic graphics alphabet from which to form icons
![Page 20: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/20.jpg)
20/28
Use a Graphics Alphabet• Icons created from the graphics
alphabet
![Page 21: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/21.jpg)
21/28
Modern Example
![Page 22: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/22.jpg)
22/28
What do These Icons Mean?
Icons should be recognizable, memorable, and discriminable
![Page 23: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/23.jpg)
23/28
Answers
cut
copy
paste
spell check
save
new
open
Window’s Start menu:Common document
icons:
Any use of a graphics alphabet?Recognizable? Memorable? Discriminable?
Apple Mac :
address book
Dashboard
Hard drive
iChat
Spotlight
![Page 24: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/24.jpg)
24/28
Icon Design - Guess the Meaning
What do each of these signify? Can we make any intelligent guesses? Almost always want to accompany your iconsby a text label Observation: Icon design has partially movedfrom symbolic to artistic
![Page 25: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/25.jpg)
25/28
Icon Shape Test – XEROX PARC
• Four different designs of icon shapes were tested Naming test (description, familiarity) Timed test (recognizability, distinguishability) Rating test (opinions, preference)
• Results – High recognition accuracy of icons with Realistic depiction Labels Visual variety
• Suggestions for refinements of specific designs
![Page 26: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/26.jpg)
26/28
Four sets of icon designs
Set 1 was chosen and modified as shown at the right
Xerox Office Systems Division, Human Factors Testing in the Design of Xerox’s 8010 “Star” Office Workstation. In Proc. CHI’83 Human Factors in Computing Systems, ACM, New York, pp. 72-77.
![Page 27: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/27.jpg)
27/28
When choosing/including icons:
• Icons should be: recognizable memorable discriminable
• Decide if you need text (or not) for understandability.
• Avoid overuse
![Page 28: Windows, Icons, Menus, Pointers: Icon Design · 3/28 What is an Icon? icon (def), n., pl. icons, icones 1. A picture, image, or other representation 2. (Eastern Ch.) a representation](https://reader034.vdocuments.site/reader034/viewer/2022051915/6006ad87ded6e13a35212bb1/html5/thumbnails/28.jpg)
28/28
Exercises for the Mind
• Find an example of each use of icons• Find an example of inconsistency in icon use• Find an example of use of a graphics alphabet from
which to form icons• Discuss emoticons in the context of iconography• Find examples of symbolic icons, and examples of
purely artistic icons (as in definitions 1 and 3 of Icon)• Are there times when icons should not be used?
When? Find an example of mis-use.