7 Key Mobile Usability Guidelines to Implement Now, LavaCon 2011, Marta Rauch
•
24 likes•6,542 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 7 Key Mobile Usability Guidelines to Implement Now, LavaCon 2011, Marta Rauch
Similar to 7 Key Mobile Usability Guidelines to Implement Now, LavaCon 2011, Marta Rauch (20)
More from Marta Rauch
More from Marta Rauch (15)
Recently uploaded
Recently uploaded (20)
7 Key Mobile Usability Guidelines to Implement Now, LavaCon 2011, Marta Rauch
- 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
- 4. Mobile is the New PC 4
- 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
- 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 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
- 39. Best Practices for Mobile User Assistance 39
- 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
- 55. Resources for Mobile UA 55
- 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
Editor's Notes
- 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.