According to Pew Research, 81% of Americans now own a smartphone, up from only 35% since 2011. And roughly 20% are “smartphone-only” web users. And a study published by the NCBI reported that 74% of study respondents agreed that they “feel dependent on the use of a smartphone”.
Many companies, more-so B2C, are seeing well over half their traffic originate from mobile devices. Mobile visitors use their phones in distinct and different ways, many times with different intent than desktop, which requires marketers to approach their mobile sites as not merely a shrunk-down version of their desktop site.
Below are the 26 best practices you should be following for your mobile site to create the best visit experience for mobile users.
1. Unpredictable and inconsistent lighting – users may be indoors or outside, with the likelihood that lighting may change during a session. Ensure you’re using easily readable font styles and sizes along with sufficient contrast between text and the background.
2. Users may be moving around, walking or in vehicles. Similar to our previous recommendation, this also supports the use of easily readable font styles, strong contrast and large tap targets (more on this below).
3. Users are more likely to be Interrupted during their visit and expect to easily pick up where they left off. These interruptions can be both quick, relatively short duration interruptions as visitors look up or away from their devices while in use, to longer-duration interruptions including calls, texts and other notifications. To help re-orient users to where they were on your site regardless of the length of interruption, use breadcrumbs, prominent page titles, and bite sized chunks of content (i.e., refrain from long paragraphs).
4. On mobile, the less precise thumb replaces the more accurate pointing and clicking characteristics of a mouse on a desktop. Make it easier for mobile users to click on their desired action by using large tap targets and creating sufficient separation between all clickable objects.
- Size – strive for mostly full width targets (min 48 dp) and 25-36 dp high (160 dpi). You can use this formula to convert to pixels => px= dp* (dpi/160)
- Spacing – when too close, click accuracy suffers leading to accidental wrong clicks; when too far, it may require excessive scrolling and more of the user’s time. Aim for at least 12 dp (at 160 dpi), but not more than 36 dp.
- Consider the age demographics of your target population, recognizing that older audiences need larger targets and spacing.
5. Since mobile users tend to not close their browser tabs, it’s possible that if a user on an order confirmation page re-launches a session, the analytics may report this as an additional conversion.
6. Pop-ups present a difficult and disorienting experience on mobile. Consider instead an expandable presentation.
7. Depending on your business, visitor intent on mobile may be significantly different than desktop. For example, Wells Fargo gives more visual prominence to personal services on their mobile site, versus their desktop presentation. Review your visitor behavior for both desktop and mobile segments in your analytics and be sure to align CTAs accordingly. For local based companies, location and hours info may be more important to mobile versus desktop visitors.
8. Use the ability of the device’s GPS to provide a location-relevant experience if it applies to your business
9. Long drop-down menus are difficult to use on mobile devices as users might accidentally unintentionally click on a selection as they’re trying to scroll. Test input fields instead (for example, the state field).
10. When the user may select 1 of only a few options, avoid drop-down menus. Placing the selections in a dropdown requires two taps and suffers from lack of discoverability as it hides the selections.
11. Completing forms with a mobile device is inherently difficult. If you’re appropriately staffed, and your metrics indicate that conversion is not adversely impacted, encourage calls or chat over form fills by giving visual prominence to chat and call icons.
12. Further simplify form fills by:
- Providing an alternative action for your visitors by ensuring a Contact Us link and Phone # are always visible and in the same visually proximity
- Minimize the number of required fields, and consider removing optional fields
- Place field labels preferably directly above or for very long forms alternatively in the field (although there are drawbacks to labels in fields as the context of the field disappears and users may become confused if interrupted).
- Be sure the default entry mode is being used for that field type
- Remember that the user may have been interrupted. As such you can prevent the need to re-enter data by using cookies for any previous entries. Note that cookies on mobile devices may be reset when the browser is closed or the device is turned off.
13. Recognize that reducing the need to physically interact with the device can ease the visit experience. Consider hands-free usage like voice entry and camera usage (for credit card input) where appropriate.
14. Remember that users may start their experience on one device, only to complete it on another. Strive to create a more connected user experience across devices and usage scenarios by giving users the option to email, or social share pages along with making it easy to save-to-cart or wishlists.
15. Since entries from a keypad are difficult and prone to mistyping, use auto-correct, auto-capitalize and auto-fill where appropriate.
16. Be cognizant of the lower bandwidth with mobile devices and the slower loading times by ensuring images and video are optimized and displayed only when they truly add value.
17. Reduce the need for excessive scrolling on longer vertical pages by using accordions for longer text content.
18. Check all images for recognizability and readability of text as many times on responsive sites, unless the images have been re-worked, they may not be helpful to the user.
19. Check for appropriate text wrap on wrapping headlines. Sometimes headlines can take on a slightly different meaning depending upon the line break.
20. Ensure spacing of section headings and the associated content works. On mobile, sometimes headings may end up be spaced closer to content above.
21. Since some interaction elements, such as accordions, menu overlays and anchor links may be disorienting when their change happens quickly, it may be an aid in visitor comprehension when those changes are accompanied by an animated visual clue. This will help in instances where visitors might inadvertently think they were taken to a new page and then subsequently hit the back button to return to the default display only to be frustrated and confused when they’re actually returned to a previously visited page.
22. Use one of the many commercially-available tools to test the mobile experience on all device and browser combinations.
23. Make it easy to get back to the homepage with a large logo as your home button
24. Make sure promotions do not push important content or CTAs below the fold or interfere with navigation.
25. Make site search visible near the top of the page. If space permits, you can reduce the need for an additional click by showing an open text search field.
26. Although mobile users typically have the option to pinch to zoom, that option increases physical interaction cost and slows the visit experience. A better mobile experience occurs when the site is designed with adequately sized elements that don’t require pinch to zoom. For product shots where visitors may want to see a zoomed in image, offer a tap to zoom that displays the zoomed image in a pop-over which requires less physical effort than pinching. This is one of the few instances when a pop-over on mobile is considered acceptable.