i information design de f inition: information design [referred to - - PowerPoint PPT Presentation

i

information

design

definition: 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

• r 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.

• 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

• considered one of the most successful info graphics of its time with complex data presented in simple timeline
• quoted by Tufte

• considered one of the most successful info graphics of its time with complex data presented in simple timeline
• quoted by Tufte

The Visual Display of Quantitative Information Edward R. Tufte

• Edward Tufte: 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

• Photoshop v1 - GUI icons

• OS GUI icons
• also designed the command icon ⌘
• watch icon still in use now

to complex real time data visualisations

• 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

• interactive book : manual for assembling phone and using functions
• focus on making info easy for end user,

colour in ID

• greyscale graphics or desaturated colours often work best

! topic related associations could influence different 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

• black and white photo with anonymous children, all visuals B&W
• neutrality maintained, listing info on statistics with factual objectivity

icons & text grouped

information enhanced by use of colour

• single colour chosen to emphasize subject matter
• neutral soft 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

• 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

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 fit subject matter as well as audience

• size/proportion, position and

grouping adds additional meaning ! be mindful when placing visuals and textual information

• grouping and direction of figure icons enhances page title “how we evolve”
• note limited colours and contrast

• literal use of the fish imagery, to convey direct information
• colour used to show time

• metaphoric use of the fish imagery to add value to information given
• limited and muted colour scheme for clarity

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

• 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

• 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

Recipe finder

Recipe finder

Fruit Sweets

• grouping of visual and textual information for widest audience

! illustration of options clarifies and emphasizes information

• minimal design with clearly marked blanks
• reminiscent of paper forms

• 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. Tufte, by Iwan Gabovitch
• photo: Edward Tufte, 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