M2 Ballard Full Web Isnt

November 2008

Mobile 2.0

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

A few steps later ...

Zoom to select the actual report

95

A full-web approach

There seems to be a new section at the bottom

1010

A full-web approach

Scrolling to the new section to zoom

1110

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

1311

A full-web approach

Scroll back to the submit button

1412

A full-web approach

Done! Maybe.

1512

12

16

93Clicks

Text /NumberFields

Steps

13 minTime

Mobilization

16

thousands of sites ...

millions of dollars of VC ...

all say mobilization is important

Add to expense reportSimple mobilization helps

17

Example:

Simple mobilization

Standby screen

Full or mobile browser

18

1

1

Simple mobilization

User name and password entry, with triple-tap

19

4

2

Simple mobilization

Select an existing report

20

5

3

Simple mobilization

A summary of the current report...

21

6

4

Simple mobilization

...with the relevant link at the bottom

22

9

5

Simple mobilization

Finally adding a new expense

23

10

6

Simple mobilization

Free-form text entry is difficult

24

11

7

Simple mobilization

Done!

25

13

8

8

6

51Clicks

Text/Number Fields

Steps

7 minTime

Intelligent design

26

Intelligent design

USAA: insurance, banking, investing service

27

Intelligent design

USAA: insurance, banking, investing service

28

Intelligent design

29

only insurance item

highly mobile

Add to expense reportGood designMobile context

30

Example:

Intelligent design

Standby screen, full or mobile browser

31

1

1

1

Phone ID identifies user

Report is selected automatically

Access keys speed choices

Mobile tasks

32

Intelligent design

6

4

2

Expense entry

33

Intelligent design

10

4

3

Location deduced

Entry fields optimized for mobile

Typical places pre-entered

34

Intelligent design

11

4

4

Done.

35

Intelligent design

13

8

5

5

2

25Clicks

Text/Number Fields

Steps

2 minTime

Widgets

36

current widgets useful

but still desktop thinking

Beyond button interface

37

other input mechanisms important for mobile

Add to expense reportMoving forwardWidgets or local applicationFull device capability exploitation

38

Example:

Widgetization

Standby screen widgets

Information customized by time, location

39

1

1

1 1

Widgetization

Glanceable options: scan, templates, notes

40

6

4

2 2

Widgetization

Camera as a scanner

413

Widgetization

Machine vision receipt verification

42

11

4

4 4

Widgetization

Done!

43

13

8

5 5

5

0

6Clicks

Text/Number

Fields

Steps

1.5 minTime

44

Text/ Number Fields

Steps

Full Web Mobilization WidgetizationIntelligent Design

Clicks Time

45

Full Web

Mobilization

Intelligent Design

Widgetization

The importance of user experienceEngage your usersReduce support costsReduce employee loadReduce abandoned shopping carts

Support your brand

46

November 2008

Mobile 2.0

Thank you.User ResearchProduct StrategyDesignUser TestingCommentary

www.littlespringsdesign.com patterns.littlespringsdesign.com