information design

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

Transcript

1. i information design
2. de!inition: information design [referred to as ID throughout this presentation] according to en.wikipedia.org 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
9. to complex real time data visualisations
11. and interactive presentations
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
15. icons & text grouped The Virtual Water Project virtualwater.eu information enhanced by use of colour
16. What goes in and out of HYDRAULIC FRACTURING dangersoffracking.com
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 tylerlang.com
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
27. ‣ simplified structure of options for easier understanding ! consider both subject matter & target group Food Lovers - recipe finder http://www.foodlovers.com/find-recipe Recipe nder pinapple cake muf n tart icecream candy bananas apples pears cherries Food Lovers - recipe finder http://www.foodlovers.com/find-recipe Recipe nder Fruit Sweets ‣ grouping of visual and textual information for widest audience ! illustration of options clari!ies and emphasizes information
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 good.is • infographic (poster): The Virtual Water Project - virtualwater.eu • Keep Britain Tidy Campaign poster (1963) - Tom Eckersley • SEED Magazine/Covers, graphs and feature spreads, tylerlang.com • infographic: ‘no more fish in the sea’, via Transparency: Where Are All the Fish? on good.is • infographic: ‘Startup Ecosystem: Predator vs. Prey’, by udemy.com • accessibility graphics, created for Inclusive New Media Design site references • CNN #COP17 ecosphere project • What goes in and out of HYDRAULIC FRACTURING - dangersoffracking.com • huffduffer • Christian Sparrow
31. Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea