Mobile Site Design Best Practices


Last year mobile search exceeded desktop searches and Google recently announced that 20% of mobile searches were made with voice and 30% of all mobile searches carry a local intent. So how can you benefit from this increasing use of mobile search.

In light of the rise in mobile searches, Google undertook a research study on how users interacted with a wide variety of mobile designs. The results allowed Google to create a mobile site best practice guide.

 

Mobile Site Design Best Practice

 

25 Mobile Site Design Principles

 

The mobile site design best practice is grouped into five sections:

 

  1. Homepage and Navigation
  2. Site Search
  3. Commerce and Conversions
  4. Form Entry
  5. Usability and Forms

Mobile Site Usage from Google

 

Mobile Homepage and Navigation Best Practice

 

A websites homepage usually serves as the welcome page, the branding page, the promotions page and the message page on desktop. In mobile this page should get the user to the page they are looking for quickly and seamlessly.

Principles:

  1. Calls to Action
  2. Keep Menus Short
  3. Easy to get back to homepage
  4. Don’t over do promotions.

 

Mobile Site Homepage and Navigation Best Practice

 

Call to action need to be visible and easily understood. Clearly display calls to actions in primary body of site with secondary actions below the fold or available in menu. Keep the menu as short as possible, or think of how to restructure a  lengthily menu into a more concise one. Users still expect to tap a logo to get back to homepage. If you are not using a logo in you mobile site, then make it clear how to get back to the homepage. Promotion banners in mobile can overshadow the primary site and navigation, users prefer easy to dismiss promotions or in their own promotion section.

 

 

Mobile Site Search Best Practice

 

Site search is crucial in allowing users to find what they are looking for within the site.

Principles:

  1. Site search MUST be visible
  2. Site search must be relevant
  3. Use filters to improve site search
  4. Guide users to better results.

 

Mobile Site Search Best Practice
The first thing a user tends to look for is the site search feature. It must be clearly visible and easy to navigate to. Make life easier for users on small screens and big fingers with auto complete and auto correct. Large site users rely on filters to narrow down search. If possible ask a few questions to narrow down results for users Example: Male or Female, size, colour.

 

 

Mobile Commerce and Conversions Best Practice

 

Users expect to find what they are looking for and make a purchasing decision in their own time and on their own terms. Allow the user to make the decision.

Principles:

  1. Let the user explore
  2. Let user check out as a guest
  3. Use existing info to help the process
  4. Use click to call for complex actions
  5. Allow completion on other devices.

 

Mobile Site Commerce and Conversions Best Practice
Allow users to decide when they want to checkout, prompting checkout frustrates users and may abandon altogether. Users don’t always want to fill in forms, sign up to email, have another password to remember. Allow users a quick and easy guest checkout. For already registered users, make use of pre filled forms which reduces purchase and checkout friction for already loyal customers. For complex information requests, allow or provide an easy option to call company with details. Not all users are comfortable finishing the purchase on a mobile device, provide an easy way to allow them to complete on another device.

 

Mobile Site Form Entry Best Practice

 

Whatever your specific conversion may be: checkout, signup or quote, the form entry should be made as easy as possible for the user.

Principles:

  • Streamline information entry
  • Choose the easiest method for each task
  • Provide a visual calendar for dates
  • Minimize errors with labeling and rel time validation
  • Design efficient forms.

 

Mobile Site Efficient Form Design Best Practice
Users found that sites that enabled larger pads for numbers and post codes. Users got increasingly frustrated with forms that requested repeated information and having to switch between numeric and keyboard modes. Choose the simplest method for each task, be it toggle icons or drop down selections. Users are not always aware of delivery dates ( next Wednesdays date ) provide easy to use calendar selections. Form fields that require an entry should be corrected real time, rather then returning user back to error after completion. Efficient form design should only require information once from user.

 

 

Mobile Site Usability Best Practice

 

Enhance the user experience by making the site as easy and simple to use. Leave your design, fluffy marketing ego at home.

Principles:

  • Optimise your entire site for mobile
  • Don’t make user pinch to zoom
  • Make images expandable
  • Tell users which screen orientation works best
  • Keep users in a single browsing window
  • Be clear why you need a user’s location.

 

Mobile Site Usability Best Practice
Users have an easier time using a mobile specific site, rather then a full site that is mobile responsive, unless full site designed with mobile in mind. Design the page that users do not need to pinch to zoom, content should be responsive to device size. People want to see images of what they are buying, let them zoom in for heavens sake. Users have a preferred method of viewing sites. If your site is better in a different orientation, offer the suggestion. Keep everything in a single page, to many abandoned pages happen with users trying to close windows. Be clear why you need a users location, don’t assume that the users location is where they are looking, allow them to input.

 

 

One Response to Mobile Site Design Best Practices

  1. Pingback: Mobile Site Design Best Practices - Online Owne...