human visual understanding system

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


Human Visual Understanding Human Visual Understanding SystemSystem

Retinal Image

Perceptual Storage

Cognitive Processor

Memory


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


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


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


M


Take out a pencil and draw the Take out a pencil and draw the character you just sawcharacter you just saw


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


Take out a pencil and draw the Take out a pencil and draw the character you just sawcharacter you just saw


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


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


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


An Example of a Complex An Example of a Complex Visual SceneVisual Scene


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


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


Organization of Screen ElementsOrganization of Screen Elements BalanceBalance SymmetrySymmetry RegularityRegularity PredictabilityPredictability SequentialitySequentiality EconomyEconomy UnityUnity ProportionProportion SimplicitySimplicity GroupingsGroupings


BalanceBalance

Equal weight of screen elementsEqual weight of screen elements– Left to right, top to bottomLeft to right, top to bottom


Balance

Unstable


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


SymmetrySymmetry

Replicate elements left and right of Replicate elements left and right of the center linethe center line


Symmetric

Asymmetric


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


RegularityRegularity

Create standard and consistent Create standard and consistent spacing on horizontal and vertical spacing on horizontal and vertical alignment pointsalignment points


Regular

Irregular


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


PredictabilityPredictability

Put things in predictable locations Put things in predictable locations on the screenon the screen


Predictable

Spontaneous

Icon

File Edit View Insert Window Help

Kung Foo

Search for Movies

CancelOK

Enter Keywords:Grasshopper Old blind guy

Icon


Kung Foo

Search for Movies Cancel

OK



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


Kung Foo

Search for Movies

CancelOK


Icon


Kung Foo

Search for Movies Cancel

OK



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


Sequential

Random

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Membership Form Name:

Address:

City:State:

Zip:

Dues:Pubs:

Total:

OKCancel


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


Economical

Busy



Dues:Pubs:Total:

OK Cancel



Dues:Pubs:Total:

OK Cancel


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


Unity

Fragmentation


ProportionProportion

Create groupings of data or text by Create groupings of data or text by using aesthetically pleasing using aesthetically pleasing proportionsproportions


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


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


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



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


Address:

City:State:

Zip:

Pubs:

Total:OK

Cancel



Combine elements to minimize the Combine elements to minimize the number of screen objectsnumber of screen objects– Within limits of clarityWithin limits of clarity


Simple

Complex

Size:Uniformity:

Height:Width:

Preserve Proportions% of original% of original

Size:Preserve Proportions% of original height% of original width


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




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




Dues:Pubs:Total:

OK Cancel

Boxed GroupingBoxed Grouping

Boxes add additional complexityBoxes add additional complexity Spatial arrangement adequateSpatial arrangement adequate


Background GroupingBackground Grouping



Dues:Pubs:Total:

OK Cancel

Color adds additional visual Color adds additional visual complexitycomplexity

Spatial arrangement adequateSpatial arrangement adequate

human visual understanding system

Documents