To the front pageThe Interaction Designer's Coffee Break - Weekly postings and quarterly articles about interaction design  
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI  

How to render primary and secondary buttons in forms

In an eye-tracking study, Luke Wroblewski has looked at how users experience primary and secondary buttons (e.g. Submit and Cancel) in forms.

He found that creating visual distinction between primary and secondary buttons help people make good choices. An effective way to do this is to present secondary buttons as links. He also found that positioning the buttons to the left, in alignment with the input fields, increases completion times.


  • Primary & Secondary Actions in Web Forms Open link in new window

Henrik Olsen - September 07, 2007

See also: Forms (30)  Research (129) 



It raises as many questions as it provides answers. Left aligned seems clearly preferable to right alignment or split left-right (with Cancel at left), but the other conclusions are a bit more mysterious...

"B: Fixations" suggests there are NO eye fixations whatsoever on the Cancel button when it is as prominent as the Submit button. Is this really the pattern observed in everyone who used this version?

"C: Fixations" is said to perform worse, yet all the extra eye fixations are on the form elements that are IDENTICAL to those on B, before even reaching the buttons, which makes no sense to me at all.

Zephyr | September 07, 2007


Well ... I definately missed a test like E, but with the Submit on the left ... I strongly suspect, that it would have made a lot more sense to most people.

I think (I HOPE) anyone who's ever built a form with cancel as the first button, knows not to do that. And my personal theory is, that if you move the cancel-button out of the way (say, on the right hand side of the screen), noone clicks it by accident, noone has any trouble finding the submit button, and on the (very) rare occations when people need the cancel-button, they have no problem finding that either?

Discuss ... ;o)

Tom Vonsild Jensen | September 10, 2007



Ad for TechSmith Morae

Browse GUUUI postings

Methods and the design process

Prototyping and wireframing (119)  Usability testing (68)  Cost-justification and ROI (27)  User research (23)  Personas (19)  The design process (24)  Eye-tracking (14)  Card sorting (13)  Web traffic analysis (12)  Expert reviews (11)  Implementing user-centred design (9)  Site and flow diagramming (6)  Envisionments (4)  Use Cases (3) 

Design elements

Navigation (63)  Web page design (40)  Search (27)  Text (24)  Forms (30)  Links (19)  Guidelines and Standards (15)  Site design (14)  Ads (9)  Design patterns (8)  Sections (8)  Shopping Carts (9)  Error handling (7)  Home pages (9)  Help (3)  E-mails (3)  Sitemaps (2)  Personalization (1)  Print-friendly (1)  Landing pages (5) 

General aspects

E-commerce (27)  Persuasive design (21)  Visual design (19)  Information architecture (15)  Accessibility (13)  Search engines (7)  Credibility, Trust and Privacy (6)  Emotional design (10)  Simplicity vs. capability (7)  Web applications (6)  Intranets (3) 


Flash (6)  Download time (5)  Javascript (3)  URLs (3)  Browsers (3)  Web standards (2) 


Bad designs (20)  Cartoons (14)  Fun music and videos (13)  Funny tools and games (12)  Misc humor (8)  Fun with Jakob Nielsen (9)  Designs with humor (3)  Fun posters (5)  Funny 404 pages (2) 

Resource types

Research (129)  Tips and guidelines (95)  Tools (106)  Books (47)  Audio and video (48)  Interviews (30)  Cases and Examples (28)  Talks and presentations (18)  GUUUI articles (11)  Primers (14)  Online books (5)  Posters (5)  Glossaries (3)  People and organisations (3) 

Information sources

Blogs (12)  Websites (11)  Discussion lists (4)  News (3)  Newsletters (3)  Online magazines (3)  Wikis (1) 

  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI