Strata - Small is the New Big: Lessons in Visual Economy

2,030 views

Published on

In an age of information overload - of Twitter and Facebook, a TV in every room, a constant bombardment of data - there's a space for brevity, for elegance, for smaller interfaces and visualizations.

Published in: Technology, Education
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
2,030
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
22
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide
  • Hi, I’m Kim Rees. I’m with Periscopic; we are an information visualization firm. Our tag line is Do Good With Data – we work in the domains of environmental sustainability, progressive social change, and data transparency and open data.I’m going to be talking about how to conserve space and keep things small. However, I don’t feel qualified at the moment to talk about “small” when I look like I’ve swallowed a bus! But seriously, I’ll be going through examples that illustrate these guidelines.
  • Let’s take the exampleof climate change. I could stand up here and ramble on for two hours about the intricate details, get up on a hydraulic lift, make dramatic statements, show you lots of charts…(This is every chart shown in Al Gore’s film, by the way.)Or I could show you this:
  • It’s so concise that it’s like a punch in the face. Data visualization can be like that one perfect Kung Fu blow that is so elegant and precise that it just knocks you out.Now I’m a fan of An Inconvenient Truth and Al Gore, and much of his film was effective, but we can also accomplish quite a bit with far less.In an age of data overload, reality TV, Twitter, Facebook, a constant bombardment of information – there is a place for brevity, for elegance and succinctness. I want to go through some examples of this…
  • Working within constraints is probably one of the easiest ways to get started with smaller visualizations and interfaces. Limitations such as screen size on a mobile device will force you to devise a new way of looking at the data.
  • Here are some common smartphone and other mobile device resolutions. This is a short list and will continue to grow and be more disparate as more devices are released.
  • This is an experiment I did a few years ago based on the iPod resolution of 220x176. By dragging the vertical bar, I can control the income level. By sliding across the person icon, I can control the household size.Choosing to show the output values in the context of the input controller allows us to quickly make the connection between the values.
  • Squish it. Sometimes the obvious works. Simply resize to fit the space. Here’s a bar chart we used for a political project. It’s been resized to fit a specific height (thereby changing the widths). A horizon graph beautifully splits, recolors, and splices the chart into a layered graph. It uses 1/6th of the space of its original chart.
  • This line chart uses a fixed width and height, but allows the user to zoom into the data by dragging the controllers. The space never changes – the visualization inside that space changes to get more detail.http://www.imf.org/external/datamapper/index.php
  • I’m not a big fan of circular interfaces. Typically trees and networks expand outward and make things unruly. But this example reshapes the data within the confines of its original space. Use the space and reuse it when expanding the data.
  • Here’s another example of using input as output. The controller in the top right gives us an indication of what’s out of sight. It acts as a zoom control and shows marks where there will be data as we zoom out.
  • Remember the old EF Hutton commercials? Not a word from EF Hutton was ever said in those commercials! But the room quieted as soon as someone uttered the name. What was implied was that some nugget of financial wisdom was going to be dropped and we needed to pay attention lest we miss it. We want to create that same sense of bated breath, anticipation, with our stories. We don’t need to clobber people with everything all at once.
  • If possible, use physical context, but only enough to get the point across.Here, we don’t need to see the specifics actual distances, dates, and failure details. We just need the big take aways. Remove the extraneous bits. Even if some are interesting. You can always use it as a callout somewhere.
  • You don’t need to show everything at once. Allow the user to find what’s relevant to them. This example doesn’t show all the relationships of the data, but instead lets the visitor choose their interest.Using the space in this efficient way takes away a lot of the clutter, and allows for a quicker comprehension of how to use the tool and what is being conveyed.
  • Perhaps a goal of your visualization is to inspire. Don’t forget the “dreamy” part of your narrative that allows your user to imagine.I’m sure the recipe is on the next page.
  • Lets not be generalists for a moment… Most of us, I think, need to design or develop generalized ways of viewing data. For instance, a general way to show a time series. However, if we look at specific data, we can often design a much smaller visualization.
  • Say we have all the baseball data from 2009. We could make a huge visualization showing all hits, pitches, runs, scores, etc. But what if we just looked at all the pitches in aggregate.We could show that they could go halfway round the world. That’s a way to get specific.
  • This compares voting records of two congressional members. We were able to find a succinct visualization for these data points because they were so tightly coupled.
  • This is a chart that encodes many things at once. There are the qualitative bars at the back, the main bar that shows the actual value, and the market that shows the goal.The chart on the lower left also color codes the performance; blue is good and shades of red show poor performance.It’s a very concise way to show a lot of data at once and also make a qualitative judgment about it.
  • This is a GPS driving guidance system that is presented on your windshield. Unlike a traditional GPS, it’s apparent that we don’t need an entire map, we just need to know our path.
  • This is actually a sonification as well as a visualization. But it shows how the visualization suits the data. They couldn’t have done this with all sports. We wouldn’t sit here for 10 hours listening to the results of the New York City marathon.
  • Sometimes if we think about the goal of the visualization, such as providing quick feedback on instrumentation for a soldier, it will help drive the interface.
  • http://www.hipmunk.comThere are obvious important factors when scheduling a flight such as price, connections, and flight times. There are a small percentage of people who need to know what kind of plane it is, meals served, etc. Let them go to Expedia.Keep the important factors at the forefront and the experience will surpass traditional methods.
  • These are special interest group ratings for a congressional candidate. Some of the groups were very ambiguous, so we decided to show the candidate’s score in the context of all democrats and republicans. Don’t leave analysis up to the user if we can compute it for them. We sometimes forget that our users aren’t like us – they may not be versed in graphical displays of data. Don’t leave everything up to the user to decipher.
  • Situational Awareness for Urban Environments using LiDAR to obtain building footprints. These displays still provide context such as terrain, but only subtly. Additionally, it shows the shadow of rooftops so we can tell if it’s a pitched roof or a flat roof, in case that matters.It really focuses attention on the crucial areas of concern.
  • This is one of the most elegant aviation controls. It shows the attitude of the plane. The orange bars in the center mimic the location of the wings.It doesn’t need a lot of details. Blue for sky; brown for ground. It’s pretty obvious if something is going wrong.Remove the labeling. I’m pretty sure the pilot doesn’t need to know the exact value is 23.6 – she can see that the arrows aren’t lined up.
  • Depending on the dataset, comparing and contrasting data may be the hardest part in a small interface. Let’s go over a few ways to do this.
  • There are many ways to show comparisons using small multiples. This one uses the horizon graph we saw earlier.Here we could remove the axes and simply use rollovers or marquees to provide details.
  • Here the interaction allows us to expand on the data. The user can choose to drill down for more.
  • Here’s an example that shows comparisons of the cost of a flat in Madrid. The building outlines are darker where the units cost more. This simply illustrates that we can use small multiples for things other than charts and graphs.
  • Small multiples can also show progression over time.This is a map of an urban farm in Tucson and how it grew from a single garden plot to a 1-acre farm. But we have to remember to limit the number of multiples. Don’t overwhelm people with a thousand illustrations that they have to compare.http://www.harvestingrainwater.com/2008/08/23/farming-in-the-city-with-runoff-from-a-street/
  • This is the arctic ice coverage animation over 30 years. The changes are so subtle over some years that it helps to see each frame in context of the previous – i.e. an animation.
  • So those were just some guidelines to help frame your work in smaller more concise visualizations and interfaces. I hope they prove useful in your work. Thank you for your time.Also, we’re hiring! See our blog.Let’s open it up for questions.
  • Strata - Small is the New Big: Lessons in Visual Economy

    1. 1. Small is the New Big: <br />Lessons in Visual Economy<br />Kim Rees, Periscopic<br />kim@periscopic.com<br />@krees, @periscopic<br />
    2. 2. INCONVENIENT<br />
    3. 3. EXPEDIENT<br />
    4. 4. Work with Constraints<br />
    5. 5. Sample Mobile Screen Resolutions<br />Android (Motorola Droid)<br />Android (MyTouch)<br />Android (Nexus One)<br />Apple iPhone<br />Apple iPad<br />Palm Pre<br />480x854<br />320x480<br />480x800<br />320x480 <br />1024x768<br />320x480<br />
    6. 6. Periscopic<br /><ul><li>Use input as output when possible.
    7. 7. Allow the space constraints to define the interface.</li></li></ul><li>Periscopic<br />Heer, Panopticon<br /><ul><li>Compress, compress, compress.
    8. 8. Use degrees of contrast to focus attention.</li></li></ul><li>IMF<br /><ul><li>Size and resize the data to fit the space.
    9. 9. Make use of controls that help shape the space.</li></li></ul><li>modelab<br /><ul><li>Expand inward, not outward. This works like zooming out.</li></li></ul><li>Periscopic<br /><ul><li>Using input as output.
    10. 10. Hint at the invisible – what’s out of view.</li></li></ul><li>Tell<br />Smaller<br />Stories<br />
    11. 11. Bryan Christie Design<br /><ul><li>Use context, but only minimally.</li></li></ul><li>Ramage and Chuang, Stanford<br /><ul><li>Use interaction to reveal relationships individually.
    12. 12. Let the visitor create the story.</li></li></ul><li>Ikea<br /><ul><li>Fill in the details later.</li></li></ul><li>Get Specific<br />
    13. 13.
    14. 14. Periscopic<br /><ul><li>Group as much related data together as possible.</li></li></ul><li>Few<br />Freakalytics<br /><ul><li>Encode multiple points together.
    15. 15. Marry qualitative and quantitative values.</li></li></ul><li>Making Virtual Solid<br /><ul><li>Show only as much data as is needed.</li></li></ul><li>New York Times<br /><ul><li>Don’t overcomplicate. It’s okay to use a dot plot.</li></li></ul><li>Keep the Goal in Mind<br />
    16. 16. Hipmunk<br /><ul><li>Show, don’t tell.
    17. 17. Remove or hide irrelevant data.</li></li></ul><li>Periscopic<br /><ul><li>Highlight anomalies.
    18. 18. Don’t leave everything up to the viewer.</li></li></ul><li>Copley, Praxis; Wagner, DSCI<br />Utopia Compression<br /><ul><li>Use high contrast colors or other means to focus attention
    19. 19. Show secondary information subtly.</li></li></ul><li><ul><li>Use context minimally.
    20. 20. Reduce colors and labeling to only the essential.</li></li></ul><li>Small Multiples<br />
    21. 21. <ul><li>Minimize and multiply.
    22. 22. Use interaction to expand on the data.</li></li></ul><li>JULY 10-14 AVERAGES<br />Tucson 102<br />Phoenix 109<br />Flagstaff 98<br />Sedona 99<br /><ul><li>Minimize and multiply.
    23. 23. Use interaction to expand on the data.</li></li></ul><li><ul><li>Use illustrations if necessary.</li></li></ul><li><ul><li>Keep your set to a manageable number.</li></li></ul><li>Ignatius Rigor<br /><ul><li>Use animation to show subtle changes.</li></li></ul><li>Kim Rees, Periscopic<br />kim@periscopic.com<br />@krees, @periscopic<br />We’re hiring! See now.periscopic.com<br />

    ×