Module 3: Creating an effective mobile UX
3.2.5 Usability and form factor
Mobile users will notice and be delighted by the small things you do for them to enhance their experience. This section discusses how to design your entire site to account for mobile’s form factor and unique user needs.
1. Optimize your entire site for mobile
Your site is easiest to use if all your pages are designed for mobile.
Unsurprisingly, participants had a much easier time navigating mobile-optimized sites than trying to navigate desktop sites on mobile devices. Sites that included a mix of desktop and mobile-optimized pages were actually harder for participants to use than all-desktop sites.
2. Don’t make users pinch to zoom
Visitors can miss calls-to-action if they have to zoom in on a site. Design your site so that they never need to.
Participants were frustrated when they needed to zoom in or out, and sometimes missed important messaging and calls-to-action. Design your mobile site so that users won’t ever need to change the size. Some mobile sites even disable pinch-to-zoom on their screens; if your site is designed correctly, users will never notice it’s gone.
3. Make product images expandable
Include high-quality close-ups of key images, like product photos.
Customers want to see what they’re buying. On retail sites, participants expected to be able to view high-resolution close-ups of products to get a better look at details, and got frustrated if they weren’t able to.
4. Tell users which screen orientation works best
Communicate to users if your site works best in a certain orientation, but ensure your important calls-to-action can be completed regardless of orientation.
Study participants tended to stay in the same screen orientation until something prompted them to switch, like trying to read small type or watch a video. Either design for both landscape and portrait, or encourage users to switch to the optimal screen orientation - but make sure your important calls-to-action can be completed even if they ignore the suggestion to switch.
5. Keep your user in a single browser window
Ensure your calls-to-action stay in the same browser window, and add functionality to your site that addresses why consumers might switch windows.
Switching between windows on a smartphone can be troublesome, and raises the risk that visitors might not find their way back to your site. Try to keep users in one place by avoiding calls-to-action that launch new windows. Participants also sometimes opened new windows to search for coupons - consider offering these on your site to avoid users looking elsewhere.
6. Avoid “full site” labeling
Make it easy to switch between site experiences, but use labels like “desktop” instead of “full” to be clear that both sites offer a full experience.
When participants saw an option for “full site” vs “mobile site,” they assumed the mobile site was condensed and chose the full site instead. One participant preferred the desktop site because it had “so much more information,” even though the mobile and desktop sites had the same content. Using a term like “desktop” instead of “full” can help avoid these perceptions.
7. Be clear why you need a user’s location
Always make it clear why you need a user’s location, and how the information will influence his experience.
Users should always understand why you’re asking for their location. Participants trying to book a hotel in another city became confused when a travel site detected their location and offered hotels in their current city instead. Leave location fields blank by default, and let users choose to populate them through a clear call-to-action like “Find Near Me.”