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 <bryan@yiibu.com>

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

writing

AfterEffects

Processing

Bill Buxton

Brenda Laurel

MPEG4SMIL

1996 2005

John Maeda

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

animation

standards

animation

management

animation

entertainment

netscape

a few animation tools...

the script

changeis constant

the spec

storyboards

flowlayout

models + layoutsstructure

behaviour

*now more often referred to as timelinesdope sheets*

resourcemanagement

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

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

wireframes

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

wireframes

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

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

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

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

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

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

photo album 1

img img img img img

Bright

DimOff

Onstate

Offstate Dim

Bright

BrightBright

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

Onstate

Offstate Dim

Bright

BrightBright

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

design != development

design development

paper is lovely, but very limited...especially for mobile

requires interpretationdifficult to share

still quite abstract

Python

warning: some assembly required*

design development

existing tools*

Python

but maybe, sometimes...

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

Python

perhaps?

models?

design development

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!

E.1a E.1b

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

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

photo album 1

img img img img img

define layout using views...scenes

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

photo album 1

img img img img img

show changes using states...shots

but may have many states

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

photo album 1

img img img img img

an many events!

photo album 1

Options Back

photo album 2

photo album 3

preview image

photo album 4

Select

</view>

no code required, or reused

</view>

XML is technology agnostic

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

...viewed in a Mobile Processing sketchstate machine

provides visibility of project as a whole

states

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

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

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

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 <bryan@yiibu.com>

Modeling the Mobile User Experience

Technology

Transcript of Modeling the Mobile User Experience

Web & Mobile & Designing User Experience - Mah Webbmah-webb.github.io/assets/pdf/me153a_me135a_web_mobile_ux.pdf · Web & Mobile & Designing User Experience ... • Mobile devices

Mobile user experience intro

Designing the Mobile User Experience€¦ · Designing the Mobile User Experience Barbara Ballard, Little Springs Design, Inc., USA. Designing the Mobile User Experience. Designing

Mobile ads experience sharing

Risk Modeling: The Brazilian Experience - World Banktreasury.worldbank.org/web/Day_1_WS_3_Andre_Proite_Brazil_Risk...Risk Modeling: The Brazilian Experience ... public debt management

Mobile Postcard: The brand experience through mobile - Mobile Forum 2014

Softjourn mobile experience

Churn Modeling For Mobile Telecommunications

Mobile Experience Innovation Centre

Redwerk mobile experience

Experience in 3D Modeling

Creating Mobile Experience

Mobile gambling summit mobile customer experience textlocal

Mobile Experience Study 2013

NCDevCon2012_designing the mobile experience

ADOBE EXPERIENCE MANAGER MOBILE

WiBro Experience Mobile Uhm

Mobile Experience by Jibe

Modeling The Mobile UX

Mobile experience