Skip to main content

Best Practices of 6 Essential Principles for Web Form Design

We see a variety of web form design almost every day for logging in or give information to acquire service or publish content. However, the process of filling out forms is often not so pleasant. We spend the time to enter information, click submission and then we may have to wait for an audit. Especially for relatively complex and long process forms, the poor user experience is easy to frustrate users and make them end up giving up.

How to improve the efficiency of filling out forms and prevent users from mistakes or lost half way? This article sums up the following methods:

1. Convincing users to fill out effectively:


github form

First, build great forms to tell users the reason to fill them out. What can they get? Let users see the benefits of giving you the information. For example, Github tells you clearly what kind of help will you get on the right side of its registration web form design.

In addition, you can be more specific to tell users your consideration of letting them fill out a particular information form.

To convince users to fill out the form effectively, you also need to remove the negative interference to gain their trust. In most cases, the biggest concern is the use of information after the site collect them. Users do not want their privacy made public or continue to receive spam sales emails. At this point, you can cite some authorities as evidence, such as media reports and user cases.

information form

You can do it in a more considerate and intimate way like informing users the estimated time of filling out the form they may consume.

 informing users the estimated time

2. Organizing the information reasonably


For more complex web form designs with more items, if the information is not organized well, it is very likely to appear complicated and chaotic. Users are easy to get a sense of resistance or even just give up in the beginning. Reasonable and stratified information organizing means the difference of frames, spaces, and color. Sections shall be well-divided by different categories, features, and dependency. The current process shall be indicated by steps.
Organizing the information

In general, blue means informing, yellow means warning, red means error and green means success.

use colors

Clear browsing lines, reasonable labels, tips text and button layout can avoid the appearance of repeated information and reduce the users’ visual burden and physical burden.
lines, lables and text

Hiding information appropriately can make the whole web form design look more refreshing and pleasant. Some information can be set in the need for related operations when it appears. It is important to distinguish between primary and secondary actions. Use buttons to define the primary actions while links to the secondaries. Remember to add more obvious style to the primary actions than the secondaries.

3. Saving time for users.


Spending a lot of time to fill out a form drives people crazy. When you are making a web form design, you should assume that all users are lazy and busy. Try to delete all unnecessary file items and consider whether there are better ways (such as follow-up design research) to collect information than making users input mechanically through the keyboard.

The verification code is always a pain-in-the-ass item in a form. Users need to wait for the verification code to be generated, confirm the contents of it, make sure it is entered in order to click on the submission, and the whole process is nothing about users’ benefits. Users won’t be awarded for filling out one more verification code. We can change the experience of entering the verification code to make it more simple and fun, or through the new background logic to limit the number of daily users to cancel the verification code.

Colleagues from an anti-malicious group of our security platform have created an ingenious form of picture verification code.

Except for the verification code, the second confirmation password existed in the registration confirmation form is also time-consuming. At present, many foreign mainstream sites, such as Facebook, Twitter, LinkedIn, Friendster, etc. do not require users to confirm the password when filling out the registration form. WordPress even send ready-made password directly to the users’ mailbox rather than ask them to fill out a form.

In addition to the above ways, plaintext in the first time users enters the password also helps when they do it again. For information security considerations, dark text switch should also be provided for users who need it. The following is my collection of plaintext password confirmation methods for your reference:

Mouse click-and-drag operation is more efficient than a keyboard. Add pickers, shortcut options, smart associations, range slider, number micro-tuning, etc. so that users can complete the form more quickly.

Add picker, shortcut options

Support drag-and-drop upload:

 drag-and-drop

Smart association:

Smart association

Range slider

Micro-tuning

The drop-down box should be used with caution since it will hide information from users. It is better placed in date/province choosing the section or anywhere has a larger range of options. For a range-limited and important options, it is more appropriate to use more obvious choosing methods.

Reduce the input requirements including format, case and so on. Make your system more flexible than letting users change their typing habits for you.

Prevent errors. Verify the information instantly so that users can modify the information. Moreover, we can also restrict users’ behavior (such as the arrival date cannot be earlier than the departure date )or provide automatic correction to prevent users from making mistakes.

Prevent errors
By providing more active interactive feedback, present text, automatic access to information, automatic format changes, fill the decimal point, etc., so that your form becomes more friendly.
When the user enters the credit card number, it should automatically determine what kind of credit card the user use.
 interactive feedback
 interactive feedback

When a phone number is entered wrong, users are more likely to find out if the belonging location doesn’t match.

4. Providing friendly guidance.


Clean up obscure technical terms (such as database errors), try to use a more intimate language to guide users to fill out the form, tell users the cause of any error. When the problem occurs, clearly explain the reasons for the problem and provide an effective solution. If necessary, you can also add more vivid photos or visual graphics besides guidance text as a guide.

 Providing friendly guidance
intimate language

5. One package service


One package service

Being submitted is not the end of a form, we should provide users with one package service to form a closed-loop and avoid users’ jumping out in the middle of the service. For example, a user is told with insufficient balance in the payment process, the user can only recharge to continue the follow-up operation. But when it’s all done, the user finds that the original page with payment and goods is gone. This is a typical example of being not closed-loop. The same story happens in the download websites. Users are often told to sign up before downloading. However, when you finish the sign-up process, the page will automatically jump to the home page of the forum.

A good web form design, not only need to consider the pre-filling guidance and the in-filling help, but also need to consider the experience after the whole process. Thinking about what the original intention of the user and let him get what he wants most after the filling. Even if he is temporarily unable to get it, we also need to tell him the corresponding reason and alternative operations.

6. Providing design care


According to statistics, about 12% of the population has a light or heavy color vision disorder. If you use color as a unique element that distinguishes between non-clickable text and clickable links, it may make this part of the person difficult to use. We can add a dotted line to the link text, use a button or other shape to distinguish so that these users can more clearly know which is clickable.

Author: 把我给崩了
Translator: Devin
Original site: http://www.3lian.com/edu/2014/11-27/181352.html
Orignal link: http://www.3lian.com/edu/2014/11-27/181352.html

Comments

Popular posts from this blog

Professional UX Design Approaches for Building The Best Website

Building a website through UX design approaches is very much like painting or sculptural art, they all take patience, foresight, aesthetics ability, creativity and perception of details. Generally, the website you design represents your company, it needs to be stunning and breathtaking. If you look deeper into the aspects of website building, you can find some core UX features that outstanding websites share. By analyzing the top design trends, we may accurately trace out four major professional UX design methods for website building. 1. Streamlined Navigation By saying “Streamlined Navigation”, I do not only refer to the navigation bar but all others navigations on a larger scale. Not to mention the great ones, a standard website also needs to be of high usability. Besides that, the speed and accuracy of loading are of decisive significance as well. In professional UX principles, the typography should be carefully organized to ensure the best user experience. Links should be highly …

What? You Are Still Doing High-Fidelity Prototype Slowly?

Have you ever spent half a month designing a high-fidelity prototype, but it was denied within a few minutes? So much time and energy have been spent but in vain. I have met similar things so many times. However, such tragedy can be totally averted: the rapid low-fidelity prototype is a wise choice in prototype design.
1. What is a high-fidelity prototype and a low-fidelity prototype? Low-fidelity prototype: it only focuses on functions, structures and processes; it only provides the most simple frameworks and elements; it generally does not provide color, butexpresses itself in grayscale.

High-fidelity prototype: it provides more visual details; it is almost equivalent to a UI effect picture, and only needs to replace the actual data and materials in the development process.

2. Why make a low-fidelity prototype?
In product development, the goal of a prototype is to express its ideas, functions and content, in order to get feedback and improve the product. The most important challeng…

The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers in 2017

Prototyping/wireframing tools are the best communication method between interaction designers, project manager, and website developers. It’s a key step of web or mobile app development process. While in principle, the design of prototypes must be a product of interaction designers, and the user-centered concept shall run through the whole product design progress. The professional perspective and rich user experience of interaction designer will directly influence the usability of the product.
Desktop-based Prototyping Tools


1. Axure RP (Mac & Win) | ($495/user) Axure RP is a desktop application that allows designers to create, test, and share interactive prototypes. Been called as the most comprehensive (in terms of functionality) prototyping tools, it’s an ideal desktop software for both static, low-fidelity prototypes and more sophisticated, interactive prototypes. As an extremely professional UX tool, Axure requires a steep learning curve.
2. Mockplus (Mac & Win) | ($129/ye…