The document discusses responsive design and data-driven design. It describes responsive design as producing an optimal user experience across different environments from one website. Responsive information design similarly aims to optimize viewing experiences for information of different forms and sizes. The document then provides several solutions for designing when the data is unknown or behaves unexpectedly, such as responsive scaling, fallbacks for missing data, error handling, dynamic storytelling using data-driven callouts instead of value judgments, and thoroughly understanding the data source before designing.

1. Friday, August 3, 2012

2. What is
REsponsive design?
Friday, August 3, 2012

3. 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

4. What is
RESPONSIVE INFORMATION DESIGN?
Friday, August 3, 2012

5. 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

6. 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

7. 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/Gallery
Friday, August 3, 2012

8. 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

9. 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

10. Data driven design
Sometimes your data doesn’t behave.
Or like this...Oops....
Friday, August 3, 2012

11. 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

12. 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

13. 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 data
Friday, August 3, 2012

14. solution #2
EXAMPLE FALLBACKS
Missing or Malformed data No Data Available
Friday, August 3, 2012

15. 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 }} doesn't exist. Try a different name."
when 'twitter_no_followers'
message = "{{ screen_name }} doesn't have any followers. Try a different name."
when 'twitter_no_hashtag'
message = "We didn't 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 couldn't 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 you've 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

16. 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-SO
Friday, August 3, 2012

17. 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
Callouts
Friday, August 3, 2012

18. Solution #3
EXAMPLE
Data-driven
Callouts
Friday, August 3, 2012

19. 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

20. 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

21. 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

22. Appendix
GET IN TOUCH
Adam Breckler
adam@visual.ly
For more on responsive information design, checkout our blog at
http://blog.visual.ly
Friday, August 3, 2012