7 Key Mobile Usability Guidelines to Implement Now, LavaCon 2011, Marta Rauch

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

Todays 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

Mobile is the New PC 4

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 yearsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 6

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 shareMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 7

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 2015Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 8

7 Key Requirements forMobile User Assistance 9

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 contextMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 10

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 formatsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 18

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

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

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

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.pdfMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 23

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 textMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 24

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, “12 Key Mobile Usability Guidelines to Implement Now" LavaCon 2011. Copyright 2012. 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, 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

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

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-voiceMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012.S 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 2012. 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 helpMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 33

7. Work with Mobile TranslatorsGet 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 PrimerMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 34

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 translatorsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 35

Latest Mobile UsabilityGuidelines 36

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 SpoolMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 37

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

Best Practices forMobile User Assistance 39

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 contentMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 40

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

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 commandsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 42

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 customersMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 43

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

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

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 screenMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 47

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 Apples 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 iPadMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 48

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

Provide Effective Mobile Controls • Location • Size • Spacing • Orientation • Gestures • Handedness • LabelsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 50

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 scalingMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 51

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

Keep an Eye on Mobile Trends • Augmented reality • Artificial Intelligence • Image recognition • Biometrics • SoLoMo Social, Local, Mobile • Transactions • HTML5, CSS3 • New interfaces: NUI, OUIMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 53

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 trendsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 54

Resources forMobile UA 55

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

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

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 UAMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2012. 58