In a world where all our online interactions – and increasingly offline ones too – are logged and measured, how do designers integrate and present this information in a meaningful way?
Whether it be real-time Twitter search results, Last.fm listening history or personal Fitbit stats, we now expect services to serve up, compare and contextualize the most interesting bits of our behaviour from the scores of data they collect about us.
If you want to add stats, graphs and other bits of lifestream data to your web app, this workshop is for you. Leave with an understanding of how to wrestle with interaction design challenges such as: dealing with too much/too little user-generated data; what to show different user types (e.g. logged in/out users); when to show aggregate vs. individual datasets and more.
10. We need to stop grasping for the
perfect visualization and return to
the basic language of charts and
graphs. Only then can we begin to
uncover the relationships the data
has to offer.
– Brian Suda
Photo credit: andré.luís on Flickr
41. For us: we need to have sharp presentation
skills for conveying the speed of the data
For users: they care, and will often expect
things to be in real-time.
43. For us: we’re faced with a new challenge of
how to reflect this meaningfully to users
For users: they are becoming increasingly
aware of their history
53. Getting the stuff you want out:
An API allows you to call methods. A
method is a structured way for asking for a
particular bit of information from an online
service.
54. Something like, “Hey, I want some info about
this thing” “How many?” “10, and be sure to
include the picture bits”
73. Line Graphs
Good for showing continuous data and
visualising trends. Line graphs are good for
answering questions like “How did it look
during ____?”
75. Bar Charts
Good for visually comparing discreet data
and very versatile as the data in a bar chart
can be ordered however you want. Great for
answering questions like, “which one is___?”
77. Sentence (yes, the sentence!)
Good for contextualising data in a
conversational tone. Great for answering
questions that could use a bit of personality.
81. Favlikelovestar+1
Good for services that have lifestream data
that people want to hug; use these for that
visceral “I want to keep this! I love this!”
response.
85. Thumbs & Stars
Good for services that depend on ratings for
good content to bubble to the top. Answers
the question “what do people think is best”?
89. And remember to layer:
At first sight, reveal the bare minimum
With contextual UI, reveal more
For the discerning, link to the source
90. What: re-envision Shazam’s tagged track UI,
using some of the patterns we just talked
about.
Why: we could use any music API out there
to show more relevant data about what you
just found/remembered. IT !
C H
ET
S K
105. ANONYMOUS MINE SOMEONE ELSE
DATA IS Logged out, looking Logged in, looking at Logged in, looking at
PRESENT at some data my data someone else’s data
NO DATA Logged in, looking at
YET! Logged out, looking Logged in, looking at
where someone else’s
at no data (yet) where my data will go
data will go
111. What: re-envision an eBay seller profile
screen, for at least 2 cases.
Why: There’s a ton of data at hand, and very
little revealed about this person you’re about
to fork over cash money to.
T !
I
C H
ET
S K
120. What: would Twitter look like if it showed
what you’d been up to for the last few
months as well?
Why: because nobody’s done it yet :)
T !
I
C H
ET
S K
121. Our data trails are getting
long
Part V
Photo credit: Gonzak on Flickr
123. We’ve all been so
distracted by The Now
that we’ve hardly noticed
the beautiful comet tails
of personal history
trailing in our wake.
– Matthew Ogle