compares 4 mobile web design philosophies; presented at Mobile Web USA, January 2008

1. Not Just a Limited PC
Leveraging device characteristics 23 January 2008
to improve the user experience
and ease of use

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

3. 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
3

4. Example:
Add to expense report
Can a one-web approach deliver a
good experience?
4

5. a one-web approach
Standby
screen
Full web
browser:
Safari, Opera
Mini, etc.
1 5

6. a one-web approach
Signing in
took a full
minute via
triple tap
Full view,
select a report
4 6

7. a one-web approach
Zoom to
select the
actual report
5 7

8. a one-web approach
Current report
details
Find the right
area, zoom in
6 8

9. a one-web approach
First area was
wrong
Zoom out to
scroll faster
7, 8 9

10. a one-web approach
The relevant
button, at the
bottom of the
page
9 10

11. a one-web approach
Full view
again, but
clearly with a
new section at
the bottom
10 11

12. a one-web approach
Scrolling to
the new
section to
zoom
10 12

13. a one-web approach
Have fun with
the table on a
small screen
Side scrolling
makes the
button
disappear
13

14. a one-web approach
Continuing to
scroll to fill in
the table
11 14

15. a one-web approach
Scroll back to
the submit
button
12 15

16. a one-web approach
Done!
I think.
12 16

17. Example:
Add to expense report
Simple mobilization helps
17

18. simple mobilization
Standby
screen
Full or mobile
1 browser
1 18

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

20. simple mobilization
Select an
existing
report
5
3 20

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

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

23. simple mobilization
Finally adding
a new
expense
10
6 23

24. simple mobilization
Free-form
text entry is
dificult
11
7 24

25. simple mobilization
Done!
13
8 25

26. Example:
Add to expense report
Good design
Mobile context
26

27. intelligent design
Standby
screen, full or
mobile
1 browser
1
1 27

28. intelligent design
Phone ID
identifies user
Report is
6 selected
automatically
Access keys
speed choices
4
Mobile tasks
2 28

29. intelligent design
Expense entry
10
4
3 29

30. intelligent design
Location
deduced
Entry fields
11 optimized for
mobile
Typical places
pre-entered
4
4 30

31. intelligent design
Done.
13
8
5 31

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

33. widgetization
Standby
screen
widgets
1 Information
customized
by time,
location
1
1
1
33

34. widgetization
Glanceable
options: scan,
templates,
6 notes
4
2
2
34

35. widgetization
Camera as a
scanner
3 35

36. widgetization
Machine
vision receipt
verification
11
4
4
4
36

37. widgetization
Done!
5 steps, but
13
no data entry
8
5
5
37

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

39. What I was supposed to talk about
What is a good user experience
Beyond the linear user interface
Working with not against devices
Beyond directions: GPS and more
The importance of user experience
39

40. Thank you.
User Research 23 January 2008
Product Strategy
Design
User Testing
Commentary
www.littlespringsdesign.com
patterns.littlespringsdesign.com