Your Mobile Users are All Thumbs: Tips for Designing for the Small Screen
As mobile adoption rates continue to increase, it is imperative to ensure mobile interactions are easy and user-friendly in order to create positive consumer experiences within this evolving and critical channel for your company. It’s no secret that mobile users are thumb-heavy when it comes to the tiny touch screens. There are even websites dedicated to typing and autocorrect mishaps. So, why play into mobile weaknesses when you can build an easy to use mobile optimized site that will make users happy and, in the long run, play into the strengths of your company? While many mobile site conventions are still emerging, there are definitely some already established effective practices you should consider as you develop your mobile site. Here are a few important design essentials to keep in mind:
Content First, Functionality Later
As Luke Wroblewski points out in Mobile First, the first smartphones supported a resolution of roughly 320×480—80% less than the minimal standard desktop resolution of 1024×768. Regardless of the advances manufacturers continue to make in increasing screen resolution, you must keep in mind that you and the mobile user are restricted to a screen size that is still necessarily small and handheld. What works well on a standard webpage—the conventionally large and prominent global navigation at the top of the page—does not translate well to the mobile experience. Much of the time, large and persistent navigation overwhelm the small screen, making it more difficult for visitors to find and read content. Therefore, simplifying or reducing navigation options is a key consideration when designing a mobile site. YouTube is a great example of optimizing valuable screen real estate on content. Instead of devoting a lot of space to navigation, it prioritizes content, giving access to app-like navigation using a button next to the search link:
Likewise, the New York Times gives priority to local weather, stock ticker, search, and top stories, offering a clear path to navigation through a small, but prominent “View Sections” link that conserves premium above-the-fold space:
Highlight Key Tasks and Goals
Early conventional mobile wisdom advised minimizing the content and functionality of mobile sites, granting a smaller, more limited experience for the smaller, more limited screen. According to a Pew Research Center report, the number of people using mobile devices as their main browsing device continues to grow, and according to aMobile Marketer article, some experts predict mobile usage will outpace desktop usage by 2015 or sooner. Thus, the case is clear that providing a smaller or overly simplified experience for mobile users is no longer acceptable. However, this doesn’t mean you should simply squeeze your entire site into a smaller screen size. Take time to think about the key tasks and goals mobile users will have when they come to your site. In financial services, customers need to check account balances or make transfers. On retail sites, checking price and availability and store locator functions are critical. Do your research to find what tasks your users find valuable on a mobile device and make sure to surface these key tasks prominently on your mobile site. A great way to start is to add custom questions to your ForeSee web or mobile survey to better measure customer expectations and to help improve their experience. Lowe’s mobile site offers prominent links to key tasks such as browse products, find a store, or look up past purchases:
And – in a wonderfully usable departure from the quandary of most university homepages, the University of Michigan’s mobile site offers Maps & Directions and Bus Routes as the most prominent options—fitting given the main goals many mobile users are likely to have:
Size and Padding
So-called “fat finger” errors—the mistake of accidentally clicking the wrong link or button because it was too close to another link—are the bane of most mobile users’ experiences. Because touch screens are unavoidably less precise than clicking around a desktop with a cursor, it’s important to keep interface element size and padding in mind when designing for the mobile screen. Ideally, the minimum clickable target area for any links or page elements should be at least 1cmx1cm, with ample padding between elements (Apple Human Interface Guidelines). Padding makes “fat finger” misclicks less common and has the added bonus of enhancing readability of small text on small mobile screens.
No fat fingers here! Crate and Barrel does an excellent job of ensuring page elements, including navigation options and product categories, are well-sized with ample padding. Even the relatively subdued breadcrumb trails have plenty of space around them to prevent misclicks:
Just about every interaction on a mobile device is more tedious when compared to a desktop computer—smaller text, smaller touch-screen keyboards, not to mention cringe-worthy OS autocorrect mistakes. Make interactions easier by taking advantage of input shortcuts like search auto complete and location detection for directions or store locators. The less mobile users have to input, the better. As IMDb demonstrates, autocompleting search input makes the process much quicker and considerably less painful. Search autocomplete is contextually tailored to your site content, making it much more accurate and helpful than the autocorrect functionality, included on most devices these days:
Sears’ store locator functionality taps into the device’s geolocation capabilities so customers don’t even have to input their ZIP code to find their local Sears. (Note the request – you should never try to automatically determine a user’s location without their permission.)
Native Gesture Support
Just as it’s good practice on the regular Web to match visitors’ past experiences by following basic website conventions—placing the logo and global navigation at the top of the page, search box in the top right, etc.—so too can you make the mobile site experience more intuitive by following mobile-specific conventions. Supporting (or mimicking support of) native gestures and other conventions makes the mobile site experience more seamless to visitors who are used to using these kinds of gestures when using their mobile devices. Though mobile sites—as opposed to apps—have limited capability to fully use device OS features, clever sites are already developing ways to imitate these natural gestures, providing the same kind of intuitive interaction that mobile visitors want and expect. L.L. Bean’s product pages imitate mobile users’ natural inclination to use pinch/expand gestures to manipulate the product image:
Interacting with a mobile site is incredibly different from interacting with a standard desktop site—visitor’s key tasks and goals will change, necessitating changes to your page layout, information architecture, and input features. Despite an overall move towards a simple, streamlined mobile experience, visitors still demand a lot of content and functionality out of mobile sites. Keeping your users (and their thumbs) in mind as you design for the small screen will help make sure their experience is as seamless and intuitive as possible.