Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry
•
2 likes•2,598 views
Learn how to design better user experiences and user interfaces with this introductory presentation on the fundamentals of Visual Perception and cognitive psychology.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry
Similar to Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry (20)
Recently uploaded
Recently uploaded (20)
Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry
- 1. Visual Perception 101: Designing Better Interfaces by Calvin Arterberry calvin@interfaceawesome.com
- 2. I have Expereince in: Game Designer Game Tester Web Designer Teacher: Highschool College Professor Graphic Designer Theraputic Mentor Web Programmer calvin@interfaceawesome.com
- 4. What is Visual Perception? The ability to interpret the surrounding environment by processing information that is contained in visible light. The resulting percep- tion is also known as eyesight, sight, or vision (adjectival form: visu- al, optical, or ocular) calvin@interfaceawesome.com
- 5. Visual memory is the ability to retain information over an ade- quate period of time. Visual sequential memory is the ability to perceive and remember a se- quence of objects, letters, words, and other symbols in the same order as originally seen. Visual form constancy is the ability to recognize objects as they change size, shape, or orientation. Visual spatial skills refer to the ability to understand directional concepts that organize external visual space. These skills allow an individual to develop spa- tial concepts, such as right and left, front and back, and up and down as they relate to their body and to objects in space. A B Center Focus/ Field of Vision calvin@interfaceawesome.com
- 6. Visual Focus / Peripheral Vision Activity Grab a small handful of LEGOs Keep your head stright in front of you Play with the LEGOs Turn your head sideways so that you can only see the LEGOs in your peripheral vision The Takeaway Notice how hard it is to handle objects Peripheral vison is used for detecting motion, environmental awareness. calvin@interfaceawesome.com
- 8. Bottom Up Processing Object cented Theories Geons are the simple 2D or 3D forms such as cylinders, bricks, wedges, cones, circles and rectangles corresponding to the simple parts of an ob- ject in Biederman’s Recognition-by-components theory. The theory pro- poses that the visual input is matched against structural representations calvin@interfaceawesome.com
- 9. Top Down Processing Our brains make the best guess to what we are seeing. Built on our expereinces/ prior knowledge Assume illumination is coming from top Vantage paint important calvin@interfaceawesome.com
- 10. Top Down/ Bottom Up Processing Activity Read drawing prompt Sketch object on white paper Trace over drawing marking just the intersection points like illustrated below but dont add numbers. This is supposed to be hard. calvin@interfaceawesome.com
- 11. The Takeaway Keep your form language consistant and clearly differentiated contrast is key. Extensive User Testing in improtant: Age and culture variance very important. Use established patterns button design patterns calvin@interfaceawesome.com
- 12. Cone Distribution / Color Sensitivities Color is a physiological and psychological response to light Most sensitive to green wavelength: distiguish more shades Red spectum has the most overlap with the other wavelengths triggered more often Blue least sensitive calvin@interfaceawesome.com
- 13. Luminance Or Brightness Luminance is comparative Based on available light Determines Focus Value is more important than hue contrast calvin@interfaceawesome.com
- 14. Overlap or Occlusion Visual Field Position Familiar Size: Human Scale Texture Gradient: Degradation of fidelity Atmospheric Perspective The Gleaners - Jean Francois Millets calvin@interfaceawesome.com
- 16. Bibliography Cognition The Thinking Animal (Person Pretence Hall 2007) The Color Sensitive Cones http://hyperphysics.phy-astr.gsu.edu/hbase/vision/colcon.html Bleicher, Steven (2005). Contemporary Colour: Theory & Use. New York: Delmar. pp. iv, 23, 24. ISBN 978-1-4018-3740-2. De Craen, A. J.; Roos, P. J.; Leonard De Vries, A.; Kleijnen, J. (1996). “Effect of colour of drugs: Sys- tematic review of perceived effect of drugs and of their effectiveness”. BMJ (Clinical research ed.) 313 (7072): 1624–1626. doi:10.1136/bmj.313.7072.1624. PMC 2359128. PMID 8991013. Dolinska, B. (1999). “Empirical investigation into placebo effectiveness” (W). Irish Journal of Psy- chological Medicine 16 (2): 57–58. Retrieved 2009-04-29. “Blue streetlights believed to prevent suicides, street crime”. The Seattle Times. 2008-12-11. Shimbun, Yomiuri (December 10, 2008). “Blue streetlights may prevent crime, suicide”. Can Blue-Colored Light Prevent Suicide? calvin@interfaceawesome.com
- 17. Contact Me UX/UI Graphic Design Web Design Blog:interfaceawesome.com Email: calvin@interfaceawesome.com calvin@interfaceawesome.com