This document discusses micro-visualizations, which are small, embedded visualizations that communicate detailed information in an easily digestible way. It provides examples of micro-visualizations from various applications and discusses design considerations for micro-visualizations, such as using pre-attentive attributes and Gestalt principles to group and differentiate data visually. The document is a presentation on micro-visualization design that examines types of micro-visualizations like status indicators, process visualizations, performance statistics, and growth graphics.
13. @design4context Micro-visualizations UXPA 2018 13
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
21. @design4context Micro-visualizations UXPA 2018 21
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
Gestalt methods in combination
THANS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
28. @design4context Micro-visualizations UXPA 2018 28
● 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
88. @design4context Micro-visualizations UXPA 2018 88
● 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
A GESTURE AT THE DATA