Eight rules for Web page forms

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

If you are collecting information from your users, there is no simpler and more straightforward way to do it than a Web form. A well-designed form can provide valuable information, instead, they may scare the user away. With that in mind, each designer should know some rules for designing Web Forms. All instances of the article are generated using the CoffeeCup Web Form Builder.

1. Conservative set-up, with purposeful design forms

The reality we have to face is that no one likes to spend a lot of time filling out forms. Keep the form short and short and strip out absolutely unnecessary form elements that do not provide actual results. Ensure that each part of the form is driven to the whole, so the user will thank you.

Your form structure should be as functional as the elements in the form. When designing form styles, remember that at least in Western countries, people's reading habits are from top to bottom, from left to right. They also often use the TAB key to move through the elements of a form. Your design should be based on the rationality of the element placement and the semantic nature of the label. Of course, never let your form look fragmented or disorganized--make sure all elements are evenly spaced and neatly arranged.

Here are some standard forms that you can use as a starting point to design more creative forms:

The label is left-aligned and the input fields are listed vertically:

This form is characterized by left-aligned labels, and the input boxes are arranged in neat order from top to bottom. Our eyes can easily capture form elements, especially when you ask questions that are unfamiliar to the user. Because they can read the list of questions from top to bottom without being interrupted by the input box, they will be more focused on the question you are asking. But this style lengthens the time it takes to fill out the form, because it takes a lot of time for the line of sight to move between the label and the input box.

The label is right-aligned, and the input field is stacked vertically:

Right-aligned labels make it easier to distinguish and read, and remove the inappropriate space between the label and the input box. But it makes reading more difficult. It's not so appealing and it looks untidy.

Label Top alignment:

Top-aligned labels make it quicker and easier to fill out a form because the eye doesn't need to move back and forth between the label and the input box. This style also allows you to put the relevant fields together, saving space.

2. Make your form fit its style

Each form should conform to the situation or situation it wants to express. When you are planning to design a form, ask yourself the following questions: What questions are you going to ask? Why do you ask? What is your web design like when there are forms and no forms? Is there any information that the user wants to fill out in the form or is there anything they want to fill out? Your answers will help you design your form and content.

3. Use what you need.

When you hesitate to add elements to your form, ask yourself if you don't need this element. If the answer is "yes", do not use it.

The reset button is usually an unnecessary form element. This historical residue, which should have vanished, still appears in the form, even in future forms. Think about it, when you want to modify the form information, what is in the input box is not important, then what is the need to clear all the information?

The only advantage of resetting the button is that when you accidentally erase the information that you just filled out, you don't need to fill it out again.

4. Use concise descriptions when necessary

You might want to explain why you collect information in your form, especially if you don't want to share information, such as phone numbers or emails. This not only eliminates the user's doubts, but also guarantees the correctness of the data.

Any description or comment should be concise. You may also want to distinguish them in different colors, font sizes, or styles. Too much, after all, you don't want these descriptions to be uninteresting or significantly more than other parts of the form. This is a form that provides printing services that effectively uses the description to illustrate the role of the form.

Look at the picture below:

5. Active communication

Make sure your form uses a user-centric friendly language. Here's a tip to write the usual conversational text: Avoid real conversations with your users.

If you want to know someone else's name, you're not going to stare at their eyes. Ask in stiff terms, "full name." That was horrible. If you want a positive response, you will smile and say, "Hello, what's your name?"

Remember to try to replace the label "full name" with more humane wording, such as "your name."

6. Divide the form into many small parts

Exchanging ideas and opinions within a small area is a way of communicating. Everyone introduces themselves to each other. You describe your career and others comment or ask questions. You will receive more feedback on what you have said, or answer other people's questions. A meaningful and fulfilling conversation, the message is endless, one time.

The same is true of Web forms as another way of communicating. You may have to ask a lot of questions, but that doesn't mean you have to give them a brain. Try using horizontal lines, color blocks, meaningful pictures, or using title words to divide information into small, easy-to-read collections. If none of the above works, divide your form into many pages, with a progress bar at the top, so that users can see how much less they are doing. The following figure:

7. Use meaningful, associated context error messages

Your error message should clearly indicate what went wrong and make the wrong part stand out. After all, no one likes to search for missing fields in the form.

8. When the user clicks on the Submit button, they think they are done and are going to leave. Basically they say, "Here's the message you want, bye." ”

If it is a real conversation, you will shake hands with them and say, "Goodbye", then leave, or otherwise tell them the conversation is over. Your form will do the same thing. Does it lead users to a page and tell them, "Thank you for submitting!" We will contact you soon. ”

Or that sort of hint. And there should be a link back to the homepage on the page at this time.

That's it! Remember these rules when designing a Web form, and you'll be amazed at the huge increase in the quality of the form and the amount of feedback you get.

Article from: www.whwzjs.net