Step-11 Create Meaningful Graphics Icons and Images

Step-11 Create Meaningful Graphics, Icons, and Images

Overview n n n The kind of icons available, their characteristics, & their usability influences How icons are chosen, & the icon design process Design guidelines for the various other graphical media including images, photographs, pictures, diagrams, drawings, audition, & animation

Influences on Icon Usability n Provide icons that are - Familiar (p. 655) Clear & Legible Simple Consistent Direct Efficient Discriminable (p. 656) n Also consider the - - Context in which the icon is used Expectancies of users Complexity of task

Choosing Icons n - - A successful icon Looks different from all other icons Is obvious what it does & represents Is recognizable when no larger than 16 pixels square Looks as good in black & white as in color

Icon Size n See p. 658

Choosing Icon Images n n Use existing icons when available Use images for nouns, not verbs Use traditional images Consider user cultural & social norms

Creating Icon Images n n Create familiar shapes (p. 661) Simply reflect objects represented, avoiding excessive detail Create as a set, communicating relationships to one another through common shapes Create shapes of the proper emotional tone

Drawing Icon Images n n Do not use triangular arrows in design to avoid confusion with other system symbols Use meaningful attributes (p. 665) Use perspective & dimension whenever possible Accompany icon with a label to assure intended meaning

MAXIM n If people must remember hieroglyphics, they won’t stick around long.

Icon Animation and Audition n - - n Animation Use: - To provide feedback - For visual interest Make it interruptible or independent of user’s primary interaction Do not use it for decoration Permit it to be turned off by the user For fluid animation, present images at 16 or more frames per second Audition - Consider auditory icons

The Icon Design Process n n n - n n Define the icon’s purpose & use Collect, evaluate, & sketch ideas Draw in black & white Draw using an icon-editing utility or drawing package Test for user Expectations Recognition Learning Test for legibility Register new icons in the system’s registry

Screen Presentation n See p. 667