• Save
Rauch Lava Con Mobile Usability 2011
Upcoming SlideShare
Loading in...5
×
 

Rauch Lava Con Mobile Usability 2011

on

  • 683 views

7 Key Mobile Usability Guidelines to Implement Now

7 Key Mobile Usability Guidelines to Implement Now

Statistics

Views

Total Views
683
Views on SlideShare
683
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rauch Lava Con Mobile Usability 2011 Rauch Lava Con Mobile Usability 2011 Presentation Transcript

  • 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 2011. 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 2011. 3
  • Mobile is the New PC 4
  • Why Should I Care?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 5
  • 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 2011. 6
  • eReaders are the New Books • Amazon sells more eBooks than printed books • New York Times Best Seller list updated for eBooks • Kindle leads, with 51% market shareMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 7
  • Mobile is Big Business Over a billion apps per month downloaded from the Apple App Store as of October, 2011 In 2011, 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 2011. 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 2011. 10
  • Who are your target mobile users?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 11
  • What tasks do your mobile users need to complete?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 12
  • Where are they when they complete the tasks?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 13
  • How long does it take to perform the task?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 14
  • Do the tasks involve a lot of reading?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 15
  • Do the tasks involve a lot of data entry?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 16
  • What types ofdevices do theyuse?Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 17
  • 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 2011. 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 2011. 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 2011. 20
  • 3. Adopt Mobile Style Guidelines Edit, Edit, EditMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 21
  • 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 2011. 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 2011. 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 2011. 24
  • Examples: Welcome, Tour, ProgressMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 25
  • Examples: Advice, Explanation, ConfirmationMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 26
  • 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: • iOS Interface Builder • Android SDK Keynotopia templates http://keynotopia.com/Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 27
  • Example: Android Template Mock up mobile messages http://worldinfo18.blogspot.com/2011/02/51-free-mobile-ui-web-ui-wireframe-kits.htmlMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 28
  • Example: iPhone Template http://developer.yahoo.com/ypatterns/about/stencils/Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 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 2011.S 30
  • 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 2011. 31
  • 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 2011. 32
  • eBook Reading Apps from Amazon http://www.amazon.com/gp/feature.html/ref=kcp_ipad_mkt_lnd?docId=1000493771Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 33
  • eBook Reading Apps for iOS, Android Apple App Store Android MarketMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 34
  • 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 2011. 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 translatorsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 36
  • Latest Mobile UsabilityGuidelines 37
  • Mobile Usability 101 • Make it tapworthy – Josh Clark • If in doubt, leave it out – Jakob Nielsen • Design for mobile first – Luke Wrobleski • Beautiful visualization – Noah Iliinske • Responsive web design – Ethan Marcotte • 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 2011. 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 2011. 39
  • Best Practices forMobile User Assistance 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 contentMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 41
  • 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 2011. 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 commandsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 43
  • Provide a Mobile Website Which version of the news would you rather view on • Separate mobile site your phone? • Detect and direct • Responsive design Full Site Mobile Site • 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 2011. 44
  • Jquery Mobile Framework, Todd Parker, Scott JehlMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 45
  • Consider Platform Differences Example: the Back control iOS: Software Back button in top left corner Android: Physical Back button at bottom of deviceMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 46
  • 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 2011. 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 screenMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 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 Apples web site:  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 2011. 49
  • Accommodate Different Displays Tip: The viewport 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 2011. 50
  • Provide Effective Mobile Controls • Location • Size • Spacing • Orientation • Gestures • Handedness • LabelsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 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 scalingMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 52
  • 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 2011. 53
  • Keep an Eye on Mobile Trends • Augmented reality • Artificial Intelligence • Image recognition • Biometrics • Sharing, location • Transactions • HTML5 • New interfaces: NUI, OUIMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 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 trendsMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 55
  • Resources forMobile UA 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)Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 57
  • Selected Mobile Resources • 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, stencils, diagrams: http://www.lukew.com/ff/entry.asp?1071 • Rachel Hinman on mobile prototyping: http://rachelhinman.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, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 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 UAMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 59
  • Q U E S T I O N S & A N S W E R SMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 60
  • Contact information: • LinkedIn: martarauch • Twitter: @martarauchMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 61
  • Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 62
  • Marta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 63