25 Principles of Mobile Site Design

min read

Consumers increasingly rely on the mobile web to research and make purchases.

This makes it more important than ever for companies to have an effective mobile presence.

But what makes a good mobile site? To answer this question, Google partnered with AnswerLab to research how a range of users interacted with a diverse group of mobile sites.
From this research, Google established 25 principles of mobile site design to help companies build mobile sites that delight customers and drive conversions.

1. Have your call to action front and centre so that it’s easy for people to see.

It can be easy for mobile users to miss menu items, so always put your key calls-to-action where you know users will see them.

Users had the easiest time completing tasks on sites that clearly displayed primary calls-to-action in the main body of the site, with secondary tasks available through menus or below the fold.

Your mobile calls-to-action will probably be different than on desktop, so put yourself in your users’ shoes when determining placement.

2. Keep menus short and sweet.

An extensive menu might work well for your desktop site, but mobile users won’t have the patience to scroll through a long list of options to try and find what they want.

Consider how you can present the fewest menu items possible – for instance, a major department store refined the product categories on its mobile site, presenting users with a shorter, more clearly-defined list than on desktop.

3. Make it easy to return to the homepage, use your logo to link back.

When mobile users navigate through your site, they want an easy way to get back to your initial homepage.

In the study, users usually expected tapping the logo at the top of a page to take them back to the homepage, and became frustrated if it didn’t work.

4. Don’t let promotions take over the homepage or interfere with navigation.

Promotions and ads can overshadow the content they’re next to, and make it harder for users to accomplish tasks.

Users visiting one company’s mobile site were distracted by a large promotional banner and missed the navigational buttons beneath it, making it hard for them to learn more about the company’s offerings.

5. Make site search clearly visible on all pages.

Users looking for specific information usually turn to search – so search should be one of the first things mobile users see on your site.

In the study, users responded best to easily-visible, open text search boxes at the top of a page.

6. Make site searches relevant so that users can find the information they need.

Users 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, so make sure your first page of search results are the strongest.

Make life easier for users on small screens with smart-search features like autocomplete and corrected misspellings.

7. Include search filters to help users get accurate results.

Users relied on filters to narrow down search results, and actually abandoned sites that couldn’t reduce volume.

However, you also need to ensure users don’t filter themselves into a box – one car dealer site allowed users to specify configurations that didn’t actually exist.

Help users avoid problems by letting them know how many results will be returned with a particular filter applied.

8. Segment your search audience before they search, if possible.

For sites that serve diverse customer segments, it can be helpful to ask users a few questions before they search to ensure they get results from the most relevant content segment.

For example, a large shoe retailer began its mobile searches by having users select the gender and size of shoe they were looking for.

9. Allow users to explore your site before asking them to supply personal information.

Placing registration gates too early in a site experience can be detrimental to conversion.

In the study, users became frustrated by sites that demanded registration in order to continue – especially if the site was an unfamiliar brand.

Before offering their personal information, users wanted to browse content and get a sense of what a site had to offer them.

10. Allow users to purchase as guests but encourage registration where possible.

Even when users were making a purchase, they didn’t necessarily want to commit to creating an account with the retailer.

Users described the guest checkout as “convenient,” “simple,” and “easy [and] quick.”

They were annoyed at a site that required registration to purchase, especially since the site didn’t explain how registration would benefit them.

11. Make it easy. Use registered users’ information by pre-filling their details.

For your registered users, remember and pre-fill their preferences. For new users, offer a third-party checkout service they may already use.

Several retail sites in the study offered third-party payment services as an option, reducing purchasing friction for users of those services and allowing the site to pre-fill shipping info.

12. Use click to call buttons so that users can speak to an operator if they need help.

Offer click-to-call at points in the conversion process that require entry of complex or sensitive information.

Users 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 device.

13. Make it easy for users to finish conversions on another device.

Not all users were comfortable converting on their mobile device. Offer an easy way to save or share information across devices to keep users in your funnel.

For instance, a career site allowed users to email themselves jobs to apply for later.

14. Offer users a number pad for fields requiring number entry.

Users were pleased when sites automatically presented number pads for entering values like post codes or birth dates.

They also appreciated forms that automatically advanced through fields as they entered information.

Conversely, they got frustrated when they had to repeatedly tap small form fields and switch their phone keyboard to numeric mode.

15. Choose the easiest ways for users to enter information, drop downs, tick boxes etc.

When users needed to make a choice with limited options, it was easier for them to tap a large toggle icon than to enter text or select from a dropdown.

For selecting one of many options, a traditional dropdown was most straightforward. Choose the simplest input method for a task, and always be sure the tap targets are large and easily identifiable.

16. Provide a visual calendar to make bookings and planning easy.

Users didn’t always remember the exact dates for “next weekend” when booking a flight. Offer a visual calendar when selecting dates so visitors don’t need to leave your site to check their calendar app.

Prevent confusion by providing clear labelling for selecting start and end dates.

17. Use clear instruction and real time validation to minimise errors, tell users when they have not entered correct information.

Label your forms clearly, and make sure the labels are visible when users are actually entering information – one participant mistakenly entered his street address into the email address field, because only “address” was visible.

Likewise, putting labels inside fields caused problems if they disappeared when information was entered, leaving users without guidance.

Once information is entered, validate it for errors in real time prior to submission to prevent users from having to resubmit.

18. Design of forms is important – short and easy to read is key.

Make sure your forms have no repeated actions, only as many fields as necessary, and take advantage of auto-fill.

With multi-part forms, let your users know what’s coming with a progress bar on top.

Users were intimidated by a multi-part form with a very complex initial step, but felt much more comfortable with a different, more straightforward form that clearly labeled each upcoming section.

Users also appreciated multi-part forms that pre-filled information they had already entered, like their name and post code.

19. Design all your website pages so they are optimised for mobile.

Unsurprisingly, users had a much easier time navigating mobile-optimised sites than trying to navigate desktop sites on mobile devices.

Sites that included a mix of desktop and mobile-optimised pages were actually harder for users to use than all-desktop sites.

20. The images and layout should always be legible.

Users 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. Include high quality close-ups of key images like product photos.

Customers want to see what they’re buying.

On retail sites, users expected to be able to view high-resolution closeups of products to get a better look at details, and got frustrated if they weren’t able to.

22. Tell users if your website is better viewed as portrait or landscape.

Users 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.

23. Keep users in a single browser window, do not allow them to navigate away from your browser.

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.

Users also sometimes opened new windows to search for coupons – consider offering these on your site to avoid users looking elsewhere.

24. Use mobile/desktop labelling.

When users 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 terms like “desktop” instead of “full” can help avoid these perceptions.

25. Allow users to locate stores or products ‘near me’.

Users should always understand why you’re asking for their location.

Users 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.”

Great design is only part of a mobile site’s success – it’s important to get the technical side right as well.

Google Mobile Sites certified

Caroline Hagan, our Director and Front-end Developer specialist, is Google Mobile Sites certified.

We like to be conscientious about Mobile Design in our projects here at Blueocto® so we’re offering an Audit you can use to improve your website immediately.

Caroline Hagan

Caroline brings over 15 years as a Designer and Developer; featured in .NET magazine, the only woman in the UK accredited for Google Mobile Sites. A business mentor with Enterprise Nation, STEM Ambassador and Google Women Techmaker Ambassador Previous client projects include Blackberry, FIAT, Clark Shoes and Sky.