Pro Yearly is on sale from $80 to $50! »

information design

information design

a brief look at information design and its importance for user-centred design


Prisca Schmarsow

March 20, 2012


  1. i information design

  2. de!inition: information design [referred to as ID throughout this presentation]

    according to Information design is the skill and practice of preparing information so people can use it with efficiency and effectiveness. Where the data is complex or unstructured, a visual representation can express its meaning more clearly to the viewer. information design != information architecture Information design aims to transform data into information and focuses on making it usable and understandable to a wide audience via visual/aural representation. Information architecture aims for good usability by defining the structural design to organise, label and access information.
  3. early information design Spot map of cholera outbreak - by

    John Snow, published 1850s
  4. Chart of Napoleon’s 1812 Russian campaign - by Charles Minard,

    published 1869
  5. The Visual Display of Quantitative Information Edward R. Tu!te

  6. from early interface icons

  7. None
  8. None
  9. to complex real time data visualisations

  10. None
  11. and interactive presentations

  12. None
  13. colour in ID ‣ greyscale graphics or desaturated colours o#ten

    work best ! topic related associations could in!luence di!ferent interpretations ‣ neutral shades are less likely to influence user perception ! best used when impartiality and objectivity are important ‣ well designed colour scheme with limited colours = most comprehensive to a wider audience ! with a limited number of colours - information can be colour coded and/or its meaning emphasized and enhanced
  14. None
  15. icons & text grouped The Virtual Water Project information

    enhanced by use of colour
  16. What goes in and out of HYDRAULIC FRACTURING

  17. None
  18. visual references in ID ‣ simplified graphic elements make information

    accessible to wider audience ! consider target group ‣ line, shape and contrast for clarity and easy understanding ! style of visuals to !it subject matter as well as audience ‣ size/proportion, position and grouping adds additional meaning ! be mindful when placing visuals and textual information Keep Britain Tidy, Campaign poster (1963) - Tom Eckersley
  19. SEED Magazine/Covers, graphs and feature spreads, issues 18, 19, 20,

    21, & 22
  20. None
  21. None
  22. None
  23. None
  24. None
  25. accessibility through ID interaction ‣ clear sign posting for better

    wayfinding ! clear labels for all information ‣ language, visual style and functions presented in harmony & clarity ! considered approach to information presentation for best usability & accessibility ‣ UI design vital factor in usability as well as user-friendliness ! form design can greatly improve UX as well as accessibility = better results
  26. None
  27. ‣ simplified structure of options for easier understanding ! consider

    both subject matter & target group Food Lovers - recipe finder Recipe nder pinapple cake muf n tart icecream candy bananas apples pears cherries Food Lovers - recipe finder Recipe nder Fruit Sweets ‣ grouping of visual and textual information for widest audience ! illustration of options clari!ies and emphasizes information
  28. None
  29. None
  30. image credits: • Apple icons by Susan Kare • video

    stills from Out of the box, by vitamins design • Spot map of cholera outbreak - by John Snow, published 1850s, via wikimedia • Charles Minard's 1869 chart, via wikimedia • photo: The Visual Display of Quantitative Information by Edward R. Tu#te, by Iwan Gabovitch • photo: Edward Tu#te, via wikimedia • infographic: Transparency: The Most Committed Crimes in the Country on • infographic (poster): The Virtual Water Project - • Keep Britain Tidy Campaign poster (1963) - Tom Eckersley • SEED Magazine/Covers, graphs and feature spreads, • infographic: ‘no more fish in the sea’, via Transparency: Where Are All the Fish? on • infographic: ‘Startup Ecosystem: Predator vs. Prey’, by • accessibility graphics, created for Inclusive New Media Design site references • CNN #COP17 ecosphere project • What goes in and out of HYDRAULIC FRACTURING - • huffduffer • Christian Sparrow
  31. Prisca Schmarsow @prisca_eyedea