modeling the mobile ux
DESCRIPTION
This presentation is made by Bryan Reger. It is very nice and detailed presentation in which he describes how to model User Experience for Mobile Apps. Must read it .....TRANSCRIPT
ModellingMobilethe
UserExperience
“We become what we behold. We shape our tools and then our tools shape us.”
Marshall McLuhan
bryan rieger <[email protected]>
Friday, 25 September 2009
designillustration
animation
research and design
from Toronto, Canada, eh!
motion graphics
1991 20092000
theatre design
multimedia
mobiledevelopment
design
webtheatre
rapid prototyping
media on devices
dot.com boom
Hypercard
Mosaic
mobile
Sabbatical in South East Asia
Flash Lite Web
DIY Toolsopen source
design
research
last millennium since then...
UML
writing
AfterEffects
Processing
Bill Buxton
Brenda Laurel
MPEG4SMIL
1996 2005
John Maeda
Qt
Flash
QuickTime
advertising
a little bit about me...“a straight line may be the shortest distance between two points, but is by no means the most interesting...”
UKgraphic design
Web
Web
animation
SVG
standards
animation
craft
management
animation
Java
WAP
games
entertainment
netscape
Friday, 25 September 2009
a few animation tools...
Friday, 25 September 2009
the script
changeis constant
the spec
Friday, 25 September 2009
storyboards
style
flowlayout
Friday, 25 September 2009
models + layoutsstructure
behaviour
style
style
Friday, 25 September 2009
*now more often referred to as timelinesdope sheets*
flow
resourcemanagement
state
Friday, 25 September 2009
pencil tests
structurebehaviour
layout
Friday, 25 September 2009
animatics
provide visibility of project as a whole
but not finished
complete
Friday, 25 September 2009
and now some interactive tools...
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
wireframesFriday, 25 September 2009
and...?
Friday, 25 September 2009
wireframes...or my journey playing cognitive connect the dots on a road through hell
+ prototypes, but we’ll get to them later.
Friday, 25 September 2009
...are layouts for UI without any graphics used to evaluate the positioning of elements on screen.
“
layout
visual design?
wireframes
Friday, 25 September 2009
“ ...are a visual map that outlines the layout and function of elements that helps define how pages appear and behave
layout + behaviour
legacy... interaction design?
visual design?
wireframes
Friday, 25 September 2009
“ ...suggest a basic visual structure, and illustrate clearly defined flows through an application.
layout + behaviour + flow
flow?
wireframes
Friday, 25 September 2009
layout, behaviour and flow...are they really fit for purpose?
wireframes
Friday, 25 September 2009
A B
let’s just deal with the problem of flow...Friday, 25 September 2009
Project is approved! G. would like wireframes for devs in NYC asap! Have a great weekend! Cheers!
“From: client xyz
Friday, 25 September 2009
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select
and what happens next?Friday, 25 September 2009
imagination interpretationthe ability to see things that are not there...
the ability to fill in the gaps that imagination
leaves behind
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
Friday, 25 September 2009
lawn chair?
Friday, 25 September 2009
Is this the lawn chair you had in mind?
Friday, 25 September 2009
...how did I get here?
Options Back
preview image
My Photo Sharing App
Previous Next
Friday, 25 September 2009
layout, behaviour and flow - really?
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select
Version 1.0
Friday, 25 September 2009
lacking detail, requires too much cerebral gymnastics. pls review -kthxbai.
“From: client xyz
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select
Version 1.0
we return to our wireframes,
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
and begin to fill in the gaps...
Version 2.0
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
...adding descriptions to clarify things.
Upon entering this screen the user is presented with a list of photo albums from which to choose from.
Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen...
After pressing the centre softkey (or fire button) the user is then presented with a full preview of the image they had previously selected.
It rubs the lotion on it’s skin or else it gets the hose again.
Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select.
Using the left and right navi-pad or joystick controls the user can select a preview image...
Version 2.5
Friday, 25 September 2009
gr8, but x is gone now, and we need to add y to align with the vertical asap! kthxbai
“From: client xyz
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
Upon entering this screen the user is presented with a list of photo albums from which to choose from.
Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen...
After pressing the centre softkey (or fire button) the user is then presented with a full preview of the image they had previously selected.
It rubs the lotion on it’s skin or else it gets the hose again.
Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select.
Using the left and right navi-pad or joystick controls the user can select a preview image...
Version 3.25
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
See 5.1.3.5a
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
...and deal with a little change.
what size?
animated?
See 8.2.14.f
remove!
Friday, 25 September 2009
G. says LDN, SFO and NYC docs are different, need standards - UML? kthxbai
“From: client xyz
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
Upon entering this screen the user is presented with a list of photo albums from which to choose from.
Pressing up on the navi-pad or joystick will change the focus of the selected list item towards the top of the screen...
After pressing the centre softkey (or fire button) the user is then presented with a full preview of the image they had previously selected.
It puts the lotion on it’s skin...
Once the user has clicked on a selected photo album list item they are presented with various image previews from which to select.
Using the left and right navi-pad or joystick controls the user can select a preview image...
Version 4.731a
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex...
See 5.1.3.5a
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
On
state
Off
state
Dim
state
Dim
Off
Bright
Bright
Bright
DimOff
Dim
Off
Onstate
Offstate Dim
state
Dim
Off
Bright
BrightBright
Dim
Off
Dim
Off
adopt a standard?Example taken from “Press On Principles of interaction programming” by Harold Thimbleby 2007
Friday, 25 September 2009
Onstate
Offstate Dim
state
Dim
Off
Bright
BrightBright
Dim
Off
Dim
Off
standards require literacy
state diagram for a lightbulb
Friday, 25 September 2009
document management != design
literary reference
wireframes
Friday, 25 September 2009
the challenges of wireframes
imagination and
interpretation
lack of visibility of
project as a whole
entropy and confusion
sets in quickly
change can be
extremely costly
literacy and
understanding
document
management
design stops
lack of feedback
never updated
fewer people involved
design resource?
regressions no options
Friday, 25 September 2009
wireframes too complex,dev team say no @!#*% UML -suggest prototype... kthxbai!
“From: client xyz
Friday, 25 September 2009
prototypes...a word that communicates everything and nothing...
Friday, 25 September 2009
Python
Flash
HTML
C
design != development
design development
Java
ObjC
paper
easy
quick
Friday, 25 September 2009
paper is lovely, but very limited...especially for mobile
requires interpretationdifficult to share
still quite abstract
Friday, 25 September 2009
Python
Flash
HTML
C
paper
warning: some assembly required*
design development
existing tools*
Java
ObjC
Friday, 25 September 2009
Python
Flash
HTML
C
but maybe, sometimes...
Java
ObjC
especially for web projects
Friday, 25 September 2009
need proto for mktg wk8, G. hates x, red + lemurs - suggest u rethink - kthxbai.
“From: client xyz
Friday, 25 September 2009
the challenges of prototypes
being hijacked by
development
lack of development
resources
risk of development
happening in design
finding the right level
of abstraction
no iterations due to
investments in code
longer to createless
exploration
dev problems solved first
technology constrained
fewer options
incorrect solutions
time consuming
Friday, 25 September 2009
Java
Python
Flash
HTML
C
perhaps?
models?
design development
paper
ObjC
Friday, 25 September 2009
mybad, forgot - G. is all about the agile now; sprints + iterationskthxbai. :)
“From: client xyz
Friday, 25 September 2009
A BA.5
an iteration
creating options
...iterations are an opportunity for designFriday, 25 September 2009
...and to explore new ideas!
A.1
A.2
A.3
A.3b
A.2a
A.2b
A.5
C
A B
A.3a
A.4
A.2c
E
A.4a
E.1a E.1b
B.1
B.2
lots of iterations
exploreideas
test ideas
incorporate feedback
best options
discardedideas
experiment
“a straight line may be the shortest distance between two points, but is by no means the most interesting...”
Doctor Who
Friday, 25 September 2009
“so, if not wireframes...”just
Friday, 25 September 2009
“or prototypes...”a small number of ageing
Friday, 25 September 2009
“...what are we left with?”
Friday, 25 September 2009
A question?nagging
Friday, 25 September 2009
“what’s the software equivalent of the cutting room floor?”
lots of iterations
visibility of project as a whole
Friday, 25 September 2009
designillustration
animation
theatre
large projects, constant change and coordination required
Aha! A sense of déjà vu...
how cliche
Friday, 25 September 2009
many opportunities for iteration...or design
Friday, 25 September 2009
and visibility of the project as a whole
but not finishedcomplete
Friday, 25 September 2009
“...so, you’re making animatics?”Friday, 25 September 2009
not quite, applications aren’t linear...
states
views
events
Friday, 25 September 2009
think disposable data modelsplease, do not panic...
disposable
models
Friday, 25 September 2009
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
define layout using views...scenes
<view id="a" /> <view id="b" /> <view id="c" />
only one view at a time
Friday, 25 September 2009
<view id="a" /> <view id="b" /> <view id="c" />
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
show changes using states...shots
<state id="a" /> <state id="b" />
but may have many states
Friday, 25 September 2009
<view id="a" /> <view id="b" /> <view id="c" />
<state id="a" /> <state id="b" />
...and flow using events.actions
Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
View
photo album 1
img img img img img
<event ... /> <event ... />
<event ... />
an many events!
Friday, 25 September 2009
photo album 1
Options Back
photo album 2
photo album 3
preview image
My Photo Sharing App
photo album 4
Select
<view id="other" src="other_view.png">
</view>
<event key="rsk" action="exit()" />
<event key="down" view="list_item4" />
<event key="fire" view="preview_1" />
no code required, or reused
</view>
<view id="main" src="main_view.png">
XML is technology agnostic
<state id="a" />
</state>
Friday, 25 September 2009
this is really just...Friday, 25 September 2009
a visual dataset...storyboard
pagesstates
Friday, 25 September 2009
edited together as xml...or edit
decision list
integrate and iterate visual design early!
main_view.png
</view>
<view id="main" src="main_view.png">
Friday, 25 September 2009
...viewed in a Mobile Processing sketchstate machine
Friday, 25 September 2009
provides visibility of project as a whole
states
views
events
Friday, 25 September 2009
2 days to make modelling app one time cost
Friday, 25 September 2009
~1 model < 1 dayvery cost effective
Friday, 25 September 2009
observationsafter using it on active projects for six months...
Friday, 25 September 2009
120 1 2 3 4 5 6 7 8 9 10 11
60
0
5
10
15
20
25
30
35
40
45
50
55
Weeks
Prototypes
very out of date
lots of iteration
60+ models
1 prototype
design iterationsFriday, 25 September 2009
120 1 2 3 4 5 6 7 8 9 10 11
100
0
10
20
30
40
50
60
70
80
90
Weeks
Pages
50 pages
unfinished and untested
tested and complete
100+ pages of docs
documentation requiredFriday, 25 September 2009
240 2 4 6 8 10 12 14 16 18 20 22
6
0
1
2
3
4
5
Weeks
Effort
2 designers
2 designers1 flash developer
9 weeks
6+ months
resources requiredFriday, 25 September 2009
“...insights gained from models are fed back into
clearer wireframes.”less documentation
Friday, 25 September 2009
happy accident
“...marked increase in user testing along with the
quality of the feedback.”on interaction
and visual design
Friday, 25 September 2009
actual client feedback +
“Never have I seen a paragraph of text turned into something
tangible more quickly!I owe you both a beer.”
we have yet to collect that beer...
Friday, 25 September 2009
conclusionsafter walking a few companies through this tool / process
Friday, 25 September 2009
we are all toolmakersFriday, 25 September 2009
http://www.flickr.com/photos/janosgaborvarga/648413173
necessity really is the mother of invention
stamping lever to replace noisy hammer
can now work late without disturbing the neighbours!
Friday, 25 September 2009
http://www.flickr.com/photos/janosgaborvarga/593572161
make simple tools to solve your problems
real, actual problems
Friday, 25 September 2009
http://www.flickr.com/photos/janosgaborvarga/928079337
slowly refine your tools over timeFriday, 25 September 2009
what is that?
Friday, 25 September 2009