Responsive Information Design

Friday, August 3, 2012

What isREsponsive design?

Friday, August 3, 2012

What isRESPONSIVE 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 isRESPONSIVE INFORMATION DESIGN?

Friday, August 3, 2012

What isRESPONSIVE 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

D3.js Data driven documents

...and most of the time you won’t know exactly what your data will look like

https://github.com/mbostock/d3/wiki/Gallery

Friday, August 3, 2012

Data driven design

Your data could look like this.

WORKING WITH DATA CAN BE HARD.SOMETIMES YOUR DATA IS NICE AND CLEAN.

Friday, August 3, 2012

Data driven designWorking 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 designSometimes your data doesn’t behave.

Or like this...Oops....

Friday, August 3, 2012

Solution #1RESPONSIVE 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 #1EXAMPLES

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 #2FALLBACKS & ERROR HANDLING

Sometimes the data you expect to return doesn’t co-operate and you are left with a null result

missing data

Sometimes you have to deal with malformed data that can’t be visualized.

Friday, August 3, 2012

solution #2EXAMPLE FALLBACKS

Missing or Malformed data No Data Available

Friday, August 3, 2012

solution #2ERROR 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" message = "We couldn’t find anyone by the name of {{ screen_name }}. Try entering a different name." when "twitter_unknown_error" message = "Twitter is being stubborn. Try again now or take a Facebook infographic for a spin." when "pb_no_result" 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."

“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 #3DYNAMIC 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

Solution #3DYNAMIC 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

Solution #3EXAMPLE

Data-driven Callouts

Friday, August 3, 2012

Solution #4KNOW 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 #4EXAMPLEOnce 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 #4EXAMPLE

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

adam@visual.ly

GET IN TOUCH

Adam Breckler

For more on responsive information design, checkout our blog athttp://blog.visual.ly

Friday, August 3, 2012