Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications

UXPA 2018 • June 26, 2018
Big Data in Small Graphics
Micro-visualizations in SaaS & enterprise applications
! #UXPA2018 @design4context
Lisa Battle
President & Principal Consultant
lisa@designforcontext.com
Rachel Sengers
User Experience Designer
rachel@designforcontext.com
slides posted at: www.designforcontext.com/insights

@design4context Micro-visualizations UXPA 2018 2
SPEAKERS
@design4context
Lisa Battle Rachel Sengers

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
2013 2014 2015 2016 2017
In Rs 000' crores
Export and Imports – Last 5 Years
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/sequence
QUANTITATIVE
How much
(higher number,
bigger, taller,
more important)
LINE
LENGTH
SHAPESIZE
IMPRECISE
VALUE
(SHADE)
LIMITED
TEXTURE
LIMITED
COLOR
(HUE)
LIMITED
(MOTION)
LIMITED
LIMITED
POSITION
2-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

Gestalt methods in combination
USING SHAPE ALONE
THANKS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE

IMPACT OF COLOR

PROXIMITY & CONTINUATION

IMPACT OF COLOR

IMPACT OF PROXIMITY

IMPACT OF ENCLOSURE (CONNECTION)

SUMMARY
● The strongest cues for similarity are
(in this order):
1. Connectedness
(Connection, Enclosure)
2. Proximity
3. Color
● Can use cues together to strengthen a
message about what’s the same or
different
● Can use cues separately to convey several
messages about different kinds of
relationships
THANS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE

Using color
Adapted from The Big Book of Dashboards, by Wexler, Shaffer, and Cotgreave
Color can be used to visually communicate…
Order (sequence)
e.g. low to high, or high to low
Divergence
e.g. opposite ends of a spectrum
Focus
to direct attention to a key point
Alert
to warn of a problem
Category
to differentiate things using color

Using visual symbols 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;
expert users and
newbies/infrequent users
● 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 UXPA 2018
Power indicator
3 data dimensions: completeness, urgency, power status
IPHONE
30

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

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

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

Badges Shape size reinforces quantity
34
IPHONE

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

Maps Small multiples
36
DYNATRACE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
PROCESS
VISUALIZATIONS2

One step
38
Attach
invoice

A series of steps (horizontal)
39
Request
approval
ApprovalAttach
invoice
Categorize
expenses

A classic process visualization
40
Request
approval
ApprovalAttach
invoice
Categorize
expenses
2

A classic process visualization
41
Request
approval
ApprovalAttach
invoice
Categorize
expenses
3

Small multiples
42
93-50439
93-51364
93-51592

Small multiples compressed
43
US1233
US1285
US1291
C
P
D

Steps with arrows
Arrows are often used in process visualizations (here, they form part of the step shapes)
44

Steps (vertical)
Status indicators in sequence; icons for category of steps; latest step at bottom

Steps (vertical)
Status indicators in sequence; icons for category of steps; latest step at top
PARCELTRACK
46

Steps Horizontal, vertical
47
GOOGLE MAPS

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
51

Goals vs. actuals With controls to change context
52

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

Goal as a range
54
FITBIT

Small multiples With controls to change what you’re comparing
55
FACEBOOK INSIGHTS

Small multiples with an array
56

Small multiples with an array
57

Quantity heatmap
COLOR BLINDNESS
RED/GREEN DEUTERANOPIA
RED/GREEN PROTANOPIA
BLUE/YELLOW TRITANOPIA
58
PEOPLE HR

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

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

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
GROWTH
GRAPHICS4

Growth visualization
62
FORD EFFICIENCY LEAVES

Growth
visualization
63

Wedges Use of segments (intervals)
DUOLINGO
64

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8TIMELINES5

Timeline as navigation
66
ROUNDUP READY

Timeline as navigation
67
SCRIBBLELIVE DAILY

Timeline with quantity
68
JOHN LARKIN

Up & down shapes (win & loss)
69
www.anychart.com/blog/2016/04/02/winloss-javascript-sparkline-chart-anychart/

Timeline patterns
70
JAWBONE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8TREND
INDICATORS6

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

Triangles Up/down direction
73

Sparklines In combination with up/down arrows & color
74
TWITTER DASHBOARD

Sparklines - types
75
TWITTER DASHBOARD
Regular sparkline
Min and max points
First and last points
Markers
Column chart
Win loss chart

Sparkline effect
76
DYNATRACE
DYNATRACE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8PREVIEWS7

Visualizing the number of available options
78
KAYAK

Visualizing the number of available options
79
KAYAK
KAYAK

Visualizing impact of choices
80FIDELITY RETIREMENT CALCULATOR

Visualizing impact of choices
81FIDELITY RETIREMENT CALCULATOR

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8 NAVIGATION &
ORIENTATION8

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

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

Book navigation
85
KINDLE

Welcome back
86
Visualization
on right
hand side
MICROSOFT OFFICE - POWERPOINT

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8

● Packaging detailed information in an easily digestible,
visual way.
● Simplify – remove extraneous elements.
● Singletons, groupings, small multiples, arrays
● Different ways that microvisualizations can be used
● Designing for user context

Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications

Similar to Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications (20)

More from Design for Context

More from Design for Context (20)

Recently uploaded

Recently uploaded (20)

Big Data in Small Graphics: Micro-Visualizations in SaaS and Enterprise Applications