Create a better Web form: A good user experience design principles and examples

Article Description: There are many new design trends in web design today. The newest CSS3 is being used by designers more and more, form design is no exception need designers to devote more attention and thinking.

Designers no longer just for the internet to create beautiful graphics so simple, as a web designer, we also need to consider some other issues, such as the user experience, algorithms, code and so on. User experience design is becoming more and more important today, especially for Web Form design.

The goal of Web Form design is to design a set of simplest processes that allow users to submit to the click of a submission button. This process does not require too many dazzling effects, although the jquery form plugin has been very popular. In this article we focus on the user experience and interactive process of the form. The concept here can also be effective in helping you reduce the frustration of users in filling out a form.

Remain eye-catching and concise

I've heard countless users complain that the registration form requires too much information. If you are looking for ways to increase the number of registered users, you must make sure that your form is as easy to fill as possible. This also applies to data entry in other places.

Depending on the project, the amount of information users need to fill out is also different. The registration form may require the user to enter the username, email address, and then enter the password two times, which is reasonable and the user is expected to register the way. But there are special cases, look at WordPress's default registration page.

The user only needs to fill in the username and email address, then the system will automatically generate a password and into the e-mail address you fill in, this reduces the number of original forms, and the malicious registrant blocked outside the door. You do not need to go to the mailbox to click on the activation link, but you must obtain a new login password in your mailbox.

Always keep in sync with user expectations

The most annoying thing for users is that the page has unexpected jumps. You absolutely want your form to remain natural, and to minimize the extra JavaScript code, popping bubbles and Ajax are very useful things. Useful forms should not be divided into many small items, separated from each other by partition, that is not a good way.

Another mistake we often make is to miss the TabIndex attribute of HTML. This property is great from a usability perspective because it allows the user to fill out the entire table without using the mouse. But if you don't keep the order of the TabIndex attributes, or if you only use this property in some input boxes, and others don't, the whole system will go wrong. This applies to all registration forms, and it applies to other input pages, especially the online shopping information entry page.

Confidentiality is the most important thing.

Whether the user enters their credit card number or e-mail address, you should keep the data safe in the first place. Users trust your site and back-end code to properly collect their information and keep it in a safe place.

If possible, I suggest that you use SSL authentication throughout your website, which not only protects the user's registration information, but the entire process of browsing the site is protected by HTTPS. This can be a bit of a hassle, but there are some web host opportunities to help you install these features. Of course not every site must do so, but you only need a little more time and energy to protect the security of user data, your users will feel safe, and you and users can also establish a bond of mutual trust, why not?

Also, do not use information that is easily detectable. You need to use the Post data type unless the information is completely personal. The Ajax get requests is used only when the URL structure can benefit from the data (for example, search.php?q=my+search+terms in the search page).

Larger input box

I've heard a lot of arguments about the size of Web Form input boxes. vbulletin,joomla! And Drupal use a fairly small input box, mostly 10px-12px text and very small margins.

The Diigo registration form structure is very atmosphere! You need to mitigate the conflicts between the different input elements. Bold text prompts you which areas have been filled out and which areas are empty, and when you activate an input box, it turns into a light blue color, prompting you where your cursor is now.

The traditional Digg registration form is designed in a very similar way. Twitter's registration form is also big, and you won't miss anything. They are not stingy with a lot of white space to highlight the input area. Their label system is also unique, the empty input box will have a preset placeholder text, through the color transformation, you can also clearly distinguish the user input text and system preset text.

Conclusion

There are many new design trends in web design today. The newest CSS3 is being used by designers more and more, form design is no exception need designers to devote more attention and thinking.

I hope the guidelines behind these user experiences will guide you in creating better Web Forms. For back-end data, even a simple language like PHP can be handled well. But through a week or two of time, you should be able to create a system of your own. Web developers, both front-end and backend, should try to understand these design principles and paradigms.