User Experience for Mobile Applications and Websites

5th edition

Mobile & Tablet
• Topics:
Mobile & Tablet
• Mobile & Tablet

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 19 in-person and 2 remote moderated 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 713-page report offers 374 design guidelines based on our usability research. Discussions and more than 1000 screenshot illustrations supplement our findings.

Topics

• Activities commonly performed on mobile phones and types of content that mobile users expect
• Mobile limitations and strengths
• Relative advantages and disadvantages of mobile websites and web apps vs. mobile native apps
• Transitions to and from mobile channels
  • Access to your mobile site
  • Transitioning from web to app
  • Transitioning to full (desktop) site
• Logo and company name
• Making apps findable and discoverable
  • Advertising mobile apps on websites
  • Icons, names, and descriptions of mobile apps
  • Dealing with multiple apps from the same company
  • Advertising your app on the web
• Creating multiple apps with different functionalities vs. a single app that includes all functionalities
• Touch targets
  • Size and placement
  • Tappability signifiers
  • Accidental touches and undo
  • Icons and icon labels
  • Buttons and button placement
• Input
  • Typing and input fields
  • Using phone features for input fields
  • Sliders
  • Pickers and date pickers
  • Selectors
• Overlays
• Accordions
• Menus
  • Types of menus: dropdowns, pie menus, marking menus
  • Menu guidelines
• Carousels and carousel signifiers
• Errors and alerts
• Permission requests
• Progress indicators
• Orientation
• Gestures
  • Horizontal swipe: swipe to turn page, swipe to navigate back, swipe to delete or access contextual actions, swipe to open menu
  • Long press on iOS and Android
  • Gesture ambiguity
  • Tapping and content
• Forms
  • Workflow and form steps
  • Submit buttons
  • Login and registration forms: flows, passwords, passwordless accounts
• Navigation
  • Common mobile navigation patterns: tabs, navigation bar, hamburger and other navigation menus, navigation hubs
  • Making navigation accessible
  • Navigation vs. IA on mobile
  • Breadcrumbs
  • Hidden navigation: hamburger and other navigation menus
  • Subnavigation: submenus, section menus, sequential menus, category landing pages
  • How to deal with deep hierarchies on mobile
  • The Back button
  • Overflow navigation: More and action overflow
• Search, filter, sort
  • Search-feature design
  • 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
  • Locator forms
  • Displaying location information
• Instructions and help:
  • Tips
  • Instructional overlays
  • Onboarding tutorials and walkthroughs
  • User manuals and help pages
• Initial experience (onboarding)

Benefits

• Checklist of 374 specific design recommendations:
  • Review your mobile user experience for these 374 items to discover what needs 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
• 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 1000 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 Fifth Edition?

This fifth edition of the mobile report is an improved and updated version of the fourth 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 fourth edition. They include:

• Progressive web apps
• Transitions from web to app or between apps
• Date pickers
• Permission requests
• On-screen Back button differences between Android and iOS
• Skeleton screens
• Long press
• Passwordless accounts and passkeys
• OTPs and minimal login/registration flows
• Navigation UIs: breadcrumbs, sequential navigation, links to category-landing pages,
• Infinite lists

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 several research methods:

• One-on-one in-person usability testing
• Remote moderated usability testing
• Remote unmoderated usability testing
• Diary-based longitudinal study, for which people recorded their experiences with their mobile devices
• 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.