Lean UX Design: #5 data visualisation

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.