SlideShare uma empresa Scribd logo
1 de 17
Baixar para ler offline
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

Mais conteúdo relacionado

Mais procurados

User Centred Design (UCD) Presentation
User Centred Design (UCD) PresentationUser Centred Design (UCD) Presentation
User Centred Design (UCD) Presentation
Vinai Kumar
 
PROJECT REPORT_ONLINE VOTING SYSTEM
PROJECT REPORT_ONLINE VOTING SYSTEMPROJECT REPORT_ONLINE VOTING SYSTEM
PROJECT REPORT_ONLINE VOTING SYSTEM
Nandasaba Wilson
 

Mais procurados (20)

Fingerprint recognition
Fingerprint recognitionFingerprint recognition
Fingerprint recognition
 
Fingerprint voting system
Fingerprint voting systemFingerprint voting system
Fingerprint voting system
 
Human computer interaction
Human computer interactionHuman computer interaction
Human computer interaction
 
Biometric Security Systems ppt
Biometric Security Systems pptBiometric Security Systems ppt
Biometric Security Systems ppt
 
Mental models - Final Presentation
Mental models - Final PresentationMental models - Final Presentation
Mental models - Final Presentation
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 Human Computer Interaction: The Design of Everyday Things (User Centered Des... Human Computer Interaction: The Design of Everyday Things (User Centered Des...
Human Computer Interaction: The Design of Everyday Things (User Centered Des...
 
UX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature AnalysisUX Lesson 4: Task & Feature Analysis
UX Lesson 4: Task & Feature Analysis
 
Design Thinking & Innovation
Design Thinking & InnovationDesign Thinking & Innovation
Design Thinking & Innovation
 
Pattern recognition 3d face recognition
Pattern recognition 3d face recognitionPattern recognition 3d face recognition
Pattern recognition 3d face recognition
 
Graphic Design 101
Graphic Design 101Graphic Design 101
Graphic Design 101
 
UX Basics Workshop - Guest Lecture at NSCAD University
UX Basics Workshop - Guest Lecture at NSCAD UniversityUX Basics Workshop - Guest Lecture at NSCAD University
UX Basics Workshop - Guest Lecture at NSCAD University
 
UX lesson 3: Usability First
UX lesson 3: Usability FirstUX lesson 3: Usability First
UX lesson 3: Usability First
 
User Centred Design (UCD) Presentation
User Centred Design (UCD) PresentationUser Centred Design (UCD) Presentation
User Centred Design (UCD) Presentation
 
Low-fidelity Prototyping
Low-fidelity PrototypingLow-fidelity Prototyping
Low-fidelity Prototyping
 
Thinking fast and slow - How your brain makes decisions
Thinking fast and slow - How your brain makes decisionsThinking fast and slow - How your brain makes decisions
Thinking fast and slow - How your brain makes decisions
 
20 Latest Computer Science Seminar Topics on Emerging Technologies
20 Latest Computer Science Seminar Topics on Emerging Technologies20 Latest Computer Science Seminar Topics on Emerging Technologies
20 Latest Computer Science Seminar Topics on Emerging Technologies
 
Typography in UI Design
Typography in UI DesignTypography in UI Design
Typography in UI Design
 
PROJECT REPORT_ONLINE VOTING SYSTEM
PROJECT REPORT_ONLINE VOTING SYSTEMPROJECT REPORT_ONLINE VOTING SYSTEM
PROJECT REPORT_ONLINE VOTING SYSTEM
 

Destaque

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
 
Chapter 6 pwrpt 1 1
Chapter 6  pwrpt 1 1Chapter 6  pwrpt 1 1
Chapter 6 pwrpt 1 1
jamiesamel
 
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
 

Destaque (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
 

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

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

Semelhante 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

一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
ZurliaSoop
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
CristineGraceAcuyan
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
awasv46j
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
yhavx
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
wpkuukw
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
eeanqy
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
ehyxf
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
saipriyacoool
 

Último (20)

Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
Mohanlalganj ! Call Girls in Lucknow - 450+ Call Girl Cash Payment 9548273370...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
Jual Obat Aborsi Bandung ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan ...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
Q4-Trends-Networks-Module-3.pdfqquater days sheets123456789
 
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
一比一原版(WLU毕业证)罗瑞尔大学毕业证成绩单留信学历认证原版一模一样
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Essential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive GuideEssential UI/UX Design Principles: A Comprehensive Guide
Essential UI/UX Design Principles: A Comprehensive Guide
 
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
一比一原版(ANU毕业证书)澳大利亚国立大学毕业证原件一模一样
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
怎样办理伦敦国王学院毕业证(KCL毕业证书)成绩单留信认证
 
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 

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