SlideShare una empresa de Scribd logo
Visual Perception 101:
Designing Better
Interfaces
by Calvin Arterberry
calvin@interfaceawesome.com
I have Expereince in:
Game Designer
Game Tester
Web Designer
Teacher: Highschool
College Professor
Graphic Designer
Theraputic Mentor
Web Programmer
calvin@interfaceawesome.com
calvin@interfaceawesome.com
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
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
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
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
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
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
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
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
Luminance Or Brightness
Luminance is comparative
Based on available light
Determines Focus
Value is more important than hue
contrast
calvin@interfaceawesome.com
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
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
Contact Me
UX/UI
Graphic Design
Web Design
Blog:interfaceawesome.com
Email: calvin@interfaceawesome.com
calvin@interfaceawesome.com

Más contenido relacionado

La actualidad más candente

The psychopathology of everyday things!
The psychopathology of everyday things!The psychopathology of everyday things!
The psychopathology of everyday things!
Irfan Ahmed
 
The design of everyday things
The design of everyday thingsThe design of everyday things
The design of everyday things
ProvaAkter
 
Design System 101
Design System 101Design System 101
Design System 101
Mayank Dhawan
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
Kajsa Gren
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
Mike Crabb
 
Interaction design
Interaction designInteraction design
Interaction design
Lakshmi Narasimhan N
 
Introduction to Design Thinking
Introduction to Design ThinkingIntroduction to Design Thinking
Introduction to Design Thinking
Luca Lamera
 
Design and development better together
Design and development better togetherDesign and development better together
Design and development better together
Gregory Raiz
 
User interface-design
User interface-designUser interface-design
User interface-design
DarkHorse Technologies Pvt Ltd
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
Aciron Consulting
 
Emotion In Product Design
Emotion In Product DesignEmotion In Product Design
Emotion In Product Design
Luke Woolfson
 
Demystifying UX, CX and Digital Transformation
Demystifying UX, CX and Digital TransformationDemystifying UX, CX and Digital Transformation
Demystifying UX, CX and Digital Transformation
Melissa Wilfley
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
Nicolas Demange
 
The Three Levels of Design
The Three Levels of DesignThe Three Levels of Design
The Three Levels of Design
DesignMantic
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
Evan Samek
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
Koombea
 
An Introduction to the Systematic Inventive Thinking (SIT) Method
An Introduction to the Systematic Inventive Thinking (SIT) MethodAn Introduction to the Systematic Inventive Thinking (SIT) Method
An Introduction to the Systematic Inventive Thinking (SIT) Method
ISPMAIndia
 
3D User Interface
3D User Interface3D User Interface
3D User Interface
Bartlomiej Filipek
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
Mark Billinghurst
 

La actualidad más candente (20)

The psychopathology of everyday things!
The psychopathology of everyday things!The psychopathology of everyday things!
The psychopathology of everyday things!
 
The design of everyday things
The design of everyday thingsThe design of everyday things
The design of everyday things
 
Design System 101
Design System 101Design System 101
Design System 101
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
 
Interaction design
Interaction designInteraction design
Interaction design
 
Introduction to Design Thinking
Introduction to Design ThinkingIntroduction to Design Thinking
Introduction to Design Thinking
 
Design and development better together
Design and development better togetherDesign and development better together
Design and development better together
 
User interface-design
User interface-designUser interface-design
User interface-design
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
Emotion In Product Design
Emotion In Product DesignEmotion In Product Design
Emotion In Product Design
 
Demystifying UX, CX and Digital Transformation
Demystifying UX, CX and Digital TransformationDemystifying UX, CX and Digital Transformation
Demystifying UX, CX and Digital Transformation
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
The Three Levels of Design
The Three Levels of DesignThe Three Levels of Design
The Three Levels of Design
 
UX Design Myths
UX Design Myths UX Design Myths
UX Design Myths
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
An Introduction to the Systematic Inventive Thinking (SIT) Method
An Introduction to the Systematic Inventive Thinking (SIT) MethodAn Introduction to the Systematic Inventive Thinking (SIT) Method
An Introduction to the Systematic Inventive Thinking (SIT) Method
 
3D User Interface
3D User Interface3D User Interface
3D User Interface
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
 

Destacado

Visual Perception
Visual PerceptionVisual Perception
Visual Perception
BobFishr
 
Visual perceptual
Visual perceptualVisual perceptual
Visual perceptual
Gundeep Singh
 
Sensation and perception_2012
Sensation and perception_2012Sensation and perception_2012
Sensation and perception_2012
laylay27
 
Psychology: Visual perception 3. By Janice Fung.
Psychology: Visual perception 3. By Janice Fung.Psychology: Visual perception 3. By Janice Fung.
Psychology: Visual perception 3. By Janice Fung.
Janice Fung
 
PI's National Public Safety Broadband Network (NPSBN) Event
PI's National Public Safety Broadband Network (NPSBN) EventPI's National Public Safety Broadband Network (NPSBN) Event
PI's National Public Safety Broadband Network (NPSBN) Event
ThePerformanceInstitute
 
Advanced in Multi View image/video processing
Advanced in Multi View image/video processingAdvanced in Multi View image/video processing
Advanced in Multi View image/video processing
Er Kaushal
 
Chap1
 Chap1 Chap1
Chap1
dkd_woohoo
 
Trends In Broadband By Bill Coleman
Trends In Broadband By Bill ColemanTrends In Broadband By Bill Coleman
Trends In Broadband By Bill Coleman
Ann Treacy
 
Chap69
Chap69Chap69
Chap69
dkd_woohoo
 
Developer, Municipal & Utility Technology Planning
Developer, Municipal & Utility Technology PlanningDeveloper, Municipal & Utility Technology Planning
Developer, Municipal & Utility Technology Planning
BroadbandProperties
 
Chapter 6 pwrpt 1 1
Chapter 6  pwrpt 1 1Chapter 6  pwrpt 1 1
Chapter 6 pwrpt 1 1
jamiesamel
 
Municipal Open Access Networks
Municipal Open Access NetworksMunicipal Open Access Networks
Municipal Open Access Networks
Inphotonics Research
 
Singapore's Next Generation Broadband Network
Singapore's Next Generation Broadband NetworkSingapore's Next Generation Broadband Network
Singapore's Next Generation Broadband Network
International Institute of Communications
 
Basics of audio coding
Basics of audio codingBasics of audio coding
Basics of audio coding
sakshij91
 
Video image processing
Video image processingVideo image processing
Video image processing
عبد الله الساجر
 
Symbolic Rules Extraction From Trained Neural Networks
Symbolic Rules Extraction From Trained Neural NetworksSymbolic Rules Extraction From Trained Neural Networks
Symbolic Rules Extraction From Trained Neural Networks
Er Kaushal
 
Visual Perception Lecture 2
Visual Perception Lecture 2Visual Perception Lecture 2
Visual Perception Lecture 2
Wilfred Dexter Tanedo
 
Arts Visual Perception Lecture 1
Arts Visual Perception Lecture 1Arts Visual Perception Lecture 1
Arts Visual Perception Lecture 1
Wilfred Dexter Tanedo
 
Image video processing and canvas element by Abhay Rao
Image video processing and canvas element by Abhay RaoImage video processing and canvas element by Abhay Rao
Image video processing and canvas element by Abhay Rao
Mrinmay Kulkarni
 
Can you trust what you see? The magic of visual perception
Can you trust what you see? The magic of visual perceptionCan you trust what you see? The magic of visual perception
Can you trust what you see? The magic of visual perception
Förderverein Technische Fakultät
 

Destacado (20)

Visual Perception
Visual PerceptionVisual Perception
Visual Perception
 
Visual perceptual
Visual perceptualVisual perceptual
Visual perceptual
 
Sensation and perception_2012
Sensation and perception_2012Sensation and perception_2012
Sensation and perception_2012
 
Psychology: Visual perception 3. By Janice Fung.
Psychology: Visual perception 3. By Janice Fung.Psychology: Visual perception 3. By Janice Fung.
Psychology: Visual perception 3. By Janice Fung.
 
PI's National Public Safety Broadband Network (NPSBN) Event
PI's National Public Safety Broadband Network (NPSBN) EventPI's National Public Safety Broadband Network (NPSBN) Event
PI's National Public Safety Broadband Network (NPSBN) Event
 
Advanced in Multi View image/video processing
Advanced in Multi View image/video processingAdvanced in Multi View image/video processing
Advanced in Multi View image/video processing
 
Chap1
 Chap1 Chap1
Chap1
 
Trends In Broadband By Bill Coleman
Trends In Broadband By Bill ColemanTrends In Broadband By Bill Coleman
Trends In Broadband By Bill Coleman
 
Chap69
Chap69Chap69
Chap69
 
Developer, Municipal & Utility Technology Planning
Developer, Municipal & Utility Technology PlanningDeveloper, Municipal & Utility Technology Planning
Developer, Municipal & Utility Technology Planning
 
Chapter 6 pwrpt 1 1
Chapter 6  pwrpt 1 1Chapter 6  pwrpt 1 1
Chapter 6 pwrpt 1 1
 
Municipal Open Access Networks
Municipal Open Access NetworksMunicipal Open Access Networks
Municipal Open Access Networks
 
Singapore's Next Generation Broadband Network
Singapore's Next Generation Broadband NetworkSingapore's Next Generation Broadband Network
Singapore's Next Generation Broadband Network
 
Basics of audio coding
Basics of audio codingBasics of audio coding
Basics of audio coding
 
Video image processing
Video image processingVideo image processing
Video image processing
 
Symbolic Rules Extraction From Trained Neural Networks
Symbolic Rules Extraction From Trained Neural NetworksSymbolic Rules Extraction From Trained Neural Networks
Symbolic Rules Extraction From Trained Neural Networks
 
Visual Perception Lecture 2
Visual Perception Lecture 2Visual Perception Lecture 2
Visual Perception Lecture 2
 
Arts Visual Perception Lecture 1
Arts Visual Perception Lecture 1Arts Visual Perception Lecture 1
Arts Visual Perception Lecture 1
 
Image video processing and canvas element by Abhay Rao
Image video processing and canvas element by Abhay RaoImage video processing and canvas element by Abhay Rao
Image video processing and canvas element by Abhay Rao
 
Can you trust what you see? The magic of visual perception
Can you trust what you see? The magic of visual perceptionCan you trust what you see? The magic of visual perception
Can you trust what you see? The magic of visual perception
 

Similar a Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry

visual perception basic intro (2).pptx
visual perception basic intro (2).pptxvisual perception basic intro (2).pptx
visual perception basic intro (2).pptx
NadiaNorthway
 
Graphic design for marketing professionals
Graphic design for marketing professionalsGraphic design for marketing professionals
Graphic design for marketing professionals
Jason Tham
 
Visual Literacy: How "Learning to See" Benefits Occupational Safety
Visual Literacy: How "Learning to See" Benefits Occupational SafetyVisual Literacy: How "Learning to See" Benefits Occupational Safety
Visual Literacy: How "Learning to See" Benefits Occupational Safety
Triumvirate Environmental
 
Visual perception and learning
Visual perception and learningVisual perception and learning
Visual perception and learning
Farvardin Neuro-Cognitive Training Group
 
UI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game DesignUI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game Design
Saurabh Mathur
 
VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1
Virtu Institute
 
The Science Behind Good Page Design
The Science Behind Good Page DesignThe Science Behind Good Page Design
The Science Behind Good Page Design
Information Development World
 
Why study communication ppt @ bec doms
Why study communication ppt @ bec domsWhy study communication ppt @ bec doms
Why study communication ppt @ bec doms
Babasab Patil
 
Why study communication ppt @ bec doms
Why study communication ppt @ bec domsWhy study communication ppt @ bec doms
Why study communication ppt @ bec doms
Babasab Patil
 
Why study communication ppt @ bec doms
Why study communication ppt @ bec domsWhy study communication ppt @ bec doms
Why study communication ppt @ bec doms
Babasab Patil
 
Design for the "older folks"
Design for the "older folks"Design for the "older folks"
Design for the "older folks"
pcald50
 
Becoming Genius 2: Understanding
Becoming Genius 2: UnderstandingBecoming Genius 2: Understanding
Becoming Genius 2: Understanding
Devānanda Sarasvatī
 
Effective communication
Effective communicationEffective communication
Effective communication
Dokka Srinivasu
 
Learning Success Center - Supplemental Education Service Training 2011-12
Learning Success Center - Supplemental Education Service Training 2011-12 Learning Success Center - Supplemental Education Service Training 2011-12
Learning Success Center - Supplemental Education Service Training 2011-12
Robert Blake
 
Visual literacy
Visual literacyVisual literacy
Visual literacy
codyreynolds
 
Cog5 lecppt chapter03
Cog5 lecppt chapter03Cog5 lecppt chapter03
Cog5 lecppt chapter03
Visual Cognition and Modeling Lab
 
Ch9
Ch9Ch9
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Plain Talk 2015
 
Process of seeing | Visual Capability| Workstation Design | Workplace Design ...
Process of seeing | Visual Capability| Workstation Design | Workplace Design ...Process of seeing | Visual Capability| Workstation Design | Workplace Design ...
Process of seeing | Visual Capability| Workstation Design | Workplace Design ...
Gaurav Singh Rajput
 
Gecs talk on assessment learning by design
Gecs talk on assessment learning by designGecs talk on assessment learning by design
Gecs talk on assessment learning by design
Brock Dubbels
 

Similar a Visual Perception 101: Designing Better User Interfaces by Calvin Arterberry (20)

visual perception basic intro (2).pptx
visual perception basic intro (2).pptxvisual perception basic intro (2).pptx
visual perception basic intro (2).pptx
 
Graphic design for marketing professionals
Graphic design for marketing professionalsGraphic design for marketing professionals
Graphic design for marketing professionals
 
Visual Literacy: How "Learning to See" Benefits Occupational Safety
Visual Literacy: How "Learning to See" Benefits Occupational SafetyVisual Literacy: How "Learning to See" Benefits Occupational Safety
Visual Literacy: How "Learning to See" Benefits Occupational Safety
 
Visual perception and learning
Visual perception and learningVisual perception and learning
Visual perception and learning
 
UI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game DesignUI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game Design
 
VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1VDIS10015 Visual Communication Skills - Lecture 1
VDIS10015 Visual Communication Skills - Lecture 1
 
The Science Behind Good Page Design
The Science Behind Good Page DesignThe Science Behind Good Page Design
The Science Behind Good Page Design
 
Why study communication ppt @ bec doms
Why study communication ppt @ bec domsWhy study communication ppt @ bec doms
Why study communication ppt @ bec doms
 
Why study communication ppt @ bec doms
Why study communication ppt @ bec domsWhy study communication ppt @ bec doms
Why study communication ppt @ bec doms
 
Why study communication ppt @ bec doms
Why study communication ppt @ bec domsWhy study communication ppt @ bec doms
Why study communication ppt @ bec doms
 
Design for the "older folks"
Design for the "older folks"Design for the "older folks"
Design for the "older folks"
 
Becoming Genius 2: Understanding
Becoming Genius 2: UnderstandingBecoming Genius 2: Understanding
Becoming Genius 2: Understanding
 
Effective communication
Effective communicationEffective communication
Effective communication
 
Learning Success Center - Supplemental Education Service Training 2011-12
Learning Success Center - Supplemental Education Service Training 2011-12 Learning Success Center - Supplemental Education Service Training 2011-12
Learning Success Center - Supplemental Education Service Training 2011-12
 
Visual literacy
Visual literacyVisual literacy
Visual literacy
 
Cog5 lecppt chapter03
Cog5 lecppt chapter03Cog5 lecppt chapter03
Cog5 lecppt chapter03
 
Ch9
Ch9Ch9
Ch9
 
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
Adam Moorman & Stacy Robison - Design for Non-Designers: What Every Health Pr...
 
Process of seeing | Visual Capability| Workstation Design | Workplace Design ...
Process of seeing | Visual Capability| Workstation Design | Workplace Design ...Process of seeing | Visual Capability| Workstation Design | Workplace Design ...
Process of seeing | Visual Capability| Workstation Design | Workplace Design ...
 
Gecs talk on assessment learning by design
Gecs talk on assessment learning by designGecs talk on assessment learning by design
Gecs talk on assessment learning by design
 

Último

一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
RashmitaSwain3
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 

Último (20)

一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 

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