Capturing the user's design: A clear mobile application form

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

"Editor's note" This article is reproduced from the @elya Girl's personal blog. For more designers to seriously think about the particularity of mobile application forms, maximize the experience of the form design, improve efficiency and improve satisfaction. This article will be from the clear visual longitudinal line, the information grouping, the extreme subtraction, uses chooses replaces the input, the label and the text arrangement way, relies on the clear letter confirmation password, the reasonable keyboard utilization, verifies the small secret these eight dimensions to share my mobile application form design cheats.

A clear visual longitudinal line

When the user browses the information, if there is not enough emphasis element, will be from top to bottom, from left to right browsing, the Web end is an "F" type of view, the mobile end is more often "L" type of sight (navigation and important operations are often below), then if your form's visual browsing order, in line with this "L" pattern, Basically meet the user's psychological expectations, do not need any search, any thinking, you can simply and efficiently complete the completion of the form and submit.

This is a login form visual longitudinal line example, the user first focus on the user name input box, and then focus on the password input box, and then automatically found the login button.

There are many examples of the opposite, such as the following two:

The first counter example is more common, user entered the user name and password, directly see the operation of the button is registered, rather than login, the layout of the left and right, even if you use color partition, also can not stop the user's sight fell to register, so a simple eye movement test can be found, At this point the user stared at the registration pause to think about it is inevitable.

The second example will be more prominent, because the relationship between the form label and form is not very good, users need to read the contents of the form label, and then read the contents of the Input box guide text, the line of sight has always been left--> right--> left--> right, this is not friendly enough, finally submitted, Also need to shift the whole line of sight to the top right corner to find the login button, of course, I am not in the challenge iphone design, if the overall has such an action bar, the top right corner submission form items are OK, but this is only applicable to the keyboard will block the submission button.

Ii. Grouping of information

The form items are not listed from the top to the bottom, but to go through the information organization, the same type of form can be put together, when the form is too long, can be split into different groups, so that when the user fills in, similar to a task dismantling, you can complete a group of completed.

Login and registration is two completely different whereabouts, so in the layout to do a significant grouping, if the user wants to log in, fill it out, if the user wants to register, you need to click the registration button, to a new interface to complete the operation.

When filling in the information, if all want to be listed, naturally there will be a greater burden of information, but if the group to fill, each group only 2~3, it will feel less pressure.

Third, the ultimate subtraction

The information that is not needed is simply cut off. Information that is really needed, but not very frequently, can be hidden and added through an entry.

If you only need the user to fill out the basic information, then all other information can be hidden in a add entry, when the user needs, can be found.

Iv. use selection instead of input

The input cost of mobile applications is very high, especially the touch screen, input efficiency and input accuracy rate has a lot of room for improvement, in this case, to minimize the need to enter the content, the use of choice instead of input, in simple terms, such as sex, such as birth date, such as cities, can be selected by the form to submit content.

Of course, there are some input suggestions related to the scene, but also can use the choice to replace the input. For example, when the user name has been registered, the system provides a few user name suggestions to choose from, such as to label themselves, the system provides a common label to choose from, etc.

When you enter the mailbox, you can give the advice of commonly used mailboxes, but because more commonly used mailboxes, if you give too much advice, need to roll, the interference is big, not as good as not give. So you can reasonably define the timing of the trigger, such as the first character after the @, basically can lock a smaller number of mailboxes, such as "H" is basically Hotmail, "G" is basically Gmail.

Five, label and hint text arrangement way

Mobile Application interface space is limited, but table items often need to use the label to tell the form type, by prompting the text to inform the form format, then the label and hint text how to arrange to make the information appear most friendly?

Advantages: The line of sight has been vertical downward, when the input, do not block the description text.

Disadvantage: In the flat-inch gold mobile phone screen, this arrangement is too expensive to occupy the vertical space, the keyboard rises a block, basically nothing is missing.

Advantages: The input of each form can be processed quickly, which conforms to the visual longitudinal line.

Disadvantage: Occupy valuable vertical space.

Advantages: Basically solves the problem that the previous said occupies the longitudinal line space

Disadvantage: The disadvantage is still lateral vision instability.

Advantages: It solves the problem of visual longitudinal line, and solves the problem of saving screen longitudinal space, and the element is more stable.

This is the best way to arrange the arrangement.

Vi. reliance on Clear passwords

Registration, many applications also need to enter a password two times to prevent misoperation, to prevent the entry of the wrong password can not log in. But do you really need to enter two passwords to prevent this problem? Is there any other way to circumvent the problem?

In fact, in addition to the input two password, there are several ways: 1. The last clear text displays 2. All clear text displays 4. The default dark text, optional clear text 5. The default plaintext, optional Dark Text 6. dialog box confirm password entered correctly. A small scope of user research found that the default plaintext optional dark text in the form of acceptance of the highest

There is a hidden button in the input box, click, toggle Dark Text display.

Seven, reasonable keyboard utilization

1. Keyboard type and call

Different text box types, you can invoke different keyboards. For example, the Web site input box, the call URL input keyboard, you can easily and quickly input. com; the input box of a pure number, you can call the numeric keypad, the phone number input box, you can call the telephone number keyboard, in addition to the number, there are *#+; Mailbox input Box can call the mailbox keyboard, easy to enter @.

But here's a place to look, if the text box is defined as a digital input box, although it is possible to call the numeric keypad, but the input box is only known as floating-point double-precision numbers, that is, you enter "0123", will be counted as "123" such a natural number, if it is as a validation code input box, You also need to do some front-end or back-end processing to complement this 0. So here we have to mention, if you have a password to protect the iphone, when you enter the 4-digit password, it is 4 boxes instead of 1 boxes, the call is a pure numeric keypad, then you know why?

Of course, more than just iphone,android can also define keyboard types.

Here is only a rough survey, the actual text box type is very many, keyboard type will be more, need concrete analysis. For example, if your verification code is not a pure digit, you cannot call the numeric keypad.

2. function keys on the keyboard

The function keys on the lower right corner of the keyboard can be defined, this function key in filling out the form, with the PC TAB key is a bit like, should play down the function of the table single, when in the last table item, this function key will become the corresponding operation.

For example, in the login form, the cursor is in the Username box, and the lower right corner is the next one; the focus is on the last item of the form, but the button is grayed out when the required item is not filled in, and when all required fields are complete and the focus is on the last item in the form, the action button is clicked, and note that the Operation button must be blue.

3. The action Bar on the keyboard

When there are more than 3 items in a table, you can basically consider adding an action bar on the keyboard, which helps users switch between the previous item, the next item, and the keyboard. When the focus is on the first table item, the previous item is grayed out.

Eight, check the little secret

1. Longitudinal check Order

When verifying that the form content meets the formatting requirements, check the order of the form from top to bottom

For example, this form, in accordance with the 1 user name-->2 password-->3 mobile phone number-->4 Mailbox-->5 The order of the sex check, the user name format, username, user name in the blacklist of such issues, will be the priority to remind, if the user name is no problem, To verify the password, the password is no problem to verify the phone number ... This ensures that false reminders are available, and there are rules to follow.

2. Instant Check Feedback

An idealized scenario is that when I enter a form item, the system can immediately tell me whether this is the correct one, instead of filling out all the forms and submitting it before telling me where I need to fix it. On the web side, instant-check feedback is already very common, but on the mobile side, the instant test takes time. The main reason is that the real-time checksum is limited by the speed, when the network environment is bad, the calibration may take a long time, will affect the next form of the completed form.

Japan's mobile speed is better than China's, Twitter and Evernote mobile phone clients have adopted a real-time check to feedback the problem, in China, the experience has not been particularly fluent, perhaps the domestic mobile form of real-time verification will need to wait some time.

In fact, in addition to the clear visual longitudinal line, information grouping, the ultimate subtraction, the use of choice instead of input, label and text arrangement, rely on clear password, reasonable keyboard utilization, check the little secret, there are many many cheats do not write, such as clear steps, the user's voice, mobile end of the special situation, reasonable description , timely feedback, Anchor Point, initiative to do with the position of the action, give advice, give restrictions, appropriate help, label page design, color information transmission, step-by-step form.

Original link: Mobile application form Design cheats

(warlial for Lei Feng Network, reproduced please indicate from the Lei Feng network and author, and link back to this page)