Big Data in Small Graphics: Microvisulaizations 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

@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
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
● Cues for similarity are strongest
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 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
● 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
IPHONE
29

Stops
30

Dates
31
SCHEDULED
ACTUAL

Icon strip
32
OBJECT 1 - HAS NO CONTENT
OBJECT 2 - HAS SOME CONTENT
OBJECT 3 - HAS ALL THE CONTENT

Badges
33
IPHONE

Small multiples
34

Maps – small multiples
35
DYNATRACE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
PROCESS
VISUALIZATIONS2

One step
37
Attach
invoice

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

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

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

Small multiples
41
93-50439
93-51364
93-51592

Small multiples compressed
42
US1233
US1285
US1291
C
P
D

With arrow shapes
43

A series of steps (vertical)

A series of steps (vertical)
PARCELTRACK
45

Steps
46
GOOGLE MAPS

Group of status indicators

Small multiples

Array of status indicators
49

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
PERFORMANCE
STATISTICS3

Goals vs. actuals
51

Goals vs. actuals
52

Goals vs. actuals
53
NEST

Goal as a range
54
FITBIT

Small multiples with controls
55
FACEBOOK INSIGHTS

Small multiples with an array
56

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

Interaction temperature
58
FACEBOOK INTERACTIONS

Chart in shape of an icon
59
FITBIT

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8
GROWTH
GRAPHICS4

Growth visualization
61
FORD EFFICIENCY LEAVES

Growth
visualization
62

Wedges
DUOLINGO
63

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8TIMELINES5

Timeline as navigation
65
ROUNDUP READY

Timeline as navigation
66
SCRIBBLELIVE DAILY

Timeline with quantity
67
JOHN LARKIN

Up & down shapes (wins & losses)
68

Timeline patterns
69
JAWBONE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8TREND
INDICATORS6

Up/down
71

Up/down
72

Sparklines
73
TWITTER DASHBOARD

Sparkline effect
74
DYNATRACE
DYNATRACE

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8PREVIEWS7

Visualizing the number of available options
KAYAK
76

Visualizing a complex transaction
77

Visualizing impact of choices
FIDELITY RETIREMENT CALCULATOR
78

STATUS1 PROCESS
STATISTICS3 GROWTH
GRAPHICS4
TIMELINES5 TREND
ORIENTATION8 NAVIGATION &
ORIENTATION8

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

Book navigation
81

Welcome back
82
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
designforcontext.com

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

Big Data in Small Graphics: Microvisulaizations in SAAS and Enterprise Applications

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Big Data in Small Graphics: Microvisulaizations in SAAS and Enterprise Applications

Similar a Big Data in Small Graphics: Microvisulaizations in SAAS and Enterprise Applications (20)

Más de UXPA International

Más de UXPA International (20)

Último

Último (15)

Big Data in Small Graphics: Microvisulaizations in SAAS and Enterprise Applications