12 Key Mobile Usability Guidelines You Need to Implement Now
Upcoming SlideShare
Loading in...5
×
 

12 Key Mobile Usability Guidelines You Need to Implement Now

on

  • 5,967 views

Mobile devices are the new PC. With sales outpacing desktop systems, consumers increasingly use smartphones and tablets to access products and services. However, mobile usability lags behind desktop ...

Mobile devices are the new PC. With sales outpacing desktop systems, consumers increasingly use smartphones and tablets to access products and services. However, mobile usability lags behind desktop usability, and the user experience is often difficult and disappointing. This presentation delivers guidelines you can use today to improve mobile usability.

Statistics

Views

Total Views
5,967
Views on SlideShare
5,880
Embed Views
87

Actions

Likes
6
Downloads
225
Comments
0

2 Embeds 87

http://etraining.org.nz 85
https://twitter.com 2

Accessibility

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

    12 Key Mobile Usability Guidelines You Need to Implement Now 12 Key Mobile Usability Guidelines You Need to Implement Now Presentation Transcript

    • 12 Key Mobile Usability Guidelines to Implement NowMarta RauchIntelligent Content 2012 @martarauch Marta Rauch +Marta Rauch
    • Key Takeaway: What Well Cover It’s about the content. If you are involved with intelligent content, you can • Mobile is the new PC contribute to mobile usability • 12 key mobile usability guidelines • Mobile resources Detailed information is in my STC Intercom article: Twelve Mobile Usability Guidelines to Implement NowMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 2
    • Mobile is the New PC 3
    • Why Should I Care?Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 4
    • The Megatrend of the 21st Century As big as the shift to radio, TV, or Internet In 2010 and 2011, smartphones sold more than PCs The number of mobile- connected devices will exceed the world’s population in 2012Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 5
    • Mobile is Big Business Over a billion apps per month downloaded from the Apple App Store as of October, 2011 In March 2012, Apple will hit 25 billion downloads Mobile app revenue to grow from $10.2 B in 2010 to $100 Billion in 2015Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 6
    • 12 Key Mobile UsabilityGuidelines 7
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 8
    • Who are your mobile users? What are their mobile tasks? What environment are they in?Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 9
    • What types ofdevices do theyuse?Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 10
    • Do the tasks involve a lot of reading?Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 11
    • Do the tasks involve a lot of data entry?Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 12
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 13
    • 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/2011 https://plus.google.com/u/ 0/104629412415657030658#104629412415657030658/aboutMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 14
    • 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• Target mobile devices• Mobile architecture • Structure • User experience, interface • User assistance • Context-sensitivity • Accessibility• Resources, schedule, budget, tools, process, development, Content Management metadata and tagging, output formats, testing, translation, distribution, feedback, analytics, updates…Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 15
    • 3. Adopt Mobile Style Guidelines Edit, Edit, Edit - Josh Clark, http://globalmoxie.com/Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 16
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 17
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 18
    • Adhere to OS Design Guidelines Example: the Back control iOS: Software Back control Android: Physical Back control at bottom of deviceMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 19
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 20
    • Examples: Welcome, Getting Started Tour Welcome Getting Started TourMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 21
    • Examples: Instruction, Illustration, Progress Message Instruction Illustration Progress MessageMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 22
    • 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" Intelligent Content 2012. Copyright 2012. 23
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 24
    • 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, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 25
    • Responsive Design Jquery Mobile Framework, Todd Parker, Scott JehlMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 26
    • 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 2011. 27
    • 7. Provide Effective Mobile Controls • Usable labels • Intuitive gestures • Embedded hints • Tips as necessary • Orientation • HandednessMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 28
    • 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, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 29
    • 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. 30
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 31
    • Include Some Awkward Controls Prevent accidents with: • Tricky gestures: slide-to-unlock, answer, power off, delete • Confirmation screens Slide to • Undo unlockMarta Rauch, "Seven Key Mobile Usability Guidelines to Implement Now." LavaCon, Copyright 2011. 32
    • 8. Provide What They Need, When They Need It Progressive disclosure: • Main tasks on the first screen • Quick access to key tasksMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 33
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 34
    • Example: Android Template Mock up mobile messages http://worldinfo18.blogspot.com/2011/02/51-free-mobile-ui-web-ui-wireframe-kits.htmlMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 35
    • Example: iPhone Template http://developer.yahoo.com/ypatterns/about/stencils/Marta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 36
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 37
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 38
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 39
    • 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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 40
    • 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. 41
    • Selected Mobile Resources• Twelve Mobile Usability Guidelines to Implement Now, http://intercom.stc.org/2011/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, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 42
    • What We Covered • Mobile is the new PC • 12 key mobile usability guidelines Key Takeaway: It’s about the • Mobile resources content. If you are involved with intelligent content, you can contribute to mobile usabilityMarta Rauch, “12 Key Mobile Usability Guidelines to Implement Now" Intelligent Content 2012. Copyright 2012. 43
    • • Twitter: @martarauch Follow me! • LinkedIn: martarauch • Google+: Marta RauchMarta Rauch, "Providing Effective User Assistance for Mobile Devices",” IEEE PCS IPCC. Copyright 2011. 44