Human Visual Understanding System

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

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

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

File Edit View Insert Window Help

Kung Foo

Search for Movies

CancelOK

Enter Keywords:Grasshopper Old blind guy

Kung Foo

Search for Movies Cancel

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

Kung Foo

Search for Movies

CancelOK

Kung Foo

Search for Movies Cancel

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:

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

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

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:

State:Zip:

Dues:Pubs:

Total:

OK Cancel

Membership Form

Address:

City:State:

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

Transcript of Human Visual Understanding System

Visual Scene Understanding

Human Wildlife Conflict Monitoring: Understanding Human ...

Visual Storytelling Knowledge and Understanding in …ncva.itn.liu.se/resources/publications/1.538177/Visual... · · 2014-01-19Visual Storytelling – Knowledge and Understanding

Understanding Human Communication - bsz-bw.deswbplus.bsz-bw.de/bsz343350785inh.pdf · Understanding Human Communication ... Chapter 7 Understanding Interpersonal Relationships 195

Learning visual biases from human imaginationpapers.nips.cc/...learning-visual-biases-from-human-imagination.pdf · Learning visual biases from human imagination Carl Vondrick Hamed

1.HP_09_Vision and Illusions Page 1 OGHFA Operator’s Guide to Human Factors in Aviation Human Performance & Limitations Understanding Visual Illusions.

Artificial Intelligence Advanced Visual Interaction Understanding … · 2016-09-28 · Artificial Intelligence Advanced Visual Interaction Understanding Human Motions and Emotions

Understanding human motivation_in_the_age_of_connected_machines

Understanding Visual Hierarchy in Web Design

Visual Masking Model Implementation for Images & Videoxd064wr9736/Zhang_Wang... · Visual Masking Model Experimental Results. Understanding the image from the human eye’s point

A Visual Analytic for Improving Human Terrain · PDF fileA Visual Analytic for Improving Human Terrain Understanding ... C4ISR OTM CONOP ... • Plans to return to 2013 C4ISR OTM field

Understanding visual literacy for libraries

Human Understanding Courses

Visual perction lesson 3 understanding line

Human Performance: Understanding Human Error

Towards Weakly-Supervised Visual Understanding

Human Visual Perception

Visual understanding of divergence and curl: Visual cues ...

Understanding Visual Literacy: The Visual Thinking Strategies …€¦ · Understanding Visual Literacy: The Visual Thinking Strategies Approach 51 objects, symbols, natural or man-made,

Visual Literacy: Understanding Images We Encounter Dr ...frankserafini.com/workshop-handouts/visual-lit-handouts.pdf · 1 Visual Literacy: Understanding Images We Encounter Dr. Frank