Slide 1

Slide 1 text

i information design

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

from early interface icons

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

to complex real time data visualisations

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

and interactive presentations

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

What goes in and out of HYDRAULIC FRACTURING dangersoffracking.com

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

‣ 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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Prisca Schmarsow [email protected] graphiceyedea.co.uk @prisca_eyedea