the full web isn't: mobility goes beyond the desktop
Post on 08-Jul-2015
1.256 Views
Preview:
TRANSCRIPT
September 2008
Mobile Web Strategies
The “Full Web” Isn’tMobility Goes Beyond the Desktop
Who am I?Usability, human factors, interaction design, industrial design, marketing, engineering, entrepreneur, MBA
Product designer, product strategist, blogger
Mobilist2
Barbara Ballard
Whereare we?
The Good
The Bad
The Ugly Opportunity
“Full Web” Experience
4
t
A good user experience
A process, system, or interface that is
5
• Usable
• Useful
• Contextual
Matches user’s mental modelor easy to deduce
Right information, content, and features for current situation
Engaging games, fun shopping, reliable & efficient intranet
Add to expense reportCan a full-web approach deliver a good experience?
6
Example:
A full-web approach
Standby screen
Full web browser: Safari, Opera Mini, etc.
71
A full-web approach
Signing in took a full minute via triple tap
Full view, select a report
84
A full-web approach
Zoom to select the actual report
95
A full-web approach
Current report details
Find the right area, zoom in
106
A full-web approach
First area was wrong
Zoom out to scroll faster
117, 8
A full-web approach
The relevant button, at the bottom of the page
129
A full-web approach
Full view again, but clearly with a new section at the bottom
1310
A full-web approach
Scrolling to the new section to zoom
1410
A full-web approach
Have fun with the table on a small screen
Side scrolling makes the button disappear
15
A full-web approach
Continuing to scroll to fill in the table
1611
A full-web approach
Scroll back to the submit button
1712
A full-web approach
Done! Maybe.
1812
12
16
93Clicks
Text /NumberFields
Steps
13 minTime
Mobilization
19
thousands of sites ...
millions of dollars of VC ...
all say mobilization is important
Add to expense reportSimple mobilization helps
20
Example:
Simple mobilization
Standby screen
Full or mobile browser
21
1
1
Simple mobilization
User name and password entry, with triple-tap
22
4
2
Simple mobilization
Select an existing report
23
5
3
Simple mobilization
A summary of the current report...
24
6
4
Simple mobilization
...with the relevant link at the bottom
25
9
5
Simple mobilization
Finally adding a new expense
26
10
6
Simple mobilization
Free-form text entry is difficult
27
11
7
Simple mobilization
Done!
28
13
8
8
6
51Clicks
Text/Number Fields
Steps
7 minTime
Intelligent design
29
Intelligent design
USAA: insurance, banking, investing service
30
Intelligent design
USAA: insurance, banking, investing service
31
Intelligent design
32
only insurance item
highly mobile
Add to expense reportGood designMobile context
33
Example:
Intelligent design
Standby screen, full or mobile browser
34
1
1
1
Phone ID identifies user
Report is selected automatically
Access keys speed choices
Mobile tasks
35
Intelligent design
6
4
2
Expense entry
36
Intelligent design
10
4
3
Location deduced
Entry fields optimized for mobile
Typical places pre-entered
37
Intelligent design
11
4
4
Done.
38
Intelligent design
13
8
5
5
2
25Clicks
Text/Number Fields
Steps
2 minTime
Widgets
39
current widgets useful
but still desktop thinking
Beyond button interface
40
other input mechanisms important for mobile
Add to expense reportMoving forwardWidgets or local applicationFull device capability exploitation
41
Example:
Widgetization
Standby screen widgets
Information customized by time, location
42
1
1
1 1
Widgetization
Glanceable options: scan, templates, notes
43
6
4
2 2
Widgetization
Camera as a scanner
443
Widgetization
Machine vision receipt verification
45
11
4
4 4
Widgetization
Done!
46
13
8
5 5
5
0
6Clicks
Text/Number
Fields
Steps
1.5 minTime
47
Text/ Number Fields
Steps
Full Web Mobilization WidgetizationIntelligent Design
Clicks Time
48
Full Web
Mobilization
Intelligent Design
Widgetization
The importance of user experienceEngage your usersReduce support costsReduce employee loadReduce abandoned shopping carts
Support your brand
49
22-24 SeptemberLawrence, Kansas
Top mobile designers, researchers, developers
50
design4mobile.mobi
DesignForMobile DiscoverDiscussDefineDrawDevelopDeliver
September 2008
Mobile Web Strategies
Thank you.User ResearchProduct StrategyDesignUser TestingCommentary
www.littlespringsdesign.com patterns.littlespringsdesign.com
top related