Web-forms: a first look

Getting users to fill in a field to give you their information is hard. Even when it is to do something the user would like to have it always seems to be a break-off point in the process. A user want to respond to a blog post but he needs to fill in a name and an email. It is more likely that the user will leave the form and not comment at all then fill in the form. Things like external account integration (facebook login), asynchronous  forms (javascript and ajax) and natural forms are a way to solve this. Web-forms are as much a science as they are an art. Nuances can make or break a good web-form so let’s give the science of web-forms a better look!

What are web-forms?

web-forms are user controls in a website that require input by the user. You could think of a form to fill in your personal information for an online store or a web poll where you need to vote on one of the given items. A web-form is characterized by the interaction by a user to fill in data.

Types of web-forms:

Web-forms come in shapes and sizes. There is a lot of variation in web-forms, they can be grouped in about 4 groups; the more classical forms, natural forms, dynamic in-place forms and live editing forms. The devision is made on a interaction level. From full blown 10 page forms to single click adjustments. They all have their own pro’s, con’s and uses for specific circumstances.

• Sequential form: A set of labeled fields that allows the users to fill in the form and send it as a complete set. This is most consistent with a regular paper form. It is mostly used to fill in a new set of information such as personal information for an online shop. It is also commonly used for surveys and more low tech forms for editing.
• Natural form: A form in the shape of something natural. The idea behind is to create a more natural flow for the user to fill in the form. One of this group is the sentence form where the user is left to fill in words in a natural sentence. In the form of a sentence it has been proven to be 15% more effective and more likely to be filled in then the classical way of building up a form. De dialog created makes it seem like a lighter task and the time should pass a bit faster.
• In-place form: In-place forms are hidden forms “behind” the normal view of the thing you are editing. The idea is that it looks like the user extends the regular view. This gives the user a better view how the end result will look and gives a better experience as the change will happen without significant transition. AJAX is used most of the time to submit the changes.
• Live editing form: These kinds of forms come mostly in the form of a slider, checkbox or selector. The editing is live, has no confirm button and automatically saves itself on a change in status. Forms that hold preferences, rating and other simple status changing control use this method. Note that most of these forms only contain one editable attribute and are are sometimes used in groups but saved per form. AJAX is used most of the time to submit the changes.

It is interesting to note that some of these groups overlap and are used in harmony with one another. Looking at my WordPress article editing page I can spot all 4 different types. The title, article body and a few options are sequential forms. The natural form can be seen in the adding of tags as you type a tag and then “add” them by clicking the button. The permalink form can be seen as an in-place form and the live editing form can be found in the size of the content field (is scalable).

The 5 principles:

There are a couple of principle you should follow to create a successful web-form (create or edit).

• Attention: Web-forms live through the attention of the user. It is important that the user is aware of the form. So, one of your main goals should be to catch the user’ s attention.
• Dialog: A user should not see filling out a form a chore, it should be natural and light. Turning filling out a form into a light conversation makes it a lot easier for the user to fill it in.
• Efficiency: Make the job light work, try to let the user fill in the form with the least amount of actions that need to be taken.
• Consistency: To make a user comfortable is to supply a familiar environment. This does not only make the user comfortable but also catches the attention by it being recognized as a form.
• Feedback: Allows the user to make mistakes and correct them without a negative experience. Feedback also gives the users better confidence as they are better aware of what is happening.

Attention

Before ANY user will use a form you would first need to spark the attention of the user. The user might be looking for the form… make it obvious where to find it. In almost every business case the more activity your form generates the better you are doing.

Grabbing the attention of the user can be done in several way’s that are fairly common in UX design. A change of background color, a border around the form or just the placement of the form in your design. The way you do it is not the most interesting here.

What is important is that you figure out how much attention it needs compared to the rest of the page. For instance it is not really useful to grab a lot of attention away from the user that is reading an article. The article should be the main focus of attention, the comment form should be second. This also provokes less of an irritating to the re-occurring form. Facebook does this relatively elegant in it’s “news feed” where the comment and post forms are dimmed down to attract less attention then the content. Clicking on the form changes the styling so that it does take attention. That helps to keep the attention on the form and supplies extra controls.

Directing the users attention to a form can create negative reactions if they are overdone. Depending on the level of attention the form needs you can apply different levels of design to grab that attention.

Dialog

Creating a dialog with your users is very common in UX design. Actually, any set of interactions between a user and the application is seen as a dialog. But what I’m trying to say here is that you need to build a logical conversation with your user. If you are trying to get the user to fill in a longer form with personal information start with the name, d.o.b., address. Do not ask for a name and the next field is favorite movies…

The conversation form would be having with the user should feel like a natural conversation. You ask for a name, sex, where the user comes from and when the user was born. Then you might ask what a users favorite movie is or what music the user likes. There is a grouping of types of questions happening in a natural conversation. Use this social/natural order of grouping in your form. The better you do this the more the user will feel compelled to fill in.

If you create a big form user tend to not complete the whole form. So make sure your conversation asks the most important questions earlier then the unimportant questions. For a social network it is a lot more important to know where a user works and went to school then it is to find out what barbecue sauce the user likes better.

Even in small forms a user can have a conversation with the application. The user may only need to choose an option from a list. Then the user would like to confirm that choice as final. Just like ordering food in a restaurant the waiter would reply with the chosen barbecue sauce for that burger the client ordered. As a reply the client would confirm that. In a small conversation you could also tease the user in replying. For rating the label could be ‘What did you thing about the movie?’. The user would then reply with a star rating… without the confirm as it is an answer to a question.

Creating a dialog will map the form to a real world conversation. By doing that it would flow more naturally and will provoke user to fill in the form as they get in the mood to fill in the next field.

Efficiency

It is very important to make it as easy as possible to the user to fill in a form. Thus we need to supply the user with the tools to fill in the form as efficient as possible.

One of the major thing a form needs is a good continuous flow when using the keyboard. In longer forms the ‘Tab’ on a keyboard can be used to switch between fields. This switching should happen in the correct order of fields and should continue all the way to the submit button. By doing this the user can fill in and complete the form without the fingers leaving the keyboard to reach for a mouse. In short forms this is less of an issue as there are less fields to fill in and less time is lost in transition.

Position of labels to a field can also increase the efficiency. To increase this efficiency the connection between label and field should be good. Either putting the label directly next to it or above it has been proven to be more efficient. The best practices for form design by Luke Wroblewski contains several statistics and examples about label positioning.

The less obvious thing to look for is the recognizability of the different types of user input. If a user does not know what to do with the input field the user would need to find out what to do. This takes time that should have been used to fill in the form. Making it more obvious what the user should do in different parts of the form. The more recognition the user has on a specific control the more likely that the correct action will be taken by the user.

Efficiency is all about making it as easy as possible to fill in the form. Flow, ergonomics and accessibility all can account for better walk-through time.

Consistency

All over the web there are forms and they are all styled differently. This could be a bad thing, but it isn’t! As long as a user recognizes the different types of input fields the user will be able to figure out what to do. Buttons should like buttons, text input should look like a text input and a drop box should look like a drop-box.

I found that on gamespot.com the game lists have a problem in the edit mode of them. The user sees a bunch of half open boxes (border on 3 sides) and in that box it says ‘options’. what the idea is that you clock the field, select an option form a dropdown box and then submit it. The problem with this is that all over the site dropdown boxes do not look like this and the generic arrow down was missing. For a dropdown box it is crucial that the element has 2 elements; a box shape and an arrow to indicate the opening property. Clearly this is not working as efficiently as it should.

Consistency between different form is important as it makes it easier to recognize the forms. If all forms are flagged by a specific type of styling the user could find them more easily. This compared to when they all looked different from one another. The same counts for the controls itself. Controls that look the same and act the same make it easier to recognize what the user should do with them.

With consistency you can try to create a better flow and make your form be recognized. Making it easier to find, fill in the form and recognize what to fill in.

Feedback

Let’s just state one of the most obvious thing in forms, feedback! It is really important to show the user what is going on. A form is submitted but nothing is happening because it is waiting on the server to do something. A loading spinner or another indication that the form is doing it’s job is a good idea!

But feedback is most important when it comes to form validation. it is very useful to tell the user if something went wrong. Tell them live as they are filling in the form what you can tell about their changes. Putting the feedback next the the control that it refers to improves the experience to the user. Connecting control and error makes it easier to correct because it is obvious where the error is situated. Sometimes it is not possible to validate user input in the fly. On submit the error could be displayed either for the form (if not bound to a specific control) or on the control itself.

Feedback is about the most important things in forms. If a user needs to fill in he form a couple of times before ding it right is a bad experience all together. On this point you will loose user and it is not such a giant effort to build in some validation and some feedback. basics can get you a long way. Use something like jQuery to enhance it even more and get the maximum out of your feedback.

Tell your user what is going on is the credo. Users that are left in the dark are unhappy users, so tell them what is going on!

Resources:

• Best practices for form design (Luke Wroblewski)
• Web Application Form Design (Luke Wroblewski)
• What Makes a Web Form Usable or Unusable (Jennifer Kyrnin)
• Accessible Forms (Roger Hudson)
• Sensible Forms: A Form Usability Checklist (Brian Crescimanno)
• Usable Forms for the Web [Illustrated] (Paperback)