Mobile Usability Guidelines to Implement Now

5,046 views
4,912 views

Published on

Mobile usability guidelines presented at STC Summit 2012 in Chicago, Illinois.

Published in: Technology, Education

Mobile Usability Guidelines to Implement Now

  1. 1. 12 Key Mobile Usability Guidelinesto Implement NowMarta RauchSTC Summit 2012 @martarauch Marta Rauch +Marta Rauch
  2. 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. 3. What Well 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. 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. 5. Mobile is the New PCMarta Rauch, @martarauch “2 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 5
  6. 6. Why Should I Care?Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 6
  7. 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 2012Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 7
  8. 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 2015Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 8
  9. 9. 12 Key Mobile Usability GuidelinesMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 9
  10. 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 contextMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 10
  11. 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. 12. What types ofdevices do theyuse?Marta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 12
  13. 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. 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. 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. 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/aboutMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 16
  17. 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. 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. 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. 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.pdfMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 20
  21. 21. Adhere to OS Design Guidelines Example: the Back control iOS: Software Back control Android: Physical Back control at bottom of deviceMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 21
  22. 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 textMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 22
  23. 23. Examples: Welcome, Getting Started Tour Welcome Getting Started TourMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 23
  24. 24. Examples: Overlay Tour, Link to Online Help Overlay Tour Link to Online HelpMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 24
  25. 25. Examples: Instruction, Illustration, Progress Message Instruction Illustration Progress MessageMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 25
  26. 26. Examples: Embedded, Tip, Overlay, Discoverable Embedded Tip Overlay DiscoverableFrom 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. 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 contentMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 27
  28. 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 customersMarta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 28
  29. 29. Responsive Design Looks great on any mobile device Jquery Mobile Framework, Todd Parker, Scott JehlMarta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 29
  30. 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. 31. 7. Provide Effective Mobile Controls • Usable labels • Intuitive gestures • Embedded hints • Tips as necessary • Orientation • HandednessMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 31
  32. 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 scalingMarta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 32
  33. 33. Tablets and Consider Ergonomics eReaders held with two hands while seated Smartphones typically held in one hand while standingMarta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 33
  34. 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 commandsMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 34
  35. 35. Include Some Awkward Controls Prevent accidents with: • Tricky gestures - slide-to-unlock, answer, power off, delete • Confirmation screens • Undo Slide to unlockMarta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 35
  36. 36. 8. Provide What They Need, When They Need It Progressive disclosure: • Main tasks on the first screen • Quick access to key tasksMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 36
  37. 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. 38. Example: Android Template Mock up mobile messages http://worldinfo18.blogspot.com/2012/02/51-free-mobile-ui-web-ui-wireframe-kits.htmlMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 38
  39. 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. 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-voiceMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 40
  41. 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. 42. 12. Work with Mobile TranslatorsGet 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 PrimerMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 42
  43. 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 translatorsMarta Rauch, @martarauch “12 Key Mobile Usability Guidelines to Implement Now” STC Summit 2012 Copyright 2012. 43
  44. 44. Keep an Eye on Mobile Trends • Augmented reality (AR) • Artificial Intelligence (AI) • Image recognition • Biometrics • Sharing, location • Transactions • HTML5 • New interfaces: NUI, OUIMarta Rauch, "12 Key Mobile Usability Guidelines to Implement Now" STC Summit 2012 Copyright 2012. 44
  45. 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. 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. 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. 48. • Twitter: @martarauch Follow me! • LinkedIn: martarauch • Google+: Marta RauchMarta Rauch, "Providing Effective User Assistance for Mobile Devices” STC Summit 2012 Copyright 2012. 48

×