i information design
de f 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 e ffi ciency and e ff ectiveness. 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. INFORMATION DESIGN • the art of analytical design to represent complex data as understandable/accessible information • ID influences understanding or causes misunderstanding • organised data can be presented visually or aurally, or both in combination • ID is fundamental part of a user-centred design process
early information design Spot map of cholera outbreak - by John Snow, published 1850s Original map made by John Snow, via wikimedia Cholera cases are highlighted in black. Published 1854 • considered one of the most successful info graphics of its time with complex data presented in simple timeline • quoted by Tu f te
Chart of Napoleon’s 1812 Russian campaign - by Charles Minard, published 1869 Charles Minard's 1869 chart, via wikimedia Charles Minard's 1869 chart showing the losses in men, their movements, and the temperature of Napoleon's 1812 Russian campaign. Lithograph, 62 x 30 cm Published November 20, 1869 • considered one of the most successful info graphics of its time with complex data presented in simple timeline • quoted by Tu f te
Edward R. Tu f te The Visual Display of Quantitative Information Edward Tu f te : The Visual Display of Quantitative Information considered one of the f irst publications in information design, published 1983 — self published Named a “Citation Classic” in 1992 by the Institute for Scientific Information. Named one of the 100 best books of the 20th-century by amazon.com. • Edward Tu f te: born 1942, American statistician and professor emeritus of political science, statistics, and computer science at Yale University • reputation for his writings on information design and pioneer for data visualisation
from early interface icons
Susan Kare, work for Apple Computers, 1984 • Photoshop v1 - GUI icons
Susan Kare, work for Apple Computers, 1984 • OS GUI icons • also designed the command icon ⌘ • watch icon still in use now
to complex real time data visualisations
CNN #COP17 ecosphere project • a real-time Twitter visualization that aims to reveal how the online discussion is evolving around the topic of climate change during the #COP17 conference • by Minivegas and Stinkdigital
and interactive presentations
Out of the box, by vitamins design • interactive book : manual for assembling phone and using functions • focus on making info easy for end user, visual representation graphically enhanced avoids confusion via tech related jargon
colour in ID ‣ greyscale graphics or desaturated colours o f ten work best ! topic related associations could in f luence di f 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
infographic: Transparency: The Most Committed Crimes in the Country on good.is • black and white photo with anonymous children, all visuals B&W • neutrality maintained, listing info on statistics with factual objectivity
The Virtual Water Project virtualwater.eu icons & text grouped information enhanced by use of colour infographic (available as poster): The Virtual Water Project - virtualwater.eu • single colour chosen to emphasize subject matter • neutral so f t shade for backgorund with bold black silhouette illustrations : clarity without distraction by detail • blue used to highlight water footprint • grouped info, close vicinity of visual and textual info for easy understanding
What goes in and out of HYDRAULIC FRACTURING dangerso ff racking.com What goes in and out of HYDRAULIC FRACTURING dangerso ff racking.com • water related - similar colour scheme and imagery • story-telling approach to simplify complex info • movement via page scrolling to enhance info conveyed • muted colours with saturaed red for highlighting key info
What goes in and out of HYDRAULIC FRACTURING dangerso ff racking.com
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 f 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 Keep Britain Tidy Campaign poster (1963) - Tom Eckersley Tom Eckersley (1914-1997), English artist / designer, reputation for designs of posters from the 1940s to the 1980s. Eckersley’s work communicates strong messages by employing bold overlaid colors, simplified forms, and informative text.
SEED Magazine/Covers, graphs and feature spreads, issues 18, 19, 20, 21, & 22 tylerlang.com SEED Magazine/Covers, graphs and feature spreads, issues 18, 19, 20, 21, & 22 tylerlang.com • grouping and direction of figure icons enhances page title “how we evolve” • note limited colours and contrast
infographic: ‘no more fish in the sea’, via Transparency: Where Are All the Fish? on good.is • literal use of the fish imagery, to convey direct information • colour used to show time
infographic: ‘Startup Ecosystem: Predator vs. Prey’, by udemy.com • metaphoric use of the fish imagery to add value to information given • limited and muted colour scheme for clarity
infographic: ‘Startup Ecosystem: Predator vs. Prey’, by udemy.com
infographic: ‘Startup Ecosystem: Predator vs. Prey’, by udemy.com
infographic: ‘Startup Ecosystem: Predator vs. Prey’, by udemy.com
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 ID of great importance for interface and interaction • UI design vital factor of usability as well as user-friendliness • ID includes all aspects of information presentation: - language - in tone and wording - visual style - fitting subject, audience and goal - functions - interaction fitting overall design
Inclusive New Media Design • too many options for information presentation as well as interface will confuse • least suited for younger audiences as well as intellectually disabled people
‣ simplified structure of options for easier understanding ! consider both subject matter & target group Food Lovers - recipe finder Food Lovers - recipe finder http://www.foodlovers.com/find-recipe http://www.foodlovers.com/find-recipe Recipe fi nder Recipe fi nder pinapple cake Fruit bananas muf fi n apples tart Sweets pears icecream cherries candy ‣ grouping of visual and textual information for widest audience ! illustration of options clari f ies and emphasizes information
form: hu ff du ff er • minimal design with clearly marked blanks • reminiscent of paper forms
form: christian sparrow • clearly labeled form fields • prompting text elements • tied into site design
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 f te, by Iwan Gabovitch • photo: Edward Tu f 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 - dangerso ff racking.com • hu ff du ff er • Christian Sparrow
Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea
Recommend
More recommend