79
Making Information Usable: The Art & Science of Information Design Nathan Denton & Jeff Hirner

Making Information Usable: The Art & Science of Information Design

Embed Size (px)

DESCRIPTION

Presented by Nate Denton and Jeff Hirner at the 2011 Hubbard One Innovation Forum.

Citation preview

Page 1: Making Information Usable: The Art & Science of Information Design

Making Information Usable: The Art & Science of Information DesignNathan Denton & Jeff Hirner

Page 2: Making Information Usable: The Art & Science of Information Design

Innovation as a Convergence Point Opportunity

Technology

DataPeople

Innovation opportunity around services marketing, business develop &

practice management

Page 3: Making Information Usable: The Art & Science of Information Design

“Visualizing information is a form

of knowledge compression. It's a

way of squeezing an enormous amount of

information into a small space.”

- David McCandless

“The biggest value is achieved when you deliver the most valuable, actionable and trusted information to the right audience in a format that supports the decision making process”

- Angel Garcia

Page 4: Making Information Usable: The Art & Science of Information Design

Delivery of Valuable Information

Data Collection

Data Processing

Information Generation

Knowledge Application

Data is entered or collected…

then cleaned, classified, related to

other data…

to create, organize, integrate, and

deliver information…

that ultimately is applied to inform

decisions.

The best “information value chain” adds the best value at the lowest cost along each “link”

Page 5: Making Information Usable: The Art & Science of Information Design

Delivery of Actionable Information

Page 6: Making Information Usable: The Art & Science of Information Design

Delivery of Trusted Information

Page 7: Making Information Usable: The Art & Science of Information Design

Data Overload

Page 8: Making Information Usable: The Art & Science of Information Design

“Art, in itself, is an attempt to bring order out of chaos.”- Stephen Sondheim

Page 9: Making Information Usable: The Art & Science of Information Design

What is a good presentation?

• Finding the right presentation to uncover patterns, connections, relations that allow us to focus on the information that matters most so we can act on it.

• 3 Key Rules in delivering data– 1) Keep the visuals clear– 2) Keep the visuals consistent– 3) Make the visuals meaningful; space is a precious commodity

Page 10: Making Information Usable: The Art & Science of Information Design
Page 11: Making Information Usable: The Art & Science of Information Design
Page 12: Making Information Usable: The Art & Science of Information Design
Page 13: Making Information Usable: The Art & Science of Information Design
Page 14: Making Information Usable: The Art & Science of Information Design
Page 15: Making Information Usable: The Art & Science of Information Design
Page 16: Making Information Usable: The Art & Science of Information Design
Page 17: Making Information Usable: The Art & Science of Information Design
Page 18: Making Information Usable: The Art & Science of Information Design

The Design Trends

Page 19: Making Information Usable: The Art & Science of Information Design
Page 20: Making Information Usable: The Art & Science of Information Design

Iconography

Page 21: Making Information Usable: The Art & Science of Information Design

Iconography

Icons are a great way to quickly identify and group content in a way that adds visual interest to the page. It can also bridge the language gap.

5 Principles of Effective Icon Design

1. Approach icon design holistically

2. Consider your audience

3. Design for the size the icon will be used at

4. Keep icons simple

5. Create consistent icon set styles

Page 22: Making Information Usable: The Art & Science of Information Design
Page 23: Making Information Usable: The Art & Science of Information Design
Page 24: Making Information Usable: The Art & Science of Information Design
Page 25: Making Information Usable: The Art & Science of Information Design

Color

Page 26: Making Information Usable: The Art & Science of Information Design

Colors

Ways that colors can help enhance content

• Grouping content and ideas

• Reinforcing interactivity

• Drawing attention

• Supporting brand

• Affect feeling and emotion

Page 27: Making Information Usable: The Art & Science of Information Design
Page 28: Making Information Usable: The Art & Science of Information Design
Page 29: Making Information Usable: The Art & Science of Information Design
Page 30: Making Information Usable: The Art & Science of Information Design
Page 31: Making Information Usable: The Art & Science of Information Design
Page 32: Making Information Usable: The Art & Science of Information Design
Page 33: Making Information Usable: The Art & Science of Information Design
Page 34: Making Information Usable: The Art & Science of Information Design

Info Graphics

Page 35: Making Information Usable: The Art & Science of Information Design

Information Graphics

Presenting complex data quickly, cleanly, and efficiently.

Information graphics can help visually communicate:

• Data

• Relationships

• Processes

• Events

Page 36: Making Information Usable: The Art & Science of Information Design

“Don’t just show the notes, play

the music!”- Hans Rosling

Page 37: Making Information Usable: The Art & Science of Information Design

Source: Gapminder.com

Page 38: Making Information Usable: The Art & Science of Information Design

“The commonality between science and art is in trying to see

profoundly - to develop strategies of seeing and showing.”

- Edward Tufte

Page 39: Making Information Usable: The Art & Science of Information Design
Page 40: Making Information Usable: The Art & Science of Information Design

“Visualizing information is a form

of knowledge compression. It's a

way of squeezing an enormous amount of

information into a small space.”

- David McCandless

Page 41: Making Information Usable: The Art & Science of Information Design
Page 42: Making Information Usable: The Art & Science of Information Design
Page 43: Making Information Usable: The Art & Science of Information Design
Page 44: Making Information Usable: The Art & Science of Information Design
Page 45: Making Information Usable: The Art & Science of Information Design
Page 46: Making Information Usable: The Art & Science of Information Design
Page 47: Making Information Usable: The Art & Science of Information Design
Page 48: Making Information Usable: The Art & Science of Information Design
Page 49: Making Information Usable: The Art & Science of Information Design
Page 50: Making Information Usable: The Art & Science of Information Design
Page 51: Making Information Usable: The Art & Science of Information Design

StreamliningContent

Page 52: Making Information Usable: The Art & Science of Information Design
Page 53: Making Information Usable: The Art & Science of Information Design

Streamlining Content

• Show what is most important

• Reinforce importance with visual hierarchy

• Reinforce interactivity intuitively

• Consider the audience

Page 54: Making Information Usable: The Art & Science of Information Design
Page 55: Making Information Usable: The Art & Science of Information Design
Page 56: Making Information Usable: The Art & Science of Information Design
Page 57: Making Information Usable: The Art & Science of Information Design
Page 58: Making Information Usable: The Art & Science of Information Design
Page 59: Making Information Usable: The Art & Science of Information Design
Page 60: Making Information Usable: The Art & Science of Information Design
Page 61: Making Information Usable: The Art & Science of Information Design
Page 62: Making Information Usable: The Art & Science of Information Design
Page 63: Making Information Usable: The Art & Science of Information Design
Page 64: Making Information Usable: The Art & Science of Information Design
Page 65: Making Information Usable: The Art & Science of Information Design

ResponsiveDesign

Page 66: Making Information Usable: The Art & Science of Information Design

Responsive Design

Responsive design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation.

- Flexible grids

- Flexible layouts

- Flexible images

- Intelligent use of CSS media queries

Page 67: Making Information Usable: The Art & Science of Information Design

Responsive Design

- Many users don’t maximize their web browsers (49.6%)- Roger Johansson poll: Windows 65%, Mac 20%

- Over 400 varying devices sold between 2005 and 2008

- Impossible to predict the future

Page 68: Making Information Usable: The Art & Science of Information Design
Page 69: Making Information Usable: The Art & Science of Information Design
Page 70: Making Information Usable: The Art & Science of Information Design
Page 71: Making Information Usable: The Art & Science of Information Design
Page 72: Making Information Usable: The Art & Science of Information Design
Page 73: Making Information Usable: The Art & Science of Information Design
Page 74: Making Information Usable: The Art & Science of Information Design
Page 75: Making Information Usable: The Art & Science of Information Design
Page 76: Making Information Usable: The Art & Science of Information Design
Page 77: Making Information Usable: The Art & Science of Information Design
Page 78: Making Information Usable: The Art & Science of Information Design
Page 79: Making Information Usable: The Art & Science of Information Design