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