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