Modeling The User Mobile Experiences: Quick Overview

The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from lowend feature phone to highdefinition tablet. Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobilespecific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hardtoidentifybuteverchanging mobile context.

Trang 1

“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

Trang 2

illustration

animation

research and design

from Toronto, Canada, eh!

a little bit about me

“a straight line may be the shortest distance between two points, but is by no means the most interesting ”

games entertainment

netscape

Trang 3

a few animation tools

Trang 5

style

flow layout

Trang 7

*now more often referred to as timelines dope sheets*

flow

resource management

state

Trang 8

pencil tests

structure behaviour

layout

Trang 9

provide visibility of project as a whole

but not finished complete

Trang 10

and now some interactive tools

Trang 12

Trang 13

or my journey playing cognitive connect the dots on a road through hell

+ prototypes, but we’ll get to them later.

Trang 14

are layouts for UI without any graphics used to evaluate the

positioning of elements on screen.

Trang 15

“ are a visual map that outlines

the layout and function of elements that helps define how

pages appear and behave

Trang 16

“ suggest a basic visual structure,

Trang 17

layout, behaviour and flow

are they really fit for purpose?

wireframes

Trang 18

A B

let’s just deal with the problem of flow

Trang 19

Project is approved! G would like wireframes for devs in NYC asap! Have a great weekend! Cheers!

“ From: client xyz

Trang 20

photo album 1

photo album 2photo album 3

Trang 21

imagination interpretation

the ability to see

things that are not

Trang 27

lawn chair?

Trang 28

Is this the lawn chair you had in mind?

Trang 29

how did I get here?

Trang 30

layout, behaviour and flow - really?

Trang 31

lacking detail, requires too much cerebral gymnastics pls review - kthxbai.

Trang 33

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

Trang 34

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

Trang 35

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

Trang 36

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

Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed

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

preview image

View

photo album 1

img img img img img

and deal with a little change.

Trang 37

G says LDN, SFO and NYC docs are different, need standards - UML? kthxbai

Trang 38

preview image

View

photo album 1

img img img img img

It puts the lotion on it’s skin

Version 4.731a

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed

ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex

Lorem ipsum dolor sit amet,

consectetur adipisicing elit, sed

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

Off state

Dim state

Dim Off

On state

Off

state

Dim Off

Bright

Bright Bright

Dim Off

adopt a standard?

Example taken from “Press On Principles of interaction programming” by Harold Thimbleby 2007

Trang 39

On state

Off

state

Dim Off

Bright

Bright Bright

Dim Off

standards require literacy

state diagram for a lightbulb

Trang 40

document management != design

literary reference

wireframes

Trang 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

Trang 42

wireframes too complex, dev team say no @!#*% UML - suggest prototype kthxbai!

Trang 43

a word that communicates everything and nothing

Trang 44

Flash HTML

Trang 45

paper is lovely, but very limited

especially for mobile

requires interpretation difficult to share

still quite abstract

Trang 46

Flash HTML

Trang 47

Trang 48

need proto for mktg wk8, G

hates x, red + lemurs - suggest u rethink - kthxbai.

Trang 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

Trang 50

Java Python

Flash HTML

Trang 51

mybad, forgot - G is all about the agile now; sprints + iterations kthxbai :)

Trang 53

and to explore new ideas!

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

Trang 54

“so, if not wireframes ”

just

Trang 55

“or prototypes ”

a small number of ageing

Trang 56

“ what are we left with?”

Trang 57

A question?

nagging

Trang 58

“what’s the software equivalent

of the cutting room floor?”

lots of iterations

visibility of project

as a whole

Trang 60

many opportunities for iteration or design

Trang 61

and visibility of the project as a whole

but not finished complete

Trang 62

“ so, you’re making animatics?”

Trang 63

not quite, applications aren’t linear

states views

events

Trang 64

think disposable data models

please, do not panic

disposable models

Trang 65

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

Trang 66

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

Trang 67

<state id="a" /> <state id="b" />

and flow using events.

Trang 68

photo album 1

<event key="rsk" action="exit()" />

<event key="down" view="list_item4" />

<event key="fire" view="preview_1" />

no code required, or reused

Trang 69

this is really just

Trang 70

a visual dataset

storyboard

pages states

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

Trang 72

viewed in a Mobile Processing sketch

state machine

Trang 73

provides visibility of project as a whole

states views

events

Trang 74

2 days to make modelling app

one time cost

Trang 75

~1 model < 1 day

very cost effective

Trang 76

after using it on active projects for six months

Trang 77

60

0 5 10 15 20 25 30 35 40 45 50 55

Trang 78

100

0 10 20 30 40 50 60 70 80 90

Weeks

50 pages

unfinished and untested

tested and complete

100+ pages of docs

documentation required

Trang 79

6

0 1 2 3 4 5

Trang 80

“ insights gained from models are fed back into

less documentation

Trang 81

happy accident

“ marked increase in user

quality of the feedback ”

on interaction and visual design

Trang 82

actual client feedback +

“Never have I seen a paragraph

I owe you both a beer ”

we have yet to collect that beer

Trang 83

after walking a few companies through this tool / process

Trang 84

we are all toolmakers

Trang 85

necessity really is the mother of invention

stamping lever to

replace noisy hammer

can now work late without

disturbing the neighbours!

Trang 86

real, actual problems

Trang 87

slowly refine your tools over time

Trang 88

what is that?

Trang 89

thank you

bryan rieger <bryan@yiibu.com>

Tiêu đề	Modeling The User Mobile Experiences: Quick Overview
Tác giả	Bryan Rieger
Trường học	Since then... Last Millennium Theatre
Chuyên ngành	Web mobile design development writing
Thể loại	Báo cáo
Năm xuất bản	2009
Thành phố	Toronto

Định dạng
Số trang	89
Dung lượng	6,65 MB