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  
   
 

BROWSE GUUUI POSTINGS

 

1

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.

Links:

  • It's not about size, it's about context - radio buttons or drop-downs

Henrik Olsen - October 29, 2005

Permanent link Comments (0)

See also: Tips and guidelines (65) 


 

2

Top Ten Web Design Mistakes 2005

It's time for Jakob Nielsen's Top Ten Web Design Mistakes. In 2005 Jakob has asked his readers about their opinion. Here's the result:

#1 Legibility problems due to small fonts and low contrast
#2 Non-standard links that violate common expectations
#3 Flash with no purpose beyond annoying people
#4 Content that is not written for the web
#5 Bad search
#6 Browser incompatibility
#7 Cumbersome forms
#8 No contact information or other company information
#9 Layouts with fixed width
#10 Photo enlargements that doesn't show the users the details they expect

Links:

  • The article Top Ten Web Design Mistakes of 2005

Henrik Olsen - October 03, 2005

Permanent link Comments (3)

See also: Text (13)  Links (12)  Search (24)  Flash (6)  Browsers (2) 


 

3

Simplifying registration forms

Six tips from Caroline Jarrett on how to make registration forms as easy as possible:

- Explain why you're asking people to register
- Make sure you offer something that users want
- Offer a sample that of what people will get if they register
- Ask as few questions as possible
- Be careful about asking invasive questions
- Don't ask people to register multiple times

Links:

  • Registration Forms - what to do if you can't avoid Them

Henrik Olsen - September 11, 2005 - via Dey Alexander

Permanent link Comments (0)

See also: Tips and guidelines (65) 


 

4

When options are hidden users will pick the first ones

The May 2005 issue of HFI looks at study which has shown that when options in a form element is hidden (e.g. in a drop-down list), people tend to pick one of the first items. Not because people are satisficing, but because it requires less mental workload.

Dr. Eric Schaffer concludes that "If a respondent is picking a known response from a long list (e.g., their state or salutation title), dropdowns may be fine. However, when the respondent is comparing selection options...the behavioral tendency of designers to use dropdowns to save space can be problematic."

Links:

  • The article When what they see is what you get Ė but satisficing isn't enough

Henrik Olsen - June 13, 2005

Permanent link Comments (0)

See also: Research (93) 


 

5

Form layout

Luke Wroblewski explores the pros and cons of vertical and horizontal alignment of form elements and their labels. He also takes a look at how we can separate primary and secondary submit buttons visually in order to minimize the risk for potential errors.

Links:

  • The article Web Application Form Design

Henrik Olsen - January 31, 2005

Permanent link Comments (1)

See also: Tips and guidelines (65)  Web applications (2) 


 

6

Creating friendly forms

In this sample chapter from the book Defensive Design for the Web, Jason Fried and Matthew Linderman offer a set of illustrated guidelines on how to create attractive and functional forms:

- Highlight either required or optional fields
- Accept entries in all common formats
- Provide sample entries, pull-downs, and formatting hints to ensure clean data
- Explicitly state limits to characters, number of entries, and so forth
- If customers can't choose it, don't show it
- Validate entries (as soon as possible).
- Eliminate the Reset button and disable the Submit button after it's clicked
- Assist form dropouts by saving information

Links:

Henrik Olsen - October 04, 2004

Permanent link Comments (0)

See also: Tips and guidelines (65)  Books (32) 


 

7

Checkbox and radio button guidelines

Jakob Nielsen strikes a blow for checkbox and radio button design standards:
- Radio buttons are used for two or more mutually exclusive options
- Checkboxes are used when there the user may select any number of choices
- A stand-alone checkbox is used for a single option
- Use standard visual representation
- Visually present groups of choices as groups
- Use subheads to break up a long list of checkboxes
- Lay out your lists vertical
- Use positive and active wording for checkbox labels (avoid negations such as "Don't send me more email")
- Use radio buttons rather than drop-down menus
- Always offer a default selection for radio button lists
- Make sure that the options are both comprehensive and clearly distinct
- Let users select an option by clicking its label
- Define accesskeys for frequently used checkboxes and radio buttons

Links:

  • The article Checkboxes vs. Radio Buttons

Henrik Olsen - September 27, 2004

Permanent link Comments (0)

See also: Tips and guidelines (65) 


 

8

Choosing form elements

Sarah Miller and Caroline Jarrett present a four-step process for choosing form elements. Here are some of their guidelines:

- Avoid using drop-downs for navigation
- If it is more natural for the user to type the answer rather than select it, use type-in boxes
- If the answers are easily mis-typed, use radio buttons, check boxes, or drop-downs
- If the user needs to review the options to understand the question, donít use drop-downs
- If there are very few options (4 or less), use radio buttons or check boxes - if there are less than 30, use drop-downs
- If the user is allowed to select more than one option, use check boxes
- Keep options visually distinctive or consider a type-in box in preference to a list
- Avoid too many different input methods

Links:

Henrik Olsen - May 09, 2004

Permanent link Comments (0)

See also: Tips and guidelines (65) 


 

9

Usable forms for e-commerce

Since people don't enjoy filling out forms, you should minimize the annoyance by making them easy to use. Andrew Starling form Web Developers has some tips on how to design usable forms at e-commerce sites.

Some highlights:
- Don't ask too many questions and don't collect information that will never be used.
- Don't ask for the same information twice.
- Don't make fields required unless they are in fact required for the transaction
- Add explanations for required fields, where the reason for it isn't obvious.
- When using radio buttons and dropdown boxes, don't forget a "no selection" option, if the selection is optional.
- Long dropdown lists may be clumsy but they make error rates go down for things such as country and date selections
- Don't clear form entries that where perfectly valid when you send an error message.
- Separate required transaction forms from optional customer profiling forms
- Judge your usability success by how many forms are badly filled in

Links:

  • The article Usability and HTML Forms

Henrik Olsen - December 08, 2003

Permanent link Comments (0)

See also: Tips and guidelines (65) 


 

10

Date-entry guidelines

Based on usability tests Travel UCD has reviewed the design for entering dates into hotel booking systems. They suggest 25 date-entry guidelines, of which many would also apply to similar types of sites.

Some highlights:
- Use dropdowns to eliminate date formatting errors
- When selecting dates from a dropdown, combine month and year in one dropdown to reduce the number of items the user has to change
- Reduce the number of times users has to switch between mouse (e.g. dropdowns) and keyboard (e.g. text entry fields)
- Default dates to the current date, unless it's not a valid date entry
- Eliminate the possibility to select a combined month and year, which has already passed
- Error check if a date exists (i.e. not 31st of February)
- Don't abbreviate months (i.e. "August" rather than "Aug")
- Use a calendar popup, but don't depend on it, since many users won't use it
- Show the day of the week corresponding to the selected date to reduce errors

Links:

  • The report Hotel Reservation Websites: Date Entry Analysis

Henrik Olsen - September 17, 2002

Permanent link Comments (0)

See also: Tips and guidelines (65) 


More >>

Browse GUUUI postings

Methods and the design process

Usability testing (30)  Prototyping and wireframing (32)  Cost-justification and ROI (19)  The design process (14)  Personas (13)  Requirement Analysis (12)  Card sorting (8)  Implementing user-centred design (7)  Expert reviews (6)  Web log analysis (7)  Eye-tracking (7)  Site and flow diagramming (4)  Use Cases (3) 

Design elements

Navigation (46)  Web page design (23)  Search (24)  Guidelines and Standards (10)  Links (12)  Text (13)  Forms (11)  Ads (6)  Site design (8)  Shopping Charts (5)  Error handling (5)  Sections (5)  Home pages (2)  Design patterns (4)  E-mails (1)  Personalization (1)  Sitemaps (1)  Print-freindly (1)  Help (2) 

General aspects

E-commerce (21)  Accessibility (11)  Information architecture (12)  Persuasive design (13)  Visual design (14)  Search engines (7)  Credibility, Trust and Privacy (6)  Web applications (2)  Intranets (1) 

Technology

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

Humor

Cartoons (8)  Funny tools and games (10)  Bad designs (7)  Fun with Jakob Nielsen (6)  Designs with humor (3)  Fun music and videos (4)  Fun posters (2)  Funny 404 pages (2)  Misc humor (3) 

Ressource types

Research (93)  Tips and guidelines (65)  Tools (51)  Books (32)  Cases and Examples (12)  Interviews (10)  Primers (9)  GUUUI articles (8)  Posters (5)  Online books (5)  Glossaries (2)  People and organisations (2) 

Information sources

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

 

 
     
  To the front pageSign inTo the frontpageSearch in GUUUI postingsAbout GUUUI