7 Key Mobile Usability Guidelines to Implement Now

2. Audience Poll
• Do you already provide mobile user
assistance?
• Are you planning to do so in the next year?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
2

3. Today's Agenda
• Mobile is the new PC
• 7 Key Requirements for Mobile
User Assistance
• Best Practices
• Mobile UA Resources
• Q & A (questions also welcome any time)
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
3

4. Mobile is the New PC
4

5. Why Should I Care?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
5

6. The Megatrend of the 21st Century
As big as the shift to radio, TV,
or Internet
In 2010, smartphones sold
more than PCs
Global mobile data traffic
to grow 26x in the
next 5 years
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
6

7. eReaders are the New Books
• Amazon sells more eBooks
than printed books
• New York Times Best Seller list
updated for eBooks
• Kindle leads, with
51% market share
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
7

8. Mobile is Big Business
Over a billion apps per month downloaded from
the Apple App Store as of October, 2011
In 2011, global mobile app and ad revenue
up 17x in 3 years
Mobile app revenue to grow
from $10.2 B in 2010
to $100 Billion in 2015
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
8

9. 7 Key Requirements for
Mobile User Assistance
9

10. 1. Do a Mobile Task Analysis
Gather data about your mobile users:
• What mobile tasks do they need to perform?
• What is the context of the task?
Who, What, When, Where, and Why mobile
Create mobile personas
Build use cases that
include the mobile context
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
10

11. Who are your
target mobile
users?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
11

12. What tasks do
your mobile users
need to
complete?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
12

13. Where are they
when they
complete the tasks?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
13

14. How long
does it take
to perform
the task?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
14

15. Do the tasks
involve a lot
of reading?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
15

16. Do the tasks
involve a lot
of data
entry?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
16

17. What types of
devices do they
use?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
17

18. 2. Define Your Mobile UA Strategy
• Describe your users’ mobile context, needs
• Outline their mobile tasks
• Define the mobile UA architecture:
• Getting started
• Text strings
• Messages
• Context-sensitivity
• Accessibility
• List target mobile devices,
output formats
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
18

19. Typical Mobile Tasks
Related to:
• Deadlines
• Rapid change
Find a
• Business information parking
spot
• Directions
• Public transportation
• Need for privacy
• Emergencies
• Communication
Budiu and Nielsen, http://www.nngroup.com/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
19

20. Most Frequent Mobile Tasks
1. Games
2. Weather
3. Social networking
4. Maps, navigation, search
5. Music
6. News
7. Entertainment
8. Video, movies
9. Shopping, retail
10. Dining, restaurant
11. Sport
12. Productivity
13. Communication
14. Food, drink
15. Travel
16. Health
17. Education, learning
18. Household, personal, car http://www.nngroup.com/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
20

21. 3. Adopt Mobile Style Guidelines
Edit, Edit, Edit
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
21

22. Tips for Ruthless Editing
Ask:
• What is the primary purpose
of this screen?
• Will users know how to interact
with it within three seconds?
• Is the information too dense?
What can be removed?
- Rachel Hinman, http://rachelhinman.com/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
22

23. Touch Terminology
A mobile must-read
• Touch for touch devices
• Press
• Tap
• Drag
• Flick
• Slide
• Swipe
• Pinch
• Rotate
• And others… plus multi-gesture combinations
Touch Gesture Reference Guide:
http://www.lukew.com/touch/TouchGestureGuide.pdf
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
23

24. Mobile Messages
• Getting started tips, tour
• Labels: icons, buttons, tabs, lists
Minimalist
For touch, no tool tips or hover text writing style
• Instructions
• Examples
• Tips
• Cautions
• Error messages
• Alternative text
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
24

25. Examples: Welcome, Tour, Progress
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
25

26. Examples: Advice, Explanation, Confirmation
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
26

27. 4. Use Prototypes to Validate Mobile UA
• Get early feedback on mobile UA
• Use templates to create mobile mockups
• Build rapid prototypes with PPT, HTML
• Use simulators:
• iOS Interface Builder
• Android SDK
Keynotopia
templates
http://keynotopia.com/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
27

28. Example: Android Template
Mock up
mobile
messages
http://worldinfo18.blogspot.com/2011/02/51-free-mobile-ui-web-ui-wireframe-kits.html
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
28

29. Example: iPhone Template
http://developer.yahoo.com/ypatterns/about/stencils/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
29

30. 5. Build In Mobile Accessibility
Apple: Siri, VoiceControl,
Speech Synthesis, VoiceOver Provide
alternative
Google: TalkBack accessibility service, text
third-party apps such as Sonalight
texting-by-voice
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.S
30

31. 6. Test on the Target Mobile Devices
Mobile test considerations:
• Early tests on emulators
• Later tests in mobile environment
• Usability
• Messages in all languages
• Download speed
• Third-party software, multiple browsers
• As many actual devices as possible
• Device labs (example: Device Anywhere)
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
31

32. eReader Tasks
• Organize: Acquire, store,
select, arrange, open, close,
archive, replace, update, delete
• Read: Turn pages, navigate,
change font size, search,
look up a word, highlight, bookmark
• Share: Add and share notes, comments
• Platform: Determine compatibility
• Use shortcuts
• Get help
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
32

33. eBook Reading Apps from Amazon
http://www.amazon.com/gp/feature.html/ref=kcp_ipad_mkt_lnd?docId=1000493771
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
33

34. eBook Reading Apps for iOS, Android
Apple App Store
Android Market
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
34

35. 7. Work with Mobile Translators
Get agreement on:
• Language for gestures
• File size, format of icons, screenshots
• File names
• Localized icons, screenshots
• Text truncation, dialog box resizing
• Line- and word-wrapping
• Language-specific characters
• Messages
• Installers, setup
Shailendra Musale , Localizing for Mobile Devices: A Primer
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
35

36. Summary: 7 Key Requirements for
Mobile User Assistance
1. Know your mobile users and
understand their mobile tasks
2. Define mobile UA strategy
3. Adopt mobile style guidelines
4. Create mobile prototypes
5. Build in accessibility
6. Test on actual mobile devices
7. Work with mobile translators
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
36

37. Latest Mobile Usability
Guidelines
37

38. Mobile Usability 101
• Make it tapworthy – Josh Clark
• If in doubt, leave it out – Jakob Nielsen
• Design for mobile first – Luke Wrobleski
• Beautiful visualization – Noah Iliinske
• Responsive web design – Ethan Marcotte
• Use tools to prototype
– Joe Welinske
• Unified content strategy – Ann
Rockley, Charles Cooper, Scott Abel
• Mobile & UX = The Perfect Storm
– Jared Spool
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
38

39. Mobile Features Can Make Tasks Easier
• WiFi
Check a price
• Bluetooth
• NFC (near field communication)
• GPS (global positioning system)
• Photography Avoid lines at
Disneyland
• Voice recognition
• SMS (short msg. service)
• Accelerometer
• Barcode scan,
QR (quick response)
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
39

40. Best Practices for
Mobile User Assistance
40

41. Make the Most of Small Screens
Mobile content is twice as difficult to read
What you can do:
• Plan for partial attention
• Reduce words
• Make tasks obvious
• Use design to focus
on critical content
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
41

42. Provide What They Need, When They Need It
Progressive disclosure:
• Main tasks on the front page
• Quick access to key tasks
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
42

43. Minimize the Need to Type
• Include defaults Spin dial
to select
• Compute field values numbers
• Use auto-complete
and suggestions
• Ensure textbox fits screen
• Allow for typos, abbreviations
• Provide error recovery
• Leverage mobile
platform tools Use voice
commands
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
43

44. Provide a Mobile Website Which version of
the news would
you rather view on
• Separate mobile site your phone?
• Detect and direct
• Responsive design Full Site Mobile Site
• Links to full, mobile sites
Labels:
Mobile Site, Full Site
• Fast download
• Optimize for browsers
used by target customers
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
44

45. Jquery Mobile Framework, Todd Parker, Scott Jehl
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
45

46. Consider Platform Differences
Example: the Back control
iOS: Software
Back button in
top left corner
Android: Physical
Back button at
bottom of device
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
46

47. Tablets and
Consider Ergonomics eReaders
held with two
hands while
seated
Smartphones
typically held in
one hand while
standing
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
47

48. Be Aware of User Interface Differences
Example: Tab controls
Android: Row of iOS: Row of options
options at the top of at the bottom of the
the screen screen
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
48

49. Plan for Screen Size and Resolution
• The same app can be viewed on different devices
• Touch zones vary, orientation changes layout
• Example of screen size/resolution from Apple's web site:
 iPhone 4: 3.5", 960 x 640 pixels, 326 ppi
 iPad: 9.7", 1024 x 768 pixels, 132 ppi
Reading Reading
app on app on
iPhone iPad
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
49

50. Accommodate Different Displays
Tip: The viewport tag resizes content
to fit the screen.
Example:
<meta name = "viewport" content =
"width = device-width">
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
50

51. Provide Effective Mobile Controls
• Location
• Size
• Spacing
• Orientation
• Gestures
• Handedness
• Labels
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
51

52. Design the Tappable Area
• Space between touch controls Plan for
• Size: changing
device
• Apple: fingertip-size, ―44 x 44 points‖ orientation
• Microsoft: 38 x 38 pixels
• Google: density-independent pixels (dp),
enables scaling
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
52

53. Include Some Awkward Controls
Prevent accidents with:
• Tricky gestures:
slide-to-unlock, answer,
power off, delete
• Confirmation screens
• Undo
Slide to
unlock
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
53

54. Keep an Eye on Mobile Trends
• Augmented reality
• Artificial Intelligence
• Image recognition
• Biometrics
• Sharing, location
• Transactions
• HTML5
• New interfaces:
NUI, OUI
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
54

55. Best Practices for Mobile User Assistance
• Make the most of small screens
• What they need, when they need it
• Reduce typing
• Mobile web site
• Platform, UI differences
• Screen size, resolution
• Effective controls
• Tappable area
• Some awkward controls
• Watch trends
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
55

56. Resources for
Mobile UA
56

57. Mobile Must-Reads
• Developing User Assistance for Mobile Apps
book and webinars – Joe Welinske
• Tapworthy: Designing Great iPhone Apps
– Josh Clark
• Mobile First – Luke Wrobleski
• Alertbox mobile articles, usability studies
–Jakob Nielsen
• UIE.com mobile articles, webinars – Jared Spool
• eBooks 101 – Ann Rockley, Charles Cooper (coming soon)
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
57

58. Selected Mobile Resources
• Developing User Assistance for Mobile Apps:
http://www.writersua.com/mobile/book.htm
• Tapworthy: Designing Great iPhone Apps:
http://shop.oreilly.com/product/0636920001133.do
• Mobile First: http://www.abookapart.com/products/mobile-first
• Alertbox: http://www.useit.com/alertbox/mobile-writing.html
• eBooks 101: http://www.ebooks101book.com/
• Beautiful Visualization: http://shop.oreilly.com/product/0636920000617.do
• Responsive Web Design: http://www.abookapart.com/products/responsive-
web-design
• Touch gesture reference guide, stencils, diagrams:
http://www.lukew.com/ff/entry.asp?1071
• Rachel Hinman on mobile prototyping: http://rachelhinman.com/
• Translation: http://smusale.tripod.com/writing/wireless_primer.pdf
• Nielsen Norman Group seminars, articles, research: http://www.nngroup.com/
• User Interface Engineering seminars, articles, podcasts: http://www.uie.com/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
58

59. What We Covered
• Mobile is the New PC
• 7 Requirements for Mobile User Assistance:
1. Task assessment—user needs, mobile context
2. UA strategy—text strings, context-sensitivity
3. Style guidelines—ruthless editing, gesture terms
4. Prototyping—early feedback
5. Accessibility—build it in
6. Testing—usability, mobile context, device labs
7. Translation—early agreement
• Best Practices—Mobile Usability 101
• Resources for Mobile UA
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
59

60. Q U E S T I O N S & A N S W E R S
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
60

61. Contact information:
• LinkedIn: martarauch
• Twitter: @martarauch
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
61

62. Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
62

63. Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011.
63