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.
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Modeling the Mobile User Experience
1. Modelling
User Mobile
the
Experience
“We become what we behold.
We shape our tools and then our
tools shape us.”
Marshall McLuhan
bryan rieger <bryan@yiibu.com>
Friday, 25 September 2009
2. last millennium since then...
theatre
design web
illustration
from T
oronto,
Canada mobile
animation
, eh!
design
development
writing
Sabbatical in
Web games South East Asia
entertainment animation open source
DIY Tools
Mosaic advertising management Java
Processing Qt
netscape
Hypercard
AfterEffects
Flash media on devices
WAP
Flash Lite
Web rapid prototyping mobile craft animation
Bill Buxton Web
motion graphics MPEG4 SVG UML research
graphic design QuickTime
animation
multimedia
SMIL standards John Maeda
UK design
Brenda Laurel
theatre design dot.com boom
research and design
1991 1996 2000 2005 2009
a little bit about me...
“a straight line may be the shortest distance between two points, but is by no means the most interesting...”
Friday, 25 September 2009
7. flow
resource
management
state
dope sheets*
*now more often referred to as timelines
Friday, 25 September 2009
8. layout
structure
behaviour
pencil tests
Friday, 25 September 2009
9. but not finished
complete
provide visibility of project as a whole
animatics
Friday, 25 September 2009
10. and now some interactive tools...
Friday, 25 September 2009
11. My Photo Sharing App My Photo Sharing App My Photo Sharing App
preview image preview image
preview image
photo album 1 photo album 1
img img img img img
photo album 2
photo album 3 photo album 2
photo album 4 photo album 3 Previous Next
Options Select Back Options View Back Options Back
wireframes
Friday, 25 September 2009
13. 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
14. wireframes
visual design?
“ ...are layouts for UI without any
graphics used to evaluate the
positioning of elements on screen.
layout
Friday, 25 September 2009
15. wireframes
visual design?
“ ...are a visual map that outlines
the layout and function of
elements that helps define how
pages appear and behave
legacy... interaction design?
layout + behaviour
Friday, 25 September 2009
16. wireframes
“ ...suggest a basic visual structure,
and illustrate clearly defined flows
through an application. flow?
layout + behaviour + flow
Friday, 25 September 2009
17. wireframes
layout, behaviour and flow...
are they really fit for purpose?
Friday, 25 September 2009
18. A B
let’s just deal with the problem of flow...
Friday, 25 September 2009
19. From: client xyz
“ Project is approved! G. would like
wireframes for devs in NYC asap!
Have a great weekend! Cheers!
Friday, 25 September 2009
20. My Photo Sharing App
preview image
photo album 1
photo album 2
photo album 3
photo album 4
Options Select Back
and what happens next?
Friday, 25 September 2009
21. imagination interpretation
the ability to see the ability to fill in the
things that are not gaps that imagination
there... leaves behind
Friday, 25 September 2009
28. Is this the lawn chair you had in mind?
Friday, 25 September 2009
29. My Photo Sharing App
preview image
Previous Next
Options Back
...how did I get here?
Friday, 25 September 2009
30. My Photo Sharing App My Photo Sharing App
preview image
preview image
photo album 1
photo album 2
photo album 3
photo album 4 Previous Next
Options Select Back Options Back
Version 1.0
layout, behaviour and flow - really?
Friday, 25 September 2009
31. From: client xyz
“ lacking detail, requires too much
cerebral gymnastics. pls review -
kthxbai.
Friday, 25 September 2009
32. My Photo Sharing App My Photo Sharing App
preview image
preview image
photo album 1
photo album 2
photo album 3
photo album 4 Previous Next
Options Select Back Options Back
Version 1.0
we return to our wireframes,
Friday, 25 September 2009
33. My Photo Sharing App My Photo Sharing App My Photo Sharing App
preview image preview image
preview image
photo album 1 photo album 1
img img img img img
photo album 2
photo album 3 photo album 2
photo album 4 photo album 3 Previous Next
Options Select Back Options View Back Options Back
Version 2.0
and begin to fill in the gaps...
Friday, 25 September 2009
34. My Photo Sharing App My Photo Sharing App My Photo Sharing App
preview image preview image
preview image
photo album 1 photo album 1
img img img img img
photo album 2
photo album 3 photo album 2
photo album 4 photo album 3 Previous Next
Options Select Back Options View Back Options Back
Upon entering this screen the Once the user has clicked on a After pressing the centre softkey
user is presented with a list of selected photo album list item (or fire button) the user is then
photo albums from which to they are presented with various presented with a full preview of
choose from. image previews from which to the image they had previously
select. selected.
Pressing up on the navi-pad or
joystick will change the focus of Using the left and right navi-pad It rubs the lotion on it’s skin or
the selected list item towards or joystick controls the user can else it gets the hose again.
the top of the screen... select a preview image...
Version 2.5
...adding descriptions to clarify things.
Friday, 25 September 2009
35. From: client xyz
“ gr8, but x is gone now, and we
need to add y to align with the
vertical asap! kthxbai
Friday, 25 September 2009
36. See 8.2.14.f Options View Back
My Photo Sharing App My Photo Sharing App My Phot
preview image preview image
what size?
photo album 1
See 5.1.3.5a photo album 1
pr
img img
remove!
img img img
photo album 2
photo album 3 animated? photo album 2
photo album 4 photo album 3 Previous
Options Select Back Options View Back Options
lor sit amet, Upon entering this screen the Lorem ipsum dolor sit amet, Once the user has clicked on a After pressin
pisicing elit, sed user is presented with a list of consectetur adipisicing elit, sed selected photo album list item (or fire butto
por incididunt photo albums from which to do eiusmod tempor incididunt they are presented with various presented w
re magna choose from. ut labore et dolore magna image previews from which to the image th
aliqua. select. selected.
Pressing up on the navi-pad or
m veniam, quis joystick will change the focus of Ut enim ad minim veniam, quis Using the left and right navi-pad It rubs the lo
tion ullamco the selected list item towards nostrud exercitation ullamco or joystick controls the user can else it gets th
quip ex... the top of the screen... laboris nisi ut aliquip ex... select a preview image...
Version 3.25
...and deal with a little change.
Friday, 25 September 2009
37. From: client xyz
“ G. says LDN, SFO and NYC docs
are different, need standards -
UML? kthxbai
Friday, 25 September 2009
38. Options View Back
My Photo Sharing App My Photo Sharing App My Phot
Bright
Bright
preview image preview image
On
O n state
state
See 5.1.3.5a pr
photo album 1 photo album 1
img img img img img
photo album 2
Off
ht
BrigBright
photo album 3 Off Bright photo album 2
Di
Dim m
Bright
photo album 4 photo album 3 Previous
Options Select Back Off Dim Dim Options View Back Options
state Dim tate
Dim
s
Off
lor sit amet, Upon entering this screen the Off
Lorem ipsum dolor sit amet,
Off state
Once the user has clicked on a After pressin
Dim
pisicing elit, sed user is presented with a list of
Off state consectetur adipisicing elit, sed selected photo album list item (or fire butto
por incididunt photo albums from which to do eiusmod tempor incididunt they are presented with various
Dim presented w
re magna choose from. ut labore et dolore magna image previews from which to the image th
Off aliqua. select. selected.
Pressing up on the navi-pad or
m veniam, quis joystick will change the focus of Ut enim ad minim veniam, quis Using the left and right navi-pad It puts the lo
tion ullamco the selected list item towards nostrud exercitation ullamco or joystick controls the user can
quip ex... the top of the screen... laboris nisi ut aliquip ex... select a preview image...
Version 4.731a
adopt a standard?
Example taken from “Press On Principles of interaction programming” by Harold Thimbleby 2007
Friday, 25 September 2009
39. Bright
On
state
Off
Bright
Bright
Dim
Off Dim
state Dim
Off state
Off
Dim
state diagram for a lightbulb
standards require literacy
Friday, 25 September 2009
41. the challenges of wireframes
imagination and
interpretation
regressions no options
literacy and lack of visibility of change can be
design stops
understanding project as a whole extremely costly
fewer people
involved
entropy and confusion document
lack of feedback
sets in quickly management
never updated design resource?
Friday, 25 September 2009
42. From: client xyz
“ wireframes too complex,
dev team say no @!#*% UML -
suggest prototype... kthxbai!
Friday, 25 September 2009
43. prototypes...
a word that communicates everything and nothing...
Friday, 25 September 2009
44. C
ObjC
Java
Python
Flash
HTML
easy
paper quick
design development
design != development
Friday, 25 September 2009
45. difficult to share requires interpretation
still quite abstract
especially for mobile
paper is lovely, but very limited...
Friday, 25 September 2009
46. existing tools* C
ObjC
Java
Python
Flash
HTML
paper
design development
warning: some assembly required*
Friday, 25 September 2009
47. C
ObjC
Java
Python
especially for
web projects Flash
HTML
but maybe, sometimes...
Friday, 25 September 2009
48. From: client xyz
“ need proto for mktg wk8, G.
hates x, red + lemurs - suggest u
rethink - kthxbai.
Friday, 25 September 2009
49. the challenges of prototypes
lack of development
time consuming resources
dev problems incorrect fewer
solved first solutions options
being hijacked by finding the right level no iterations due to
development of abstraction investments in code
longer to create
less
risk of development exploration
happening in design
technology
constrained
Friday, 25 September 2009
50. C
models? ObjC
Java
Python
Flash
HTML
paper
design development
perhaps?
Friday, 25 September 2009
51. From: client xyz
“ mybad, forgot - G. is all about
the agile now; sprints + iterations
kthxbai. :)
Friday, 25 September 2009
52. A A.5 B
an iteration
creating options
...iterations are an opportunity for design
Friday, 25 September 2009
53. incorporate
A.2b feedback B.2
C best
A.2a options
lots of A.4
iterations A.2
A.2c
experiment B.1
A A.1 A.3 A.5 A.4a B
A.3a
test ideas discarded
A.3b
explore ideas
ideas E E.1a E.1b
“a straight line may be the shortest distance between
two points, but is by no means the most interesting...”
Doctor Who
...and to explore new ideas!
Friday, 25 September 2009
54. just
“so, if not wireframes...”
Friday, 25 September 2009
55. a small number of ageing
“or prototypes...”
Friday, 25 September 2009
58. visibility of project
as a whole
lots of
iterations
“what’s the software equivalent
of the cutting room floor?”
Friday, 25 September 2009
59. how cliche
theatre
design
illustration
animation
large projects, constant change
and coordination required
Aha! A sense of déjà vu...
Friday, 25 September 2009
60. or design
many opportunities for iteration...
Friday, 25 September 2009
61. complete but not finished
and visibility of the project as a whole
Friday, 25 September 2009
63. views
states
events
not quite, applications aren’t linear...
Friday, 25 September 2009
64. models
disposable
please, do not panic...
think disposable data models
Friday, 25 September 2009
65. My Photo Sharing App My Photo Sharing App My Photo Sharing App
preview image preview image
preview image
photo album 1 photo album 1
img img img img img
photo album 2
photo album 3 photo album 2
photo album 4 photo album 3 Previous Next
Options Select Back Options View Back Options Back
<view id="a" /> <view id="b" /> <view id="c" />
only one view at a time
scenes
define layout using views...
Friday, 25 September 2009
66. My Photo Sharing App My Photo Sharing App My Photo Sharing App
preview image preview image
preview image
photo album 1 photo album 1
img img img img img
photo album 2
photo album 3 photo album 2
photo album 4 photo album 3 Previous Next
Options Select Back Options View Back Options Back
<view id="a" /> <view id="b" /> <view id="c" />
<state id="a" /> <state id="b" />
but may have many states shots
show changes using states...
Friday, 25 September 2009
67. My Photo Sharing App My Photo Sharing App My Photo Sharing App
preview image preview image
preview image
photo album 1 photo album 1
img img img img img
photo album 2
photo album 3 photo album 2
photo album 4 photo album 3 Previous Next
Options Select Back Options View Back Options Back
<view id="a" /> <view id="b" /> <view id="c" />
<state id="a" /> <state id="b" /> <event ... />
<event ... /> <event ... />
actions
an many events!
...and flow using events.
Friday, 25 September 2009
68. XML is technology agnostic
My Photo Sharing App <view id="main" src="main_view.png">
<state id="a" />
preview image
<event key="fire" view="preview_1" />
photo album 1
<event key="down" view="list_item4" />
photo album 2
<event key="rsk" action="exit()" />
photo album 3
photo album 4 </state>
Options Select Back </view>
<view id="other" src="other_view.png">
</view>
no code required, or reused
Friday, 25 September 2009
70. storyboard
pages
a visual dataset... states
Friday, 25 September 2009
71. <view id="main" src="main_view.png">
</view>
main_view.png
integrate and iterate
visual design early! or edit
decision list
edited together as xml...
Friday, 25 September 2009
72. state machine
...viewed in a Mobile Processing sketch
Friday, 25 September 2009
73. views
states
events
provides visibility of project as a whole
Friday, 25 September 2009
74. 2 days to make modelling app
one time cost
Friday, 25 September 2009
75. ~1 model < 1 day
very cost effective
Friday, 25 September 2009
76. observations
after using it on active projects for six months...
Friday, 25 September 2009
77. 60
60+ models
55
50
45
lots of iteration
40
35
Prototypes
30
25
20
15
10
very out of date
5
1 prototype
0
0 1 2 3 4 5 6 7 8 9 10 11 12
Weeks
design iterations
Friday, 25 September 2009
80. “...insights gained from
models are fed back into
clearer wireframes.”
less documentation
Friday, 25 September 2009
81. happy accident
“...marked increase in user
testing along with the
quality of the feedback.”
on interaction
and visual design
Friday, 25 September 2009
82. 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
83. conclusions
after walking a few companies through this tool / process
Friday, 25 September 2009
84. we are all toolmakers
Friday, 25 September 2009
85. stamping lever to
replace noisy hammer
can now work
late without
disturbing the
neighbours!
http://www.flickr.com/photos/janosgaborvarga/648413173
necessity really is the mother of invention
Friday, 25 September 2009