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

 

21

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 Open link in new window

Henrik Olsen - October 03, 2005

Permanent link Comments (3)

See also: Text (24)  Links (19)  Search (27)  Flash (6)  Browsers (3) 


 

22

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 Open link in new window

Henrik Olsen - September 11, 2005 - via Dey Alexander

Permanent link Comments (0)

See also: Tips and guidelines (95) 


 

23

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  Open link in new window

Henrik Olsen - June 13, 2005

Permanent link Comments (0)

See also: Research (129) 


 

24

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 Open link in new window

Henrik Olsen - January 31, 2005

Permanent link Comments (1)

See also: Tips and guidelines (95) 


 

25

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: Books (47)  Tips and guidelines (95) 


 

26

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 Open link in new window

Henrik Olsen - September 27, 2004

Permanent link Comments (0)

See also: Tips and guidelines (95) 


 

27

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

Links:

Henrik Olsen - May 09, 2004

Permanent link Comments (0)

See also: Tips and guidelines (95) 


 

28

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 Open link in new window

Henrik Olsen - December 08, 2003

Permanent link Comments (0)

See also: Tips and guidelines (95) 


 

29

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 Open link in new window

Henrik Olsen - September 17, 2002

Permanent link Comments (0)

See also: Tips and guidelines (95) 


 

30

Using web forms wisely

Jodi Bollaert from IBM gives us a lesson in using form elements wisely. Some important things to remember:

- Give clues to what are acceptable inputs and how it should be formatted when you use text boxes.
- Don't make input boxes to small.
- Sometimes it's easier for the user to simply enter text than select from a dropdown.
- The fastest and easiest method to enter dates is to allow users to enter numbers in clearly labelled fields for month, day, and yeas.
- Radio buttons should always include a default selection.
- End labels with a colon.
- Don't put your labels inside text boxes.
- Do not use reset buttons.
- Place form elements in the same general location throughout the site.

Links:

  • The article Using Web widgets wisely Open link in new window

Henrik Olsen - August 09, 2002

Permanent link Comments (0)

See also: Tips and guidelines (95) 


 
<< Back | More posts >>

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) 

Technology

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

Humour

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