Modeling The Mobile UX

Modelling
Mobilethe
User
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

design
illustration
animation
research and design
from Toronto, Canada, eh!
motion graphics
1991 20092000
theatre design
multimedia
mobile
development
design
webtheatre
rapid prototyping
media on devices
dot.com boom
Hypercard
Mosaic
mobile
Sabbatical in
South East Asia
Flash Lite
Web
DIY Tools
open source
design
research
last millennium since then...
UML
writing
AfterEffects
Processing
Bill Buxton
Brenda Laurel
MPEG4
SMIL
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...”
UK
graphic design
Web
Web
animation
SVG
standards
animation
craft
management
animation
Java
WAP
games
entertainment
netscape

a few animation tools...

the script
change
is constant
the spec

storyboards
style
flow
layout

models + layouts
structure
behaviour
style
style

*now more often referred to as timelines
dope sheets*
flow
resource
management
state

pencil tests
structure
behaviour
layout

animatics
provide visibility of project as a whole
but not finished
complete

and now some interactive tools...

Options Back
preview image
My Photo Sharing App
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
View
photo album 1
img img img img img
wireframes

and...?

wireframes...or my journey playing cognitive connect the dots on a road through hell
+ prototypes, but we’ll get to them later.

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

“...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

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

layout, behaviour and flow...
are they really fit for purpose?
wireframes

A B
let’s just deal with the problem of flow...

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

photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select
and what happens next?

imagination interpretation
the ability to see
things that are not
there...
the ability to fill in the
gaps that imagination
leaves behind

lawn chair?

Is this the lawn chair you had in mind?

...how did I get here?
Options Back
preview image
Previous Next

layout, behaviour and flow - really?
Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select
Version 1.0

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

Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select
Version 1.0
we return to our wireframes,

Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
View
photo album 1
img img img img img
and begin to fill in the gaps...
Version 2.0

Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
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

gr8, but x is gone now, and we
need to add y to align with the
vertical asap! kthxbai
“
From: client xyz

Options
pr
My Phot
Previous
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
View
photo album 1
img img img img img
choose from.
After pressin
(or fire butto
presented w
the image th
selected.
It rubs the lo
else it gets th
select.
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...
lor sit amet,
pisicing elit, sed
por incididunt
re magna
m veniam, quis
tion ullamco
quip ex...
See 5.1.3.5a
Options BackView
...and deal with a little change.
what size?
animated?
See 8.2.14.f
remove!

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

Options
pr
My Phot
Previous
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
View
photo album 1
img img img img img
choose from.
After pressin
(or fire butto
presented w
the image th
selected.
It puts the lo
select.
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...
lor sit amet,
pisicing elit, sed
por incididunt
re magna
m veniam, quis
tion ullamco
quip ex...
See 5.1.3.5a
Options BackView
On
state
Off
state
Dim
state
Dim
Off
Bright
Bright
Bright
Dim
Off
Dim
Off
On
state
Off
state Dim
state
Dim
Off
Bright
Bright
Bright
Dim
Off
Dim
Off
adopt a standard?
Example taken from “Press On Principles of interaction programming” by Harold Thimbleby 2007

On
state
Off
state Dim
state
Dim
Off
Bright
Bright
Bright
Dim
Off
Dim
Off
standards require literacy
state diagram for a lightbulb

document management != design
literary reference
wireframes

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

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

prototypes...a word that communicates everything and nothing...

Python
Flash
HTML
C
design != development
design development
Java
ObjC
paper
easy
quick

paper is lovely, but very limited...
especially for mobile
requires interpretationdifficult to share
still quite abstract

Python
Flash
HTML
C
paper
warning: some assembly required*
design development
existing tools*
Java
ObjC

Python
Flash
HTML
C
but maybe, sometimes...
Java
ObjC
especially for
web projects

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

the challenges of prototypes
being hijacked by
development
lack of development
resources
risk of development
happening in design
ﬁnding the right level
of abstraction
no iterations due to
investments in code
longer to create
less
exploration
dev problems
solved first
technology
constrained
fewer
options
incorrect
solutions
time consuming

Java
Python
Flash
HTML
C
perhaps?
models?
design development
paper
ObjC

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

A BA.5
an iteration
creating options
...iterations are an opportunity for design

...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
explore
ideas
test ideas
incorporate
feedback
best
options
discarded
ideas
experiment
“a straight line may be the shortest distance between
two points, but is by no means the most interesting...”
Doctor Who

“so, if not wireframes...”
just

“or prototypes...”
a small number of ageing

“...what are we left with?”

A question?
nagging

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

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

many opportunities for iteration...
or design

and visibility of the project as a whole
but not finishedcomplete

“...so, you’re making animatics?”

not quite, applications aren’t linear...
states
views
events

think disposable data models
please, do not panic...
disposable
models

Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
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

Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
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

<state id="a" /> <state id="b" />
...and flow using events.
actions
Options Back
preview image
Previous Next
photo album 1
Options Back
photo album 2
photo album 3
preview image
photo album 4
Select Options Back
photo album 2
photo album 3
preview image
View
photo album 1
img img img img img
<event ... /> <event ... />
<event ... />
an many events!

photo album 1
Options Back
photo album 2
photo album 3
preview image
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="ﬁre" view="preview_1" />
no code required, or reused
</view>
<view id="main" src="main_view.png">
XML is technology agnostic
<state id="a" />
</state>

this is really just...

a visual dataset...
storyboard
pages
states

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">

...viewed in a Mobile Processing sketch
state machine

provides visibility of project as a whole
states
views
events

2 days to make modelling app
one time cost

~1 model < 1 day
very cost effective

observationsafter using it on active projects for six months...

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 iterations

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 required

240 2 4 6 8 10 12 14 16 18 20 22
6
0
1
2
3
4
5
Weeks
Effort
2 designers
2 designers
1 flash developer
9 weeks
6+ months
resources required

“...insights gained from
models are fed back into
clearer wireframes.”
less documentation

happy accident
“...marked increase in user
testing along with the
quality of the feedback.”
on interaction
and visual design

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...

conclusionsafter walking a few companies through this tool / process

we are all toolmakers

http://www.ﬂickr.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!

make simple tools to solve your problems
real, actual problems

slowly refine your tools over time

what is that?

thank you
bryan rieger <bryan@yiibu.com>

Modeling The Mobile UX

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Modeling The Mobile UX