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.
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.
Bryan Rieger, Designer at Yiibu@DunBurnett Thanks for the kind words. I know very little about Microsoft Blend and nothing about Sketchflow - but being a Mac user that has very little call from .NET projects I'm not sure it would actually have any impact on my outlook?
One of the goals when building this tool/approach was to avoid being tied to any one specific platform, so that skills learned are transferrable between technologies and not reliant on a single application or supplier (Adobe CS Suite, Microsoft, Nokia, Google, etc).3 years ago
Are you sure you want to
guest82409eGood stuff- nice job. Have you checked out Sketchflow?3 years ago
Are you sure you want to
www.donburnett.com at www.donburnett.comWonderful presentation, it's too bad you don't mention Microsoft Blend and Microsoft Sketchflow technologies. It would really change your outlook..3 years ago
Modeling the Mobile User ExperiencePresentation Transcript
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
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
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
“...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
Janet Huang
Thanks for sharing.
Parcel delivery from http://www.clickandsendparcel.com 1 year ago
Must read it ..... 2 years ago
a really great presentation. I put it to my blog, if you don' mind.
Cheers
l. 3 years ago
One of the goals when building this tool/approach was to avoid being tied to any one specific platform, so that skills learned are transferrable between technologies and not reliant on a single application or supplier (Adobe CS Suite, Microsoft, Nokia, Google, etc). 3 years ago