Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the difference between PC and H5 mobile interaction design". In daily operation, I believe many people have doubts about the difference between PC and H5 mobile interaction design. I have consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the questions of "what is the difference between PC and H5 mobile interaction design"! Next, please follow the editor to study!

1. Big screen to small screen

To cut to the chase, the most fundamental difference between mobile and PC is the size of the screen. The size of the screen directly determines the amount of information in the interface. A page on the PC side can display complete information, which may require several pages on the mobile side to carry. Some designers may think that the screen size is not the same as self-adaptive, the mobile page is a little longer, let the user slide on it. This is a very simple solution, but ignores an important premise: are users willing to slide?

According to the buried point data, the exposure and clicks of content on most mobile pages more than one screen will drop sharply, indicating that users rarely actively slide to view content beyond one screen. For mobile products, some important content must be seen by users in one screen.

1. Information architecture reconstruction

Therefore, if you want to do a mobile APP for a PC site, the first thing you need to do is to restructure the information architecture. The PC side has enough space to show all the functions directly to the user, while the mobile side can only show some major functions, and some minor functions need to be placed at the next level.

The processing method on the PC side is very simple and is shown directly to the user. On the other hand, mobile users need to press this comment for a long time before the evaluation list can be popped up. Many users may find that this function still exists after reading this article today. It doesn't matter. I didn't know it before, but it didn't affect your normal use. The appropriate reduction of the information level of secondary functions is a must for mobile designers.

2. One page, one task

Some people may disagree with the above view of information architecture refactoring. for some form pages, such as users want to borrow money and transfer money, there is some information that users have to fill in. In these scenarios, we do not worry that the user does not slide, because the user cannot complete the operation without sliding. So in this case, can we continue the layout style on the PC side?

Because the mobile user environment is more complex and changeable and more vulnerable to interference, it is necessary to ensure that the interface information is simple and intuitive. If you display too much information on a page, it is easy to confuse users. The amount of information mentioned here does not refer to the absolute amount of information, more accurately, it should be the amount of information that users feel subjectively. The same several input boxes may only account for 1x4 of the page on the PC side, while the mobile side occupies a whole page, giving the user a completely different look and feel. The page is so full that it is easy to make users anxious.

Tasks that can be accomplished on one page now jump to several pages, adding steps. Users are afraid of "too much content". Aren't they afraid of "too many steps"? Don't be afraid, because the capacity in the page can be seen by the user at a glance, and the user can't immediately perceive how many steps there are in this task. Because of ignorance, so fearless. By the time the user knows the number of steps for this task, the whole task has been completed.

In this revision of borrowing, users must first enter the amount of the loan in order to borrow money, and the rest of the loan term, repayment method and interest will be displayed to the user. This information is related to the amount of the user's loan, and the user does not enter the amount of the loan, and the information is of little significance to the user, so it is better to hide it and focus the user's attention on completing the input of the amount of the loan.

Without a universal design principle, all design theories can not be applied mechanically regardless of the actual application scenarios. If there is a strong correlation between the front and back steps, I suggest not to show it in pages.

For example, at present, many SMS verification codes choose to put "enter mobile phone number" and "enter SMS verification code" on two pages, which I personally have reservations about. Imagine a scenario where if the user has not received the SMS CAPTCHA for a long time, he needs to determine whether it is the wrong phone number, a network failure, or something else. Users need to go back to the previous page to check, which is much easier if the mobile phone number and SMS authentication code are placed on the same page.

3. Highlight important information

What we mentioned earlier is mainly to control the amount of information on the mobile page. With less information on the page? Of course not! Let's take a look at the scene of train transfer. If you want to go from Nanjing to Aksu, Xinjiang, there is no direct train, so you can only transfer from Xi'an.

Let's take a look at the handling of the following two products, 12306 on the left and flying pig on the right. 12306 is still a PC style coming head-on, where is the problem? 12306 shows about the same amount of information as Flying Pig, except that 12306 shows the starting and ending times of the two trains, while Flying Pig only tells users the start and end time of the whole journey.

Obviously, the problem is not the amount of information, but the form of display of information. The information that users pay more attention to should make it easier for users to find it. For a train, users pay more attention to departure / arrival station, departure / arrival time and ticket price. After Gaussian fuzzy processing on the flying pig interface, it is found that the user's visual focus falls on these key information.

12306 all the information belongs to the same level, so that people can not grasp the primary and secondary. And there are too many color matching in the interface, which increases the cost of obtaining information for users.

Mouse to finger

The user on the PC side interacts with the interface by the mouse, while the mobile user relies on the finger. The operation of the mouse is more accurate, so the size and spacing of the elements in the mobile interface are larger than those on the PC side.

The following figure is an example, with the PC on the left and the mobile on the right. The input box on the mobile side is still in the PC style, and the icon for details about interest rates and fees is too small, so it is easy to misoperate when users click on their fingers.

Third, subtract from your interface

Earlier, we mainly emphasized that mobile products should minimize the amount of information in the interface. Can the goal be achieved through changes in interaction design without changing the product information architecture? Let me introduce you to two methods: scene and relevance.

1. Scene

Although there is a lot of content on a page, there is very little content that users are really interested in and will interact with. If we can know that users have a high demand for a certain content in a particular scenario, then we highlight it; on the contrary, if the demand is very low, we can hide it.

The same process needs to provide different functions according to different usage scenarios of users. In fact, even if it is the same function, we have to choose different display forms according to different user scenarios.

In order to make it easier for users to quickly view the next answer, Zhihu provides users with a floating button. But this floating button will change the style when the user starts to swipe the page. This is easy to understand, when the user has just entered the page, in order to reduce the user's learning cost, we need to directly tell the user what this button is for. When the user begins to slide into the state of reading the answer, shrink the shape of the button to avoid blocking the interface information.

2. Relevance

We need to sort out the relevance between the information, integrate the interrelated information together, and then reduce the amount of information on the page. The monthly screening function of Alipay bill has been modified to the entrance. In the past, users needed to click on the calendar icon, but now users can just click on the month. What the user wants to filter is the month, so it is more appropriate to use the month as the entry directly.

At this point, the study on "what is the difference between PC and H5 mobile interaction design" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.