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

Permanent link Comments (2)

See also: Research (129) 



How to display comprehensive helps texts in forms

Sometimes forms are so complex that it's necessary to provide extensive help. In such cases, the text needed to explain how to fill it out can become overwhelming.

Luke Wroblewski has looked around the web to find ways to design dynamic contextual help. In his article, he shows examples of both user-activated and automatically triggered help.


  • Dynamic Help in Web Forms Open link in new window

Henrik Olsen - May 24, 2007

Permanent link Comments (0)

See also: Help (3) 



Guidelines for using links vs. buttons

According to Jakob Nielsen, links and buttons have different uses:

- Links are for navigation. They are used to move between pages in an information space.
- Buttons are for actions that cause some chance (e.g. adding a product to shopping cart).

But there are exceptions to the rules:

- Buttons can be used to move from page to page in a workflow process (e.g. "continue shopping" and "proceed to checkout")
- Links can be used for secondary actions with minor consequences.

The so called "command links" have the benefit that we can write longer command names and thus make them more descriptive. To reduce confusion, the link text should explicitly state that it leads to an action by making the first word of the link an imperative verb.

Another benefit to command links is that we can add explanatory text below the link. The text can be presented in a smaller typeface to emphasize its secondary nature.


  • Command Links Open link in new window

Henrik Olsen - May 16, 2007

Permanent link Comments (2)

See also: Guidelines and Standards (15)  Links (19)  Navigation (63) 



Instructions in form design

According to Mike Hughes, putting instructional text in the beginning of a form doesn't work. People prefer doing over reading. Our attention is easily drawn to action objects, such as text fields and buttons, causing us leapfrog over instructions.

Mike Hughes gives the following recommendations:
- Divide dense instructions up for individual action objects
- Put the appropriate instructions in close proximity to their respective action objects
- Place the instructional text next to the corresponding action object-preferably, in the downstream direction, to the right or just below it
- If the instructional text is too long, provide a link that dynamically displays a pop-up or pane when a user clicks it.


  • Instructional Text in the User Interface: Some Counterintuitive Implications of User Behaviors Open link in new window

Henrik Olsen - March 12, 2007

Permanent link Comments (3)

See also: Text (24) 



How to design selection-dependent forms

In web applications, we sometimes need selection-dependent forms, where users need to provide additional information after having made a selection. There is a myriad of ways to solve this design challenge. Luke Wroblewski provides an overview and discusses their pros and cons.


  • Selection-Dependent Inputs Open link in new window

Henrik Olsen - March 06, 2007

Permanent link Comments (1)

See also: Tips and guidelines (95) 



Use character counters with input fields

According to Robert Hoekman, input fields with a fixed character limit should communicate this limit to users. He shows how to do this with decrementing character counters telling the user how many characters can still be entered.


  • Design Stories: Character counters Open link in new window

Henrik Olsen - December 18, 2006 - via Usability In The News

Permanent link Comments (0)

See also: Tips and guidelines (95) 



Label placement in forms

Matteo Penzo has conducted an eyetracking study to evaluate the best solutions for label placement in forms. A number of suggested guidelines arose from their test results:

- Place labels above input fields so that users aren't forced to look separately at the label and the input field
- Be careful to visually separate labels from the previous input field
- If you choose to place labels to the left of input fields, make them right-aligned
- Don't use bold labels - they are a bit more difficult for users to read than plain text
- Use drop-down list with care since they are very eye-catching


  • The article Label Placement in Forms Open link in new window

Henrik Olsen - November 12, 2006

Permanent link Comments (1)

See also: Research (129)  Eye-tracking (14)  Tips and guidelines (95) 



Guidelines for usable online flight booking services

The usability firm Webcredible has published 10 guidelines to help online travel companies to improve their online flight booking process:

1. Provide a clearly-labeled first step of the booking process on the home page
2. Provide a calendar
3. Help users find the cheapest flight by encouraging them to be flexible with their dates
4. Promote your cheapest fares and explain how to get them
5. Use a map to show where you fly to/from
6. Provide details on how to get to airports
7. Display prices in different currencies
8. Show the price in full as soon as possible
9. Make it easy to look for another flight
10. Make pages print-friendly

The guideless are based on a study of 25 of UK's biggest online agencies. Some of the guidelines are also relevant and transferable to other online booking services.


  • Download the guidelines at Webcredible Open link in new window

Henrik Olsen - October 01, 2006 - via Putting People First

Permanent link Comments (0)

See also: Guidelines and Standards (15) 



How to make users abandon forms

5 ways to make sure that users abandon your forms:
- Ask for information the user doesn't have at their finger tips
- Ask for a lot of information, but don't tell why you need it
- Force users to input data according to how the system wants it
- Provide cryptic error messages that tell users to correct their mistakes, but give no information about what they did wrong
- Split forms up into many segments, but don't give any indication of where users are in the process

I you follow these rules, be sure to overstaff your call center. You're going to need the extra help.


  • 5 Ways To Make Sure That Users Abandon Your Forms Open link in new window

Henrik Olsen - April 01, 2006

Permanent link Comments (0)

See also: Tips and guidelines (95) 



Drop-downs or radio buttons

Dissatisfied with guidelines from the old GUI days that tell us to use drop-downs for long lists and radio buttons for short ones, Donna Maurer has done some thinking herself:

- When users are unfamiliar with the items in a list, radio buttons can assist them by communicating the domain at a glance
- On forms that will be used frequently, radio buttons are far easier and faster because they don't have to be opened and are easier to take in a glance
- When designing for the web screen real estate isn't an issue because of "the magic gadget called a scroll bar."
- Since frequent users become familiar with placement of items on a screen, the spatial placement of radio buttons can help them fill them in quickly
- Experienced users might prefer drop-down list that allow them type the first letter to get to the target item

Donna concludes that it all depends on user context, not on size.


  • It's not about size, it's about context - radio buttons or drop-downs Open link in new window

Henrik Olsen - October 29, 2005

Permanent link Comments (0)

See also: Tips and guidelines (95) 


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