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