Responsive Information Design
 

Responsive Information Design

on

  • 9,802 views

A primer on responsive information design.

A primer on responsive information design.
More here: http://blog.visual.ly/responsive-information-design

Statistics

Views

Total Views
9,802
Views on SlideShare
1,255
Embed Views
8,547

Actions

Likes
8
Downloads
9
Comments
0

13 Embeds 8,547

http://blog.visual.ly 7642
http://visual.ly 481
http://blog.voxe.org 343
http://ecomwiki.walgreens.com 34
http://ecomwiki 31
http://translate.googleusercontent.com 8
https://www.google.com.lb 2
http://dev.visual.ly 1
https://www.google.com 1
http://172.18.10.151 1
http://search.yahoo.com 1
http://www.bing.com 1
http://assets.txmblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Team has leading experts in marketing, product development, and content curation\n

Responsive Information Design Responsive Information Design Presentation Transcript

  • Friday, August 3, 2012
  • What is REsponsive design?Friday, August 3, 2012
  • What is RESPONSIVE DESIGN? Responsive Design aimes to produce the optimal user experience for different use cases and enviroments, all built into one website.Friday, August 3, 2012
  • What is RESPONSIVE INFORMATION DESIGN?Friday, August 3, 2012
  • What is RESPONSIVE INFORMATION DESIGN? Responsive Information Design aimes to produce the optimal viewing experience for different forms, shapes and sizes of information. data!Friday, August 3, 2012
  • Data driven design IN OTHER WORDS... How should you design when you don’t know what the data will look like? ?Friday, August 3, 2012
  • Data driven design ...and most of the time you won’t know exactly what your data will look like D3.js Data driven documents https://github.com/mbostock/d3/wiki/GalleryFriday, August 3, 2012
  • Data driven design WORKING WITH DATA CAN BE HARD. SOMETIMES YOUR DATA IS NICE AND CLEAN. Your data could look like this.Friday, August 3, 2012
  • Data driven design Working with data can be hard. Sometimes your data is nice and clean. Or your data could look like this.Friday, August 3, 2012
  • Data driven design Sometimes your data doesn’t behave. Or like this...Oops....Friday, August 3, 2012
  • Solution #1 RESPONSIVE SCALING By scaling down the size of the individual data-driven elements to fit their parent container, we can accomodate for a variable # of data points.Friday, August 3, 2012
  • Solution #1 EXAMPLES Example 1: Elements are scaled at 100% width and height of container. Example 2: Element sizes proprotionaly scaled down to fit container.Friday, August 3, 2012
  • solution #2 FALLBACKS & ERROR HANDLING Sometimes the data you expect to return doesn’t co-operate and you are left with a null result Sometimes you have to deal with malformed data that can’t be visualized. missing dataFriday, August 3, 2012
  • solution #2 EXAMPLE FALLBACKS Missing or Malformed data No Data AvailableFriday, August 3, 2012
  • solution #2 ERROR HANDLING switch data.error when "api_limit_exceeded" message = "The Twitter data gnomes are out of breath. Give them {{ time_remaining }} minutes to catch up with you, and try a Facebook infographic in the mean time." when "twitter_over_capacity" message = "Twitter is showing us the Fail Whale right now. Try again in a minute or two, or take a Facebook infographic for a test drive." when "timeout" message = "We thought you left! Log in again to get started." when "protected_user" message = "We can’t create an infographic for {{ screen_name }} because it’s a private account. Try a different name." when "no_valid_user" message = "{{ screen_name }} doesnt exist. Try a different name." when twitter_no_followers message = "{{ screen_name }} doesnt have any followers. Try a different name." when twitter_no_hashtag message = "We didnt find any tweet with hashtag #{{ hashtag }}. Try a different one." when "no_result" message = "The data gnomes are coming up empty-handed on this one. Try a different account." when "invalid_input" “The data gnomes stumbled upon a mysterious problem called {{ error }}. message = "We couldn’t find anyone by the name of {{ screen_name }}. Try entering a different name." when "twitter_unknown_error" Please try again. Let us know if this problem continues by opening the message = "Twitter is being stubborn. Try again now or take a Facebook infographic for a spin." when "pb_no_result" feedback tab on the right side of the page” message = "Some of the data we wanted to show you is missing. This is the best we could do." when "pb_unexpected_response" message = "Something isn’t right with the Twitter data. Try a different username or check out a Facebook infographic." when not_authorized message = "We can’t create this {{category}} infographic for you right now. Please start over and get in touch using the feedback tab on the right side of the page if this happens again." when datamodel_error # this happens when the JSON couldnt be parsed (from the ROM API) message = "Something isn’t right with the Twitter data. Try a different username or let us know about the problem by using the feedback tab on the right side of the page." when api_timeout message = "The data gnomes were too slow fetching your data. We had to give up waiting. Try again now." when fb_no_gender message = "Your gender isn’t specified in your Facebook account. Without it, your monsterized self will look strange. Select a gender on Facebook and then come back and try again." when fb_unexpected_error message = "Something isn’t right with the Facebook data. Try again or let us know about the problem by using the feedback tab on the right side of the page." when connection_failed message = "Our connection to the data source failed. Please try again. Let us know if this problem continues by opening the feedback tab on the right side of the page." when no_session message = "We thought you left! Log in or create an account to get started." when no_session message = "Looks like youve been logout. Please refresh the page and login again" when no_export message = "Sorry, we had a problem generating your image." when face_api_limit message = "Many people just like you would like to see their monster at this very moment. Please try again in a few minutes." else message = "The data gnomes stumbled upon a mysterious problem called {{ error }}. Please try again. Let us know if this problem continues by opening the feedback tab on the right side of the page."Friday, August 3, 2012
  • Solution #3 DYNAMIC STORYTELLING Tip: Be carefull to steer clear of blanket value judgements. Unless you have very clear criteria to judge a ‘good’ or ‘bad’ result with, it is advisible to leave strong value judgements out of your design. Great Job! Poor show So-SOFriday, August 3, 2012
  • Solution #3 DYNAMIC STORYTELLING Tip: Instead of value judgements, Data-Driven Callouts can give context to a design without allowing for viewers to miss-judge the takeaway. Data-Driven CalloutsFriday, August 3, 2012
  • Solution #3 EXAMPLE Data-driven CalloutsFriday, August 3, 2012
  • Solution #4 KNOW THY DATA SOURCE “Can we get the data for this?” is the most common question. Start your design process by getting to know your data source and testing out the edge cases. Rest assured, there will be edge cases.Friday, August 3, 2012
  • Solution #4 EXAMPLE Once you have settled on an idea for your story, start with a rough sketch of the design and only after validating that you can get the data you want, move to a higher fidelity mockup. Tip: Move from your design mockup to prototyping with code asap to ensure no wasted effort.Friday, August 3, 2012
  • Solution #4 EXAMPLE Iterate through the loop until the story is perfected, then move on to the high fidelity mock. Tip: Be comfortable with the fact that your story will change and you will have to revist your design.Friday, August 3, 2012
  • Appendix GET IN TOUCH Adam Breckler adam@visual.ly For more on responsive information design, checkout our blog at http://blog.visual.lyFriday, August 3, 2012