Download - Lean UX Design: #5 data visualisation
I
Andrius Butkus2013
Lean UX Design#5 displaying data on mobile devices
as a user i want something, so that value
i am bored, entertain mei want to learn somethingi want to organize my stuffi need this information NOWi want personalized stuff to supplement/replace other mediai am doing something, what’s my progress...
#1 what does my app do?#2 what data my app collects?#3 what does my app present?
your app solves a need Xthat requires data Y
that will be presented as Z
X product managerY data scientistZ designer👤
value?data? 📱
locationtime motion
✓📊content
⏲ raw data
processed data
personalaccomplishments
data? 📱 value?
accelerometer · gyroscope · compass · GPS
pitch
roll
yaw
accelerometer · gyroscope · compass · GPS
GPScoordinates
compassdirection
gyroscopeorientation
accelerometeracceleration
motion co-processor
organizefinance
live sportsleepfitness
...
app
👤
dataneed
? ?
reverse engineer: what’s the need, what’s the data?
five apps
visited countries stock market Formula 1 racing Sleep cycle Running
organizefinance
live sportsleepfitness
...
📱app
👤
dataneed
insight & curiositybe up to date & react
get additional game datawake up freshget fit, share
...
manual entry + locationfinance datagame data
motion sensor + timesensors + time + GPS + social
...
📱small screen
slow connectionalways with you
sensorstouch interface
+ -
displaying information on your mobile?
show raw datashow raw data, but highlight what’s important
abstract data into more meaningful entitiesfind relations in the data
evaluate the impact for youenable you to take actions
suggest the best action you should take
📱small screen
slow connectionalways with you
sensorstouch interface
+ -
displaying information on your mobile?
context context
using gestalts laws tohighlight what’s important
highlight important
add context
ux design ux design ux design ux design
ux design ux design ux design ux design
ux design ux design ux design ux design
ux design ux design ux design ux design
ux design ux design ux design ux design
ux design ux design ux design ux design
ux design ux design ux design ux design
ux design ux design ux design ux design
color
positions and alignment
texture
orientation
size
shape
re-arrange data
alphabeticallynumerically
by date or timeby physical locationby category or tag
by popularityuser-designed arrangement
show only what you need
patterns
datatipsdata spotlight
dynamic queriesdata brushinglocal zoomingsortable tablemulti-Y graphs
...
data tips
data spotlight
dynamic queries
data brushing
local zooming
sortable table
multi-Y graphs
examples of mobile apps displaying information
what’s the user need?what’s the data?
how is data collected?is data processed?
how is information presented?how to interact with the information?
experealLife Visualized
what’s the user need?what’s the data?
how is data collected?data from sensors and/or external?
is data processed in any way?how is information presented?
how to interact with the information?any enabled/suggested actions?
your app📱patterns
datatipsdata spotlightdynamic queriesdata brushinglocal zoomingsortable tablemulti-Y graphs
datashow raw datashow raw data, but highlight what’s importantabstract data into more meaningful entitiesfind relations in the dataevaluate the impact for youenable you to take actionssuggest the best action you should take
focus & context
