The “Full Web” Isn’t
Mobility Goes Beyond the November 2008
Desktop Mobile 2.0

Who am I?
Usability, human factors, interaction
design, industrial design, marketing,
engineering, entrepreneur, MBA
Product designer, product strategist, Barbara Ballard
blogger
Mobilist 2

Where
are we?
The Good
The Bad
The Ugly Opportunity

“Full Web” Experience
t
4

A good user experience
A process, system, or interface that is
Matches user’s mental model
• Usable or easy to deduce
Right information, content, and
• Useful features for current situation
Engaging games, fun shopping,
• Contextual reliable & efficient intranet
5

Example:
Add to expense report
Can a full-web approach deliver a
good experience?
6

A full-web approach
Standby screen
Full web
browser: Safari,
Opera Mini, etc.
1 7

A full-web approach
Signing in took
a full minute via
triple tap
Full view, select
a report
4 8

A full-web approach
A few steps
later ...
Zoom to select
the actual report
5 9

A full-web approach
There seems to
be a new
section at the
bottom
10 10

A full-web approach
Scrolling to the
new section to
zoom
10 11

A full-web approach
Have fun with
the table on a
small screen
Side scrolling
makes the
button
disappear
12

A full-web approach
Continuing to
scroll to fill in
the table
11 13

A full-web approach
Scroll back to
the submit
button
12 14

A full-web approach
Done! Maybe.
12
Steps
Text /Number 16
Fields
93
Clicks
13 min
Time
12 15

Mobilization
thousands of
sites ...
millions of
dollars of VC ...
all say
mobilization is
important
16

Example:
Add to expense report
Simple mobilization helps
17

Simple mobilization
Standby screen
Full or mobile
browser
1
1 18

Simple mobilization
User name and
password entry,
with triple-tap
4
2 19

Simple mobilization
Select an
existing report
5
3 20

Simple mobilization
A summary of
the current
report...
6
4 21

Simple mobilization
...with the
relevant link at
the bottom
9
5 22

Simple mobilization
Finally adding a
new expense
10
6 23

Simple mobilization
Free-form text
entry is difficult
11
7 24

Simple mobilization
Done!
13 8
Steps
Text/Number 6
Fields
51
Clicks
7 min
Time
8 25

Intelligent design
26

Intelligent design
USAA:
insurance,
banking,
investing service
27

Intelligent design
USAA:
insurance,
banking,
investing service
28

Intelligent design
only insurance
item
highly mobile
29

Example:
Add to expense report
Good design
Mobile context
30

Intelligent design
Standby screen,
full or mobile
browser
1
1
1 31

Intelligent design
Phone ID
identifies user
Report is
6 selected
automatically
Access keys
speed choices
Mobile tasks
4
2 32

Intelligent design
Expense entry
10
4
3 33

Intelligent design
Location
deduced
Entry fields
11 optimized for
mobile
Typical places
pre-entered
4
4 34

Intelligent design
Done.
13 Steps
5
Text/Number 2
Fields
8
25
Clicks
2 min
Time
5 35

Widgets
current widgets
useful
but still desktop
thinking
36

Beyond button interface
other input
mechanisms
important for
mobile
37

Example:
Add to expense report
Moving forward
Widgets or local application
Full device capability exploitation
38

Widgetization
Standby screen
widgets
Information
1 customized by
time, location
1
1 1 39

Widgetization
Glanceable
options: scan,
templates, notes
6
4
2 2 40

Widgetization
Camera as a
scanner
3 41

Widgetization
Machine vision
receipt
verification
11
4
4 4 42

Widgetization
Done!
5
13
Steps
Text/ 0
Number
Fields
6
Clicks
8
1.5 min
Time
5 5 43

Steps Text/ Number
Fields
Clicks Time
Full Web Mobilization Intelligent Design Widgetization 44

Full Web
Mobilization
Intelligent Design
Widgetization
45

The importance of user experience
Engage your users
Reduce support costs
Reduce employee load
Reduce abandoned shopping carts
Support your brand
46

Thank you.
User Research November 2008
Product Strategy
Mobile 2.0
Design
User Testing
Commentary
www.littlespringsdesign.com
patterns.littlespringsdesign.com