• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Usability Guidelines to Implement Now
 

Mobile Usability Guidelines to Implement Now

on

  • 2,495 views

Mobile usability presentation given at the STC Silicon Valley Chapter Meeting in 9/2012 (repeat of STC Summit 2012 presentation with some additional content)

Mobile usability presentation given at the STC Silicon Valley Chapter Meeting in 9/2012 (repeat of STC Summit 2012 presentation with some additional content)

Statistics

Views

Total Views
2,495
Views on SlideShare
2,472
Embed Views
23

Actions

Likes
6
Downloads
0
Comments
0

5 Embeds 23

http://www.linkedin.com 7
http://learni.st 6
http://pinterest.com 4
https://si0.twimg.com 3
https://twitter.com 3

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

    Mobile Usability Guidelines to Implement Now Mobile Usability Guidelines to Implement Now Presentation Transcript

    • Mobile Usability Guidelinesto Implement NowMarta RauchSTC Silicon Valley @martarauch Marta Rauch +Marta Rauch
    • What Well Cover • Mobile is the new PC • Mobile usability guidelines Key Takeaway: • Mobile resources Information developers can play an important role in mobile usability. Get involved!Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Audience Poll: Are you working on a mobile project now? Do you expect to in the near future?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Assignment Listen for the top 3 takeaways to bring back to your workplace.Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Mobile is the New PCMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now " STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Why Should I Care?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 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 2012 Sources: Mary Meeker, Canalys, CiscoMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 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 2015 Sources: TechCrunch, Apple, ForresterMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • It’s TIME for a Mobile Strategy Cover article for TIME’s 8/2012 Wireless Issue: “10 Ways Your Phone is Changing the World” Sources: TIMEMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Guidelines for Mobile UsabilityMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 1. Understand Your Mobile Users Who, What, When, Where, and Why mobile Do a task analysis: • Who are your mobile users? • What mobile tasks do they need to perform, and why? • Where are they when they do these tasks? Build use cases based on scenarios that include the mobile context. Create mobile personas.Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Who are your mobile users? What are their mobile tasks? What environment are they in?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • What types ofdevices do theyuse?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Do the tasks involve a lot of reading?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Do the tasks involve a lot of data entry?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 2. Define Your Mobile Content Strategy Your plan for delivering what your mobile users want and need. • Understand your mobile product Example: an app or a mobile-friendly web site? • Align with competitors’ mobile offerings • Plan output for target devices • Match content to users’ mobile tasks and environment • Base strategy on your mobile use cases, scenarios, personasMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Challenge: Reach Customers Anywhere, Anytime, on Any Device • Do a content analysis • Develop a unified content strategy Resources: Ann Rockley, Scott Abel, Kristina Halvorson Tips: • Separate content from format • Plan CMS metadata and tagging • Set up output for target devices • Consider using conditional content, CSS, media queries • Adjust workflow, tailor CMSMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Example: Adaptive Content Separate layers for information, presentation Techniques such as media queries deliver appropriate layout Biggest challenge: tables and graphics Content adapts to multiple layouts, resolutions, devices Resources: Zoe Mickley Gillenwater , Karen McGrane http://mediaqueri.es/Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 3. Adopt Mobile Style Guidelines Edit, Edit, Edit Source: Josh Clark, http://globalmoxie.com/Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Tips for Ruthless Editing Ask: • What is the primary purpose of this screen? • Will users know how to interact with it within 3 seconds? • Is the information too dense? What can be removed? Source: Rachel Hinman, http://rachelhinman.com/Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Sample Mobile Writing Guidelines Android Design, Writing Style: • Be friendly. • Talk directly to the reader. • Make the user feel safe, happy, and energized. iOS Human Interface Guidelines: • Use terminology that users understand.Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 4. Define Touch Gestures, Terminology • Touch A mobile must-read 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 “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Example: NOOK Tablet Gestures NOOK Quick Start GuideMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Adhere to OS Design Guidelines Example: the Back control on Android and iOS iOS: Software Back control Android: Physical Back control at Android bottom of device iOSMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 5. Provide Effective User Assistance Includes user interface strings. Examples: • Tabs, lists, icons, buttons • Confirmations, progress messages • Errors, cautions • Alternative text May also include: • Instructions • Link to FAQ or help • Tips, overlays • Getting started, tourMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Examples: Welcome, Getting Started Tour Welcome Getting Started TourMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Examples: Overlay Tour, Link to Online Help Overlay Tour Link to Online HelpMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Examples: Instruction, Illustration, Progress Message Instruction Illustration Progress MessageMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Examples: Embedded, Tip, Overlay, Discoverable Embedded Tip Overlay Discoverable From Theresa Neil’s Mobile Design Patterns and Mobile Design Pattern GalleryMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 6. Use Progressive Disclosure Provide what they need, when they need it: • Main tasks on the first screen • Quick access to key tasksMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 7. 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 content Design resource: Noah Iliinsky, Beautiful VisualizationMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Make Your Website Mobile-friendly Responsive design Which page would you Media queries, fluid layout, adaptive images rather read? or Full Site Mobile Site Separate mobile site Links: Mobile Site, Full Site Multi-device user experience Fast download Optimized for browsers used by target customersMarta Rauch, "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Example: Responsive Design Content looks great on any device Sources: Jquery Mobile Framework, Todd Parker, Scott Jehl Responsive Web Design, Ethan MarcotteMarta Rauch, "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Accommodate Different Displays Tip: The HTML viewport meta tag resizes content to fit the screen. Example: <meta name = "viewport" content = "width = device-width"> Resources: Joe Welinske’s Developing User Assistance for Mobile Apps, iOS Configuring the ViewportMarta Rauch, "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 8. Provide Effective Mobile Controls • Usable labels Example: tip for an unusual • Embedded hints gesture • Orientation • Effective on multiple devices • Handedness • Tips only if necessary such as for unusual gestures http://developer.android.com/design/patterns/help.htmlMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 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, @martarauch "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Tablets and Consider Ergonomics eReaders held with two hands while seated Smartphones typically held in one hand while standingMarta Rauch, @martarauch "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Minimize the Need to Type • Leverage mobile Spin dial to select platform tools numbers • Use auto-complete and suggestions • Allow for typos, abbreviations • Include defaults • Compute field values • Ensure textboxes fit the screen Use voice commandsMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Include Some Awkward Controls Prevent accidents with: • Tricky gestures – slide-to-unlock, answer, power off, delete • Confirmation screens • Undo Slide to unlockMarta Rauch, @martarauch "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 9. Use Prototypes to Validate Mobile UX • Use templates to create mobile mockups for early feedback • Build rapid prototypes with sketches, PPT, HTML • Use simulators, emulators: • iOS Interface Builder • Android SDK Resource: Joe Welinske Keynotopia templates http://keynotopia.com/Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Example: Android Template Mock up mobile messages http://worldinfo18.blogspot.com/2012/02/51-free-mobile-ui-web-ui-wireframe-kits.htmlMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Example: iPhone Template http://developer.yahoo.com/ypatterns/about/stencils/Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 10. Build In Mobile Accessibility Apple: Siri, VoiceControl, Speech Synthesis, VoiceOver Provide labels, hints, Google: TalkBack accessibility service, alternative third-party apps such as Sonalight text texting-by-voiceMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 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 “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • 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 “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Summary: Guidelines Mobile Usability 1. Know your mobile users, understand their mobile tasks 2. Define the mobile content strategy 3. Mobile style guidelines 4. Touch terminology 5. Effective UI, user assistance 6. Progressive disclosure 7. Small screen usability 8. Intuitive controls 9. Prototypes 10. Accessibility 11. Test on devices, in environment 12. Mobile translatorsMarta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Selected Mobile Resources • Marta Rauch, Twelve Key Mobile Usability Guidelines You Need to Implement Now • Joe Welinske, Developing User Assistance for Mobile Apps: http://www.writersua.com/mobile/book.htm • Josh Clark, Tapworthy: Designing Great iPhone Apps: http://shop.oreilly.com/product/0636920001133.do • Luke Wroblewski, Mobile First: http://www.abookapart.com/products/mobile-first, Data Monday • Ann Rockley, Managing Enterprise Content: A Unified Content Strategy and eBooks 101: http://www.ebooks101book.com/ • Karen McGrane, Content Strategy for Mobile (coming soon from A Book Apart) • Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071 • Theresa Neil, Design patterns: http://www.uxbooth.com/blog/mobile-design-patterns/ Mobile Design Pattern Gallery • Jakob Nielsen, Alertbox: http://www.useit.com/alertbox/mobile-writing.html • Noah Iliinske, Beautiful Visualization: http://shop.oreilly.com/product/0636920000617.do • Ethan Marcotte, Responsive Web Design: http://www.abookapart.com/products/responsive-web-design • Stencils for iPhone, iPad, Android, Windows Phone 7: http://www.uistencils.com/ • Mobile prototyping, http://rachelhinman.com/ Rachel Hinman, The Mobile Frontier • 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 “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Keep an Eye on Mobile Trends• Augmented reality (AR)• Artificial Intelligence (AI)• Sharing location via mobile (SoLoMo)• Mobile payments• HTML5, CSS3• Biometrics• New types of devices• Multi-device UX• New interfaces: NUI, OUIMarta Rauch, @martarauch "Mobile Usability Guidelines to Implement Now" STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • Top Takeaways Share one of the top takeaways you plan to bring back to your workplace.Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • What We Covered • Mobile is the new PC Key Takeaway: • Guidelines for Information mobile usability developers can play an important • Resources role in mobile usability. Get involved! Any questions?Marta Rauch, @martarauch “Mobile Usability Guidelines to Implement Now” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.
    • • Twitter: @martarauch • LinkedIn: Marta Rauch Connect • Google+: +Marta Rauch with me! • SlideShare: Marta Rauch Join me at my upcoming presentations: • LavaCon 2012 • STC webinar in October, 2012 • TC Camp, 2013 • Human-Computer Interaction International (HCII) 2013 • Intelligent Content 2013 mobile workshopMarta Rauch, "Providing Effective User Assistance for Mobile Devices” STC Silicon Valley Chapter Meeting, 9/2012 Copyright 2012.