Step11 Create Meaningful Graphics Icons and Images Lecture14

Step-11 Create Meaningful Graphics, Icons, and Images Lecture-14 Computer Systems Interface 1

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 Computer Systems Interface 2

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 Computer Systems Interface 3

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 Computer Systems Interface 4

Icon Size n See p. 658 Computer Systems Interface 5

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

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 Computer Systems Interface 7

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 Computer Systems Interface 8

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

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 Computer Systems Interface 10

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 Computer Systems Interface Register new icons in the system’s registry 11

Screen Presentation n See p. 667 Computer Systems Interface 12