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

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

a few animation tools...
Friday, 25 September 2009

change
is constant
the spec
the script
Friday, 25 September 2009

style
layout
flow
storyboards
Friday, 25 September 2009

behaviour
style
style
structure
models + layouts
Friday, 25 September 2009

flow
resource
management
state
dope sheets*
*now more often referred to as timelines
Friday, 25 September 2009

layout
structure
behaviour
pencil tests
Friday, 25 September 2009

but not finished
complete
provide visibility of project as a whole
animatics
Friday, 25 September 2009

and now some interactive tools...
Friday, 25 September 2009

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

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

wireframes
visual design?
“ ...are layouts for UI without any
graphics used to evaluate the
positioning of elements on screen.
layout
Friday, 25 September 2009

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

wireframes
“ ...suggest a basic visual structure,
and illustrate clearly defined flows
through an application. flow?
layout + behaviour + flow
Friday, 25 September 2009

wireframes
layout, behaviour and flow...
are they really fit for purpose?
Friday, 25 September 2009

A B
let’s just deal with the problem of flow...
Friday, 25 September 2009

From: client xyz
“ Project is approved! G. would like
wireframes for devs in NYC asap!
Have a great weekend! Cheers!
Friday, 25 September 2009

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

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

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

My Photo Sharing App
preview image
Previous Next
Options Back
...how did I get here?
Friday, 25 September 2009

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

From: client xyz
“ lacking detail, requires too much
cerebral gymnastics. pls review -
kthxbai.
Friday, 25 September 2009

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

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

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

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

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

From: client xyz
“ G. says LDN, SFO and NYC docs
are different, need standards -
UML? kthxbai
Friday, 25 September 2009

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

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

wireframes
literary reference
document management != design
Friday, 25 September 2009

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

From: client xyz
“ wireframes too complex,
dev team say no @!#*% UML -
suggest prototype... kthxbai!
Friday, 25 September 2009

prototypes...
a word that communicates everything and nothing...
Friday, 25 September 2009

C
ObjC
Java
Python
Flash
HTML
easy
paper quick
design development
design != development
Friday, 25 September 2009

difficult to share requires interpretation
still quite abstract
especially for mobile
paper is lovely, but very limited...
Friday, 25 September 2009

existing tools* C
ObjC
Java
Python
Flash
HTML
paper
design development
warning: some assembly required*
Friday, 25 September 2009

C
ObjC
Java
Python
especially for
web projects Flash
HTML
but maybe, sometimes...
Friday, 25 September 2009

From: client xyz
“ need proto for mktg wk8, G.
hates x, red + lemurs - suggest u
rethink - kthxbai.
Friday, 25 September 2009

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

C
models? ObjC
Java
Python
Flash
HTML
paper
design development
perhaps?
Friday, 25 September 2009

From: client xyz
“ mybad, forgot - G. is all about
the agile now; sprints + iterations
kthxbai. :)
Friday, 25 September 2009

A A.5 B
an iteration
creating options
...iterations are an opportunity for design
Friday, 25 September 2009

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

just
“so, if not wireframes...”
Friday, 25 September 2009

a small number of ageing
“or prototypes...”
Friday, 25 September 2009

“...what are we left with?”
Friday, 25 September 2009

nagging
A question?
Friday, 25 September 2009

visibility of project
as a whole
lots of
iterations
“what’s the software equivalent
of the cutting room floor?”
Friday, 25 September 2009

how cliche
theatre
design
illustration
animation
large projects, constant change
and coordination required
Aha! A sense of déjà vu...
Friday, 25 September 2009

or design
many opportunities for iteration...
Friday, 25 September 2009

complete but not finished
and visibility of the project as a whole
Friday, 25 September 2009

“...so, you’re making animatics?”
Friday, 25 September 2009

views
states
events
not quite, applications aren’t linear...
Friday, 25 September 2009

models
disposable
please, do not panic...
think disposable data models
Friday, 25 September 2009

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

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

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

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

this is really just...
Friday, 25 September 2009

storyboard
pages
a visual dataset... states
Friday, 25 September 2009

<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

state machine
...viewed in a Mobile Processing sketch
Friday, 25 September 2009

views
states
events
provides visibility of project as a whole
Friday, 25 September 2009

2 days to make modelling app
one time cost
Friday, 25 September 2009

~1 model < 1 day
very cost effective
Friday, 25 September 2009

observations
after using it on active projects for six months...
Friday, 25 September 2009

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

unfinished and untested
100+ pages of docs
100
90
80
70
tested and complete
60
50 pages
Pages
50
40
30
20
10
0
0 1 2 3 4 5 6 7 8 9 10 11 12
Weeks
documentation required
Friday, 25 September 2009

6
5
4
6+ months 2 designers
1 flash developer
Effort
3
2 designers
2
9 weeks
1
0
0 2 4 6 8 10 12 14 16 18 20 22 24
Weeks
resources required
Friday, 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

conclusions
after walking a few companies through this tool / process
Friday, 25 September 2009

we are all toolmakers
Friday, 25 September 2009

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

http://www.flickr.com/photos/janosgaborvarga/593572161
real, actual problems
make simple tools to solve your problems
Friday, 25 September 2009

http://www.flickr.com/photos/janosgaborvarga/928079337
slowly refine your tools over time
Friday, 25 September 2009

what is that?
Friday, 25 September 2009

thank you
bryan rieger <bryan@yiibu.com>
Friday, 25 September 2009