SlideShare ist ein Scribd-Unternehmen logo
1 von 136
Downloaden Sie, um offline zu lesen
Information Design for an
Instrumented World
Hannah Donovan, 10 October 2011
Hello! I’m Hannah
Who are you?
I have a secret to tell you.
“The solution is the problem.”
What about you?
What you’re not going to learn this morning.
Information Design for an Instrumented world
By albyantoniazzi on flickr
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
Photo credit: Alex Pounds
Olivier Gillet says:

MAKE

Photo credit: Alex Pounds
Olivier Gillet says:

MAKE A

Photo credit: Alex Pounds
Olivier Gillet says:

MAKE A POINT.

Photo credit: Alex Pounds
So what are we going to explore today?
The details.
The details are not the details. They make the design.
– Charles Eames
We people, we have a lot of details now. We
live in an instrumented world
Most of our instrumented world is measured
in terms of attention data.
ACTIVE          PASSIVE
  posting        scrobbling
checking in   location tracking
 tweeting     health monitoring
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
Information Design for an Instrumented world
You guys…
This is kind of crazy.
New conceptual breakthroughs are
invariably driven by the
development of new technologies.

– Don Norman




Photo credit: Piemont Share on Flickr
~2005




~2010
~2005   Web APIs become popular




~2010
~2005   Web APIs become popular

        Moore’s law applied to data storage




~2010
~2005   Web APIs become popular

        Moore’s law applied to data storage

        Big data




~2010
~2005   Web APIs become popular

        Moore’s law applied to data storage

        Big data

        Ability to build real-time interfaces

~2010
~2005   Web APIs become popular

        Moore’s law applied to data storage

        Big data

        Ability to build real-time interfaces

~2010   Cloud computing
Our job is to make sense of this
instrumented world and all the
information in it.
1.

COMMON FORMATS AND PATTERNS
ARE EMERGING
For us: be aware and inquisitive, so we can
choose the right tool for the job
For users: they will expect certain things to
work in certain ways
2.

THE AMOUNT OF PERSONAL DATA
CAN BE OVERWHELMING
For us: spoiled for choice, we have more
decisions to make than ever before.
For users: signal vs. noise is becoming a
common problem.
3.

DATA HAS DISTINCT TIMING
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.
4.

OUR DATA TRAILS ARE STARTING TO
GET LONG
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
OUR TOOLKIT
Part I
1.

UNDERSTANDING THE DATA
Use the WW brief:
What do you want, and why do you want it?
Use the WW brief:
What do you want, and why do you want it?



(It’s your job to figure out how to do it).
WHAT         WHY
the goal    use case
            evidence
           hunch etc.
2.

GETTING THE DATA
Is it a data dump or is it live?
If it is live, then you are probably relying on
an API (your own or external).
An API:
Collectively, an API is a bit like a
“styleguide” — it defines vocabularies and
conventions
Basically, “Here’s the stuff you can get, and
the format you’ll get it in”
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.
Something like, “Hey, I want some info about
this thing” “How many?” “10, and be sure to
include the picture bits”
Information Design for an Instrumented world
Don’t clean up API vomit!
If the service is currently being worked
on by your team, establish a dialogue
with them about this.
Types of questions I like to ask:

What parameters can it have?
How expensive is this?
What can we compare this against?
If the answer is “no”…
Explain what you want and why you
want it. Let them figure out how ;-)
3.

DESIGNING THE DATA
1. Sketch UI with pen & paper
2. Get the data in-page
3. Design the UI in-page
Design patterns for
    visualising personal data
    Part II




Photo credit: number657 on Flickr
Feeds
Answers the question “what’s been
happening recently?”
Twitter, Facebook
Ranked Lists & Leaderboards
Answers the question “who’s winning?”
Ranked lists & leaderboards: Foursquare, Last.fm
User-facing Stats
Good for showing a user’s overall
performance/usage and answers the
question “How am I doing?”
User facing statistics: Flickr Pro, Amazon Author Central
Counters
Good for showing less than three key
statistics about a user, and answers the
question “How am I doing?” at a glance.
Counters: Hype Machine, Twitter, Foursquare, Dribble, Lanyrd
Sparklines
Good for showing a huge amount of data in
small space, and can answer questions about
trends within a sentence.
Sparklines: From Edward Tufte’s ‘Beautiful Evidence’, Flickr, Amazon
Line Graphs
Good for showing continuous data and
visualising trends. Line graphs are good for
answering questions like “How did it look
during ____?”
Line graph: Run Keeper, Withings Body Scale
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___?”
Bar chart: Last.fm, Nike+, Brian Suda’s ‘Designing with Data’
Sentence (yes, the sentence!)
Good for contextualising data in a
conversational tone. Great for answering
questions that could use a bit of personality.
Sentence: Huffduffer, Last.fm
Realtime Search
Good for filtering out signal in vast amounts
of real-time noise. Answers the question
“what is happening with x right now?”
Sentence: Twitter, Google
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.
Favlikelovestar+1: Instagram, Favstar, Spotify
Reblah
Good for services that want to cater to lazy
usage. Responds to the impulse “I want to
make this part of my identity too”
Reblah: Tumblr, Twitter
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”?
Thumbs & Stars: eBay, iTunes store, YouTube, Last.fm images
Notifications
Good for important bits of real-time activity
people don’t want to miss out on. Often
fosters serendipity.
Notifications: Facebook, Google+, Android, Email
And remember to layer:
At first sight, reveal the bare minimum
With contextual UI, reveal more
For the discerning, link to the source
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
T !
              I
        C H
      ET
S   K
T !
              I
        C H
      ET
S   K
T !
              I
        C H
      ET
S   K
Personal & profile data
Part III
1.

IN ‘N OUT DATA
Home: reflecting incoming data
Home: Feedville. Population, all of us.
Profile: reflecting outgoing data
Profile: new Facebook
Take a minute to remember personal
editorial.
Take a minute to remember personal
editorial.




Profile: MySpace circa 2006
2.

IT’S ALL CONTEXT, BABY
ON:
                    Goal-driven device

                               phone

                               PC
                          ds              up          rk
ABOUT THE:
                       ien              ro      et wo
              me     fr               g        n
 Individual                                            Aggregate

                               iPad


                               TV
                   Browse-based device
2.

CASES
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
Tip for dealing with cases:
Keep your own UI gallery
Cases: Logged in, looking at where my data will go
Cases: logged in, looking at my data
Cases: logged in, looking at someone else with no data yet
Another tip:
Lay off the lorum ipsum.
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
Information Design for an Instrumented world
Information Design for an Instrumented world
Time
Part IV




Photo credit: alphadesigner on Flickr
Joined


      History (archives)


      Past (~1 week ago)


      Recent past (~1 day ago)


Now   Real time
Realtime
Recent past & Past
History
Time shifting
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
Our data trails are getting
    long
    Part V




Photo credit: Gonzak on Flickr
How do we organise these long data trails?
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
We need to curate, look again.
Architecture of
serendipity

– Frank Chimero
A final challenge…
1.

THEMES
Information Design for an Instrumented world
2.

ANNOTATIONS
Information Design for an Instrumented world
3.

RELATIONSHIPS
Information Design for an Instrumented world
4.

ARRANGEMENT
5.

MAINTENANCE
Thanks for coming along!
Contact & questions:


Real-time: @han
Archival: han@hannahdonovan.com

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 

Kürzlich hochgeladen (18)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 

Information Design for an Instrumented world