Top Banner
Visual Perception 101: Designing Better Interfaces by Calvin Arterberry [email protected]
17

Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Aug 12, 2015

Download

Design

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Visual Perception 101: Designing BetterInterfaces

by Calvin Arterberry

[email protected]

Page 2: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

I have Expereince in:

Game DesignerGame TesterWeb DesignerTeacher: HighschoolCollege ProfessorGraphic DesignerTheraputic MentorWeb Programmer

[email protected]

Page 4: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

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)

[email protected]

Page 5: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

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 constancyis 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

[email protected]

Page 6: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

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 TakeawayNotice how hard it is to handle objects

Peripheral vison is used for detecting motion, environmental awareness.

[email protected]

Page 7: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry
Page 8: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

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

[email protected]

Page 9: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

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 [email protected]

Page 10: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Top Down/ Bottom Up Processing ActivityRead 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.

[email protected]

Page 11: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

The TakeawayKeep 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

[email protected]

Page 12: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Cone Distribution / Color Sensitivities

Color is a physiological and psychological response to lightMost sensitive to green wavelength: distiguish more shadesRed spectum has the most overlap with the other wavelengths triggered more often Blue least sensitive

[email protected]

Page 13: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Luminance Or Brightness

Luminance is comparativeBased on available lightDetermines Focus

Value is more important than huecontrast

[email protected]

Page 14: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Overlap or Occlusion Visual Field PositionFamiliar Size: Human Scale

Texture Gradient: Degradation of fidelityAtmospheric Perspective

The Gleaners - Jean Francois Millets

[email protected]

Page 15: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry
Page 16: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

BibliographyCognition The Thinking Animal (Person Pretence Hall 2007)

The Color Sensitive Coneshttp://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?

[email protected]

Page 17: Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

Contact Me

UX/UI Graphic DesignWeb Design

Blog:interfaceawesome.comEmail: [email protected]

[email protected]