i information design

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.

early information design Spot map of cholera outbreak - by John Snow, published 1850s

Chart of Napoleon’s 1812 Russian campaign - by Charles Minard, published 1869

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

from early interface icons

No content

No content

to complex real time data visualisations

No content

and interactive presentations

No content

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

No content

icons & text grouped The Virtual Water Project virtualwater.eu information enhanced by use of colour

What goes in and out of HYDRAULIC FRACTURING dangersoffracking.com

No content

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

SEED Magazine/Covers, graphs and feature spreads, issues 18, 19, 20, 21, & 22 tylerlang.com

No content

No content

No content

No content

No content

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

No content

‣ 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

No content

No content

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

Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea