Design principles applied to map design & usability

Keynote for my session at #FOSS4G 2011

Transcript

1. Hello,
   

   View Slide

2. vizzuality
   Lead designer & co-founder
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. 15 Design principles you
   should apply *always*
   

   View Slide

8. _Classical Conditioning
   A technique used to associate a stimulus with an
   unconscious physical or emotional response.
   

   View Slide

9. View Slide

10. View Slide

11. _Aesthetic Effect
    Aesthetic designs are *perceived* as easier to use and
    better, than less-aesthetic designs.
    

    View Slide

12. View Slide

13. NIXON
    

    View Slide

14. KENNEDY
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. _Golden Ratio
    A ration within the elements of a form, such a height
    to width, approximating 0.618.
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. _Forms follow function
    Form in design results from purity of function.
    

    View Slide

25. View Slide

26. You can find this map at mapbox.com
    

    View Slide

27. You can find this map at mapbox.com
    

    View Slide

28. _Affordance
    A property in which physical characteristics of an
    object or environment influence its function.
    

    View Slide

29. View Slide

30. Pull
    

    View Slide

31. Push
    

    View Slide

32. View Slide

33. View Slide

34. _Consistency & Constraint
    The usability of a system is improved when similar
    parts are expresed in similar ways.
    

    View Slide

35. View Slide

36. View Slide

37. Zoom &
    movement
    controls Layers
    

    View Slide

38. View Slide

39. View Slide

40. _Fitt's law
    The time required to move to a target is a function of
    the target size and distance to the target - plus the
    precision needed -.
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. _Forgiveness
    Designs should help people avoid errors and
    minimize the negative consequences of errors when
    they do occur.
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. _Use of Color
    Color is used in design to attract attention, group
    elements, indicate meaning, and enhance aesthetics.
    

    View Slide

51. __Number of colors
    No more than 4-5 colors.
    

    View Slide

52. You can find this map at mapbox.com
    

    View Slide

53. __Color combinations
    Something aesthetic please.
    Protip! colorbrewer2.org
    

    View Slide

54. __Saturation
    More saturated for attracting attention.
    More saturated more eye fatigue.
    

    View Slide

55. View Slide

56. __Meaning
    Analyze your colors meaning before aplying them.
    

    View Slide

57. View Slide

58. _Interference Effects
    A phenomenon in which mental processing is
    made slower and less accurate by competing
    mental processes.
    

    View Slide

59. Black Red Yellow Purple Green
    Blue Yellow Red White White
    Blue Green Black Brown Orange
    Green Orange Yellow Red
    

    View Slide

60. _Nudge
    A method for predictably altering behavior without
    restricting options or signicantly changing incentives.
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. _Inantentional Blindness
    The failure to cognitively process a stimulus that is
    presented in clear view, leaving the observer without
    any awareness or memory of the stimulus.
    

    View Slide

65. View Slide

66. _Progressive disclosure
    A strategy for managing information complexity in
    which only necessary or requested information is
    displayed at any given time.
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. _Visibility
    The usability of a system is improved when its status
    and methods of use are clearly visible.
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. Thank you!
    @saleiva
    saleiva@vizzuality.com
    

    View Slide

79. View Slide

80. View Slide

81. _Framing
    A technique that influences decision making and
    judgement by manipulating the way information
    is presented.
    

    View Slide

82. Gas kills over 100 Hostages
    “
    

    View Slide

83. “
    Gas saves over 500 hostages
    

    View Slide

84. View Slide

85. View Slide