Lean UX Design #5 displaying data on mobile devices
Andrius Butkus 2013
I
as a user i want something, so that value i am bored, entertain me i want to learn something i want to organize my stuff i need this information NOW i want personalized stuff to supplement/replace other media i 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 X that requires data Y that will be presented as Z
đ&#x;‘¤
X product manager Y data scientist Z designer
data?
đ&#x;“ą
value?
data?
 â?˛  î ° content
time
location
motion
đ&#x;“ą
value?
đ&#x;“Š î•° ✓ raw data
processed personal data accomplishments
accelerometer 路 gyroscope 路 compass 路 GPS
GPS coordinates
accelerometer acceleration
gyroscope orientation
compass direction
pitch
roll yaw
accelerometer · gyroscope · compass · GPS
motion co-processor
need
app
đ&#x;‘¤ ?
data
îŚ organize finance live sport sleep fitness ...
?
reverse engineer: what’s the need, what’s the data?
five apps
visited countries
stock market
Formula 1 racing
Sleep cycle
Running
need
app
data
đ&#x;‘¤
đ&#x;“ą
îŚ
insight & curiosity be up to date & react get additional game data wake up fresh get fit, share ...
organize finance live sport sleep fitness ...
manual entry + location finance data game data motion sensor + time sensors + time + GPS + social ...
displaying information on your mobile?
+ always with you sensors touch interface
đ&#x;“ą
small screen slow connection
displaying information on your mobile?
+ always with you sensors touch interface
đ&#x;“ą show raw data show raw data, but highlight what’s important abstract data into more meaningful entities find relations in the data evaluate the impact for you enable you to take actions suggest the best action you should take
small screen slow connection
context
 using gestalts laws to highlight what’s important
highlight important
add context
color
orientation
positions and alignment
size
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
texture
shape
re-arrange data alphabetically numerically by date or time by physical location by category or tag by popularity user-designed arrangement
show only what you need
patterns
datatips data spotlight dynamic queries data brushing local zooming sortable table multi-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?
expereal Life Visualized
data show raw data show raw data, but highlight what’s important abstract data into more meaningful entities find relations in the data evaluate the impact for you enable you to take actions suggest the best action you should take
patterns datatips data spotlight dynamic queries data brushing local zooming sortable table multi-Y graphs
focus & context
đ&#x;“ą your app
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?
♼ [ thanks ]
www.andriusbutkus.com