1. 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

2. Copyright 1999 all rights reserved Human Visual Understanding System Retinal Image Perceptual Storage Cognitive Processor Memory

3. 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

4. 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

5. Copyright 1999 all rights reserved Pay Attention! I am going to show the next slide as fast as I can

6. Copyright 1999 all rights reserved M

7. Take out a pencil and draw the character you just saw

8. Copyright 1999 all rights reserved Pay Attention! I am going to show the next slide as fast as I can

9. Copyright 1999 all rights reserved

10. Take out a pencil and draw the character you just saw

11. 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

12. 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

13. 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

14. Copyright 1999 all rights reserved An Example of a Complex Visual Scene

15. 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

16. 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

17. 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

18. Copyright 1999 all rights reserved Balance n Equal weight of screen elements –Left to right, top to bottom

19. Copyright 1999 all rights reserved Balance Unstable

20. 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

21. Copyright 1999 all rights reserved Symmetry n Replicate elements left and right of the center line

22. Copyright 1999 all rights reserved Symmetric Asymmetric

23. 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

24. Copyright 1999 all rights reserved Regularity n Create standard and consistent spacing on horizontal and vertical alignment points

25. Copyright 1999 all rights reserved Regular Irregular

26. Copyright 1999 all rights reserved Regularity n Left column processed - 2 right columns noted as same n Location & size of each object processed

27. Copyright 1999 all rights reserved Predictability n Put things in predictable locations on the screen

28. 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

29. 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

30. 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

31. 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

32. Copyright 1999 all rights reserved Economy n Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible

33. 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

34. 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

35. Copyright 1999 all rights reserved Unity Fragmentation

36. Copyright 1999 all rights reserved Proportion n Create groupings of data or text by using aesthetically pleasing proportions

37. 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

38. Copyright 1999 all rights reserved Simplicity n Minimize the number of aligned points –Use only a few columns to display screen elements

39. 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

40. 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

41. Copyright 1999 all rights reserved Simplicity n Combine elements to minimize the number of screen objects –Within limits of clarity

42. 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

43. 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

44. 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

45. 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

46. 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