Video: ActionsWhile labels ask the questions that people fill out in web forms, input fields allow them to actually provide an answer. Actions are the things that let people tell us they are done, in other words they are the final hurrah. However, not all actions in web forms are created equal. In fact, some are primary, they lead to success like Save, Continue, and Submit. Others are secondary and can sometimes lead to destructive actions like Cancel, Reset, or Go Back. Because these actions aren't equal we don't want to represent them visually equally either.
Viewers: in countries Watching now:
In this course, interaction designer Luke Wroblewski shows how to create web forms that encourage visitors to enter information and covers ways to capture input without the use of forms. The course covers boosting conversion rates and customer satisfaction, organizing the structure of forms, aligning and grouping form elements, assigning the correct input field types, validating input, and handling data entry errors. The last chapter highlights alternatives to static forms, such as using dynamic inline forms, using web services, and leveraging device capabilities, which can be used to gather additional information or replace a traditional form altogether.
- Understanding why forms matter
- Deciding on the form length and structure
- Adding tabs to a form
- Creating required fields
- Adding input masks
- Creating selection-dependent inputs and actions
- Displaying success and error messages
- Adding inline validation
- Understanding gradual engagement
- Enabling touch and audio input on devices
While labels ask the questions that people fill out in web forms, input fields allow them to actually provide an answer. Actions are the things that let people tell us they are done, in other words they are the final hurrah. However, not all actions in web forms are created equal. In fact, some are primary, they lead to success like Save, Continue, and Submit. Others are secondary and can sometimes lead to destructive actions like Cancel, Reset, or Go Back. Because these actions aren't equal we don't want to represent them visually equally either.
Here is a couple examples of how we can represent primary and secondary actions in web forms. In the example at the top the big blue button is the primary one, the light gray one is a secondary action. We can introduce even more contrast by making the primary action a big blue button and the secondary action just a link. We can even go further by taking that link and moving it far away from the primary action. Each of these instances creates contrast between what's the main successful action and what's secondary, you can even see this type of contrast that's introduced with text links at the bottom.
The bold blue icon is the primary action and the light white icon is the secondary action. Generally what you want to avoid the most is a situation like this. Here we see Cancel, the secondary action and Confirm the primary action being treated equally. In fact, to make matters worse the Cancel, your secondary action is what's directly aligned underneath the input field. So simply following a primary path to completion from label to input field to button would lead you in a destructive action, in other words canceling the form.
Here is another example. It's been a long time on the site trying to find the perfect flight. After about 30 minutes of searching I finally had it, I was ready to checkout and here is the form that greeted me. Now let's play find the primary action. Looking at the top where the price and flight information is? Nope, the only thing I can find there is empty shopping basket and start again. Going all the way down to the bottom of the form reveals one more Empty shopping basket and start again, and then read letters to the right is Continue to payment page.
Arguably Continue to payment page is the most important action in this form. I found the perfect flight, I'd like to pay for it, the airline would probably like to collect that money yet the Empty shopping basket and start again link not only is repeated twice it's even got a red icon I think the visual way should really be given to the Continue to Payment Page Link, it's primary, it's the most important, let's treat it that way. Another example here and you'll find that the primary action Checkout is all the way in the right-hand column next to an ad.
Given many of us have banner ad blindness putting the way to complete this form right next to an ad is probably not the best idea. One more note that Start Over secondary action that actually removes all the information I just put into the form is given a lot more prominence than go which leads me to success. Given there is all these variations in how we can represent actions on a form, we decided to take a look at which one works best, so we ran some tests. In fact, we ran six different options past 23 people using standard usability in eye-tracking metrics.
We gave people these options in random order so there was no familiarity bias created. On the right-hand side you can see the variations we tested, we tried primary action as a big button, secondary action as a link; in option B, we made both actions big buttons; in option C, we varied the color; option D, we aligned things to the right; E, we'll space them out, and F, we put them in the middle. So what did we learn? We saw that option B was the fastest performing and had the least amount of eye-fixations, that is, people spent the least amount of time parsing it visually.
Option B of course is the one that has both buttons equal. However, when we dug into the qualitative information we saw that people actually preferred option C and A where we made a distinction between primary and secondary actions. What we heard from people was, I really appreciate that the form took the time to tell me which button is the right one to hit. In other words they saw the distinction, it slowed them down and they thought about what the click and made the right choice. Now there is an argument to be made about whether or not we should actually even have a secondary action here.
After all what's the point of canceling the form after you've inputted a lot of information in it. If you want to back out just click back in your Browser Window or better yet close the Browser Window entirely, Cancel here might just be leading to errors. We also learned a couple of other things in the form. When we tested a pretty common situation, which is primary action on the right, Continue, Submit, secondary action on the left, Cancel and Go Back we saw a lot of errors. In fact six (6) out of twenty-three (23) people failed to complete the form on the left, then we start at the top, made their way down, landed on a button, hit it, only to realize that canceled all their work.
Now this is probably due to the primary path to completion that we talked about earlier. People get going they moved straight down and wherever they land they assume it is going to lead them to success. Option E was also six seconds slower than our best-performing option. On a simple form like this, that's a long time. Option F also had some problems. Though people successfully completed this design there were a lot slower doing so, and they were a lot more efficient in other designs as indicated by the amount of fixations that happened on option F.
A, B, and C were the clear winners, qualitatively people preferred the distinction in A and C where there is either color variation or link variation between the primary and secondary action, but what all these options had in common is that they really aligned with the primary path to completion, that is, you start at the top of the form, made your way down and got dropped off where you be led to success. The heat map on the right illustrates this. The dark red areas is where people concentrate the most. As you can see, it's a pretty linear path straight down putting a secondary action which cancels all their work right at the bend of this path probably isn't the best idea.
While the examples we looked at in this test were around simple registration forms, this principle applies to more complex forms as well, you can see in the example on the right is contrasted to the one on the left the big red primary action really sticks out and guides people to a successful outcome. One of the most common questions I get asked about primary and secondary actions is; What happens when a form spans multiple pages and we really need Next and Previous buttons? How do we lay those out if we're also trying to make sure that certain actions are primary and other actions are secondary, so let's look at these two things? The one at the top utilizes a traditional structure for moving forward on the right and moving back on the left in the form of Next and Previous buttons.
The one below really has one primary action, Continue and a secondary action Go Back. This is the debate, is the top option better or is the bottom one better? I think instead of trying to debate the merits of each of these approaches it's more useful to look at what we shouldn't do. As you can see in the example above dropping people off on an action that leads them back is generally a bad idea, we saw this in our testing. When people landed on the button at the end of the form that was not leading them to success they often made mistakes.
So if you have a left-aligned or right- aligned label form consider the option below instead, you'll get dropped off on a big Next button and the Previous link just sits there small and as text, much less likely that someone will hit that an error. If you're going to go off the left- right treatment, don't swap the ordering as the third image here shows. Previous probably belongs on the left and Next belongs on the right. Moving forward to the right, back to the left is a common convention in user interfaces and we shouldn't be breaking it within our web forms.
Now if you're dealing with top-aligned labels there are similar things to consider. As you can see in the first two images here dropping people off on a Previous Button regardless of whether or not there is space between it and the Next Button one, it's probably not the best idea. Instead, consider renaming your buttons as Continue and Go Back and making Continue the primary action. This again drops people off on a successful action, so they can continue moving forward as opposed to going back. To summarize what we talked about with actions, in general we won't avoid secondary actions.
How often do you really want to reset or cancel our work, and if we do can we just let the Web Browser handle that? Secondary actions that are destructive like this are often hit in error and we don't want people losing all the hard work they just put into our Web Form. If you do find yourself needing multiple actions make sure one's primary, the thing that leads to success Submit, Continue, all of that can be represented through a clear visual hierarchy. In other words, make it big, make it bold, really make it stand out, leave the secondary action behind and then give it much less visual way.
You always want to align your primary actions with the input fields in order to maintain a clear path to completion. As we saw in the eye-tracking data people start at the top, make their way down, and where they land is where they want to go. Previous and Next actions, you find yourself in a situation where you need those, make sure you're not breaking the expectations and consider the things that won't work that we walked through earlier.
There are currently no FAQs about Web Form Design Best Practices.