Marta Rauch presented 12 key mobile usability guidelines for technical communicators to implement in their work: understand mobile users and tasks, define a mobile content strategy, adopt mobile style guidelines, develop effective user interfaces and assistance, optimize for small screens, provide intuitive controls, use progressive disclosure, validate designs with prototypes, include accessibility features, test on actual devices, and work with mobile translators.

1. 12 Key Mobile Usability Guidelines
to Implement Now
Marta Rauch
STC Summit 2012
@martarauch
Marta Rauch
+Marta Rauch

2. Audience Poll
• Do you you work on a mobile project?
• Do you think you’ll be working on mobile
projects within a year?
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
2

3. What We'll Cover
• Mobile is the new PC
• 12 key mobile usability guidelines
• Mobile resources
Key Takeaway:
Technical
communicators
can play a large
role in mobile
Tip: Detailed information is in my STC Intercom article:
Twelve Mobile Usability Guidelines to Implement Now usability.
Go for it!
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
3

4. Assignment
Listen for the top 3 takeaways
to take back to your workplace.
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
4

5. Mobile is the New PC
Marta Rauch, @martarauch “2 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
5

6. Why Should I Care?
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
6

7. The Megatrend of the 21st Century
As big as the shift to radio, TV, or Internet
Starting in 2010,
smartphones sold
more than PCs
The number of mobile-
connected devices
will exceed the world’s
population in 2012
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
7

8. Mobile is Big Business
Over a billion apps per month downloaded from
the Apple App Store as of October, 2011
In March 2012, Apple hit 25 billion downloads
Mobile app revenue to grow
from $10.2 B in 2010
to $100 Billion in 2015
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
8

9. 12 Key Mobile Usability
Guidelines
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
9

10. 1. Understand Your Mobile Users
Who, What, When, Where, and Why mobile
Do a task analysis:
• What mobile tasks do users need to perform?
• What is the context (environment)?
• What do users want to do?
Create mobile personas
Build use cases that
include the mobile context
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
10

11. Who are your mobile users?
What are their mobile tasks?
What environment are they in?
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
11

12. What types of
devices do they
use?
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
12

13. Do the tasks
involve a lot
of reading?
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
13

14. Do the tasks
involve a lot
of data
entry?
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
14

15. 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, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
15

16. Most Frequent Android App Downloads
Top 10 Android app download categories for the 1 billionth download:
1. Games
2. Entertainment
3. Tools
4. Communication
5. Productivity
6. Personalization
7. Music & Audio
8. Social
9. Media & Video
10. Travel & Local
Via +Android on Google+, 12/2012
https://plus.google.com/u/
0/104629412415657030658#104629412415657030658/about
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
16

17. 2. Define the Mobile Content Strategy
• What your mobile customers want
• Mobile tasks and context
• How this will address their mobile needs
• Align with competitors’ mobile offerings
• An app or a mobile-friendly web site
• The target mobile devices
• Mobile architecture
• Structure
• User experience, interface
• User assistance
• Context-sensitivity
• Accessibility
• Content management metadata and tagging, output formats,
testing, translation, distribution, feedback, analytics, updates,
resources, schedule, budget, tools, process, development…
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
17

18. 3. Adopt Mobile Style Guidelines
Edit, Edit, Edit
- Josh Clark, http://globalmoxie.com/
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
18

19. 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, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
19

20. 4. Define Touch Gestures, 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, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
20

21. Adhere to OS Design Guidelines
Example: the Back control
iOS: Software
Back control
Android: Physical
Back control at
bottom of device
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
21

22. 5. Develop Effective Mobile UI, User Assistance
Examples:
• Gestures
• Labels: icons, buttons, tabs, lists
(no tool tips or hover text)
• Getting started, tour
• Instructions, examples
• Tips, overlays
• Cautions
• Confirmations
• Error messages
• Alternative text
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
22

23. Examples: Welcome, Getting Started Tour
Welcome Getting Started Tour
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
23

24. Examples: Overlay Tour, Link to Online Help
Overlay Tour Link to Online Help
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
24

25. Examples: Instruction, Illustration, Progress Message
Instruction Illustration Progress Message
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
25

26. Examples: Embedded, Tip, Overlay, Discoverable
Embedded Tip Overlay Discoverable
From Theresa Neil’s Mobile Design Patterns. http://www.uxbooth.com/blog/mobile-design-patters/
Look for her new book, Mobile Design Pattern Gallery
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
26

27. 6. Make the Most of Small Screens
Mobile content is twice as difficult to read.
What you can do:
• Provide most important content first
• Plan for partial attention
• Make tasks obvious
• Use design to focus
on critical content
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
27

28. Provide a Mobile-friendly Website
Which version of
Responsive design the news would
you rather view on
or your phone?
Separate mobile site Full Site Mobile Site
Links: Mobile Site, Full Site
Fast download
Optimized for browsers
used by target customers
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
28

29. Responsive Design
Looks great on any
mobile device
Jquery Mobile Framework, Todd Parker, Scott Jehl
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
29

30. Accommodate Different Displays
Tip: The HTML viewport meta tag
resizes content to fit the screen.
Example:
<meta name = "viewport" content =
"width = device-width">
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
30

31. 7. Provide Effective Mobile Controls
• Usable labels
• Intuitive gestures
• Embedded hints
• Tips as necessary
• Orientation
• Handedness
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
31

32. Design the Tappable Area
• Space between touch controls
• Size: Plan for
• Apple: fingertip-size, “44 x 44 points” changing
orientation
• Microsoft: 38 x 38 pixels
• Google: density-independent pixels (dp),
enables scaling
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
32

33. Tablets and
Consider Ergonomics eReaders held
with two
hands while
seated
Smartphones
typically held in
one hand while
standing
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
33

34. Minimize the Need to Type
• Use auto-complete Spin dial
to select
and suggestions numbers
• Provide error recovery
• Include defaults
• Compute field values
• Ensure textbox fits screen
• Allow for typos, abbreviations
• Leverage mobile
platform tools Use voice
commands
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
34

35. Include Some Awkward Controls
Prevent accidents with:
• Tricky gestures - slide-to-unlock,
answer, power off, delete
• Confirmation screens
• Undo
Slide to
unlock
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
35

36. 8. Provide What They Need, When They Need It
Progressive disclosure:
• Main tasks on the first screen
• Quick access to key tasks
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
36

37. 9. Use Prototypes to Validate Mobile UX
• Get early feedback
• Use templates to create mobile mockups
• Build rapid prototypes with sketches, PPT, HTML
• Use simulators, emulators:
• iOS Interface Builder
• Android SDK
Keynotopia
templates
http://keynotopia.com/
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
37

38. Example: Android Template
Mock up
mobile
messages
http://worldinfo18.blogspot.com/2012/02/51-free-mobile-ui-web-ui-wireframe-kits.html
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
38

39. Example: iPhone Template
http://developer.yahoo.com/ypatterns/about/stencils/
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
39

40. 10. 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, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
40

41. 11. Test on the Target Mobile Devices
Mobile test considerations:
• Early tests on emulators
• Later tests in mobile environment
• Mobile 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, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
41

42. 12. Work with Mobile Translators
Get agreement on:
• Language for gestures
• Text truncation, resizing
• Line- and word-wrapping
• File size, format of icons, screenshots
• File names
• Localized icons, screenshots
• Language-specific characters
• Messages
• Installers, setup
Shailendra Musale, Localizing for Mobile Devices: A Primer
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
42

43. Summary: 12 Key Requirements for
Mobile User Assistance
1. Know your mobile users and
understand their mobile tasks
2. Define the mobile Content Strategy
3. Mobile style guidelines
4. Touch terminology
5. Effective UI, user assistance
6. Small screen usability
7. Intuitive controls
8. Progressive disclosure
9. Prototypes
10. Accessibility
11. Test on devices, in environment
12. Mobile translators
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
43

44. Keep an Eye on Mobile Trends
• Augmented reality (AR)
• Artificial Intelligence (AI)
• Image recognition
• Biometrics
• Sharing, location
• Transactions
• HTML5
• New interfaces:
NUI, OUI
Marta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012.
44

45. Selected Mobile Resources
• Twelve Mobile Usability Guidelines to Implement Now,
http://intercom.stc.org/2012/11/twelve-key-mobile-usability-guidelines-you-need-to-implement-now/
• 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: http://www.lukew.com/ff/entry.asp?1071
• Stencils for iPhone, iPad, Android, Windows Phone 7: http://www.uistencils.com/
• Mobile prototyping: http://rachelhinman.com/
• Design patterns: http://www.uxbooth.com/blog/mobile-design-patters/ Mobile Design Pattern Gallery
• 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, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
45

46. What We Covered
• Mobile is the new PC
• 12 key mobile usability guidelines Key Takeaway:
Technical
• Mobile resources communicators
can play a large
role in mobile
usability.
Go for it!
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
46

47. Assignment
Share the top 3 takeaways
you plan to take back to your workplace.
Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012.
47

48. • Twitter: @martarauch Follow me!
• LinkedIn: martarauch
• Google+: Marta Rauch
Marta Rauch, "Providing Effective User Assistance for Mobile Devices” STC Summit 2012 Copyright 2012.
48