What are the things to pay attention to when designing long forms on mobile devices? This article summarizes them all!

With the rapid development of the mobile Internet industry, the long forms that people used to fill out on PC are gradually becoming more and more common on mobile. Based on the Lvmama mobile supplier franchise project, this article will start from the differences between PC and mobile, and explore the precautions for designing long forms on mobile.

Compared with PC, mobile terminals require less manual input

The convenience of manual input on PC and mobile terminals is different. Input on PC is more convenient (keyboard, mouse, touchpad, high efficiency); input on mobile terminals is less convenient (the contact area between fingers and screen is larger, and the efficiency and accuracy are far less than the keyboard and mouse on PC). Therefore, in order to create a convenient and elegant operation experience, mobile terminal forms need to minimize the user's manual input. There are the following methods to reduce manual input.

Method 1: Common options in the current scenario

Providing commonly used options in the current scenario and using selection instead of input is the most basic idea. It is worth noting that if the commonly used options cannot cover all the content that the user may fill in, the function of manually entering custom options should also be provided to the user.

Method 2: Using the information available on mobile devices

Although mobile terminals are not as convenient for input, they have certain advantages in terms of the types and accuracy of information obtained. For example, mobile devices can obtain the user's current geographical location more accurately, which provides convenience for some forms that require filling in locations (such as delivery addresses, contact addresses, etc.). For another example, the function of calling the address book often appears in various forms that require filling in mobile phone numbers.

Method 3: Provide the user with historical input

When multiple form items of the same type appear in a form, the user's historical input items can be provided for selection. In addition, many form pages will automatically save the user's input information as a common consignee, etc., which also uses this method.

Method 4: Use the camera recognition function

Due to the development of OCR technology (Optical Character Recognition), the speed and accuracy of photographing text recognition have been greatly improved. The most common is the function of photographing bank card numbers in major financial service applications. As shown below, the three-in-one business license has an 18-digit unified social credit code, which consists of Arabic numerals and English letters. If manual input is used, it is not only inefficient, but also easy to make mistakes. The application of OCR technology here aims to reduce input costs and improve user experience.

Compared with the PC side, the mobile side needs to consider the type and method of keyboard to be called up

Compared with the physical keyboard on the PC, the virtual keyboard on the mobile terminal is limited by the screen size, the cost of switching between various types of keyboards is high, and the efficiency of inputting numbers and various Chinese and English punctuation marks is low. Therefore, in the design of long forms on the mobile terminal, more consideration is needed: which type of keyboard should be called out by default, which is the most efficient choice in the current scenario.

In addition, when the input methods of multiple consecutive form items are different, you can consider using a linked keyboard. As shown in the following example:

It is not difficult to find that the input methods corresponding to the three consecutive form items in the case are: time selector, numeric keyboard, and option selector. If the traditional method is used to fill in the form in order, not only do you need to click on the three form items in turn, but the corresponding selector and keyboard also need to pop up and collapse once each (a total of 3*2=6 times of pop-up and collapse), which is a cumbersome operation. After changing to a linked keyboard, you can smoothly fill in the three form items in the same bottom pop-up layer, which helps to create a more convenient and efficient filling experience.

The PC version can contain long forms on one page, while the mobile version needs to display them on separate pages

Mobile devices have much smaller screen sizes than PC devices. A form that can be fully displayed in 1-2 screens on a PC may require 7-8 screens to be fully viewed on a mobile device. If a long form that takes 7-8 screens to read is carried on one page on a mobile device, it may cause a high bounce rate and a low completion rate. Adam Silver, an expert in form design, has found through actual projects that breaking down a long form into several parts and displaying them on several pages can improve user satisfaction and payment conversion rates. In addition, Adam also summarized 16 advantages of this design concept. I think the three most important advantages are as follows:

• Reduce cognitive load, allowing users to focus more on completing tasks;
• The number of errors on each page is reduced, thereby reducing the frustration and bounce rate caused by errors to users;
• Combined with a progress indicator, it can give users a positive feeling of progress.

So, is it enough to display in different pages? Not necessarily. Depending on the specific situation, sometimes you need to divide the content of a page into different modules. The specific approach is: classify and combine related form items, and divide them into different semantic groups through cards, dividing lines or spacing, and add corresponding module titles to highlight the rhythm of the page, so as to help users browse and fill in the form more efficiently.

After completing the long form on the mobile terminal, you can consider providing a preview function

Why should we consider the preview function? For forms that are filled in on different pages, if you need to check the previously filled content, you have to go back to the previous page step by step, which is very inconvenient. Therefore, it is necessary to provide a dedicated preview page for users to check and confirm the form. This is also in line with the Nielsen usability principle of easy access (Recognition rather than recall), which reduces the user's recall burden as much as possible and directly displays the content that users need to remember or confirm.

Compared with PC, long forms on mobile devices need to consider more abnormal situations

This starts with the usage scenarios of PC and mobile terminals. The usage scenarios of PC are relatively limited, and people mostly sit at a desk when using it; while the usage scenarios of mobile terminals are much broader. Whether standing, sitting, walking or lying, you can use your mobile phone, which makes it more likely to cause misoperation. In addition, the usage scenarios of both ends are also affected by their respective network environments. The network quality of the PC is relatively stable, while the network quality of the mobile terminal is prone to fluctuations due to its "mobile" nature, for example, from the outdoor area with a better signal to the elevator with a poor signal. For the occurrence of abnormal situations, the following two points can be considered during design:

• Help users save filled-in form information as much as possible;
• If it is impossible to save the filled-in form information, remind users of this risk in a friendly and clear manner.

When long forms require file uploads, the mobile version does not support as many file types as the PC version.

This is mainly for the iOS operating system. Compared with the Android operating system, the iOS system has restrictions on data reading and writing, which is determined by the iOS system's sandbox mechanism. The so-called sandbox mechanism means that the data of each application is stored in an independent sandbox. The application can only access files in its own sandbox and cannot access the content in other sandboxes. For iOS system APPs, they can generally only access the device's album resources (if the user allows them to access the album). Therefore, if the mobile form needs to upload files, it is necessary to consider the data reading and writing restrictions of the iOS operating system and standardize the file formats supported for upload based on the restrictions.

Summarize

To sum up, the contents mentioned in the article can be summarized into a table.

Interaction design and prototype production of the supplier franchise project: Chen Mengdie (author of this article), visual design: Chen Congzhe. Due to development costs, some of the examples in this article have not been launched.