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

♥[ thanks ]

www.andriusbutkus.com