This presentation is made by Bryan Reger. It is very nice and detailed presentation in which he describes how to model User Experience for Mobile Apps.
Must read it .....
2. 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
Friday, 25 September 2009
10. and now some interactive tools...
Friday, 25 September 2009
11. 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
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. ...are layouts for UI without any
graphics used to evaluate the
positioning of elements on screen.
“
layout
visual design?
wireframes
Friday, 25 September 2009
15. “...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
16. “...suggest a basic visual structure,
and illustrate clearly defined flows
through an application.
layout + behaviour + flow
flow?
wireframes
Friday, 25 September 2009
17. layout, behaviour and flow...
are they really fit for purpose?
wireframes
Friday, 25 September 2009
18. A B
let’s just deal with the problem of flow...
Friday, 25 September 2009
19. Project is approved! G. would like
wireframes for devs in NYC asap!
Have a great weekend! Cheers!
“
From: client xyz
Friday, 25 September 2009
20. 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
21. imagination interpretation
the ability to see
things that are not
there...
the ability to fill in the
gaps that imagination
leaves behind
Friday, 25 September 2009
28. Is this the lawn chair you had in mind?
Friday, 25 September 2009
29. ...how did I get here?
Options Back
preview image
My Photo Sharing App
Previous Next
Friday, 25 September 2009
30. 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
31. lacking detail, requires too much
cerebral gymnastics. pls review -
kthxbai.
“
From: client xyz
Friday, 25 September 2009
32. 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
33. 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
34. 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
35. 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
36. Options
pr
My Phot
Previous
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 pressin
(or fire butto
presented w
the image th
selected.
It rubs the lo
else it gets th
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...
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!
Friday, 25 September 2009
37. G. says LDN, SFO and NYC docs
are different, need standards -
UML? kthxbai
“
From: client xyz
Friday, 25 September 2009
38. Options
pr
My Phot
Previous
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 pressin
(or fire butto
presented w
the image th
selected.
It puts the lo
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...
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
Friday, 25 September 2009
41. 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
42. wireframes too complex,
dev team say no @!#*% UML -
suggest prototype... kthxbai!
“
From: client xyz
Friday, 25 September 2009
45. paper is lovely, but very limited...
especially for mobile
requires interpretationdifficult to share
still quite abstract
Friday, 25 September 2009
48. need proto for mktg wk8, G.
hates x, red + lemurs - suggest u
rethink - kthxbai.
“
From: client xyz
Friday, 25 September 2009
49. 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 create
less
exploration
dev problems
solved first
technology
constrained
fewer
options
incorrect
solutions
time consuming
Friday, 25 September 2009
53. ...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
Friday, 25 September 2009
54. “so, if not wireframes...”
just
Friday, 25 September 2009
64. think disposable data models
please, do not panic...
disposable
models
Friday, 25 September 2009
65. 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
66. <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
67. <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
68. 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
71. 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
72. ...viewed in a Mobile Processing sketch
state machine
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