Copyright 1999 all rights reserved Human Visual Understanding System n Anything that is seen by our eyes has to be processed n The processing difficulty depends the complexity of the visual scene and on our previous memory of the scene
Copyright 1999 all rights reserved Human Visual Understanding System Retinal Image Perceptual Storage Cognitive Processor Memory
Copyright 1999 all rights reserved Visual Processing Speed n Images that we already are familiar with simply match to images stored in our memory –the processing time is fast –the processing effort is low
Copyright 1999 all rights reserved Visual Processing Speed n For native English readers, the character on top right is processed faster n For native Chinese readers, the character on the bottom right is processed faster A
Copyright 1999 all rights reserved Pay Attention! I am going to show the next slide as fast as I can
Copyright 1999 all rights reserved M
Take out a pencil and draw the character you just saw
Copyright 1999 all rights reserved Pay Attention! I am going to show the next slide as fast as I can
Copyright 1999 all rights reserved
Take out a pencil and draw the character you just saw
Copyright 1999 all rights reserved Visual Processing Speed n English character has same complexity as Chinese character. n Because the English character simply needs to be mapped to a similar character in our memory, the visual understanding speed is much shorter n Chinese students will, of course, be faster with the Chinese characters
Copyright 1999 all rights reserved Human Processing of Complex Visual Scenes n The time it takes to visually understand a scene depends on the number of unique elements that we must visually identify in the scene –If we have already learned the scene, we record it as one element –Words are recorded as a single element
Copyright 1999 all rights reserved Human Processing of Complex Visual Scenes n We record the following information about scenes –x,y location of element –shape of element –relationship of element to other elements on screen
Copyright 1999 all rights reserved An Example of a Complex Visual Scene
Copyright 1999 all rights reserved Control Panel for Desktop Video Conferencing n Too many elements to learn n Elements located all over screen –each individual location and relationship to other elements has to be learned n Elements not clustered or ordered so that sub-groupings can be learned
Copyright 1999 all rights reserved Galitz: Graphical Design Principles n Principles come from the way the human visual system works n Principles relate to: –How hard it is to process visual scene –How much of scene can be matched to memory
Copyright 1999 all rights reserved Organization of Screen Elements n Balance n Symmetry n Regularity n Predictability n Sequentiality n Economy n Unity n Proportion n Simplicity n Groupings
Copyright 1999 all rights reserved Balance n Equal weight of screen elements –Left to right, top to bottom
Copyright 1999 all rights reserved Balance Unstable
Copyright 1999 all rights reserved Balance n Left column processed - right column start position noted as same n Both columns need to be completely processed
Copyright 1999 all rights reserved Symmetry n Replicate elements left and right of the center line
Copyright 1999 all rights reserved Symmetric Asymmetric
Copyright 1999 all rights reserved Symmetry n Left column processed - right column noted as same n Both left & right columns processed plus relationship of right to left
Copyright 1999 all rights reserved Regularity n Create standard and consistent spacing on horizontal and vertical alignment points
Copyright 1999 all rights reserved Regular Irregular
Copyright 1999 all rights reserved Regularity n Left column processed - 2 right columns noted as same n Location & size of each object processed
Copyright 1999 all rights reserved Predictability n Put things in predictable locations on the screen
Copyright 1999 all rights reserved Predictable Spontaneous Icon FileEditViewInsertWindow Help Kung Foo Search for Movies CancelOK Enter Keywords : GrasshopperOld blind guy Icon FileEditViewInsertWindowHelp Kung Foo Search for MoviesCancel OK Enter Keywords : GrasshopperOld blind guy
Copyright 1999 all rights reserved Predictability n User expects title & menu bar on top of screen n Visual scene needs to be completely processed - objects not in expected places Icon File Edit View Insert Window Help Kung Foo Search for Movies CancelOK Enter Keywords : GrasshopperOld 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 Sequentiality n Guide the eye through the task in an obvious way –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 onesunusual shapes over usual ones
Copyright 1999 all rights reserved Sequential Random Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Membership FormName: Address: City: State: Zip: Dues: Pubs: Total: OKCancel
Copyright 1999 all rights reserved Economy n Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible
Copyright 1999 all rights reserved Economical Busy Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OK Cancel
Copyright 1999 all rights reserved Unity n Make items appear as a unified whole (for visual coherence) –Use similar shapes, sizes, or colors –Leave less space between screen elements than at the margin of the screen
Copyright 1999 all rights reserved Unity Fragmentation
Copyright 1999 all rights reserved Proportion n Create groupings of data or text by using aesthetically pleasing proportions
Copyright 1999 all rights reserved Square - 1:1Square Root of 2 - 1:1.414Golden Triangle - 1:1.618 Square Root of 3 - 1:1.732Double Square - 1:2 Pleasing Proportions
Copyright 1999 all rights reserved Simplicity n Minimize the number of aligned points –Use only a few columns to display screen elements
Copyright 1999 all rights reserved Simple Complex Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Membership Form Dues: Membership Form Name: Address: City: State: Zip: Pubs: Total: OK Cancel
Copyright 1999 all rights reserved Simplicity n Only four alignments need to be processed n A total of nine alignments need to be processed Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Membership Form Name: Address: City: State: Zip: Pubs: Total: OK Cancel
Copyright 1999 all rights reserved Simplicity n Combine elements to minimize the number of screen objects –Within 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 Groupings n Use visual arrangements to provide functional groupings of screen elements –Align elements in a group –Evenly space elements in a group –Provide separation between groups n Use additional group elements sparingly –color & borders add complexity
Copyright 1999 all rights reserved Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Simple Grouping n Similar elements aligned vertically n Vertical distance between similar objects small
Copyright 1999 all rights reserved Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Boxed Grouping n Boxes add additional complexity n Spatial arrangement adequate
Copyright 1999 all rights reserved Background Grouping Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel n Color adds additional visual complexity n Spatial arrangement adequate