Provide usable information to help you manage and protect your creditworthiness
Making Information Usable: The Art & Science of Information Design
-
Upload
hubbard-one -
Category
Technology
-
view
871 -
download
2
description
Transcript of Making Information Usable: The Art & Science of Information Design
![Page 1: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/1.jpg)
Making Information Usable: The Art & Science of Information DesignNathan Denton & Jeff Hirner
![Page 2: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/3.jpg)
“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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/5.jpg)
Delivery of Actionable Information
![Page 6: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/6.jpg)
Delivery of Trusted Information
![Page 7: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/7.jpg)
Data Overload
![Page 8: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/8.jpg)
“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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/10.jpg)
![Page 11: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/11.jpg)
![Page 12: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/12.jpg)
![Page 13: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/13.jpg)
![Page 14: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/14.jpg)
![Page 15: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/15.jpg)
![Page 16: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/16.jpg)
![Page 17: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/17.jpg)
![Page 18: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/18.jpg)
The Design Trends
![Page 19: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/19.jpg)
![Page 20: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/20.jpg)
Iconography
![Page 21: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/21.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/22.jpg)
![Page 23: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/23.jpg)
![Page 24: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/24.jpg)
![Page 25: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/25.jpg)
Color
![Page 26: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/26.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/27.jpg)
![Page 28: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/28.jpg)
![Page 29: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/29.jpg)
![Page 30: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/30.jpg)
![Page 31: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/31.jpg)
![Page 32: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/32.jpg)
![Page 33: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/33.jpg)
![Page 34: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/34.jpg)
Info Graphics
![Page 35: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/35.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/36.jpg)
“Don’t just show the notes, play
the music!”- Hans Rosling
![Page 38: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/38.jpg)
“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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/39.jpg)
![Page 40: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/40.jpg)
“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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/41.jpg)
![Page 42: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/42.jpg)
![Page 43: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/43.jpg)
![Page 44: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/44.jpg)
![Page 45: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/45.jpg)
![Page 46: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/46.jpg)
![Page 47: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/47.jpg)
![Page 48: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/48.jpg)
![Page 49: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/49.jpg)
![Page 50: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/50.jpg)
![Page 51: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/51.jpg)
StreamliningContent
![Page 52: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/52.jpg)
![Page 53: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/53.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/54.jpg)
![Page 55: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/55.jpg)
![Page 56: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/56.jpg)
![Page 57: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/57.jpg)
![Page 58: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/58.jpg)
![Page 59: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/59.jpg)
![Page 60: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/60.jpg)
![Page 61: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/61.jpg)
![Page 62: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/62.jpg)
![Page 63: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/63.jpg)
![Page 64: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/64.jpg)
![Page 65: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/65.jpg)
ResponsiveDesign
![Page 66: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/66.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/67.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/68.jpg)
![Page 69: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/69.jpg)
![Page 70: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/70.jpg)
![Page 71: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/71.jpg)
![Page 72: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/72.jpg)
![Page 73: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/73.jpg)
![Page 74: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/74.jpg)
![Page 75: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/75.jpg)
![Page 76: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/76.jpg)
![Page 77: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/77.jpg)
![Page 78: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/78.jpg)
![Page 79: Making Information Usable: The Art & Science of Information Design](https://reader033.fdocuments.us/reader033/viewer/2022061204/546fbe50b4af9f3f0b8b4656/html5/thumbnails/79.jpg)