Modeling The Mobile UX
-
Upload
amjad-m -
Category
Technology
-
view
1.006 -
download
0
description
Transcript of Modeling The Mobile UX
![Page 1: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/3.jpg)
a few animation tools...
Friday, 25 September 2009
![Page 4: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/4.jpg)
the script
changeis constant
the spec
Friday, 25 September 2009
![Page 5: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/5.jpg)
storyboards
style
flowlayout
Friday, 25 September 2009
![Page 6: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/6.jpg)
models + layoutsstructure
behaviour
style
style
Friday, 25 September 2009
![Page 7: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/7.jpg)
*now more often referred to as timelinesdope sheets*
flow
resourcemanagement
state
Friday, 25 September 2009
![Page 8: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/8.jpg)
pencil tests
structurebehaviour
layout
Friday, 25 September 2009
![Page 9: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/10.jpg)
and now some interactive tools...
Friday, 25 September 2009
![Page 11: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/12.jpg)
and...?
Friday, 25 September 2009
![Page 13: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/17.jpg)
layout, behaviour and flow...are they really fit for purpose?
wireframes
Friday, 25 September 2009
![Page 18: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/18.jpg)
A B
let’s just deal with the problem of flow...Friday, 25 September 2009
![Page 19: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/22.jpg)
Friday, 25 September 2009
![Page 23: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/23.jpg)
Friday, 25 September 2009
![Page 24: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/24.jpg)
Friday, 25 September 2009
![Page 25: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/25.jpg)
Friday, 25 September 2009
![Page 26: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/26.jpg)
Friday, 25 September 2009
![Page 27: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/27.jpg)
lawn chair?
Friday, 25 September 2009
![Page 28: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/28.jpg)
Is this the lawn chair you had in mind?
Friday, 25 September 2009
![Page 29: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/40.jpg)
document management != design
literary reference
wireframes
Friday, 25 September 2009
![Page 41: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/43.jpg)
prototypes...a word that communicates everything and nothing...
Friday, 25 September 2009
![Page 44: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/50.jpg)
Java
Python
Flash
HTML
C
perhaps?
models?
design development
paper
ObjC
Friday, 25 September 2009
![Page 51: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/54.jpg)
“so, if not wireframes...”just
Friday, 25 September 2009
![Page 55: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/55.jpg)
“or prototypes...”a small number of ageing
Friday, 25 September 2009
![Page 56: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/56.jpg)
“...what are we left with?”
Friday, 25 September 2009
![Page 57: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/57.jpg)
A question?nagging
Friday, 25 September 2009
![Page 58: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/60.jpg)
many opportunities for iteration...or design
Friday, 25 September 2009
![Page 61: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/61.jpg)
and visibility of the project as a whole
but not finishedcomplete
Friday, 25 September 2009
![Page 62: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/62.jpg)
“...so, you’re making animatics?”Friday, 25 September 2009
![Page 63: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/63.jpg)
not quite, applications aren’t linear...
states
views
events
Friday, 25 September 2009
![Page 64: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/64.jpg)
think disposable data modelsplease, do not panic...
disposable
models
Friday, 25 September 2009
![Page 65: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/69.jpg)
this is really just...Friday, 25 September 2009
![Page 70: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/70.jpg)
a visual dataset...storyboard
pagesstates
Friday, 25 September 2009
![Page 71: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/72.jpg)
...viewed in a Mobile Processing sketchstate machine
Friday, 25 September 2009
![Page 73: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/73.jpg)
provides visibility of project as a whole
states
views
events
Friday, 25 September 2009
![Page 74: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/74.jpg)
2 days to make modelling app one time cost
Friday, 25 September 2009
![Page 75: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/75.jpg)
~1 model < 1 dayvery cost effective
Friday, 25 September 2009
![Page 76: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/76.jpg)
observationsafter using it on active projects for six months...
Friday, 25 September 2009
![Page 77: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/83.jpg)
conclusionsafter walking a few companies through this tool / process
Friday, 25 September 2009
![Page 84: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/84.jpg)
we are all toolmakersFriday, 25 September 2009
![Page 85: Modeling The Mobile UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/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 UX](https://reader033.fdocuments.in/reader033/viewer/2022042613/545caf0cb0af9f0d318b4910/html5/thumbnails/88.jpg)
what is that?
Friday, 25 September 2009