How to build a good mobile website? Google experts teach you 25 strokes

Google's researchers summed up 25 key points, as follows:

▌1, "Call of action" content to be front or center

For mobile users, it is often easy to forget menu options, so you should put your most critical "call to action" content in an eye-catching position so that users can easily see it. So, you need to make the most important "Call of action" content on the main part of the site, the user can quickly complete the relevant tasks, in addition, if you want to continue to perform the next task, you can use the menu options indicated, you can also follow the next task after the completion of the first task. On the mobile side, your "call to action" content should not be the same as the desktop terminal, so you have to "take the seat" and adapt to local conditions.

Key ingredient: Put your most important "call to action" content on the site's most prominent location.

▌2, make the menu look both concise and kind

　　

A wide range of menus may work well for desktop sites, but mobile users may not be patient enough to swipe their phones back and forth, and they don't like to find what they want after looking at a long list of menu options. So, what you need to think about is, how do you put your most desired feature options in the fewest menus? For example, there is a large retail store (which does not name it here), they optimize the product category menu on their mobile website, and the desktop menu is completely different, Let the mobile Terminal menu options provide users with a shorter, clearer list of products.

Key elements: A short menu, with clear category options, allows mobile visitors to navigate the site more clearly.

▌3, to make it easy for users to return to the homepage

When mobile users navigate through your site, they want to be able to quickly go back to the previous page. Google in the study found that users often like to click on the page of the company logo, because they think this way can go directly to the homepage, so your site must also support this feature, otherwise if the user clicked on the logo, but no response, they will feel very disappointed.

Key ingredient: Optimize the company logo on the website as a navigation button, and navigate back to the homepage when the user clicks.

▌4, don't let the promotional ads steal your site's thunder

Promotions and ads affect the content of your site and affect the user's experience on the site. Google's researchers have given users access to a company's mobile site, which has a huge banner ad that is not attracted to the ads, but does not pay attention to the navigation buttons under the ads, which can instead provide users with more information about the company's content.

Key elements: Ensure that promotional ads do not affect the navigation of the page, and that the ads and "Call of action" content are completely separated

▌5, keep search function visible

If users need to look for special information, then they will use the search function of the site, so the search must be one of the most important features on the mobile site, in general, users want to be able to use the text search function at the top of the site page, because the top of the page is the most easily found.

Key element: The search function of the website is placed at the top of the homepage, and a text box can be used to display the search function.

▌6, ensure site search results meet user expectations

In fact, users don't seem to hate the page-by-page search results, but they're more concerned about whether the search results returned by the site match their expectations, so at least you need to make sure that the first display page of your search results accurately meets the user's search requirements. On the mobile terminal, because the screen is very small, you need to provide some intelligent search functions, such as help users spell automatically, or correct the user's spelling, and so on.

Key elements: Make sure your site search function returns valid results, as well as refine your smart search to provide features such as automatic spelling or incorrect spelling correction.

▌7, using filtering to improve website search usability

　　　　

Users use the search filter feature, which narrows the search and returns more accurate search results. However, you need to make sure that users do not get nothing after using filter search. Websites should let users know how much search results a filter search might return, which can help users avoid problems.

Key element: Provide filtering search services to users, but make sure that no empty results are returned.

▌8, guide users to visit the better site search results

For a site, users have a variety of types, so when users search, you can ask a few related questions, so that their search results are consistent with the expectations. For example, a large shoe retailer provides a search service on its mobile site, but it asks questions about the gender of the user and the size of the foot before searching.

Key elements: If you want to narrow down the search results, you can ask the user some questions in advance so that users can see the search results that match their expectations.

▌9, do not come up to let users register on the site

If you have a mobile site that allows users to sign up, the experience must be very bad. Google researchers found that the most difficult for users to accept is the need to register to access the site content. In fact, the user wants to be able to browse the content of the website before submitting the personal information, at least to understand what the site can provide for themselves.

Key elements: Do not force users to register an account, allowing any visitor to browse your site

▌10, allowing users to shop on your website as a visitor

Even if users want to buy items on your Retail site, they still don't want to sign up for an account. Users will feel that if they can buy the product as a visitor, then it is really very convenient, simple, and fast. People do not like to be forced to sign up for an account when shopping on the site, and many websites do not tell users what it is good for them to sign up for their account.

Key ingredient: You can provide an option on the mobile site that allows users to shop as a visitor. In addition, if you need a user to register an account on the site, then you can clearly tell them what is the benefit of registering an account.

▌11, use of existing information to maximize user convenience

For those who register with the website, you need to remember their preferences. For new users, you can provide a third-party payment service that they are accustomed to using. Google researchers research on a number of retail sites, they found that many sites have provided third-party payment services, to avoid the inconvenience of the final purchase, the mobile site can also be based on the registered user's existing information, provide pre-filled logistics address information function.

Key elements: Use the information you have in your hands to make the most of third-party payment services as much as possible for the convenience of users

▌12, for complex tasks, use the "Tap to call" feature

If a user needs to enter a complex or sensitive task, you need to provide a "click-to-Call" service feature. For example, there is a company that provides financial services, a feature that is available on their mobile website, and if users do not want to fill out complex forms on the mobile side, they can immediately make calls from their mobile phones and accept the business from a manual agent.

Key element: When the user needs to provide complex information, you can provide a "click to call" function in the prominent location of the website, so as to prevent customers from falling from the "funnel", resulting in customer churn.

▌13, when users change different mobile devices, to ensure that the transaction is easy to complete

Users may be able to access your mobile site on different mobile devices, because you need to provide an easy way for them to share information on different devices. For example, a recruitment site, when the user completed the application, they will have an e-mail, so that users on other devices can also access their site.

Key element: Mobile users are likely to change different devices, so you can use social sharing, e-mail, or "deposit cart" methods, so that users can continue their experience on the site.

▌14, information input to do streamline work

If the site can prejudge some information, the user experience will be great. such as the pre-judgment of the user's zip code, or date of birth and so on. When you enter some information, the experience will be smoother if you can do it automatically. In contrast, if the site requires users to repeatedly enter some information in the Small table box, so that they frequently switch the number/letter mode on the phone keypad, the experience is very bad.

Key elements: If your site needs to enter a number, you can provide users with a special numeric keypad, when the user clicks the input box, automatically eject the numeric keypad.

▌15, choose the simplest input method for each task

If the user needs to make a selection within a limited selection, the simplest way is to click on the selection instead of using the text input, or select it in the drop-down box. If you want to select an item in many options, the traditional drop-down box is the most straightforward. Whatever the task, you need to choose the simplest input method.

Key elements: If you need to enter on a table on a mobile site, you can select the drop-down box and the toggle function, ensuring that the operation is easy to click at all times.

16. Provide a visual calendar when you need to select a date

When a user is booking a flight on a mobile site, it is difficult to determine "a day next week" is the number of months, so you need to provide a visual calendar for the user to check the date. This way, users don't have to leave your site and then turn on the Calendar app on their phone. When you select the start and end dates, you can provide a clear label to prevent users from confusing the date.

Key elements: When you need to select an input date, you need to provide a visual calendar, and a clear date structure to ensure that users do not interrupt the experience.

▌17, through tags and real-time confirmation, the first time to resolve input errors

In your table box, you should have the prompt label function, and when the user actually input, you can see the necessary and accurate prompt information. Here is an example where the user has entered their home address in an e-mail address bar, because the information in this column is not clear and there is only one "address" tag. There is also a problem with putting the hint in the input box, because when the user clicks prepare to enter, the message disappears, so you need to use the tag to prompt. In addition, if the user in the input process, need to do real-time confirmation, otherwise, once the error, will be repeatedly submitted, causing users to resent.

Key ingredient: Use clearly visible tags to let users know what they want, verify input errors in real time, and help users correct them before they finally formally submit the information.

▌18, design-efficient forms

You need to make sure that the form you're designing won't repeat itself, just provide the required information, and you'll want to use the auto-fill feature. When the user fills out the form, it's best to display a progress bar at the top of the screen so that people can know their progress. If a table is too complex, it can be offensive, but a simple, straightforward form can be a very comfortable one. If you can match the auto-fill function, such as pre-input user's name and zip code, the effect will be better.

Key elements: Minimize the number of entries in the table, provide the auto-fill function as much as possible, and use a clear progress bar.

▌19, for mobile terminals, optimize your website as a whole

If you have a website that is specifically targeted at mobile devices, it's no doubt that when users use a mobile device, they must be much simpler than a purely desktop site. But the hardest thing to do is to mix mobile and desktop versions of the two sites, which is more difficult for users to access than full desktop sites.

Key elements: If your site pages are designed for mobile devices, then it's easy to use them.

▌20, do not let the user pinch the screen, to enlarge or reduce the picture

If a user needs to pinch a screen to zoom in or out of a picture, sometimes there is no important information or related "Call to action" content, which can be frustrating for users. When designing a website, you should be aware of this and don't let users change the size of the site. Some websites will put the pinch screen function canceled, if your site design is very reasonable, users will not notice that the function is not.

Key element: If a user zooms in on a web site picture, there may be some "Call of action" content that might not be visible at times. This is something you should be aware of when designing your website.

21, your product image needs to support large image display

Customers want to see the products they buy. On a retail site, users want to see higher-resolution product images, so you can see more details, and if the site does not support a large-picture display, it will certainly make users feel very disappointed.

Key elements: High-quality close-up images are required for these key images of product photos.

▌22, tell users which screen direction to visit the site most comfortable

Users tend to visit the site in a fixed screen direction, unless prompted to tell them to switch the screen orientation (for example, when watching a video). You can design your website by taking into account both vertical and horizontal screen orientations, and encourage users to switch to the best screen orientation. But anyway, to switch the screen direction, you have to make sure that some important "Call of action" content can be clearly displayed on the site.

Key elements: You can communicate the best screen orientation with the user, but make sure that the important "call to action" content remains prominently positioned.

▌23, keep users in a single browser window to access your website

Switching windows frequently on a smartphone can be a hassle, and users may not be able to find how to get back to your website. So, let the user browse your site in a separate window. In particular, do not open the "Call of action" content in a new window.

Key element: Make sure that the "Call of action" content is displayed in a single browser window.

▌24, avoid "whole site" label

Once the user sees the "All-power" option, it will feel that the "mobile site" is a compact version of the site, and eventually choose to click into the "full site." Even if the content of the desktop and mobile sites is consistent, it can be misleading to users, so you could use the "desktop Site" tab instead of "whole site".

Key elements: To give users a simple site switching experience, with the "desktop site" tag, instead of the "whole site" label.

▌25, you have to understand why you need the user's address information

Users generally want to know why you ask them for geolocation information. For example, a user on a travel site to book a hotel in another city, but he is very strange, because this site will require the user to provide the current location information. So, you need to put the location on the site this column default to empty, and then let the user choose, or provide users with a clear "Call of action" action, such as "Find Near Me", and so on.

The key ingredient: you have to understand why you need the user's address information, and then learn how that information affects the user experience.

In response to these 25 points, Google's user experience researcher Jenny Gove summarizes the most important four points, respectively, as follows:

▌1, add an eye-catching search bar

If your mobile site does not yet have a search bar, then you really need to add one quickly. "On mobile devices, people want to be able to quickly find what they need, so we find that there is a lot of demand for search bars and it's best to put them on the home page. "Gove explained.

Of course, as a research project initiated by Google, it does not seem surprising to suggest that the search strip be installed prominently on the site. But in fact, Google found that users do not really mind using the search bar, because it allows them to quickly find the information they need.

▌2, split the big table into small pieces

Google found that many sites would require users to provide a variety of information, such as address information (required to send goods), credit card number (required to pay the bill), and so on. When filling in this information, the website will often provide a long form page, which has a variety of input boxes, very complex. So, if you can split these tables into smaller, easier-to-understand chunks, the effect might be better.

In addition, Gove suggests that you should be able to display the steps for filling out forms. And it is best to fill in real-time verification of the correctness of the input content, such as the user input their own zip code, can be verified in real time.

▌3, allow users to browse anonymously

Some shopping sites require users to sign up or sign in to make a purchase. Some sites are more exaggerated and must be registered or logged in before they can be browsed. Both of these approaches are wrong.

"If you're going to create a retail site, if users don't have a registered account, they'll be able to give them a visitor's identity," Gove says. Yes, businesses want users to be able to sign in, but they can only do it after they've paid the bill. ”

▌4, to support convenient switching between devices

Because people use mobile terminals anytime and anywhere, it is very likely that they will be interrupted by something during use and then moved to work on the laptop.

Gove believes that the most tragic experience is that when users switch devices, they can't continue their previous experience, it's too much of a hassle to have users copy and paste the URLs they visit.

The best solution is that the mobile site can provide a shortcut button, and then automatically send the current link, or access to the user's own mailbox, and then regardless of the user on what device to log on, can continue their own experience.

Finally, Gove that Google through user research, clear positioning of the construction of mobile sites exist problems, she felt, although a lot of problems, but fortunately these problems can be identified, and if these problems can be written down, it means that people also have the ability to solve these problems.