modeling the mobile user experience
DESCRIPTION
Presentation by Bryan Rieger of Yiibu on Modeling the Mobile User Experience, presented on June 4th at the Mobile Design UK event at the RSA in London.TRANSCRIPT
![Page 1: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/1.jpg)
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
![Page 2: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/2.jpg)
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
![Page 3: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/3.jpg)
a few animation tools...
Friday, 25 September 2009
![Page 4: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/4.jpg)
the script
changeis constant
the spec
Friday, 25 September 2009
![Page 5: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/5.jpg)
storyboards
style
flowlayout
Friday, 25 September 2009
![Page 6: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/6.jpg)
models + layoutsstructure
behaviour
style
style
Friday, 25 September 2009
![Page 7: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/7.jpg)
*now more often referred to as timelinesdope sheets*
flow
resourcemanagement
state
Friday, 25 September 2009
![Page 8: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/8.jpg)
pencil tests
structurebehaviour
layout
Friday, 25 September 2009
![Page 9: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/9.jpg)
animatics
provide visibility of project as a whole
but not finished
complete
Friday, 25 September 2009
![Page 10: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/10.jpg)
and now some interactive tools...
Friday, 25 September 2009
![Page 11: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/11.jpg)
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
![Page 12: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/12.jpg)
and...?
Friday, 25 September 2009
![Page 13: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/13.jpg)
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
![Page 14: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/14.jpg)
...are layouts for UI without any graphics used to evaluate the positioning of elements on screen.
“
layout
visual design?
wireframes
Friday, 25 September 2009
![Page 15: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/15.jpg)
“ ...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
![Page 16: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/16.jpg)
“ ...suggest a basic visual structure, and illustrate clearly defined flows through an application.
layout + behaviour + flow
flow?
wireframes
Friday, 25 September 2009
![Page 17: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/17.jpg)
layout, behaviour and flow...are they really fit for purpose?
wireframes
Friday, 25 September 2009
![Page 18: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/18.jpg)
A B
let’s just deal with the problem of flow...Friday, 25 September 2009
![Page 19: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/19.jpg)
Project is approved! G. would like wireframes for devs in NYC asap! Have a great weekend! Cheers!
“From: client xyz
Friday, 25 September 2009
![Page 20: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/20.jpg)
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
![Page 21: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/21.jpg)
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
![Page 22: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/22.jpg)
Friday, 25 September 2009
![Page 23: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/23.jpg)
Friday, 25 September 2009
![Page 24: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/24.jpg)
Friday, 25 September 2009
![Page 25: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/25.jpg)
Friday, 25 September 2009
![Page 26: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/26.jpg)
Friday, 25 September 2009
![Page 27: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/27.jpg)
lawn chair?
Friday, 25 September 2009
![Page 28: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/28.jpg)
Is this the lawn chair you had in mind?
Friday, 25 September 2009
![Page 29: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/29.jpg)
...how did I get here?
Options Back
preview image
My Photo Sharing App
Previous Next
Friday, 25 September 2009
![Page 30: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/30.jpg)
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
![Page 31: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/31.jpg)
lacking detail, requires too much cerebral gymnastics. pls review -kthxbai.
“From: client xyz
Friday, 25 September 2009
![Page 32: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/32.jpg)
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
![Page 33: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/33.jpg)
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
![Page 34: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/34.jpg)
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
![Page 35: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/35.jpg)
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
![Page 36: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/36.jpg)
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
![Page 37: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/37.jpg)
G. says LDN, SFO and NYC docs are different, need standards - UML? kthxbai
“From: client xyz
Friday, 25 September 2009
![Page 38: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/38.jpg)
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
![Page 39: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/39.jpg)
Onstate
Offstate Dim
state
Dim
Off
Bright
BrightBright
Dim
Off
Dim
Off
standards require literacy
state diagram for a lightbulb
Friday, 25 September 2009
![Page 40: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/40.jpg)
document management != design
literary reference
wireframes
Friday, 25 September 2009
![Page 41: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/41.jpg)
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
![Page 42: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/42.jpg)
wireframes too complex,dev team say no @!#*% UML -suggest prototype... kthxbai!
“From: client xyz
Friday, 25 September 2009
![Page 43: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/43.jpg)
prototypes...a word that communicates everything and nothing...
Friday, 25 September 2009
![Page 44: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/44.jpg)
Python
Flash
HTML
C
design != development
design development
Java
ObjC
paper
easy
quick
Friday, 25 September 2009
![Page 45: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/45.jpg)
paper is lovely, but very limited...especially for mobile
requires interpretationdifficult to share
still quite abstract
Friday, 25 September 2009
![Page 46: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/46.jpg)
Python
Flash
HTML
C
paper
warning: some assembly required*
design development
existing tools*
Java
ObjC
Friday, 25 September 2009
![Page 47: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/47.jpg)
Python
Flash
HTML
C
but maybe, sometimes...
Java
ObjC
especially for web projects
Friday, 25 September 2009
![Page 48: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/48.jpg)
need proto for mktg wk8, G. hates x, red + lemurs - suggest u rethink - kthxbai.
“From: client xyz
Friday, 25 September 2009
![Page 49: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/49.jpg)
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
![Page 50: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/50.jpg)
Java
Python
Flash
HTML
C
perhaps?
models?
design development
paper
ObjC
Friday, 25 September 2009
![Page 51: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/51.jpg)
mybad, forgot - G. is all about the agile now; sprints + iterationskthxbai. :)
“From: client xyz
Friday, 25 September 2009
![Page 52: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/52.jpg)
A BA.5
an iteration
creating options
...iterations are an opportunity for designFriday, 25 September 2009
![Page 53: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/53.jpg)
...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
![Page 54: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/54.jpg)
“so, if not wireframes...”just
Friday, 25 September 2009
![Page 55: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/55.jpg)
“or prototypes...”a small number of ageing
Friday, 25 September 2009
![Page 56: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/56.jpg)
“...what are we left with?”
Friday, 25 September 2009
![Page 57: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/57.jpg)
A question?nagging
Friday, 25 September 2009
![Page 58: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/58.jpg)
“what’s the software equivalent of the cutting room floor?”
lots of iterations
visibility of project as a whole
Friday, 25 September 2009
![Page 59: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/59.jpg)
designillustration
animation
theatre
large projects, constant change and coordination required
Aha! A sense of déjà vu...
how cliche
Friday, 25 September 2009
![Page 60: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/60.jpg)
many opportunities for iteration...or design
Friday, 25 September 2009
![Page 61: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/61.jpg)
and visibility of the project as a whole
but not finishedcomplete
Friday, 25 September 2009
![Page 62: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/62.jpg)
“...so, you’re making animatics?”Friday, 25 September 2009
![Page 63: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/63.jpg)
not quite, applications aren’t linear...
states
views
events
Friday, 25 September 2009
![Page 64: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/64.jpg)
think disposable data modelsplease, do not panic...
disposable
models
Friday, 25 September 2009
![Page 65: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/65.jpg)
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
![Page 66: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/66.jpg)
<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
![Page 67: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/67.jpg)
<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
![Page 68: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/68.jpg)
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
![Page 69: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/69.jpg)
this is really just...Friday, 25 September 2009
![Page 70: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/70.jpg)
a visual dataset...storyboard
pagesstates
Friday, 25 September 2009
![Page 71: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/71.jpg)
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
![Page 72: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/72.jpg)
...viewed in a Mobile Processing sketchstate machine
Friday, 25 September 2009
![Page 73: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/73.jpg)
provides visibility of project as a whole
states
views
events
Friday, 25 September 2009
![Page 74: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/74.jpg)
2 days to make modelling app one time cost
Friday, 25 September 2009
![Page 75: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/75.jpg)
~1 model < 1 dayvery cost effective
Friday, 25 September 2009
![Page 76: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/76.jpg)
observationsafter using it on active projects for six months...
Friday, 25 September 2009
![Page 77: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/77.jpg)
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
![Page 78: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/78.jpg)
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
![Page 79: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/79.jpg)
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
![Page 80: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/80.jpg)
“...insights gained from models are fed back into
clearer wireframes.”less documentation
Friday, 25 September 2009
![Page 81: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/81.jpg)
happy accident
“...marked increase in user testing along with the
quality of the feedback.”on interaction
and visual design
Friday, 25 September 2009
![Page 82: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/82.jpg)
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
![Page 83: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/83.jpg)
conclusionsafter walking a few companies through this tool / process
Friday, 25 September 2009
![Page 84: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/84.jpg)
we are all toolmakersFriday, 25 September 2009
![Page 85: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/85.jpg)
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
![Page 86: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/86.jpg)
http://www.flickr.com/photos/janosgaborvarga/593572161
make simple tools to solve your problems
real, actual problems
Friday, 25 September 2009
![Page 87: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/87.jpg)
http://www.flickr.com/photos/janosgaborvarga/928079337
slowly refine your tools over timeFriday, 25 September 2009
![Page 88: Modeling the Mobile User Experience](https://reader034.vdocuments.mx/reader034/viewer/2022050615/53f08c2f8d7f72e94b8b465d/html5/thumbnails/88.jpg)
what is that?
Friday, 25 September 2009