Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design principles applied to map design & usability

Design principles applied to map design & usability

Keynote for my session at #FOSS4G 2011


Sergio Álvarez Leiva

October 01, 2011

More Decks by Sergio Álvarez Leiva

Other Decks in Design


  1. Hello,

  2. vizzuality Lead designer & co-founder

  3. None
  4. None
  5. None
  6. None
  7. 15 Design principles you should apply *always*

  8. _Classical Conditioning A technique used to associate a stimulus with

    an unconscious physical or emotional response.
  9. None
  10. None
  11. _Aesthetic Effect Aesthetic designs are *perceived* as easier to use

    and better, than less-aesthetic designs.
  12. None
  13. NIXON


  15. None
  16. None
  17. None
  18. None
  19. None
  20. _Golden Ratio A ration within the elements of a form,

    such a height to width, approximating 0.618.
  21. None
  22. None
  23. None
  24. _Forms follow function Form in design results from purity of

  25. None
  26. You can find this map at mapbox.com

  27. You can find this map at mapbox.com

  28. _Affordance A property in which physical characteristics of an object

    or environment influence its function.
  29. None
  30. Pull

  31. Push

  32. None
  33. None
  34. _Consistency & Constraint The usability of a system is improved

    when similar parts are expresed in similar ways.
  35. None
  36. None
  37. Zoom & movement controls Layers

  38. None
  39. None
  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 -.
  41. None
  42. None
  43. None
  44. None
  45. None
  46. _Forgiveness Designs should help people avoid errors and minimize the

    negative consequences of errors when they do occur.
  47. None
  48. None
  49. None
  50. _Use of Color Color is used in design to attract

    attention, group elements, indicate meaning, and enhance aesthetics.
  51. __Number of colors No more than 4-5 colors.

  52. You can find this map at mapbox.com

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

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

  55. None
  56. __Meaning Analyze your colors meaning before aplying them.

  57. None
  58. _Interference Effects A phenomenon in which mental processing is made

    slower and less accurate by competing mental processes.
  59. Black Red Yellow Purple Green Blue Yellow Red White White

    Blue Green Black Brown Orange Green Orange Yellow Red
  60. _Nudge A method for predictably altering behavior without restricting options

    or signicantly changing incentives.
  61. None
  62. None
  63. None
  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.
  65. None
  66. _Progressive disclosure A strategy for managing information complexity in which

    only necessary or requested information is displayed at any given time.
  67. None
  68. None
  69. None
  70. _Visibility The usability of a system is improved when its

    status and methods of use are clearly visible.
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. Thank you! @saleiva saleiva@vizzuality.com

  79. None
  80. None
  81. _Framing A technique that influences decision making and judgement by

    manipulating the way information is presented.
  82. Gas kills over 100 Hostages “

  83. “ Gas saves over 500 hostages

  84. None
  85. None