Human Visual Understanding System

1. Human Visual Understanding System • Anything that is seen by our eyes has to be processed • The processing difficulty depends the complexity of the visual scene and on our previous memory of the scene

2. Human Visual Understanding System Memory Perceptual Storage Retinal Image Cognitive Processor

3. Visual Processing Speed • 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. Visual Processing Speed A • For native English readers, the character on top right is processed faster • For native Chinese readers, the character on the bottom right is processed faster

5. Pay Attention! I am going to show the next slide as fast as I can

6. M

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

8. Pay Attention! I am going to show the next slide as fast as I can

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

11. Visual Processing Speed • English character has same complexity as Chinese character. • Because the English character simply needs to be mapped to a similar character in our memory, the visual understanding speed is much shorter • Chinese students will, of course, be faster with the Chinese characters

12. Human Processing of Complex Visual Scenes • 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. Human Processing of Complex Visual Scenes • We record the following information about scenes • x,y location of element • shape of element • relationship of element to other elements on screen

14. An Example of a Complex Visual Scene

15. Control Panel for Desktop Video Conferencing • Too many elements to learn • Elements located all over screen • each individual location and relationship to other elements has to be learned • Elements not clustered or ordered so that sub-groupings can be learned

16. Galitz: Graphical Design Principles • Principles come from the way the human visual system works • Principles relate to: • How hard it is to process visual scene • How much of scene can be matched to memory

17. Organization of Screen Elements • Balance • Symmetry • Regularity • Predictability • Sequentiality • Economy • Unity • Proportion • Simplicity • Groupings

18. Balance • Equal weight of screen elements • Left to right, top to bottom

19. Balance Unstable

20. Balance • Left column processed - right column start position noted as same • Both columns need to be completely processed

21. Symmetry • Replicate elements left and right of the center line

22. Symmetric Asymmetric

23. Symmetry • Left column processed - right column noted as same • Both left & right columns processed plus relationship of right to left

24. Regularity • Create standard and consistent spacing on horizontal and vertical alignment points

25. Regular Irregular

26. Regularity • Left column processed - 2 right columns noted as same • Location & size of each object processed

27. Predictability • Put things in predictable locations on the screen

28. Icon Search for Movies File Edit View Insert Window Help Enter Keywords: Kung Foo Grasshopper Old blind guy OK Cancel OK Icon Enter Keywords: Kung Foo Grasshopper Old blind guy File Edit View Insert Window Help Search for Movies Cancel Predictable Spontaneous

29. Icon Search for Movies File Edit View Insert Window Help Enter Keywords: Kung Foo Grasshopper Old blind guy OK Cancel Predictability • User expects title & menu bar on top of screen • Visual scene needs to be completely processed - objects not in expected places OK Icon Enter Keywords: Grasshopper Kung Foo Old blind guy File Edit View Insert WindowHelp Search for Movies Cancel

30. Sequentiality • Guide the eye through the task in an obvious way • The eye is attracted to: • bright elements over less bright • Isolated elements over grouped • graphics before text • color before monochrome • saturated vs. less saturated colors • dark areas before light • big vs. small elements • unusual shapes over usual ones

31. Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel Membership Form Name: Cancel OK Address: Pubs: Dues: State: City: Zip: Total: Sequential Random

32. Economy • Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible

33. Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel Economical Busy

34. Unity • 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. Unity Fragmentation

36. Proportion • Create groupings of data or text by using aesthetically pleasing proportions

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

38. Simplicity • Minimize the number of aligned points • Use only a few columns to display screen elements

39. Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel Membership Form Name: Address: Pubs: City: Total: State: OK Zip: Cancel Simple Dues: Complex

40. Simplicity • Only four alignments need to be processed • A total of nine alignments need to be processed Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel Membership Form Name: Address: Pubs: City: Total: State: OK Zip: Cancel

41. Simplicity • Combine elements to minimize the number of screen objects • Within limits of clarity

42. Size: Size: Uniformity: Height: Width: PreserveProportions% of original height% of original width PreserveProportions% of original% of original Simple Complex

43. Groupings • 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 • Use additional group elements sparingly • color & borders add complexity

44. Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel Simple Grouping • Similar elements aligned vertically • Vertical distance between similar objects small

45. Boxed Grouping • Boxes add additional complexity • Spatial arrangement adequate Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel

46. Background Grouping • Color adds additional visual complexity • Spatial arrangement adequate Membership Form Name: Dues: Address: Pubs: City: Total: State: Zip: OK Cancel