Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@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! 
Perception
@dgcooley! 
Gestalt Principles #STLDODN! 
-.)r+/Gr')(/ 
h@p://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprin...
@dgcooley! 
Gestalt Principles in E-commerce #STLDODN!
@dgcooley! 
Gestalt Principles in Form Design #STLDODN! 
v0 
h@p://www.nngroup.com/ar&cles/form-­‐design-­‐white-­‐space/
@dgcooley! 
#STLDODN! 
But Wait!! There’s More!
@dgcooley! 
Contrast – Rule of Thirds #STLDODN! 
25% Gr$& 50% Gr$& 75% Gr$& 
25% Gr$& 50% Gr$& 75% Gr$& 
There’s 
a 
tool ...
@dgcooley! 
Color Vision Deficiencies #STLDODN! 
8% 0.5% 
There’s 
a 
tool 
for 
this, 
too! 
www.color-­‐blindness.com/co...
@dgcooley! 
#STLDODN! 
(This 
isn’t 
too 
useful 
in 
web 
dev.)
@dgcooley! 
#STLDODN! 
Mental Models
@dgcooley! 
#STLDODN! 
U0+r0 0p+(/ "*% 'f %1+!r %!"+ '( 
w+2!%+0 '%1+r %1$( &')r0. 
- J$3'b N!+#0+( 
h@p://www.nngroup.com...
@dgcooley! 
#STLDODN!
@dgcooley! 
#STLDODN! 
U0$b!#!%&: 4+ /!ff+r+(6+ b+%w++( 
w1$% $ 0&0%+" !"#$ $(/ w1$% %1+ 
)0+r %p#&'$ !% %' /'. 
- M!3+ L$...
@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! 
Aff'r/$(6+0 $r+ 6#)+0 $b')% 1'w 
$( 'b7+6% 01')#/ b+ )0+/, 
%8!6$##& pr'v!/+/ b& %1+ 'b7+6% 
!%0+#f...
@dgcooley! 
Perceived Affordance #STLDODN!
@dgcooley! 
#STLDODN!
@dgcooley! 
#STLDODN! 
Which 
of 
these 
words 
do 
you 
think 
you 
can 
click?
@dgcooley! 
#STLDODN! 
h@p://www.lukew.com/ff/entry.asp?571
@dgcooley! 
#STLDODN! 
Questions?
@dgcooley! 
#STLDODN!
@dgcooley! 
More Reading #STLDODN!
@dgcooley! 
#STLDODN! Image 
Credits 
• Hand 
x-­‐ray: 
By 
OpenStax 
College 
[CC-­‐BY-­‐3.0 
(h@p://crea&vecommons.org/l...
Upcoming SlideShare
Loading in …5
×

Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014

1,391 views

Published on

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

Published in: Design
  • Login to see the comments

Cognitive Ergonomics for Developers - St. Louis Days of .NET 2014

  1. 1. @dgcooley! #STLDODN! Cogni&ve Ergonomics for Developers Danielle Cooley (@dgcooley) 14 November 2014
  2. 2. @dgcooley! #STLDODN!
  3. 3. @dgcooley! #STLDODN!
  4. 4. @dgcooley! #STLDODN!
  5. 5. @dgcooley! #STLDODN!
  6. 6. @dgcooley! #STLDODN! ?
  7. 7. @dgcooley! #STLDODN!
  8. 8. @dgcooley! #STLDODN! Perception
  9. 9. @dgcooley! Gestalt Principles #STLDODN! -.)r+/Gr')(/ h@p://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm S!"!#$r!%& C'(%!()$%!'( & C#*)r+ Pr,!"!%&
  10. 10. @dgcooley! Gestalt Principles in E-commerce #STLDODN!
  11. 11. @dgcooley! Gestalt Principles in Form Design #STLDODN! v0 h@p://www.nngroup.com/ar&cles/form-­‐design-­‐white-­‐space/
  12. 12. @dgcooley! #STLDODN! But Wait!! There’s More!
  13. 13. @dgcooley! Contrast – Rule of Thirds #STLDODN! 25% Gr$& 50% Gr$& 75% Gr$& 25% Gr$& 50% Gr$& 75% Gr$& There’s a tool for this! webaim.org/resources/contrastchecker/
  14. 14. @dgcooley! Color Vision Deficiencies #STLDODN! 8% 0.5% There’s a tool for this, too! www.color-­‐blindness.com/coblis-­‐color-­‐blindness-­‐simulator/
  15. 15. @dgcooley! #STLDODN! (This isn’t too useful in web dev.)
  16. 16. @dgcooley! #STLDODN! Mental Models
  17. 17. @dgcooley! #STLDODN! U0+r0 0p+(/ "*% 'f %1+!r %!"+ '( w+2!%+0 '%1+r %1$( &')r0. - J$3'b N!+#0+( h@p://www.nngroup.com/ar&cles/mental-­‐models/
  18. 18. @dgcooley! #STLDODN!
  19. 19. @dgcooley! #STLDODN! U0$b!#!%&: 4+ /!ff+r+(6+ b+%w++( w1$% $ 0&0%+" !"#$ $(/ w1$% %1+ )0+r %p#&'$ !% %' /'. - M!3+ L$wr+(6+
  20. 20. @dgcooley! #STLDODN! vanderbilt.edu, captured 14 November 2014
  21. 21. @dgcooley! #STLDODN! bucknell.edu, captured 14 November 2014
  22. 22. @dgcooley! #STLDODN!
  23. 23. @dgcooley! #STLDODN!
  24. 24. @dgcooley! #STLDODN!
  25. 25. @dgcooley! #STLDODN! aa.com, captured 14 November 2014
  26. 26. @dgcooley! #STLDODN! Aff'r/$(6+0 $r+ 6#)+0 $b')% 1'w $( 'b7+6% 01')#/ b+ )0+/, %8!6$##& pr'v!/+/ b& %1+ 'b7+6% !%0+#f 'r !%0 6'(%9%. h@p://blog.teamtreehouse.com/affordances-­‐web-­‐design
  27. 27. @dgcooley! Perceived Affordance #STLDODN!
  28. 28. @dgcooley! #STLDODN!
  29. 29. @dgcooley! #STLDODN! Which of these words do you think you can click?
  30. 30. @dgcooley! #STLDODN! h@p://www.lukew.com/ff/entry.asp?571
  31. 31. @dgcooley! #STLDODN! Questions?
  32. 32. @dgcooley! #STLDODN!
  33. 33. @dgcooley! More Reading #STLDODN!
  34. 34. @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

×