User Experience for Mobile Applications and Websites

Summary

This report presents user-experience guidelines for designing applications and websites for mobile devices, as well as the findings from our user research with these devices. It is based on 17 in-person and 10 remote usability studies with users in 8 countries (mostly in the USA, but also in Australia, Canada, China, Hong Kong, India, The Netherlands, Romania, and the UK). It presents a set of design recommendations intended to help designers create a good mobile user experience.

This 561-page report offers 383 design guidelines based on our usability research. Discussions and more than 700 screenshot illustrations supplement our findings.

Topics

• Activities commonly performed on mobile phones and types of content that mobile users expect
• Mobile limitations and strengths
• App functionality: Which types of tasks make sense in a mobile app
• Relative advantages and disadvantages of mobile websites vs. mobile apps (hybrid or native)
• Benefits and drawbacks of responsive or adaptive web design vs. mobile-dedicated sites
• Accessing mobile sites and making them findable
• Making apps findable and discoverable
  • Advertising mobile apps on websites
  • Icons, names, and descriptions of mobile apps
  • App discoverability: Making your app findable in an app store
  • Dealing with multiple apps from the same company
  • Advertising your app on the web
• Differences between mobile platforms for apps
  • Physical buttons on different platforms
  • Transitioning from a desktop app to a phone app
  • Hybrid apps
• Logo and company name
• Touch targets
  • Size and placement
  • Tappability signifiers
  • Accidental touches and undo
  • Skeuomorphism and flat design
• Icons and icon labels
• Typing and input fields
  • Field labels
  • Defaults
  • Using phone features for input fields
• Sliders
• Pickers and spin wheels
• Selectors
• Dropdowns, accordions, overlays, sliding menus, separate-page menus
• Carousels and carousel signifiers
• Buttons and button placement
• Errors and alerts
• Notifications
• Progress indicators
• Orientation
• Gestures
  • Horizontal swipe: swipe-to-delete, swipe-to-turn-page
  • Vertical swipe
  • 3D Touch on iOS
  • Gesture ambiguity
  • Tapping and content
• Forms
  • Workflow and form steps
  • Submit buttons
  • Login and registration forms
• Navigation
  • Common mobile navigation patterns: tabs, navigation bar, hamburger and other navigation menus, navigation hubs
  • Making navigation accessible
  • Navigation vs. IA
  • Subnavigation: submenus, section menus, sequential menus, category landing pages
  • How to deal with deep hierarchies on mobile
  • The Back button
  • App switching and the Back-to-app button
  • Overflow navigation: More and action overflow
• Search, filter, sort
  • Scoped search
  • Search results
  • Filter design
• List, grids, cards, decks of cards
• List ordering
• View all, pagination, infinite lists
• Content
  • Text content: readability and scannability
  • Headlines and summaries
  • Related content
  • Images and videos
  • Dealing with long pages: Mini-IA and in-page tables of contents
• Location information, maps, locator forms
• Instructions and help: instructional overlays, coach marks, contextual tips
• Initial experience (onboarding)

Benefits

• Checklist of 383 specific design recommendations:
  • Review your mobile user experience for these 383 items, and you will discover many things that need improvement
  • Score your design against a checklist of usability guidelines to make sure you don't do anything wrong
• Description of how users behave when using a variety of mobile sites and apps, including extensive quotes: Learn from the users' comments and reactions to common design mistakes in the sites we tested
• $400,000 worth of research at 0.07% of the cost
• The differentiating factors that caused site visitors and app users to  complete tasks
• successfully or unsuccessfully
• More than 700 color screenshots from a very wide variety of mobile sites and apps, with descriptions of why they worked well or caused problems in usability testing
• Methodology description helping you define the protocol for running your own mobile usability studies

What’s New in the Fourth Edition?

This fourth edition of the mobile report is an improved and updated version of the third edition. Many of the existing guidelines were revisited and refreshed with new examples. The additions in this edition reflect the new mobile topics and patterns that emerged or were revived since the third edition. Specifically, we’ve added guidelines related to:

• Hand-off and continuing a session on a different device
• Deep linking within applications and transfer of control from one app to another
• New or increased-popularity gestures such as 3D Touch, swipe-to-delete, and two-finger scroll
• Floating buttons used for filters or back-to-top
• Navigation and subnavigation patterns, including sequential menus and split-button menus, as well as navigation super hubs
• Patterns for displaying lists of items — cards and grids

USA Today article about the first edition

Who Should Read This Report?

• Those responsible for a company's or organization's mobile strategy
• Mobile designers and UX researchers

Research Method

The information in this report is based on usability research with mobile users 20-50+ years old. We used 4 different research methods:

• One-on-one in-person usability testing
• Remote unmoderated usability testing
• Diary-based longitudinal study, for which people recorded their experiences with their mobile devices for approximately one week
• Design reviews
• Mobile eyetracking

Representative users tested a variety of websites and apps on a range of mobile devices, including touch phones and smartphones from many vendors. The studies took place in the United States, Australia, Canada, China, Hong Kong, India, the United Kingdom, the Netherlands, and Romania.