Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Actions

From: Web Form Design Best Practices

Video: Actions

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.

Actions

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.

Show transcript

This video is part of

Image for Web Form Design Best Practices
Web Form Design Best Practices

30 video lessons · 12234 viewers

Luke Wroblewski
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Form Design Best Practices.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.