Mobile devices are the new PC. To meet the needs of mobile customers, it's time to ramp up on mobile usability and ]provide effective mobile user assistance. This presentation summarizes mobile usability guidelines, and shares key requirements for user assistance on mobile devices, including smartphones and tablets such as Android, iPhone, and iPad.
7 Key Mobile Usability Guidelines to Implement Now, LavaCon 2011, Marta Rauch
1.
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 2012.
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 2012.
3
5. Why Should I Care?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
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 2012.
6
7. eReaders are the New Books
• Amazon sells more eBooks
than printed books
• New York Times Best Seller list
updated for eBooks
• Kindle currently has the
greatest market share
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
7
8. Mobile is Big Business
Over a billion apps per month downloaded from
the Apple App Store as of October, 2012
In 2012, 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 2012.
8
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 2012.
10
11. Who are your
target mobile
users?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
11
12. What tasks do
your mobile users
need to
complete?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
12
13. Where are they
when they
complete the tasks?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
13
14. How long
does it take
to perform
the task?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
14
15. Do the tasks
involve a lot
of reading?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
15
16. Do the tasks
involve a lot
of data
entry?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
16
17. What types of
devices do they
use?
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
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 2012.
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 2012.
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 2012.
20
21. 3. Adopt Mobile Style Guidelines
Edit, Edit, Edit
- Josh Clark, http://globalmoxie.com/index.shtml
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
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 2012.
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 2012.
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 2012.
24
25. Examples: Welcome, Getting Started Tour
Welcome Getting Started Tour
Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" LavaCon 2011. Copyright 2012.
25
26. Examples: Instruction, Illustration, Progress Message
Instruction Illustration Progress Message
Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" LavaCon 2011. Copyright 2012.
26
27. 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, “12 Key Mobile Usability Guidelines to Implement Now" LavaCon 2011. Copyright 2012.
27
28. 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, emulators:
• iOS Interface Builder
• Android SDK
Keynotopia
templates
http://keynotopia.com/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
28
29. Example: Android Template
Mock up
mobile
messages
http://worldinfo18.blogspot.com/2012/02/51-free-mobile-ui-web-ui-wireframe-kits.html
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
29
30. Example: iPhone Template
http://developer.yahoo.com/ypatterns/about/stencils/
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
30
31. 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 2012.S
31
32. 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 2012.
32
33. 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 2012.
33
34. 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 2012.
34
35. 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 2012.
35
37. Mobile Usability 101
• Make it tapworthy – Josh Clark
• If in doubt, leave it out – Jakob Nielsen
• Design for mobile first – Luke Wrobleski
• Responsive web design – Ethan Marcotte
• Beautiful visualization – Noah Iliinske
• 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 2012.
37
38. 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 2012.
38
40. 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 2012.
40
41. 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 2012.
41
42. 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 2012.
42
43. Provide a Mobile-friendly Website
Which would you
rather view on
• Separate mobile site your phone?
• Detect and direct Full Site Mobile Site
• Responsive design
• 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 2012.
43
44. Detect and Direct
Jquery Mobile Framework, Todd Parker, Scott Jehl
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
44
45. Consider Platform Differences
Example: the Back control
iOS: Software
Back control in
top left corner
Android: Physical
Back button at
bottom of device
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
45
46. 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 2012.
46
47. 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 2012.
47
48. 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
(11/2012):
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 2012.
48
49. 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, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
49
50. Provide Effective Mobile Controls
• Location
• Size
• Spacing
• Orientation
• Gestures
• Handedness
• Labels
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
50
51. 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 2012.
51
52. 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 2012.
52
53. Keep an Eye on Mobile Trends
• Augmented reality
• Artificial Intelligence
• Image recognition
• Biometrics
• SoLoMo
Social, Local, Mobile
• Transactions
• HTML5, CSS3
• New interfaces:
NUI, OUI
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
53
54. 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 2012.
54
56. 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)
• Mobile Design Pattern Gallery – Theresa Neil (coming soon)
Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.
56
57. 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
• 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: Mobile Design Pattern Gallery
• eBooks 101: http://www.ebooks101book.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, “12 Key Mobile Usability Guidelines to Implement Now" LavaCon 2011. Copyright 2012.
57
58. 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 2012.
58
59. Follow me:
• Google+: Marta Rauch
• LinkedIn: martarauch
Follow
• Twitter: @martarauch me!
Marta Rauch, Innovations in User Assistance at Oracle, WritersUA 2012. Copyright 2012.
59
Notes de l'éditeur
Shipments of tablets and eReadersup 90% quarter-to-quarter, in Q2, at 13.6 Million.
Mobile app revenue to grow 40.7% from 2010 to $11.8 Billion in 2015, 98 Billion downloads18 billion apps downloaded from the Apple App Store, over a billion per month
It is twice as difficult to read content on a mobile device. Nielsen asserts that this is due to the small screen size. Users cannot see the entire page to scan through text. Attention is diverted by the need to navigate, scroll, remember what was seen, and re-find the original location on the page. These distractions reduce reading comprehension. To work around this, Noah Iliinsky recommends design techniques that help users understand the hierarchy of information on the screen. First identify the critical content, and then visually emphasize it by making it “bigger, bolder, brighter, more detailed, or called out with circles, arrows, or labels.” Likewise, de-emphasize less relevant content “with less intense colors, lighter line weight, or lack of detail.”Another issue is the wide variation in display sizes for mobile devices. To ensure that content displays appropriately, Joe Welinske suggests using variables for the height and width of the display. For example, include a viewport tag in the <head> section of HTML files, and specify viewport metadata such as width, height, initial scale, minimum and maximum scale, and user-scalability. Key requirement for user assistance: Ensure that navigation controls for documentation are usable, and that user assistance displays correctly on mobile screens.
To get feedback early in the development cycle, Joe Welinske recommends testing with simulators. For example, for Android, test with the emulator in the Android SDK (Software Development Kit) available on the Android Developer’s Site (http://developer.android.com/sdk/index.html). For Apple iOS, test designs with the Interface Builder’s Simulator. Josh Clark recommends building rapid prototypes with HTML and CSS, and creating mockups with Keynote, Photoshop, or other tools. For example, Keynotopia (http://keynotopia.com/) provides helpful stencils of controls for iPad, iPhone, and Android. Key requirement for user assistance: Create a prototype, and validate it to confirm usability.
Mobile vendors offer a variety of accessibility solutions. Apple’s Accessibility Programming Guide provides guidelines for VoiceControl, Speech Synthesis, and VoiceOver. The gesture-based VoiceOverscreenreader provides accessible support in 21 languages. Screen magnification and white-on-black (reverse video) provide better contrast for low vision users. Apple also provides accessible touch controls, and Braille displays are supported on iPad, iPhone 4, and iPhone 3GS. Google’s accessible design guidelines are provided on the Android Developer web site. Google recommends testing with an accessibility service such as TalkBack, which comes preinstalled on many Android-powered devices and is available at no charge from the Android Market (https://market.android.com/). Key requirement for user assistance: Build in accessibility features for mobile user assistance, and validate effectiveness by testing with assistive technology.
http://smusale.tripod.com/writing/wireless_primer.pdfMany translators have limited experience with user assistance for mobile devices, so it is important to get agreements with vendors early in the project. Translation issues includeLanguage-specific special charactersText truncation and dialog box resizingLine- and word-wrappingAbbreviated translationsLocalized screenshots of controls and the user interfaceThe need to reduce file size for icons and screenshotsIn “Localizing for Mobile Devices: A Primer,” ShailendraMusale advises that documentation must be small and compact, since file size is multiplied by the number of languages. Get agreement from translation vendors onFile size, which must be small due to limited disk space and memory on mobile devicesFile formats for localizable resourcesFile-naming conventionsError message translationTranslation for installers or setup applicationsThe language for content developmentThe language for gestures Key requirement for user assistance: If the application is translated, ensure that translation vendors address mobile translation issues.
The first step is to determine whether the tasks performed in the application are appropriate for a mobile device. A Nielsen Research survey in July, 2011 found that the most popular mobile applications are, in descending order, games, weather, social networking, maps/navigation/search, music, news, entertainment, video/movies, shopping/retail, dining/restaurant, sport, productivity, communication, food/drink, travel, health, education/learning, and household/personal/car.In addition, Budiu and Nielsen found that the tasks commonly completed on mobile devices:Have a deadlineInvolve rapidly changing informationRequire privacyInvolve finding information about businessesInvolve finding directions or public transportation informationAre performed in an emergencyRequire communication with others Key requirement for user assistance: Determine whether your target audience will use your applications and documentation on mobile devices.
It is twice as difficult to read content on a mobile device. Nielsen asserts that this is due to the small screen size. Users cannot see the entire page to scan through text. Attention is diverted by the need to navigate, scroll, remember what was seen, and re-find the original location on the page. These distractions reduce reading comprehension. To work around this, Noah Iliinsky recommends design techniques that help users understand the hierarchy of information on the screen. First identify the critical content, and then visually emphasize it by making it “bigger, bolder, brighter, more detailed, or called out with circles, arrows, or labels.” Likewise, de-emphasize less relevant content “with less intense colors, lighter line weight, or lack of detail.”Another issue is the wide variation in display sizes for mobile devices. To ensure that content displays appropriately, Joe Welinske suggests using variables for the height and width of the display. For example, include a viewport tag in the <head> section of HTML files, and specify viewport metadata such as width, height, initial scale, minimum and maximum scale, and user-scalability. Key requirement for user assistance: Ensure that navigation controls for documentation are usable, and that user assistance displays correctly on mobile screens.
improves usabilityBest practice: Provide a separate mobile sitedetect a user’s device, and automatically direct mobile devices to the mobile site. Designer Luke Wroblewski takes it one step further, and advocates for a “mobile-first design process to improve user experience on all platforms.”Another best practice is to provide a link from the full site to the mobile site, and from the mobile site back to the full site. Nielsen recommends the link labels “Mobile Site” and “Full Site.” In addition, mobile users are impatient with slow download times, so it is important to reduce the size and number of graphics and screenshots.A final recommendation is to optimize the site for the browsers and browser versions used by target users. As the W3C points out, mobile browsers often differ markedly from desktop browsers. For prototypes, designers can use the Firefox Mobile Emulator or the Safari browser’s developer mode, which enables it to simulate different browsers. For the final web site, test on a wide range of actual mobile devices, browsers, and browser versions.
improves usabilityBest practice: Provide a separate mobile sitedetect a user’s device, and automatically direct mobile devices to the mobile site. Designer Luke Wroblewski takes it one step further, and advocates for a “mobile-first design process to improve user experience on all platforms.”Another best practice is to provide a link from the full site to the mobile site, and from the mobile site back to the full site. Nielsen recommends the link labels “Mobile Site” and “Full Site.” In addition, mobile users are impatient with slow download times, so it is important to reduce the size and number of graphics and screenshots.A final recommendation is to optimize the site for the browsers and browser versions used by target users. As the W3C points out, mobile browsers often differ markedly from desktop browsers. For prototypes, designers can use the Firefox Mobile Emulator or the Safari browser’s developer mode, which enables it to simulate different browsers. For the final web site, test on a wide range of actual mobile devices, browsers, and browser versions.
Determine the Target Mobile DeviceDesign for and leverage the mobile platform:SmartphonesTabletseReaders, KindleTouch devices vs. non-touchOS: Android, iOS, Blackberry, Windows…Browsers, versionsMobile designer Josh Clark notes that smartphones are held in one hand and used while on the go, so users have limited dexterity and a shorter attention span. In contrast, tablets are held with two hands while users are seated. This encourages “a more leisurely and contemplative mindset, with longer sessions and more attention … so applications should reflect that calmer mindset.” The ergonomics of the device are also important. Clark observes that users typically hold smartphones from the bottom, with their thumb positioned at the bottom corner at the base of the phone. In contrast, they hold tablets from the top, usually with two hands, with the thumbs positioned at the top corners. Locate the controls where they are easiest to reach. Key requirement for user assistance: Design user assistance for the devices used by the target audience, including touch devices if applicable.
Mobile controls and input mechanisms present challenges. To improve usability:Place touch controls so that users can easily use their thumb to press the most common controls. Design applications so they can be used in either hand. For tap-intensive applications, such as a scientific calculator, provide an option for a right-handed or left-handed interface.Use appropriate size and spacing for touch control elements, to be sure users can tap them with their fingers. Vendors do not have a unified definition for the tappable area. Apple’s iOS Human Interface Guidelines recommends making targets “fingertip-size,” defined as “44 x 44 points,” the size of the virtual keys on the iPhone calculator. Microsoft defines the tap region as 9.12mm or 38 x 38 pixels. Google recommends a virtual measure called “density-independent pixels (dp),” which enables the region to scale to different screen sizes.For documentation, ensure that the most critical controls are usable, such as those used to acquire, store, and select content, and to read, search, and navigate. The most important input mechanisms are bookmarking, highlighting, and adding and sharing notes. For touch device instructions, use appropriate verbs, such as swipe, flick, tap, and pinch.
Because mobile devices are portable, users carry them throughout the day. This introduces the risk that devices inadvertently turn on and perform tasks accidentally. For example, a smartphone jostled against other items in a handbag can accidentally make a call. To guard against this, implement “awkward controls” for certain key tasks. Because these controls are a little more difficult, they require more attention and minimize inadvertent actions. As designer Josh Clark puts it, “Awkward isn’t always bad…By requiring awkward or challenging gestures at well placed points of your interface, you can protect against miserable mishaps.” Examples of this design technique include the slide-to-unlock control used by Android and Apple, and Apple’s slide controls to answer, power off, and delete. Apple and Android also provide confirmation screens for key actions, such as deleting. For example, to shut down the device, Android requires a long press on a hardware button and then an affirmative response to a confirmation message. Another example of this type of a control is a multi-tap combination, such as Apple’s triple-tap with three fingers to turn the screen curtain on or off. Another technique for preventing errors is an Undo mechanism. To maximize screen space, include Undo buttons only for certain risky actions. For example, Google Gmail displays an Undo control for 5 seconds after users click Send. Key requirement for user assistance: To guard against inadvertent actions on mobile devices, implement “awkward” user interface controls when necessary, and provide an undo mechanism for critical tasks, such as deleting.