Responsive Data Design: Handling Variable Data

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.


What is
RESPONSIVE INFORMATION DESIGN?


What is
RESPONSIVE INFORMATION DESIGN?
Responsive Information Design aimes to produce the optimal viewing experience
for different forms, shapes and sizes of information.

data!


Data driven design
IN OTHER WORDS...
How should you design when you don’t know what the data will look like?

?

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


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

Your data could look like this.


Data driven design
Working with data can be hard.
Sometimes your data is nice and clean.

Or your data could look like this.


Data driven design
Sometimes your data doesn’t behave.

Or like this...Oops....


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.


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.


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


solution #2
EXAMPLE FALLBACKS
Missing or Malformed data No Data Available


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


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


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


Solution #3
EXAMPLE

Data-driven
Callouts


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.


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.


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.


Appendix
GET IN TOUCH

Adam Breckler
adam@visual.ly

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


Responsive Data Design: Handling Variable Data

Recommended

Recommended

More Related Content

Similar to Responsive Data Design: Handling Variable Data

Similar to Responsive Data Design: Handling Variable Data (20)

More from Visually

More from Visually (20)

Recently uploaded

Recently uploaded (20)

Responsive Data Design: Handling Variable Data

Editor's Notes