Embed Size (px)
DESCRIPTION
Brief introduction into the human brain's processing of information and how that can apply to modern Web and software development. Presented at the St. Louis Days of .NET conference in November 2014
Citation preview
@dgcooley!#STLDODN!
Cogni&ve Ergonomics for Developers Danielle Cooley (@dgcooley) 14 November 2014
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!@dgcooley!#STLDODN!
?
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
Perception
@dgcooley!#STLDODN!Gestalt Principles
h@p://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
Similarity
Continuation & Cl*ure Pr,imity
-gure/Ground
@dgcooley!#STLDODN!Gestalt Principles in E-commerce
@dgcooley!#STLDODN!Gestalt Principles in Form Design
vs
h@p://www.nngroup.com/ar&cles/form-‐design-‐white-‐space/
@dgcooley!#STLDODN!
!
But Wait!! There’s More!
@dgcooley!#STLDODN!Contrast – Rule of Thirds
25% Gray 50% Gray 75% Gray
25% Gray 50% Gray 75% Gray
There’s a tool for this! webaim.org/resources/contrastchecker/
@dgcooley!#STLDODN!Color Vision Deficiencies
8% 0.5%
@dgcooley!#STLDODN!
There’s a tool for this, too! www.color-‐blindness.com/coblis-‐color-‐blindness-‐simulator/
@dgcooley!#STLDODN!
(This isn’t too useful in web dev.)
@dgcooley!#STLDODN!
Mental Models
@dgcooley!#STLDODN!
Users spend m*t of their time on we2ites other than yours.
- Jakob Nielsen
h@p://www.nngroup.com/ar&cles/mental-‐models/
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
Usability: 4e difference between what a system !"#$ and what the
user %p#&'$ it to do. - Mike Lawrence
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
vanderbilt.edu, captured 14 November 2014
@dgcooley!#STLDODN!
bucknell.edu, captured 14 November 2014
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
aa.com, captured 14 November 2014
@dgcooley!#STLDODN!
h@p://blog.teamtreehouse.com/affordances-‐web-‐design
Affordances are clues about how an object should be used,
t8ically provided by the object itself or its cont9t.
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!Perceived Affordance
@dgcooley!#STLDODN!@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
Which of these words do you think you can click?
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
h@p://www.lukew.com/ff/entry.asp?571
@dgcooley!#STLDODN!
Questions?
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!
@dgcooley!#STLDODN!More Reading
@dgcooley!#STLDODN!Image Credits
• Hand x-‐ray: By OpenStax College [CC-‐BY-‐3.0 (h@p://crea&vecommons.org/licenses/by/3.0)], via Wikimedia Commons -‐ h@p://bit.ly/1pVHtFn
• Ergonomic keyboard: h@p://bit.ly/1xSjBkV • Spine: h@p://bit.ly/1xSomv5 • Herman Miller Aeron Chair: h@p://amzn.to/1xSpjTS • "Sagi@al brain MRI". Licensed under Crea&ve Commons A@ribu&on-‐ShareAlike 2.5 via Wikipedia -‐
h@p://bit.ly/1pVG9m3 • 5 senses: From Jens Tärning (h@p://www.thenounproject.com/jens) via the Noun Project (h@p://
www.thenounproject.com) • Red fire truck: h@p://bit.ly/1t3hNS4 • Yellow/green fire truck: h@ps://flic.kr/p/a5D2pn • White fire truck: h@p://www.fairviewfiredept.com/?page_id=45 • “Expecta&ons” Post-‐its: h@p://bit.ly/14z6VXw • Re&nal sensi&vity of visible light chart: h@p://bit.ly/14z7W1H • Old Microsor Word toolbar: h@p://bit.ly/14z9E3g • Checkboxes: h@p://en.wikipedia.org/wiki/Checkbox • Push/pull door handles: h@p://eddtopple.wordpress.com/2013/03/19/affordance/ • Elevator panel: h@p://bit.ly/1t3nBei
