ifacethoughts

Designing Forms

A form, in many ways, is a critical interface of a Web application, rather any application. They still end up as frustration points for the user as well as the developer. Validations are popular, but there are some aspects which I have not read in many places. Here are some observations:

  • it is an entry point through which users can add/modify information to the application
  • it is a point of engagement, heavy on interaction and contributes a lion’s share to usability of the web site
  • it is a defining point for what information you would like to request from the user and what you would like to give back
  • some pieces of this information can be dependent on other pieces
  • sometimes forms also represent a data model and perceptions that the user has in mind
  • it can be part of a bigger workflow and has to present the entire context.

Designing forms is not easy, all these points mean that we have to look at many aspects – data integrity and validations, interaction design, usability, information design and user’s perceptions. The core of this is sound interaction design.

Information

It is extremely important to exactly know what information to ask for from the user. The moment you ask something that the user might not know, can lead to abortion of the activity. Here are some points:

  • know what to ask
  • identify priorities for pieces of information and try to align them with the user’s priorities
  • identify dependent inputs
  • decide on lengths of information
  • identify required and optional information
  • try to identify groups of information pieces and name them
  • identify various user groups and their specific information
  • identify default values wherever possible

Design

The form’s design should be intuitive and play along with cognitive thinking of the user. Again, some thoughts:

  • visually mark the required or optional fields
  • group pieces of information into logical groups, of course logical according to the user
  • if possible, avoid or minimize the optional information
  • represent related content
  • provide the correct default values wherever possible, wrong default values will only add to the frustration
  • provide help wherever it is difficult to eliminate ambiguity
  • visually differentiate between primary and secondary actions
  • provide response to the user about success or failure
  • be absolutely clear in your error messages, especially so if they are about multiple inputs
  • do not load the user with obscure technical messages when expected errors happen.

While this post was sitting as an unformatted draft, two new excellent resources on form design are available. Afshan Kirmani elaborates on affordance, orientation and chunking to get the form structure right. Luke Wroblewski provides a valuable resource for understanding best practices of form design through his presentation. Excellent resources!

Discussion [Participate or Link]

  1. beth said:

    I don’t know if you caught Luke’s AEA presentation or not, but he has a book coming out on form best practices. I’m very much looking forward to it!

  2. Abhijit Nadgouda said:

    Beth, yes I think it will become one of the essential books.

Say your thought!

If you want to use HTML you can use these tags: <a>, <em>, <strong>, <abbr>, <code>, <blockquote>. Closing the tags will be appreciated as this site uses valid XHTML.

freshthoughts

contactme

Abhijit Nadgouda
iface Consulting
India
+91 9819820312
My bookmarks

badgesand...

This is the weblog of Abhijit Nadgouda where he writes down his thoughts on software development and related topics. You are invited to subscribe to the feed to stay updated or check out more subscription options. Or you can choose to browse by one of the topics.