Tuesday, September 4th, 2007
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