How to Make Your Mobile Site User-Friendly-2019
Google and AnswerLab conducted a research study examining how a range of users interacted with a diverse group of mobile sites. The study uncovered 25 mobile site design principles for making mobile sites good, effective, and enjoyable for users. Here they are organized in five key areas:
- Easy navigation
- Easy search
- Easy conversions
- Easy forms
- Easy on mobile
A desktop homepage can be a welcome page, messaging center, and promotional space all in one. But mobile home pages are best when they specialize in bringing users the specific things they came for.
1) Keep calls-to-action front and center
- It’s easy to miss things on small screens, so always put your key calls-to-action where they won’t be missed.
- Studies show people have an easier time completing tasks when primary calls-to-action are in the main body and secondary triggers are in menus or below the fold.
2) Keep menus short, sweet — and distinct
- An extensive menu might work well for desktop sites, but mobile multitaskers have less patience to scroll through long lists of options.
- Present a few menu items as possible, and make their function obvious.
3) Make it easy to get back to the homepage — use the logo
- When mobile users navigate through a site, they want an easy way to get back to the homepage.
- Participants expect to tap the logo at the top of a page to take them back to the homepage.
4) Don’t let promotions steal the show
- Promotions and ads that overshadow the site make it hard for users to do what they came for.
- In one study, participants missed out on the company’s offerings because a large promotional banner made them miss the mobile site’s navigational buttons.
- Easily dismissible banners beat large interstitials.
Site search is vital for helping mobile users find what they’re looking for in a hurry. Here’s how to maximize the value of your site’s search.
5) Put your search in a text box at the top
- Users looking for specific information usually turn to search, so the search should be one of the first things mobile users see on your site.
- In the study, participants responded best to easily visible, open-text search boxes at the top of a page.
6) Ensure site search results are relevant
- Study participants didn’t bother to swipe through multiple pages of search results. Instead, they judged a site’s search based on the results it returned first.
- Make sure your first search results are the strongest.
7) Offer search filters to bring the most relevant results
- Study participants relied on filters to narrow down search results — and they abandoned sites that didn’t help them reduce hit volume.
- Offer filters to help, but ensure users won’t get zero results.
- Consider a filter preview to show how many hits their criteria will return.
8) Guide users to better site search results
- If a little information on who’s searching could help you focus search results for them, go ahead and start with a couple of questions.
- For example, a larger shoe retailer started its mobile search by having participants select the gender and size of the shoe they were looking for.
The customer journey is getting more complex, and users expect to convert on their own terms. Here’s where you can drive conversions by putting your visitors in control.
9) Let users explore before asking them to commit
- Placing registration gates too early in a site experience can be detrimental to conversion.
- In the study, participants became frustrated by sites that demanded registration in order to continue — especially if the site was an unfamiliar brand. Before offering their personal information, participants wanted to browse content and get a sense of what a site had to offer them.
10) Let users purchase as a guest
- Customers are annoyed when purchases require registration, especially when it’s unclear how registration benefits them.
- Study participants described the guest checkouts as “convenient,” “simple,” and “easy [and] quick.” To encourage registration, make its tangible benefits clear.
11) Pre-fill fields with existing information
- Make conversion as easy as possible by using the information you already have to pre-fill fields for registered users.
- Offer to complete third-party payment/checkout service fields for customers as well, a time saver your mobile users may really appreciate.
12) Provide click-to-call buttons for complex tasks
- Study participants appreciated the option to call a financial-services company to complete an action over the phone, rather than fill out complicated forms on their mobile devices.
- Offering prominent click-to-call buttons at key places can keep users from dropping out of the funnel when they need to provide complex, detailed information.
13) Make it easy to finish converting on another device
- Mobile visitors may want to convert later for a number of reasons, so offer a simple way to do it on another device with social sharing, email, or simply a save-to-cart option.
- One career site allowed participants to email themselves jobs to apply for later.
Whether it’s making a purchase, getting a quote, or joining an email list, your user’s conversion experience should be as seamless as possible. Streamline your entry forms and you’ll reduce friction at the finish line.
14) Add features that make form entry easier
- Study participants were pleased when sites automatically presented number pads for entering values like zip codes or birth dates.
- They also appreciated forms that automatically advanced to the next field as they entered information.
- They got frustrated when they had to repeatedly tap small form fields and switch their phone keyboard to numeric mode.
15) Offer the simplest input method for each task
- Choose the simplest input method for a task, and always be sure the tap targets are large and easily identifiable.
- When choosing from limited options, participants preferred to tap toggle icons rather than enter text or choose from a drop-down menu.
- A traditional drop-down menu was most straightforward.
16) Provide a visual calendar for selecting dates
- Don’t ask users to remember next weekend’s dates when booking things like flights and reservations.
- Keep users on your site — so they don’t need to leave your site to check their calendar app — by offering a visual calendar to select dates.
- Prevent confusion by providing clear labeling for selecting start and end dates.
17) Label forms clearly and error-check entries immediately
- Users might enter their street address instead of their email address if the only label they see is “address,” and labels placed inside fields can leave users in a lurch if they disappear when the user starts typing there.
- Design for success by labeling clearly — and by validating entries for errors in real-time before submission, so users don’t have to resubmit.
18) Make forms fast and efficient for users
- Study participants were more comfortable with simpler forms broken into clearly labeled parts. They were intimidated by complex multi-part forms.
- They appreciated when forms pre-filled things like name and zip code. Make sure your forms have no repeated actions, only as many fields as essential, and use auto-fill.
- With multi-part forms, let your users know what’s coming with a progress bar on top.
Easy on mobile
Mobile users will notice and be delighted by the small things you do for them to enhance their experience, have a look at these.
“Some things seem to work fine. But others are a real pain.”
19) Optimize your entire site for mobile
- Study 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.
- Your site will be easiest to use if all your pages are designed for mobile.
20) Don’t make users pinch and zoom
- Study 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.
21) Make product images expandable
- Customers want to see what they’re buying.
- On retail sites especially, customers want to view high-resolution close-ups of what they’re about to purchase.
- Include high-quality close-ups of key images, like product photos.
22) Tell users which screen orientation works best
- Study participants tended to stay in the same screen orientation until something prompted them to switch, such as the need to read small type or watch a video.
- Either design for both landscape and portrait or directly tell users to switch to better screen orientation.
- Be sure your important calls-to-action can be completed even if users ignore the suggestion to switch.
23) Keep your user in a single browser window
- Switching between windows on a smartphone is cumbersome and users may not find their way back.
- Keep them with you by avoiding calls to action that launch new windows — add functionality to your own site to replace the need for customers to go elsewhere.
- For example, serve coupons directly through your site, so users don’t have to go to other windows to get them.
“I want the whole thing, not a lesser mobile version.”
24) Say “desktop site” instead of “full site”
- Study participants who saw an option for “full site” versus “mobile site” assumed the mobile site was a lesser, abridged version and chose the “full” site instead.
- Avoid this misunderstanding by using terms like “desktop” instead of “full.”
“Why do they want to know where I am?”
25) Be clear on why you need a user’s location
- Always make it clear why you need a user’s location, and how the information will influence the user’s experience.
The importance of being fast
How critical is it that your mobile site be fast? 40 percent of consumers will leave a page that takes longer than three seconds to load, and 79 percent of shoppers say they’re less likely to purchase from a site again when they’re dissatisfied with its performance.1 It’s pretty clear: even a single second of extra load time can lose customers and result in less revenue for businesses.
Press the icons to see the results.
Google Ads offers various features to help you create compelling, informative ads that will resonate with mobile viewers. Here’s an introduction to some of the most impactful ad formats you should be leveraging for mobile.
- Search and Display Network features that can help with mobile
- Search formats that can help with mobile
- Display formats that can help with mobile
- Universal App Campaigns that run across Search, Display, and YouTube