Grasping User Design: Clear mobile application forms

　　

 

[Editor's note] This article is reposted from @ elya Niu's blog. In order for more designers to seriously consider the particularity of mobile application forms, they can maximize the experience of Form Design, improve efficiency, and improve satisfaction. This article describes how to use clear visual lines, information grouping, extreme subtraction, selection instead of input, label and text layout, confirmation of passwords in plaintext, reasonable keyboard utilization, and verification. these eight dimensions to share my mobile application form design tips.

　1. Clear Visual Line

When users browse information, if there are not enough elements to emphasize, they will browse from top to bottom and from left to right. The Web side is a "F" line of sight, mobile terminals are more often "L"-type line of sight (navigation and important operations are usually below). If the visual browsing order of your forms conforms to this "L"-type rule, basically, it is in line with the user's psychological expectations, without any need for any search, any thinking, you can simply and efficiently complete the completion and submission of form items.

　　

 

This is an example of the visual line of the login form. The user first pays attention to the user name input box, then the password input box, and then naturally finds the login button.

There are many negative examples, such as the following two:

　　

 

The first inverse example is more common. After the user enters the user name and password, the operation button is registration instead of Logon. In this layout mode, even if you use different colors, the user's Sight cannot be blocked from registration, so a simple eye movement test can find that it is inevitable for the user to stare at registration and pause thinking.

The second inverse example is more prominent, because the form tag is not highly correlated with the form. You need to read the content of the form tag first, and then read the content of the guiding text in the input box, the line of sight is always left --> right --> left --> right. This is not friendly enough. When submitting the line of sight, you need to shift the line of sight to the top right corner to find the login button. Of course, I am not designing a challenge iPhone. If you have such an operation bar globally, it is fine to submit the form item in the upper right corner, but this is only applicable when the keyboard blocks the submit button.

　II. Information grouping

Form items are not listed from the top to the bottom, but organized by information. Forms of the same class can be put together. When the form is too long, it can be split into different groups, so that when you fill in, it is similar to a task disassembly, you can complete the completion of a group.

　　

 

Logon and registration are two completely different destinations. Therefore, you can create a significant group in the layout. If you want to log on, you can simply enter the group. If you want to register, you need to click the register button to go to a new interface to complete the operation.

　　

 

When you fill in the information, if you want to list all the information, there will naturally be a great burden on the information, but if you fill in by group, each group has only 2 ~ Three items will feel less pressure.

　　3. Ultimate Subtraction

Cut down unnecessary information. Information that is actually needed but not frequently used can be hidden and can be added through an entry.

　　

 

If you only need to fill in the basic information, all other information can be hidden in one add portal, which can be found when the user needs it.

　　4. Use selection instead of input

The input cost of mobile applications is very high, especially for touch screens. There is a lot of room for improvement in input efficiency and accuracy. In this case, we should minimize the input content as much as possible, in simple words, you can use the alternative input method to submit content, such as gender, birth date, and city.

Of course, there are also some scenarios related to input recommendations, which can also be used to replace input. For example, when a user name has been registered, the system provides several user names for selection. For example, when you tag yourself, the system provides common tags for selection.

　　

 

When you enter a mailbox, you can give suggestions for frequently-used mailboxes, but because there are many frequently-used mailboxes, if you give too many suggestions and need to scroll, it is better not to give them a large margin. Therefore, we can reasonably define the time to trigger the suggestion. For example, after the first character behind @ is entered, we can basically lock a small number of mailboxes. For example, "h" is basically hotmail, "g" is basically gmail.

　5. layout of labels and prompt text

Mobile application interface space is limited, but form items often need to be tagged to inform the form type, and the form format is notified by prompt text, how can labels and prompt text be arranged to make the information display the most friendly?

　　

 

Advantage: the line of sight is always vertical and downward. When you enter the line of sight, the explanatory text is not blocked.

Disadvantage: on the mobile phone screen, this layout method occupies too much valuable vertical space, and the keyboard is lifted to block it. Basically nothing is stuck.

　　

 

Advantage: You can quickly process the input of each form item, in line with the visual line.

Disadvantage: it occupies valuable vertical space.

　　

 

Advantage: basically solved the problem of occupying the vertical line space mentioned above

Disadvantage: The disadvantage is that the horizontal vision is unstable.

　　

 

Advantage: it solves the problem of visual vertical line, saves the screen vertical space, and the elements are relatively stable.

This is an optimal layout method.

　　6. Confirm the password in plaintext

During registration, many applications still need to enter the password twice to prevent misoperations and prevent logon failures after the wrong password is entered. But do I need to enter the password twice to prevent this problem? Is there any other way to avoid this problem?

In fact, in addition to entering the password twice, there are also several methods: 1. the last plaintext is displayed. display all plain text 4. the default value is dark text. The default value is plaintext 5. default plaintext. Optional values: 6. dialog Box to confirm that the password is entered correctly. Through a small range of user surveys, it is found that by default, plaintext can be selected as the form of the highest acceptance of the dark text

　　

 

There is a hidden button in the input box. Click it to switch to the hidden text display.

　　7. Proper keyboard Utilization

1. keyboard type and call

You can call different keyboards for different text box types. For example, in the URL input box, you can call the URL input keyboard to easily and quickly enter the URL. com; a numeric-only input box that can call a numeric keyboard; a telephone number input box that can call a telephone number keyboard. In addition to numbers, there are also Chinese input boxes such as * # +; names, you can call the Chinese Keyboard. In the email input box, you can call the email keyboard to easily enter @.

　　

 

　　

 

However, you must note that if you define a text box as a numeric input box, although you can call a numeric keyboard, the input box only recognizes floating-point double-precision numbers, that is to say, if you enter "0123", it will be counted as a natural number such as "123". If it is used as the verification code input box, you still need to do some front-end or back-end processing, to complete this 0. So I have to mention that if you set password protection for your iPhone, when you enter a four-digit password, there are four boxes instead of one, the pure numeric keyboard is called. Do you know why?

Of course, not just the iPhone, Android can also define the keyboard type.

　　

 

　　

 

Here is only a rough survey. There are many types of text boxes and a large number of keyboard types. You need to analyze the specific situation. For example, if your verification code is not purely numeric, you cannot call a numeric keyboard.

2. function keys on the keyboard

The function key in the lower-right corner of the keyboard can be defined. This function key is similar to the tab key on the PC when entering the form. It should act as a downward switch to form items, when it is in the last form item, the function key is changed to the corresponding operation.

　　

 

For example, in the login form, the cursor is in the username box, and the bottom right corner is the next item; if the focus is in the last item of the form, but a required item is not filled in, the button is grayed out; when all the required items are complete and the focus is on the last item of the form, you can click the operation button. Note that the operation button must be blue at this time.

3. Operation bar on the keyboard

　　

 

When there are more than three form items, you can basically consider adding the operation bar on the keyboard. This operation bar helps you switch between the previous item, the next item, and the keyboard. When the focus is on the first form item, the previous item is grayed out.

　　8. Verification tips

1. Vertical verification sequence

When verifying whether the form content meets the format requirements, you must verify the form items in the order from top to bottom.

　　

 

For example, this form should be verified in sequence according to the 1 user name --> 2 password --> 3 mobile phone number --> 4 mailbox --> 5 Gender, if the user name format is incorrect, the user name is duplicated, and the user name is in the blacklist, a reminder is given priority. If the user name is correct, the password will be verified. If the password is correct, the mobile phone number will be verified ...... This ensures that error reminders are traceable and regular.

2. Instant verification feedback

An idealized situation is that when I input a form item, the system can immediately tell me whether this item is correct, instead of filling out all the forms. After submitting, it tells me where I need to fix it. On the Web end, instant verification feedback is already very common, but on the Mobile End, instant verification takes a few days. The main reason is that the real-time verification is restricted by the network speed. When the network environment is poor, the verification may take a long time and will affect the filling of the next form in progress.

　　

 

The mobile network speed in the United States and Japan is superior to that in China. The mobile clients of Twitter and Evernote have adopted the instant verification method to feedback the problem. They are used in China and the experience is not very smooth yet, maybe the real-time verification of mobile forms in China still needs to wait.

In fact, in addition to clear visual lines, information grouping, extreme subtraction, the use of alternative input, label and text layout, rely on plaintext to confirm the password, reasonable keyboard utilization, validation in addition to the secret, there are many other secrets not written, for example, clear steps, user voices, special mobile scenarios, reasonable instructions, timely feedback, pin the anchor to the top, take the initiative to do the next action, give suggestions, and give restrictions, appropriate help, Tab design, color information transmission, and step-by-step forms.

Original article: Tips for designing mobile application forms

(Warlial is for the record of Lei Feng's website. for reprinting, please indicate the source and author of Lei Feng's website and link them back to this page)