Download - Modeling the Mobile User Experience

ModellingMobilethe

UserExperience

“We become what we behold. We shape our tools and then our tools shape us.”

Marshall McLuhan

bryan rieger <[email protected]>

Friday, 25 September 2009

designillustration

animation

research and design

from Toronto, Canada, eh!

motion graphics

1991 20092000

theatre design

multimedia

mobiledevelopment

design

webtheatre

rapid prototyping

media on devices

dot.com boom

Hypercard

Mosaic

mobile

Sabbatical in South East Asia

Flash Lite Web

DIY Toolsopen source

design

research

last millennium since then...

UML

writing

AfterEffects

Processing

Bill Buxton

Brenda Laurel

MPEG4SMIL

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

UKgraphic design

Web

Web

animation

SVG

standards

animation

craft

management

animation

Java

WAP

games

entertainment

netscape


a few animation tools...


the script

changeis constant

the spec


storyboards

style

flowlayout


models + layoutsstructure

behaviour

style

style


*now more often referred to as timelinesdope sheets*

flow

resourcemanagement

state


pencil tests

structurebehaviour

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

wireframesFriday, 25 September 2009

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...Friday, 25 September 2009

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?Friday, 25 September 2009

imagination interpretationthe 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 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




It rubs the lotion on it’s skin or else it gets the hose again.



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



See 5.1.3.5a

Options Back

photo album 2

photo album 3

preview image


View

photo album 1

img img img img img

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




It puts the lotion on it’s skin...



Version 4.731a





See 5.1.3.5a

Options Back

photo album 2

photo album 3

preview image


View

photo album 1

img img img img img

On

state

Off

state

Dim

state

Dim

Off

Bright

Bright

Bright

DimOff

Dim

Off

Onstate

Offstate Dim

state

Dim

Off

Bright

BrightBright

Dim

Off

Dim

Off

adopt a standard?Example taken from “Press On Principles of interaction programming” by Harold Thimbleby 2007


Onstate

Offstate Dim

state

Dim

Off

Bright

BrightBright

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

finding the right level

of abstraction

no iterations due to

investments in code

longer to createless

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 + iterationskthxbai. :)

“From: client xyz


A BA.5

an iteration

creating options

...iterations are an opportunity for designFriday, 25 September 2009

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

exploreideas

test ideas

incorporate feedback

best options

discardedideas

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


designillustration

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?”Friday, 25 September 2009

not quite, applications aren’t linear...

states

views

events


think disposable data modelsplease, 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="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>


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

a visual dataset...storyboard

pagesstates


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 sketchstate machine


provides visibility of project as a whole

states

views

events


2 days to make modelling app one time cost


~1 model < 1 dayvery 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 iterationsFriday, 25 September 2009

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 requiredFriday, 25 September 2009

240 2 4 6 8 10 12 14 16 18 20 22

6

0

1

2

3

4

5

Weeks

Effort

2 designers

2 designers1 flash developer

9 weeks

6+ months

resources requiredFriday, 25 September 2009

“...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 toolmakersFriday, 25 September 2009

http://www.flickr.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 timeFriday, 25 September 2009


what is that?


thank you

bryan rieger <[email protected]>
