Tuesday, September 4th, 2007

Primary & Secondary Actions in Web Forms

Category: Usability

Luke Wroblewski has been doing some research for his new book and took a look at some eye-tracking and usability studies to do with web form design.

He wrote up his findings in Primary & Secondary Actions in Web Forms, where he discusses alignment, differentiating paths, and placement of various pieces of the form layout:

While the primary goal of most Web form designs is to get people through a form as quickly and painlessly as possible, there are situations where slowing people down is advisable. When choosing between primary and secondary actions, visual distinctions are a useful method for helping people make good choices.

Should this distinction be more prominent like the button vs. link in Option A or a bit more subtle like the two different colored buttons in Option C? Option A fared a bit better in time to completion, average number of fixations, and average total length of fixations indicating people completed the form faster but not by much.

The need for these distinctions becomes moot, of course, when no secondary actions are present. Make sure you really need each secondary action on a form and don’t add them indiscriminately.

Conversely, the alignment of actions with a form’s input elements provides a clear path to completion that helps people complete forms faster. Be conscious of where you place form actions as primary actions directly aligned with input fields tend to increase completion rates and the less time people have to spend on your forms, the happier they will be.

Posted by Dion Almaer at 9:24 am
13 Comments

+++--
3.8 rating from 33 votes

13 Comments »

Comments feed TrackBack URI

Very interesting topic. When we designed our software, our designer went through similar case studies, wish we had this discussions back then.

Comment by Liming — September 4, 2007

What if someone actually wanted to “cancel” in design A. Would they be more likely to click the link or hit their browser’s back button? Maybe that’s why design A is so good. Because the user begins to see in buttons and completely ignores links, making the link useless, which means the user really only has to deal with 1 action.

Comment by em_te — September 4, 2007

Yes – it would have been interesting to just remove the “Cancel” button/link altogether and see how users reacted.

Comment by Jim — September 4, 2007

Luke’s article and study looks very impressive, with lots of fancy graphics and ‘fixations’ and heat maps. But if you read it closely, the empirical evidence contradicts the claim he puts forth.

He claims

…the best practice I’ve advocated has been to visually distinguish primary and secondary actions … Reducing the visual prominence of secondary actions minimizes the risk for potential errors and further directs people toward a successful outcome.

But from the data they collected, they concluded:

Option B performed best of all. Fixations were shorter and fewer in number when using this design. And people were also able to complete the task more quickly and efficiently than they did when using the others.

What was Option B? The one where the secondary action had, in fact, just as much weight as the primary action (same button style, left justified).

Comment by dwhsix — September 4, 2007

It would be interesting to see if right alignment would have equal success if the buttons were reversed in order.

Comment by bmiedlar — September 4, 2007

@dwhsix: Not a contradiction really. Option B was the quickest from start to finish. This is because users just presumed the placement of the buttons at the bottom, automatically clicking on the left, ignoring the right. This is backed up by the failure in option E where the buttons are reversed.

As option A and C had a different visual element (cancel), the user had to slow down to understand the function of this rogue visual element. As such, these designs help ensure that the user clicks the correct button.

So, B is quicker but A and C are more accurate. This is what Luke is getting at.

Comment by Ian — September 4, 2007

From a usability standpoint – I think it is best to not use buttons that say Cancel / Clear / Reset … etc. These types of buttons are rarely intentionally used, and are more likely to be accidentaly clicked in place of the Submit button.

Comment by Will Peavy — September 4, 2007

I see it’s fashionable at the moment to use plain links for cancel, or secondry actions – ala facebook, basecamp. but why are these secondary anyway? The actions themselves are pretty black and white

Comment by Justin L — September 5, 2007

I don’t think the test is thought out well. This is why:

– Users are used to recognise grayed UI elements as “not available”. Using gray is wrong. A lighter color would be better, maybe.

– Tests with images are missing completly. Placing e.g. a “Arrow to the Right” icon next to “Submit” (but inside the button) makes the button intuitively primary, in my opion.

Comment by Searle — September 5, 2007

My first reaction is that the buttons’ order should be swapped. Cancel -> Esc, Submit -> Return
Then again, I kinda agree that the Cancel button prob shouldn’t even be there.

Comment by Sensei Loco — September 5, 2007

The requirement for “Cancel” is entirely dependant on the type of application. We’re not really privy to the user flow in this study with only this one page being used. You would have to give the users an indirect reason to utilize the “Cancel” button to be able to /fully/ assess the usability, but one a simple sign-up page such as this 99% of all web users would simply click their browser’s back button; “Cancel” only comes into play in the midst of a multi-step flow.

Anyway, I thought the differences in alignment were telling although somewhat predictable.

Comment by Barnaby Claydon — September 5, 2007

Where was this post last week when I was desperately searching the web for information like this to help me out with a current project? ;-)

Comment by Richard Davies — September 6, 2007

Neat article, but as for the examples I’d agree with em_te. Get rid of the “cancel” button altogether as in 99% of all cases it is not needed. Simply because everyone else does it, does not mean you have to do so also, something that struck me a while ago.
Consequently I redesigned a few froms and projects, reducing the number of buttons, which may have been redundant or missleading.
When it comes to usability, less often is more.

Comment by tommy australien — November 1, 2007

Leave a comment

You must be logged in to post a comment.