Make People Fall in Love with your Data A practical tutorial for data visualization and UI design we craft applications that make using data enjoyable and rewarding Ken Hilburn VP , Community Enablement ken@juiceanalytics.com Friday, April 29, 2011 Friday, April 29, 2011
Today, we’re covering Today, we’re covering The importance of having a message The importance of having a message Squelch the noise Context gives meaning Keeping it simple Keeping it simple Our brain’s ability to process data How we judge amounts 6 Principles of visual comprehension Applying design fundamentals Applying design fundamentals Rules of chart and table design Choosing the right chart Proper use of contrast Understanding fonts Color palette tips message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Squelch the noise “Perfection is achieved, not when there’s nothing more to add, but when there is nothing left to take away .” Antoine de Saint-Exupéry Have a message message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Show only what’s needed - nothing more message ! simple ! design message ! simple ! design goingtorain.com Friday, April 29, 2011 Friday, April 29, 2011
Context gives data meaning Types of data context comparison to 284 +4.5% v. last month previous time period and goal -2.8% v. goal new leads metric name relevant scope in Q3 2009 the new “Vortex” marketing campaign explanation of mitigating factors drove new leads after a slow Q2 Goal Actual 400 shown within broader 300 context of overall trend and goals 200 Without context: 100 people, 100 conclusions 100 0 Q1 2009 Q2 2009 Q3 2009 Q4 2009 message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
People context Course check... How does the data fi t into my work fl ow? The importance of having a message Who is sharing the data? Do they have credibility? Keeping it simple How do I interpret the metric? Applying design fundamentals What other information am I looking at? Does it support What expectations or or contradict? assumptions do I have? message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Keep it simple “Don’t confuse ‘simplicity’... ...with ‘simplistic’ ” Garr Reynolds message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Number of items we can recall Surveying the results of psychological 10 experiments in the 1950s 8 6 “My problem is 4 that I have been persecuted by 2 an integer.” 0 Binary digits Numbers Letters + Digits Short words Long words message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
2,147,483,648 bytes 2,147,483,648 bytes 7 digits 5 one syllable words 2 seconds audio 3 visual images message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Working memory capacity 3,000,000,000 2,000,000,000 1,000,000,000 0 Computer You message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
How we judge amounts message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
An example message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
An example Visualization has limits People perceive very accurately: length of a line, position in 2D space People perceive semi-accurately: width, area, color intensity, radial distance Monthly timeline of 4G network launches 11 10 2 1 1 1 1 1 0 N D J F M A M J J A S O N D J F 2008 ’09 ’10 message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
1) Principle of Proximity Things that are spatially close belong to a group 6 principles of visual comprehension message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
1) Principle of Proximity 2) Principle of Similarity Things that are spatially close belong to a Things that share color, size or shape belong to a group group message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
3) Principle of Enclosure 3) Principle of Enclosure Objects that are enclosed by a shape will be Objects that are enclosed by a shape will be seen as a group seen as a group message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
4) Principle of Closure 4) Principle of Closure We strive to perceive shapes as complete We strive to perceive shapes as complete message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
5) Principle of Continuity 6) Principle of Connection Objects that are aligned are perceived as a group Objects that are connected are part of the same group message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Proximity Things that are spatially close belong to a group Similarity Spike Chart Demo - Context Things that share color, size or shape belong to a group Enclosure Objects that are enclosed by a shape will be seen as a group Closure We strive to perceive shapes as complete Continuity Objects that are aligned are perceived as a group Connection Objects that are connected are part of the same group message ! simple ! design message ! simple ! design Friday, April 29, 2011 Friday, April 29, 2011
Recommend
More recommend
