The power of communicating data visually can’t be overstated. We often need to convey a lot of information at a glance to help expert users 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. For all users, the micro-visualization is a small but powerful way to package detailed information in an easily digestible, visual form. Individually or arranged into arrays, these compact visual elements pack a huge punch, giving your users the ability to quickly assess trends, spot outliers, and identify priorities. This presentation will explore the use of data micro-visualizations to enhance user experience, the role of pre-attentive processing in your application’s visual language, and the impact of accessibility and responsiveness on both.
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
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
● 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
Gestalt methods in combination
THANS TO: JON HENSLEY (SMASHING MAGAZINE), ANDY RUTLEDGE
27. @design4context Micro-visualizations UXPA 2018 27
● 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
84. @design4context Micro-visualizations UXPA 2018 84
● 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
! #UXPA2018 @design4context
designforcontext.com