Mobile app Form Design cheats

http://blog.csdn.net/wangjinyu501/article/details/7647074

Always wanted to write an article about mobile application form design, unfortunately the recent project is very busy, busy to have no time to take care of the blog. Recently experience the product, often see the wrong form design, or information confusion, or step complex, or language programming, or visual focus jumps, or check the order confusion, or feedback is not time, so all kinds of problems, so I would like to seriously summarize, think about, for the mobile application of the form design, To provide some personal advice, I hope more designers can seriously think about the particularity of mobile application forms, to maximize the experience of the form design, improve efficiency, improve satisfaction.

This article will be from the clear visual longitudinal line, the grouping of information, the extreme subtraction, the use of choice instead of input, label and text arrangement, relying on clear text confirmation password, reasonable keyboard use, check the small secret eight dimensions to share my mobile app form design cheats.

First, clear visual longitudinal line

When the user browses the information, if there are not enough emphasis elements, from top to bottom, from left to right, the web side is a "F" type of sight, mobile is more often "L" type of sight (navigation and important operations are often below), then if your form of visual viewing order, in line with the "L" pattern, Basically in line with 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 vertical Line example, the user first focus on the user name input box, and then focus on the password input box, and then naturally found the login button.

There are many examples on the reverse side, such as the following two:

The first counter example is more common, the user entered the user name and password, directly see the action button is registered, rather than log in, this way of layout, even if you use color isolation, can not stop the user's line of sight to register, so simple eye movement test can be found, At this time the user stared at the registration pause to think about is inevitable.

The second example will be more prominent, because the relationship between the form label and the form is not very good, the user needs to read the contents of the form label, and then read the contents of the Input box guide text, the line of sight has been left-to-right--and left-to-right, which is not friendly enough, and finally submitted, and need to pan to the top right corner to find the login button, of course, I am not in the challenge iphone design, if the global have such an action bar, the upper right corner of the submission form is OK, but this is only applicable to the keyboard will obscure the submission button situation.

Ii. Grouping of information

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

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

Fill in the information, if all want to list to naturally have a greater burden of information, but if the group to fill, each group only two or three items, you will feel that there is not so much pressure.

Three, the ultimate subtraction

The information that is not needed is simply cut off. Information that is really needed, but less frequently, can be hidden and added through a portal.

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

Iv. Replace input with selection

The input cost of mobile applications is very high, especially touch screen, input efficiency and input accuracy have a lot of room to improve, in this case, to minimize the need to input content, the use of choice instead of input, simply, such as sex, such as the date of birth, such as the city, can be submitted through the form of choice 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 several user name suggestions for selection, such as to label themselves when the system provides common tags to choose from, etc.

Enter the mailbox, you can give the recommendations of the common mailbox, but because the common mailbox more, if the advice too much, need to scroll, the interference is large, it is better not to give. So you can reasonably define the timing of the trigger, such as entering 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 Limited amount of gold, but the form items often need to tell the form by the label type, through the prompt text to inform the form format, then the label and hint text how to arrange to make the information presented the most friendly?

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

Disadvantage: In the area of gold mobile phone screen, this arrangement is too expensive vertical space, the keyboard raised a block, basically everything is missing.

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

Cons: Takes up valuable vertical space.

Advantage: Basically solves the problem that occupies the vertical line space before

Cons: The downside is still lateral visual instability.

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

This is one of the best arrangements for arrangement.

Six, rely on the clear confirmation password

At the time of registration, many applications also need to enter a password two times to prevent misoperation and prevent incorrect passwords from being logged in. But really need to enter two password to prevent this problem? Is there any other way to circumvent this problem?

In fact, in addition to typing two times the password, there are several ways: 1. The last clear text shows 2. All clear text 4. Default ciphertext, optional clear text 5. The default plaintext, optional Dark Text 6. dialog box confirm that the password is entered correctly. Through a small range of user research found that the default clear text can be selected in the form of the highest degree of acceptance

There is a hidden button in the input box, click to toggle the dark text display.

Seven, the rational use of the keyboard 1. Type of keyboard and call

Different text box types, you can call different keyboards. For example, the URL input box, the call URL input keyboard, you can easily and quickly input. com, the input box can be called numeric keypad, telephone number input box, you can call the phone number keyboard, in addition to the numbers, there are *#+; name and other Chinese input box, you can call the Chinese keyboard The Mailbox input box can call the mailbox keyboard for easy input @.

But here is a place to note, if the text box is defined as a numeric input box, although it is possible to call the numeric keypad, but the input box only recognize floating-point double-precision numbers, that is, you enter the "0123", will be counted as "123" such a natural number, if it is used as a verification code input box, You also need to do some front-end or back-end processing to complete this 0. So here we have to mention, iphone, if you set a password protection, when entering 4-digit password, is 4 boxes instead of 1 boxes, call is a pure numeric keyboard, this you know why it?

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

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

2. function keys on the keyboard

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

For example, in the login form, the cursor is in the User name box, the lower-right corner is the next item, the focus is the last item in the form, but when there is a required field is not filled, the button is grayed out; when all required fields complete, and the focus is the last item in the form, the action button can be clicked, note that the action button must be blue.

3. The action Bar on the keyboard

When there are more than 3 items, you can basically consider adding the action bar on the keyboard, which helps the user to switch the previous item, the next item, and the keyboard. When the focus is on the first form item, the previous item is dimmed.

Eight, the small secret of the check 1. Longitudinal check Order

When verifying that the contents of the form conform to the formatting requirements, check the order of the form items from top to bottom

For example, this form, according to the 1 user name-->2 password-->3 mobile phone number-->4 mailbox-->5 sex order, the user name format is not correct, the name of the username, the user name in the blacklist and other issues, will be a priority reminder, if the user name is not a problem, To verify the password, password no problem to check the mobile phone number ... This ensures that the error alerts are available and regularly traceable.

2. Instant Check Feedback

An idealized situation, that is, when I enter a form item, the system can immediately tell me whether this entry is correct, rather than fill out all the forms, submitted after the submission of my need to fix. On the web side, instant-check feedback is already common, but on the move, it will take time to verify. The main reason is that the instant check is limited by the speed, when the network environment is not good, the calibration may take a long time, will affect the completion of the next form in progress.

Japan's mobile internet speed is better than China, Twitter and Evernote mobile phone clients have adopted a real-time verification of the way to feedback problems, in China, the experience is not particularly smooth, perhaps the domestic mobile form of real-time verification needs to wait.

In fact, in addition to clear visual longitudinal line, the grouping of information, the ultimate subtraction, the use of choice instead of input, label and text arrangement, relying on clear text to confirm the password, reasonable keyboard use, check the small secret, there are many many cheats did not write, such as clear steps, user's voice, mobile special situation, reasonable description , timely feedback, Anchor point, active and sub-action position, give advice, give restrictions, appropriate help, label page design, color information transmission, progressive form, later have the opportunity to share.