The use of buttons in web forms

Action buttons exists at the bottom of almost every web form. They’re so common that we often doesn’t even reflect on how to actually design them. By gathering information from a few of the great minds in the field of web usability and also from my own experiences, I’ve tried to come up with a set of best practices on how to design them efficiently.

Position

According to Jakob Nielsen, the order of the buttons doesn’t matter that much. Both positions has it’s pros and cons. The important thing is to be consistent and if possible follow platform GUI standards [1].

Outside the web world there are GUI standard. The problem is that they are different on different platforms. On the Windows platform the GUI guidelines state that OK should be positioned to the left and Cancel to the right. On the Apple platform it’s the other way around.

On the Web there really is no standard on how to do this, so we have to try to find out which position is the smartest on our own.

Luke Wroblewski elaborates on this topic in his article Web Application Form Design [2]. His recommendation is to position the Primary action (OK) aligned to the left part of the form and the Secondary action (Cancel) to the right.

He elaborates even further on this topic in the book Web Form Design [3], where he presents the finding from a usability test performed on a form with different designs. What the test showed is that having the Primary action left-aligned and the Secondary action to the right of it makes for the fastest performance.

Robert Hoekman, jr. has also thought a lot about this and presents his thoughts in the book Designing the Moment [4].

He agrees with Luke Wroblewski that the Primary action should be left-aligned with the form. The reason for this is that this forms a nice line for the eye to follow, working it’s way down the form, thereby making it easy to scan. Another reason is that if the user is navigating the form with the tab-key, the Primary action comes before the Secondary action in the tab order.

Labeling the actions

Robert Hoekman, jr. also have some thoughts about the labeling of buttons. Instead of just labeling the buttons OK and Cancel it’s better to label them after what they actually do [4]. If it’s to save a note, then why not label the OK-button “Save note” instead. Jakob Nielsen also recommends using a label that explains what it does instead of just a generic label [1]. By doing this the user is more confident using the form since he knows what to expect when he pushes that button.

Visual distinction

One other thing Robert Hoekman, jr. discusses is to visually distinguish the actions making it easier for the user to pick the right one.

Luke Wroblewski also concludes that making the Primary action stand out more than the Secondary action is a good thing. In the findings of the usability test, he finds that it takes the user a little more time to complete the form if the Primary and Secondary action has a different design. But on the other hand it makes the user more confident and less prone to choose the wrong one. He suggest making the buttons in different colors or making the Secondary action a plain link.

A simple way to visually distinguish the two that I sometimes do, is to use a bold font weight on the Primary action and a normal font weight on the Secondary.

Robert Hoekman, jr. recommends using a plain link for the Secondary action [4]. He’s arguments for this is that it makes it clear which one is the most prominent. But it also applies to Fitt’s Law, which suggest that the distance and the size of a target determines how long it takes to reach it and click it. The bigger the target the faster. The Primary action should therefor be bigger than the Secondary action.

In user tests that I’ve conducted I’ve found that some users can get a little confused by a plain link “acting as a button”. I think that this might be because of never having encountered it in a form before. But as this practice gets more common in both web- and windows applications, I think that this is probably not a persistent problem.

The Reset button

The Reset button is used to reset an entire form. It was pretty common in the early days of the web but is rarely seen nowadays. Nevertheless I thought I would say a few words about this button too since when it appears in a form, it’s usually paired with the Primary action.

In most situations it’s best not to use this button at all. All to often users click the Reset button by mistake thereby deleting everything they’ve entered. (I did it as I wrote in Confusing Northface contact form) And seriously, how often do you want to reset an entire form, and if you do, how hard is it?

The risk with this button is simply to big compared to the possible benefit of it. Plus in most cases it just adds more clutter to the form.

Or as Jakob Nielsen put it in his alertbox column Reset and Cancel Buttons [5]:

The Web would be a happier place if virtually all Reset buttons were removed. This button almost never helps users, but often hurts them.

Possibly the only time when a Reset button is called for, is when a form is used repeatedly by the same user and the information entered differs from each use.

Luke Wroblewski has an idea about the Reset button [3]. He thinks that if you provide one you should also provide an undo for it. By changing the Reset button into an Undo after being clicked the user can restore the form. This means that you have to temporarily store the form data, but that’s a small price to pay for the convenience of the user.

Best practices

Taking all of the opinions above in consideration, plus my own experience in using and designing web forms, I’ve come up with these best practices.

  • Position the Primary action to the left

    Having the buttons aligned with the left side of the form makes a clear path for the eye to follow. By putting the Primary action to the left of the Secondary action it’s also positioned first in the tab order.

  • Label the actions in a natural language

    By describing what the action actually does, the user feels more comfortable using it since he know what to expect.

  • Make the Primary action stand out

    This makes it easier for the user to choose the option that’s most likely without making it harder to find the other option.

  • (Almost) Never use a Reset button

    Reset buttons often hurts user more than it helps them. The only time it’s called for is in a form that the same user uses over and over again with different input. If you use a Reset, also try to provide an undo function.

Do you agree with my conclusions or do you have a different opinion about this? Please share!

References

  1. OK–Cancel or Cancel–OK?, Jakob Nielsen 2008
  2. Web Application Form Design
  3. Web Form Design, Chapter 6, Luke Wroblewski 2008
  4. Designing the Moment, Chapter 13, Robert Hoekman, jr. 2008
  5. Reset and Cancel Buttons, Jakob Nielsen 2000

Translations

This article is also available in:

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+
  • chris Jangelov

    There is an interesting interview with Luke Wroblewski on the UXpodcast: http://www.uxpod.com/index.php?post_id=319469

    /chris

  • http://www.svennerberg.com Gabriel Svennerberg

    Yeah, that was pretty interesting. Especially the part about the time you have to show the benefits of your product (web service, etc) for a potential customer. I think it was 1.06 minutes per person and month.

  • Pingback: Design usable buttons | Candes | Cristian Neagu - UI Designer, Developer, Consultant

  • http://www.neto.nl Neto

    Usability and interaction design for buttons love this kind of stuff.

    thx for the tip “interesting interview with Luke Wroblewski”

  • Pingback: » Bookmarks for October 28th through November 1st rajit

  • Pingback: UkrTech Design

  • Pingback: [ kurt-network ] » Links

  • adam

    There is another pro of using links as a cancel button: it lowers server load. When user clicks on form button input, the form must be sent to the server as POST request. Server must process that request and usually redirect to another page (so we have 2 requests). With “Cancel” button as a link it just sends a GET request.

  • http://www.svennerberg.com Gabriel Svennerberg

    Adam: That’s absolutely true. For a high traffic site that could definitely be an argument for using a link as “Cancel”.

  • http://www.formsthatwork.com Caroline Jarrett

    Broadly, I agree with the points made about positioning the buttons but I’d like to make one (rather important) distinction.
    The crucial point is make a clear path for the eye to follow, which you have put as a subsidiary point within “position the Primary action to the left”.

    Having the buttons aligned with the left side of the form makes a clear path for the eye to follow – but it’s not the only way to do it. If you look at Luke’s articles again from this point of view, you’ll see that his first article does indeed work. If you look at his other article Primary and Secondary Actions in Web forms, you will see that the tests included the two buttons separated, but they only tested CANCEL on the left (primary position for the eye movement) and excluded SUBMIT on the left.

    SO: look at the left-hand edge of the boxes on your form. Then put the primary button aligned with that left-hand edge.

    THEN: think about secondary actions. How important are they to users? Is there a risk that a user might accidentally do something unfortunate? If so, make that unfortunate thing have less visual impact, and place is less prominently.

    It’s not really a matter of left or right of each other.

    For a longer version of this discussion, see my post in the thread on http://www.ixda.org: Next and previous button order (Long)

    Best
    Caroline Jarrett

  • http://www.svennerberg.com Gabriel Svennerberg

    Caroline: Thanks for your insight. You’re probably right about how we look for the next thing to interact with in a form. In the discussion on IxDA you certainly explains this behavior very well.

    One obvious thought that comes to mind is that this can really be true in our western culture where we read from left to right. In countries where they read from right to left the opposite should be true.

    Also thanks for the link to Lukes other article. I should have had that in this article in the first place.

    Cheers!
    Gabriel

  • http://www.twodividedbyzero.com/robsonwt/ Robson Waterkemper

    Can you explain why there are so many forms out there with only one action, and this action is placed on the right side of the screen? Why this pattern was created? Do you have an idea for it?

    I’m asking you this because I’m trying to create a pattern for me and I was using the right aligned buttons, because it was natural to me that the conclusion of a given screen was in the right, like starting doing something in the left and ending in the right.

    What do you think about that? And using this right align, what do you think one should do when putting extra buttons on the interface like Cancel, or even Delete for a web-based application?

  • http://www.svennerberg.com Gabriel Svennerberg

    I think that positioning the button to the right at the bottom of the form has sprung from an aesthetic point of view. By putting it there you create a visual balance in the form. Often there’s a header in the upper left part of the form and the button balances that by anchoring the lower right corner. To put it simple, it looks good.

    Also in our western culture where we read from left to right and start at the top an work our way down, it could seem natural to end the form in the lower right corner. After all that’s how a page of text looks.

    Having only one action is probably because you can always bail out using the back-button of the browser. I think it’s also because the undo-pattern still isn’t widely adopted in web based applications, and therefor designers and developers tend to ignore that option.

    As you can read from the article and from the comments, my conclusion is to put the button aligned with the left part of the form since there’s where the eye is looking for the next element. But if I would put it in the right corner I would probably put the Primary action aligned with the right part of the form and the secondary action to the left of it. The most crucial factor here would be to make the primary action more visually distinct. That said i still think it’s a worse solution since you loose two major benefits of the “left”-approach. The natural place for the eye to look and that the primary action comes after the secondary action in the tab-sequence. That on the other hand is something you can control.

  • http://www.twodividedbyzero.com/robsonwt Robson Waterkemper

    Thanks for your reply.

    I was commenting about this issue with a colleague and we come up with some observations:

    – The single button aligned in the right, in our opinion, really looks better than the one aligned with the left. We think that a natural flow is created and since this button has a strong visual characterization, it will attract the eye of the user. It will serve also to indeed break the flow of filling the form to the next task that is finishing the form.

    – The main question now is: What if we need a second button? If I right-aligned my “OK” class button, where do I put my “Cancel” class button? I came up with a solution that is turning the Cancel into a link, similar to the one tested in this article you mentioned, but the main difference is that I’ve putted the cancel first, and OK second, both right aligned.

    My first impression for doing this was: Since I am right aligning my buttons, I think the main one has to be the rightmost of them, because it will end the form, and it will stand more prominently.
    If I put my cancel as a link, it will fade out in comparison with the OK button, and will matter less if it is in the left of the OK.

    Of course it will be interfering with the tab order, but I consider the tab navigation a visual one, a keyboard replacement for the mouse clicking, so is it wrong to consider that people look at the screen when tabbing? If it so, tabbing to the Cancel first then OK last is not a major problem in my opinion.

    Another aspects to take into consideration: When the cancel is in a link form, and the OK is at button form, the two of them kind of glue together and it seems that people will tend to look to them as if they were one single item.

    I always align my right buttons at the end of my form elements, and not the end of the screen. It draws some kind of box in the form, and I think it helps to give the form a unity design, and kind of prevent people for searching for the OK button.

    I would like to see this particular design I normally do tested against the ones in that article. Unfortunately I have no access to an eye tracking device. I will try to perform this test with a few users to see the feedback I get.

    One last question: Do you think in the future the better is to change the “Cancel” link for an “Undo” link? This undo will do exactly what? Discard all changes the user had made and turn the form exactly how it was when the user entered the screen, or his last save?

    Thanks for your comments and for your excellent article.

  • http://www.svennerberg.com Gabriel Svennerberg

    I see that you’ve put a lot of thought into this. In the end it’s always boils down to what works in a each particular context.

    It would be really interesting to see the result from your user tests. It would be really cool if you could test both approaches (primary action to the left vs. primary action to the right). I don’t think that an eye-tracking device is necessary. On the contrary I believe that you could get really good data with just a normal user test. I would really appreciate it if you could report back the results!

    About your last question. Even though the “Cancel” link is sort of an undo. I definitely don’t think it should be used as a reset, but rather as a way out from the form. What would be useful though is to temporarily store the data entered by the user, so if he’s interrupted, are able to go back later to the same page and finish filling out the form.

  • Jeff Geurts

    Gabriel,

    Thanks for the great article!

    I’ve been digging around on the net trying to find some information as to how to treat forms that are part of a multi-step process, and I’m wondering if you have any ideas?

    In a multi-step process that allows three functions (next, back, cancel), how do we decide the best layout? We now have more than one secondary action.

    I recognize that you could design around this by avoiding the need for BOTH cancel and back functions, but in many cases we need to provide both.

    Thoughts?

    Jeff

  • Pingback: Thiago Colares » Blog Archive » Dicas sobre usabilidade em formulários

  • Pingback: ????????? - ???

  • Pingback: ??? » Blog Archive » web???????

  • Pingback: » Blog Archive » Getting the most out of your forms: A few more thoughts Create Web Forms – FormAssembly.com

  • http://www.design-horloges.nl John Horloges

    Interesting article. Personally I always prefer to put the `ok` button on the left side. It feels the most natural that way. Maybe it has something to do with the fact that we read from left to the right that makes it the most convenient that way.

    This way we don´t have to read the cancel button first, which saves some time. And we all know that time is the essence on a webpage. It´s just a theory however.

    Putting the preferred action in bold is a good tip from you. Keeping it simple for the visitor is key and makes it a little bit easier to choose. Thanks for that tip.

    Greetings, John

  • http://www.fooddietandhealth.com Food diet and health

    I normally do tested against the ones in that article. Unfortunately I have no access to an eye tracking device.

  • Pingback: web??????? « ???Blog

  • Pingback: web??????? - ?????????

  • Pingback: TouchHappy » The use of buttons in web forms

  • Pingback: Usabilidad en formularios: aspectos básicos | uxlumen

  • Pingback: Call-to-Action Best Practices, Examples & Inspiration