Copyright 1999 all rights reserved
Human Visual Understanding Human Visual Understanding SystemSystem
Anything that is seen by our eyes Anything that is seen by our eyes has to be processedhas to be processed
The processing difficulty depends The processing difficulty depends the complexity of the visual scene the complexity of the visual scene and on our previous memory of the and on our previous memory of the scenescene
Copyright 1999 all rights reserved
Human Visual Understanding Human Visual Understanding SystemSystem
Retinal Image
Perceptual Storage
Cognitive Processor
Memory
Copyright 1999 all rights reserved
Visual Processing SpeedVisual Processing Speed
Images that we already are Images that we already are familiar with simply match to familiar with simply match to images stored in our memoryimages stored in our memory– the processing time is fastthe processing time is fast– the processing effort is low the processing effort is low
Copyright 1999 all rights reserved
Visual Processing SpeedVisual Processing Speed For native English For native English
readers, the character readers, the character on top right is on top right is processed fasterprocessed faster
For native Chinese For native Chinese readers, the character readers, the character on the bottom right is on the bottom right is processed fasterprocessed faster
A
Copyright 1999 all rights reserved
Pay Attention!Pay Attention!
I am going to show the next I am going to show the next slide as fast as I canslide as fast as I can
Copyright 1999 all rights reserved
M
Copyright 1999 all rights reserved
Take out a pencil and draw the Take out a pencil and draw the character you just sawcharacter you just saw
Copyright 1999 all rights reserved
Pay Attention!Pay Attention!
I am going to show the next I am going to show the next slide as fast as I canslide as fast as I can
Copyright 1999 all rights reserved
Copyright 1999 all rights reserved
Take out a pencil and draw the Take out a pencil and draw the character you just sawcharacter you just saw
Copyright 1999 all rights reserved
Visual Processing SpeedVisual Processing Speed
English character has same English character has same complexity as Chinese character.complexity as Chinese character.
Because the English character simply Because the English character simply needs to be mapped to a similar needs to be mapped to a similar character in our memory, the visual character in our memory, the visual understanding speed is much shorterunderstanding speed is much shorter
Chinese students will, of course, be Chinese students will, of course, be faster with the Chinese charactersfaster with the Chinese characters
Copyright 1999 all rights reserved
Human Processing of Complex Human Processing of Complex Visual ScenesVisual Scenes
The time it takes to visually The time it takes to visually understand a scene depends on the understand a scene depends on the number of unique elements that we number of unique elements that we must visually identify in the scenemust visually identify in the scene– If we have already learned the scene, If we have already learned the scene,
we record it as one elementwe record it as one element– Words are recorded as a single Words are recorded as a single
elementelement
Copyright 1999 all rights reserved
Human Processing of Complex Human Processing of Complex Visual ScenesVisual Scenes
We record the following We record the following information about scenesinformation about scenes– x,y location of elementx,y location of element– shape of elementshape of element– relationship of element to other relationship of element to other
elements on screenelements on screen
Copyright 1999 all rights reserved
An Example of a Complex An Example of a Complex Visual SceneVisual Scene
Copyright 1999 all rights reserved
Control Panel for Desktop Video Control Panel for Desktop Video ConferencingConferencing
Too many elements to learnToo many elements to learn Elements located all over screen Elements located all over screen
– each individual location and each individual location and relationship to other elements has to relationship to other elements has to be learnedbe learned
Elements not clustered or ordered Elements not clustered or ordered so that sub-groupings can be so that sub-groupings can be learnedlearned
Copyright 1999 all rights reserved
Galitz: Graphical Design Galitz: Graphical Design PrinciplesPrinciples
Principles come from the way the Principles come from the way the human visual system workshuman visual system works
Principles relate to:Principles relate to:– How hard it is to process visual sceneHow hard it is to process visual scene– How much of scene can be matched How much of scene can be matched
to memoryto memory
Copyright 1999 all rights reserved
Organization of Screen ElementsOrganization of Screen Elements BalanceBalance SymmetrySymmetry RegularityRegularity PredictabilityPredictability SequentialitySequentiality EconomyEconomy UnityUnity ProportionProportion SimplicitySimplicity GroupingsGroupings
Copyright 1999 all rights reserved
BalanceBalance
Equal weight of screen elementsEqual weight of screen elements– Left to right, top to bottomLeft to right, top to bottom
Copyright 1999 all rights reserved
Balance
Unstable
Copyright 1999 all rights reserved
BalanceBalance
Left column Left column processed - right processed - right column start column start position noted as position noted as samesame
Both columns Both columns need to be need to be completely completely processedprocessed
Copyright 1999 all rights reserved
SymmetrySymmetry
Replicate elements left and right of Replicate elements left and right of the center linethe center line
Copyright 1999 all rights reserved
Symmetric
Asymmetric
Copyright 1999 all rights reserved
SymmetrySymmetry
Left column Left column processed - right processed - right column noted as column noted as samesame
Both left & right Both left & right columns columns processed plus processed plus relationship of relationship of right to leftright to left
Copyright 1999 all rights reserved
RegularityRegularity
Create standard and consistent Create standard and consistent spacing on horizontal and vertical spacing on horizontal and vertical alignment pointsalignment points
Copyright 1999 all rights reserved
Regular
Irregular
Copyright 1999 all rights reserved
RegularityRegularity
Left column Left column processed - 2 processed - 2 right columns right columns noted as samenoted as same
Location & size of Location & size of each object each object processedprocessed
Copyright 1999 all rights reserved
PredictabilityPredictability
Put things in predictable locations Put things in predictable locations on the screenon the screen
Copyright 1999 all rights reserved
Predictable
Spontaneous
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies
CancelOK
Enter Keywords:Grasshopper Old blind guy
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies Cancel
OK
Enter Keywords:Grasshopper Old blind guy
Copyright 1999 all rights reserved
PredictabilityPredictability
User expects title User expects title & menu bar on top & menu bar on top of screenof screen
Visual scene needs Visual scene needs to be completely to be completely processed - objects processed - objects not in expected not in expected placesplaces
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies
CancelOK
Enter Keywords:Grasshopper Old blind guy
Icon
File Edit View Insert Window Help
Kung Foo
Search for Movies Cancel
OK
Enter Keywords:Grasshopper Old blind guy
Copyright 1999 all rights reserved
SequentialitySequentiality Guide the eye through the task in an obvious wayGuide the eye through the task in an obvious way
– The eye is attracted to:The eye is attracted to:• bright elements over less brightbright elements over less bright• Isolated elements over groupedIsolated elements over grouped• graphics before textgraphics before text• color before monochromecolor before monochrome• saturated vs. less saturated colorssaturated vs. less saturated colors• dark areas before lightdark areas before light• big vs. small elementsbig vs. small elements• unusual shapes over usual ones unusual shapes over usual ones
Copyright 1999 all rights reserved
Sequential
Random
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Membership Form Name:
Address:
City:State:
Zip:
Dues:Pubs:
Total:
OKCancel
Copyright 1999 all rights reserved
EconomyEconomy
Use as few styles, fonts, colors, Use as few styles, fonts, colors, display techniques, dialog styles, display techniques, dialog styles, etc., as possibleetc., as possible
Copyright 1999 all rights reserved
Economical
Busy
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Copyright 1999 all rights reserved
UnityUnity
Make items appear as a unified Make items appear as a unified whole (for visual coherence)whole (for visual coherence)– Use similar shapes, sizes, or colorsUse similar shapes, sizes, or colors– Leave less space between screen Leave less space between screen
elements than at the margin of the elements than at the margin of the screenscreen
Copyright 1999 all rights reserved
Unity
Fragmentation
Copyright 1999 all rights reserved
ProportionProportion
Create groupings of data or text by Create groupings of data or text by using aesthetically pleasing using aesthetically pleasing proportionsproportions
Copyright 1999 all rights reserved
Square - 1:1 Square Root of 2 - 1:1.414 Golden Triangle - 1:1.618
Square Root of 3 - 1:1.732 Double Square - 1:2
Pleasing ProportionsPleasing Proportions
Copyright 1999 all rights reserved
SimplicitySimplicity
Minimize the number of aligned Minimize the number of aligned pointspoints– Use only a few columns to display Use only a few columns to display
screen elementsscreen elements
Copyright 1999 all rights reserved
Simple
Complex
Name:Address:
City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Membership Form
Dues:Membership Form
Name:Address:City:
State:Zip:
Pubs:Total:
OKCancel
Copyright 1999 all rights reserved
SimplicitySimplicity
Only four Only four alignments need alignments need to be processedto be processed
A total of nine A total of nine alignments need alignments need to be processedto be processed
Name:Address:
City:
State:Zip:
Dues:Pubs:
Total:
OK Cancel
Membership Form
Membership FormName:
Address:
City:State:
Zip:
Pubs:
Total:OK
Cancel
Copyright 1999 all rights reserved
SimplicitySimplicity
Combine elements to minimize the Combine elements to minimize the number of screen objectsnumber of screen objects– Within limits of clarityWithin limits of clarity
Copyright 1999 all rights reserved
Simple
Complex
Size:Uniformity:
Height:Width:
Preserve Proportions% of original% of original
Size:Preserve Proportions% of original height% of original width
Copyright 1999 all rights reserved
GroupingsGroupings Use visual arrangements to provide Use visual arrangements to provide
functional groupings of screen functional groupings of screen elementselements– Align elements in a groupAlign elements in a group– Evenly space elements in a groupEvenly space elements in a group– Provide separation between groupsProvide separation between groups
Use additional group elements Use additional group elements sparinglysparingly– color & borders add complexitycolor & borders add complexity
Copyright 1999 all rights reserved
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Simple GroupingSimple Grouping
Similar elements aligned verticallySimilar elements aligned vertically Vertical distance between similar Vertical distance between similar
objects smallobjects small
Copyright 1999 all rights reserved
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Boxed GroupingBoxed Grouping
Boxes add additional complexityBoxes add additional complexity Spatial arrangement adequateSpatial arrangement adequate
Copyright 1999 all rights reserved
Background GroupingBackground Grouping
Membership FormName:
Address:City:State:Zip:
Dues:Pubs:Total:
OK Cancel
Color adds additional visual Color adds additional visual complexitycomplexity
Spatial arrangement adequateSpatial arrangement adequate