Teach you seven steps to create an excellent mobile website

Editor's note: With the popularity of large-screen mobile phones, most of the site needs to adapt to the mobile version (this is simply certain). However, in the limited space to the entire desktop page transfer up, designers can need to do more, choose to avoid light, comprehensive consideration, seamless docking, and so on. Today to share a good article, from 7 aspects to help you create excellent mobile website, the article is very comprehensive, designers and product managers can learn.

Zchening (Zhou Chen): Now mobile phone app is very hot, see the recent very popular game a lot of people will go to install one. But in fact many applications are some occasional needs, such as I recently rented a house installed a 58 of the same city, but I can not rent the house every day, after renting the house this application I will hardly open. Think of our usual use of the application is also 3-5, micro-bo, micro-letter, browser, and so on, generally no more than 7. The human brain cannot handle more than seven units of information at the same time, most of the items that have to be remembered are listed only in the seventh: 7 Days a week, 7 notes in music, 7 digits in the telephone number, and the World Miracle is 7, seven fairies, Snow White and 7 dwarfs. (For more, see the Magic 7±2 Law)

On the one hand is the user occasional demand, on the one hand is the developer faces the mobile internet massive user's desire, how to balance these two contradictions? A mobile site designed for mobile devices is a viable option.

Here are a few cases.

2012 Taobao Wireless website (m.taobao.com) visited the volume of 6.4 times times, the proportion of Taobao flow from 2% to 11%, which does not include access from app apps. Ctrip is also a good example, the mobile phone website (m.ctrip.com) after the launch of the order volume increased by 5 times times. Ctrip optimizes the booking process by researching consumers who visit the mobile phone network. And the use of HTML5 technology, visit the site can be very clear to see air tickets, hotels, flight dynamics, tickets, train posts, my Ctrip 6 modules, looks like the app is very similar. If the other person's case is not persuasive then I give my own example: After coming back to visit the company's website (video site), mobile devices, the daily average of PV browsing reached 400,000! You know, our site doesn't have any optimizations for mobile devices, and these videos are not available on the phone.

Since mobile sites are so important, how do you optimize mobile sites and provide a good user experience for mobile phone users? These seven strategies may give you some insight:

　　First, consider the diversity scene

Mobile user access to the scene is often diversified, buses, toilets, queues and other types of scenes have, and can be interrupted at any time, more is the use of debris time, so the site is simple and fast very important. You can use data to analyze what is most interesting to mobile users, and remember to avoid piling up a lot of text. If you can't avoid a lot of text, also pay attention to typesetting, divided into multiple nodes to display. Compress pictures as much as possible to help users save traffic and speed load. Even if your picture is beautifully done but it takes 30 seconds to access it, it's very likely that the user turned it off before they saw the site. Elevators, buses and other scenes to consider the crowded space, your button is large enough, the process is smooth enough simple, so that the user can complete a single hand. In addition, you need to consider how you would handle the user switching the direction of the phone's screen (such as switching from a vertical screen to a horizontal screen), whether you need to fit it, and whether you need to show some other content (such as a chart). There is the use of text, background color and so on, so that users in the light is not enough, even in the sun can also effectively capture information.

Perhaps some people feel that these situations are too extreme, but in extreme cases if you still can guarantee a good user experience, so high standards of normal experience will be increased, at the same time exceeding the user's expectations, users of the product will increase the degree of goodwill.

　　Second, simplify navigation, reduce input

The goal of navigation is to make it easy for users to quickly find what they need from a wide range of content. Mobile sites are limited to screen size and user habits, and navigation should be as few and as fine as possible. If you have too much content, you need to add a search box in a prominent place to support searches such as voice. If you have two navigation schemes do not know which is better, you can be deployed in two time points separately on the site, to see the page access volume, duration and other data changes to help you make judgments, all with data to speak. Of course, this is not to make you frequent revision, frequent revision will let the user dazed flawless.

Third, for the different equipment optimization

Consider optimizing for different devices, such as Symbian or low-end phones, big-screen smartphones, iphones, and ipad Tablet PCs. The use of responsive web design (RWD) and other technologies to adapt the page, at the same time for different devices to do different optimization and response (touch screen, gravity induction, orientation, etc.). Although the upfront implementation cost is relatively large some but once and for all, later changes the cost is very small. Through HTML5, such as strengthening the level of page performance, strengthen the display of multimedia information (depending on the location and nature of the site, the general site does not recommend using too much multimedia resources), improve human-computer interaction experience. Mobile device access can be redirected to a site that is suitable for mobile device access, and so on.

In addition, to provide a different version of the switching mode, if the user needs to switch to the computer version of the mobile device is usually because he needs to use the computer version of the existing but mobile version of the part of the function, it may be the user's device made a wrong decision. After cutting to the computer version also provide the option that allows him to easily cut back to the mobile version. For example, mobile shopping site, mobile phone search for users is more trouble, so we prefer to go to the direct, so for the wireless shopping guide products need to direct, accurate, fine goods delivered to the hands of customers. In addition, the mobile phone usually small items such as lottery ticket under the high rate. All of these need to be optimized for different devices.

　　Iv. consideration of cross-platform issues

For some special sites (with user ID systems and synchronization needs), you also need to consider the experience of Cross-platform synchronization. How to allow users to switch between multiple devices smoothly. For mobile shopping sites, many users pay security concerns and online banking habits in the mobile phone list (may be waiting for a single bus), and then use the PC to pay (such as back home after work). This is especially important when it comes to allowing users to flow smoothly across platforms. Take a look at the reading (although not the website) For example, when you are waiting for the bus before work on the phone to see "mob" see page X, the night in bed to take out the ipad to see automatically from the server to get the latest reading progress.

V. Transfer of complexity

The so-called transfer complexity is to allow each platform (mobile phones, tablets, PCs, etc.) to play their biggest advantage. For example, mobile platform (mobile phone, tablet computer) can be photographed, can be used anytime, anywhere, can accurately identify the location and direction, but not convenient to enter a large number of text, display less information, and data transmission speed is limited. But these flaws are the advantages of the PC.

For example, typing a lot of text on a mobile site is a very painful thing! If your site often requires users to enter a lot of text, you can give users some advice on how to drain them onto the PC website. Or you can enter text in a phonetic way. Plus, you don't have to move the content on your PC site intact to a mobile site, and that's usually silly. You can use data analysis and mobile scenario analysis to see what users on the mobile site are more interested in. The easy things on some platforms tend to become extraordinarily complex on other platforms, and how to take advantage of each platform requires careful consideration by web designers.

　VI. Simplifying Business processes

Combined with the website business characteristics, carefully consider how to simplify the process, so that users can easily complete the operation on the site. For example, the Web site in the PC registration needs to fill a large amount of information, in the mobile site registration can fill in as little information as possible (such as mobile device access recommended by mobile phone number registration), do not need to fill in the verification code.

　　Vii. develop enthusiastic users and improve continuously

Internet products are always beta, and you may find that the results of a scenario that you have previously conceived to be in the hands of a user are not exactly the same thing. Then go to listen to the user's voice, according to the user's suggestion iterative development, of course, not all users are willing to give you advice, it is best to train some loyal users to give them priority trial rights and other incentives. They are not necessarily material, and sometimes their opinions are encouraged by their acceptance. Of course, this does not mean that you can add features as soon as you have developed them to use. Some users can be invited to test before and during the prototyping phase, thus avoiding waste of later development resources. After the development of the necessary self-test, to avoid their hands is a variety of bugs are completely unavailable products.

If you have more ideas, please pay attention to micro-credit "idesign123" and I Exchange product design, user experience.