Micro-visualizations: Small Visualizations that Make a Big Impact

@design4context Micro-visualizations UXDC 2017 1
Rachel Sengers + Lisa Battle
User experience designers
@design4context
Micro-visualizations
SMALL VISUALIZATIONS THAT MAKE A BIG IMPACT
#UXDC2017 #microvizUXDC • 15 APRIL, 2017
Presentation is online – Go to www.designforcontext.com/publications

Lisa Battle
Jennifer Chaffee
SPEAKERS SHOUT OUT TO
@design4context
Rachel Sengers Michael Owens

We hear a lot about big data visualizations
these days, but what about small data? The
power of communicating data visually can’t be
overstated. When designing for expert users,
we often need to convey a lot of information
at a glance to help them make quick decisions
and work efficiently. For infrequent or novice
users, a visual overview of a process or
concept can provide orientation and help
reduce the risk of mistakes.

Enter the micro-visualization, a way of
packaging detailed information in an easily
digestible, visual way.
In this presentation, we present examples of
several different types of micro-visualizations
and discuss how they can be used effectively to
improve user experience.

So… what is a micro-visualization?

NOT A MICRO-VISUALIZATION
0
20
40
60
80
100
120
140
160
180
2011 2013 2014 2015 2016
In Rs 000' crores
Export and Imports
Export
Imports

A GESTURE AT THE DATA
Export Imports last 5 years

NETWORK MONITORING APP
DESIGN FOR CONTEXT PROJECT
It’s small
Not the focus
of the app
Part of a larger
page – not the
entire page
Embeddable
NOT A MICRO-VISUALIZATION MICRO-VISUALIZATION
MAP APP
ZILLOW

It’s small
Not a deep,
immersive
experience
But it can point
to one
Easily digestible
Small number of
data dimensions
Can be parsed
quickly
Not the focus
of the app
Part of a larger
page – not the
entire page
Embeddable
Re-usable

STATIC – NOT DATA DRIVEN DATA DRIVEN
OPENTABLE
It’s data-driven

The mechanics of visualization
Item A 1 of 5 steps done
Item B 3 of 5 steps done
Item C 2 of 5 steps done
A
B
C

The mechanics of visualization
Item A 150 cubic feet
Item B 101 cubic feet
Item C 172 cubic feet
B
C
A

Visual vocabulary USING PRE-ATTENTIVE PROCESSING
THANKS TO: STEPHEN FEW, JACQUES BERTIN, WEISKOPF/MACHIRAJU/MÖLLER
CATEGORIES
Different types
of distinct
items
ORDER
Items are in an
order
QUANTITATIVE
How much
(higher number,
bigger, taller,
more important)
LINE
LENGTH
SHAPEPOSITIONSIZE
IMPRECISE
VALUE
(SHADE)
LIMITED
TEXTURE
LIMITED
COLOR
(HUE)
LIMITED
(MOTION)
LIMITED
LIMITED2-D POSITION

Gestalt
THANKS TO: STEPHEN FEW’S INFORMATION DASHBOARD DESIGN BOOK
PROXIMITY ENCLOSURESIMILARITY
COLOR SIZE SHAPE ORIENTATION
CONNECTION
WHAT BELONGS TOGETHER + WHAT IS DIFFERENT
CLOSUREALIGNMENT
(A.K.A. CONTINUITY)
COMBINATION EXAMPLE

Using visual indicators in combination

Singletons
Label of thing!

Groupings
Label of thing!

Small multiples
Label of second thing!
Label of first thing
Label of third thing
Label of fourth thing!

Arrays
!
!
!

● Their knowledge & experience
● What’s important for them to know
at a glance
● What needs to be called to their
attention?
● What are the typical
quantities/ranges they are dealing
with? What are the outliers?
Designing for user context

STATUS1 PROCESS
VISUALIZATIONS2 PERFORMANCE
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
INDICATORS6 PREVIEWS7 NAVIGATION &
ORIENTATION8
STATUS1

@design4context Micro-visualizations UXDC 2017
Power indicator 3 data dimensions: completeness, urgency, power status
IPHONE
22

Stops 3 data dimensions
23
category
completion
urgency, exceptions
re-usable element, creates visual language

Dates 3 data dimensions: category, completeness, urgency
24
SCHEDULED
ACTUAL

Icon strip Differentiating presence/absence of content
25
OBJECT 1 - HAS NO CONTENT
OBJECT 2 - HAS SOME CONTENT
OBJECT 3 - HAS ALL THE CONTENT

Badges Shape size reinforces quantity
26
IPHONE

Color bars Position & color indicates urgency; use of small multiples
27

Maps Small multiples
28
DYNATRACE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
PROCESS
VISUALIZATIONS2

Steps Status indicators in ordered sequence, left-to-right
30

Steps Status indicators in sequence; icons for category of steps

Steps Horizontal, vertical
32
GOOGLE MAPS

Percent complete Progress bar, left-to-right
33
FACEBOOK 2012
LINKED IN 2017

Percent complete Bottom up
34
LINKEDIN

Group of status indicators Progress bar effect

Small multiples Bar chart effect

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
PERFORMANCE
STATISTICS3

Goals vs. actuals
38

Goals vs. actuals Controls to change context
39

Goals vs. actuals Leaf as goal & status indicator
40
NEST

Goal as a range
41
FITBIT

Small multiples Controls to change what you’re comparing
42
FACEBOOK INSIGHTS

Small multiples with an array
43

Small multiples with an array
44

Frequency heat mapPEOPLE HR
COLOR BLINDNESS
RED/GREEN DEUTERANOPIA
RED/GREEN PROTANOPIA
BLUE/YELLOW TRITANOPIA
45

FACEBOOK INTERACTIONS
Interaction temperature
Lack of pre-attentive cues to convey relative quantity

Chart as an icon When reach goal, chart turns into motivational icon
47
FITBIT

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
GROWTH
GRAPHICS4

Growth visualization
49
FORD EFFICIENCY LEAVES

Growth visualization
50

Wedges Use of segments (intervals)
DUOLINGO
51

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8TIMELINES5

Status icons in a sequence
PARCELTRACK
53

Timeline as navigation
54
ROUNDUP READY

Timeline as navigation
55
SCRIBBLELIVE DAILY

Timeline with quantity
56
JOHN LARKIN

Timeline patterns
57
JAWBONE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8TREND
INDICATORS6

59
Arrows Up/down/zero direction, use of color

Triangles Up/down direction
60

Sparklines In combination with up/down arrows & color
61
TWITTER DASHBOARD
Sparklines, popularized by Ed Tufte: a micro-visualization of a line chart

Sparkline effect
62
DYNATRACE
DYNATRACE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8PREVIEWS7

Calculator with dial
FIDELITY RETIREMENT CALCULATOR
64

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8 NAVIGATION &
ORIENTATION8

Article orientation
WALKER LIVING COLLECTIONS CATALOGUE
Visualization
on right hand
side
66

Article orientation
WALKER LIVING COLLECTIONS CATALOGUE
67
Where you are
now +
relative length
of this section

Book navigation
68
KINDLE APP

Welcome back
69
Visualization
on right hand
side
MICROSOFT OFFICE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8

● Packaging detailed information in an easily digestible, visual way
● Singletons, groupings, small multiples, arrays
● Examples of different ways that microvisualizations can be used
● Designing for user context

Rachel Sengers + Lisa Battle
User experience designers
@design4context
Micro-visualizations
SMALL VISUALIZATIONS THAT MAKE A BIG IMPACT
#UXDC2017 #microvizUXDC • 15 APRIL, 2017
Presentation is online – Go to www.designforcontext.com/publications

Micro-visualizations: Small Visualizations that Make a Big Impact

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to Micro-visualizations: Small Visualizations that Make a Big Impact

Similar to Micro-visualizations: Small Visualizations that Make a Big Impact (20)

More from Design for Context

More from Design for Context (20)

Recently uploaded

Recently uploaded (20)

Micro-visualizations: Small Visualizations that Make a Big Impact