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

1. @dgcooley!
#STLDODN!
Cogni&ve
Ergonomics
for
Developers
Danielle
Cooley
(@dgcooley)
14
November
2014

2. @dgcooley!
#STLDODN!

3. @dgcooley!
#STLDODN!

4. @dgcooley!
#STLDODN!

5. @dgcooley!
#STLDODN!

6. @dgcooley!
#STLDODN!
?

7. @dgcooley!
#STLDODN!

8. @dgcooley!
#STLDODN!
Perception

9. @dgcooley!
Gestalt Principles #STLDODN!
-.)r+/Gr')(/
h@p://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
S!"!#$r!%&
C'(%!()$%!'( & C#*)r+ Pr,!"!%&

10. @dgcooley!
Gestalt Principles in E-commerce #STLDODN!

11. @dgcooley!
Gestalt Principles in Form Design #STLDODN!
v0
h@p://www.nngroup.com/ar&cles/form-­‐design-­‐white-­‐space/

12. @dgcooley!
#STLDODN!
But Wait!! There’s More!

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. @dgcooley!
Color Vision Deficiencies #STLDODN!
8% 0.5%
There’s
a
tool
for
this,
too!
www.color-­‐blindness.com/coblis-­‐color-­‐blindness-­‐simulator/

15. @dgcooley!
#STLDODN!
(This
isn’t
too
useful
in
web
dev.)

16. @dgcooley!
#STLDODN!
Mental Models

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. @dgcooley!
#STLDODN!

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. @dgcooley!
#STLDODN!
vanderbilt.edu,
captured
14
November
2014

21. @dgcooley!
#STLDODN!
bucknell.edu,
captured
14
November
2014

22. @dgcooley!
#STLDODN!

23. @dgcooley!
#STLDODN!

24. @dgcooley!
#STLDODN!

25. @dgcooley!
#STLDODN!
aa.com,
captured
14
November
2014

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. @dgcooley!
Perceived Affordance #STLDODN!

28. @dgcooley!
#STLDODN!

29. @dgcooley!
#STLDODN!
Which
of
these
words
do
you
think
you
can
click?

30. @dgcooley!
#STLDODN!
h@p://www.lukew.com/ff/entry.asp?571

31. @dgcooley!
#STLDODN!
Questions?

32. @dgcooley!
#STLDODN!

33. @dgcooley!
More Reading #STLDODN!

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