1 / 46

Human Visual Understanding System

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. Human Visual Understanding System. Memory. Perceptual Storage. Retinal Image.

signa
Download Presentation

Human Visual Understanding System

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

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

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

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

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

  13. An Example of a Complex Visual Scene

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

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

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

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

  18. Balance Unstable

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

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

  21. Symmetric Asymmetric

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

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

  24. Regular Irregular

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

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

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

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

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

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

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

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

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

  34. Unity Fragmentation

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

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

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

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

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

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

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

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

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

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

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

More Related