"Reaction [beta]"
Primary and secondary actions in web forms 28 Aug 2007
As readers of our newsletter will already know, over the last couple of months, we've been working on a rather exciting project with Luke Wroblewski. (Luke is Senior Principal of Product Ideation and Design at Yahoo! and author of best-selling usability book "Site-Seeing: A Visual Approach to Web Usability").
Luke is currently in the process of writing a book for Rosenfeld Media called "Web Form Design Best Practices", which will present a series of actionable design recommendations based upon actual user testing data. To this end, we've been lending a hand by conducting several eye-tracking and usability studies focused on specific aspects of web form design. Luke has just published the results of one of these tests on his blog in an article called "Primary & Secondary Actions in Web Forms". Go take a look - some of the findings are pretty counterintuitive!
(More of our eye-tracking and usability research will be made available exclusively in "Web Form Design Best Practices", available January 2008).
Next article: "Multi-touch systems that I have known and loved"
Previous article: In India, chaos sells
Bookmark this page
Trackbacks
To create a TrackBack to this entry simply append ping/ to the permalink URL for this page.
5 comments so far
SEO 29 Aug 2007 08:12 AM
I actually found the study quite interesting, from a user standpoint i totally "hate" forms so anything to simplify the task is a blessing. It also make me more aware when creating forms on the best practices, such as the alignment of the path to completion.
Speaking of that, in the first short form labelled from A to F i wonder how a format like this would of fared:
--------------------------------------------
Post Code | Country | Submit
--------------------------------------------
cancel
Because the first two actions are left to right (and we read left to right) it would seem natural the third action continued along the horizontal path to completion. This option wasn't included.
My other pet hate with forms is, entering an incorrect field such as captcha causes the form to reload wiping some or all your data.
But thanks for that, it will get me thinking in future instead of "tossing a form together".
Ahh that reminds me, while we are on Forms can Etre's be made to remember the users data?
Carly, :)
Simon 29 Aug 2007 10:37 AM
Carly: Thanks for your comment.
The "short forms labelled A to F" that we tested were actually long forms. That is, in addition to containing the "post code" and "country" fields, they also contaned "first name", "last name", "address" and "country" fields above. These additional fields have been cropped from Luke's illustration to focus readers on the placement of the buttons below (but do appear in the first illustration in the article). Nontheless, we really like your proposed layout and would be interested to see how it performs in testing.
The "form reloading / data loss issue" you mention is a real problem. This happens on my bank's website - usually just after I've typed in my six digit sort code and eight digit account number (Grr!).
As for Etre's forms - great suggestion. We're currently in the process of redesigning our site, so stay tuned!
SEO 30 Aug 2007 11:11 AM
Ahh Gotcha, i understand now. At first i though the first A-F were just short forms. In that case i don't think my suggestion would fare so well, when looking at the heatmap the submit button would be well outside the vertical line to completion. Actually it would be the furtherest action from the left side of the page.
I was half asleep, i usually browse a couple of cool sites like Etre at the end of the day to wind down and was totally beat yesterday.
Another good idea to prevent data loss by incorrectly clicking the cancel button, is a pop-up with further confirmation saying "Are you sure you want to clear all data from the form" which would require a further action (Yes/No) to wipe the form.
This doesn't impact people correctly filling & submitting the form but provides a safeguard to data loss by performing an incorrect action. The longer the form and the more data filled the more this would be beneficial.
Another thing i find beneficial, especially with longer forms or where data accuracy is critical such as say a loan application or funds transfer is, when the Submit action is done it actually loads a page with a preview of how the form will look when sent.
This removes all the distractions of the form elements such as buttons, drop-downs, radio buttons etc and presents the form data "As Is" so it's easy to review it's accuracy then has the further actions of "All Good Submit" or "Uh oh Make Changes".
Nothing worse then the sinking feeling of hitting Submit and wondering if your wrote $1,000 or $10,000 by mistake.
A redesign for Etre, ohh but is the monkey staying? He's pretty cool :-D
BTW in response to your new article on this, i Dugg it yesterday as well.
Carly,
Rosalinda 7 Oct 2011 03:40 AM
Your answer was just what I ndeeed. It's made my day!
buy cheap oem software online 16 Jan 2012 05:30 AM
C1wUj9 comment5