What makes a good form?

Question

I've recently been given the challenge to create a preferably 'fun and engaging'-form, consisting of about 40-50 fields. The form consists of four parts, Employee-contact-info, Employment-description, Competency, and Experience.

I suspect the 'fun and engaging'-bit can be dropped, but how can I make the form as painless as possible to fill in?

I have no prior experience with designing for good user experience, so any thoughts or resources on how to tackle this kind of challenge is appreciated.

I've already found this describing some methods to make forms as good as possible.

Answer 1

A good place to start is Luke Wroblewski and his various writings on form design

eg http://www.lukew.com/presos/preso.asp?22

But to add: From my experience building hundreds of forms, I can recommend the following:

1. Minimise the number of fields in the system. This might require a bit of to and fro between you and the business analyst + a little bit extra user research but you'll be amazed at how many superfluous fields there might be.
2. Clear path to completion: arrange fields and field descriptions in a way that the eye is led down the screen to the call to action buttons.
3. If there are compulsory fields mark them clearly.
4. Validate fields as the user types not after submit; offer in-line instructions
5. If you have a stack of fields, either tab them into discrete sections (like you indicate) or walk the user through a sequence of pages to final completion. edit: tabs won't work for sequential information or when there is compulsory information in each tab. It is a good approach, I have found, for containing different types of content in a system that the user updates or uses over a period of time.

6. Progressive disclosure. I allude to this is in 5). This is a way of avoiding cognitive burden or information overload. Put simply, present information in a series of simple steps instead of one big whole.

7. Break up longer forms into visually distinct regions. This allows you to group slightly different field sets together and will help the user build a mental model of the system, it is also a way of giving the impression that the system is less burdensome than it really is (again, this could be argued to be a type of progressive disclosure).

Answer 2

A long form needs to reduce the amount of noise as much as possible so as not to intimidate the user.

There are many many ways to present a long form and it's a combination of a huge number of little details that makes the overall effect better for the user. For example, the Google Mail Create Account form for GMail is just a disaster area: bad alignment, inconsistent, wordy, dull and unfriendly looking - and yet Google Blogger Create Account form is miles better in most respects (but still not perfect).

Luke Wroblewski has many many good tips and best practices of web form design and lists them in summarised sections at the end of each chapter in his excellent book Web Form Design - but he also has a PDF online resource of best practices for Web Form Design which is also well worth reading thoroughly. Although the book has quite a few more, I quote the PDF's bullet point best practices below for quick reference, but please do see the original PDF for full details.

• Take the time to evaluate every question you ask
• Ensure your forms speak with one voice
• Strive for succinctness
• If a form naturally breaks down into a few short topics, use a single Web page
• When a form contains a large number of questions that are only related by a few topics, try multiple Web pages
• When a form contains a large number of questions related to a single topic, one long Web page
• Use relevant content groupings to organize forms
• Use the minimum amount of visual elements necessary to communicate useful relationships
• Titles of forms should match people’s goals
• Illuminate a clear path to completion

• Use progress indicators to communicate scope, status, and position

• Use more general progress indicators for forms with variable sequences

• Remember to account for tabbing behavior
• Use the tabindex attribute to control tabbing (not at expense of ordering)
• Consider tabbing expectations when laying out forms
• For reduced completion times & familiar data input: top aligned
• When vertical screen space is a constraint: right aligned
• For unfamiliar, or advanced data entry: left aligned
• When possible, use field length as an affordance
• Otherwise consider a consistent length that provides enough room for inputs
• Try to avoid optional fields
• If most fields are required: indicate optional fields
• If most fields are optional: indicate required fields
• Text is best, but * often works for required fields
• Associate indicators with labels
• When there’s more than one way to format an answer correctly, use a flexible input
• Ensure flexible inputs don’t make providing easy answers harder
• Avoid secondary actions if possible
• Otherwise, ensure a clear visual distinction between primary & secondary actions
• Align primary actions with input fields for a clear path to completion
• Provide indication of tasks in progress
• Disable “submit” button after user clicks it to avoid duplicate submissions
• Minimize the amount of help & tips required to fill out a form
• Help visible and adjacent to a data request is most useful
• When lots of unfamiliar data is being requested, consider using a dynamic help system
• Clearly communicate an error has occurred: top placement, visual contrast
• Provide actionable remedies to correct errors
• Associate responsible fields with primary error message
• “Double” the visual language where errors have occurred
• Clearly communicate a data submission has been successful
• Provide feedback in context of data submitted
• Use inline validation for inputs that have potentially high error rates
• Use suggested inputs to disambiguate
• Communicate limits
• Look for opportunities to remove unnecessary inputs
• Do not complicate questions for the sake of removing inputs
• Default selections are likely to stay, ensure they align with goals
• Personal defaults allow return users to complete forms faster
• Map additional inputs to prioritized user needs
• Most effective when user-initiated
• Avoid excessive page jumping
• Provide ways out
• Maintain a consistent approach
• If lots of dependent inputs, use page-level
• Vertical & horizontal tabs perform well but have mutual exclusivity issues
• Long list of initial inputs, few dependent inputs for each, use drop-down menu
• Short list of initial options & few dependents, exposed inline
• Maintain clear relationship between initial selection options
• Clearly associate additional inputs with their trigger
• Avoid “jumping” that disassociates initial selection options
• Try to avoid sign-up forms
• Allow people to engage
• If you auto-generate accounts, ensure there is clear way to access it
• Do not simply distribute the various input fields in a sign-up form across multiple pages

Answer 3

"'fun and engaging'-form, consisting of about 40-50 fields" - that is a problem to start with. I doubt that it can be done.

Firstly, split it up. Divide it into sections, but make it clear how much there is of it.

Secondly, look at the information you are collecting, and see if you can reduce the number of fields to enter - maybe making some optional.

Thirdly, consider what you can do to keep the users attention. As Nikita suggested, interesting facts, or some clear indication of how far through, or comments about how sorry you are that there are so many fields, but just a few more.

Fourthly, save everything, and allow people to come back to it and finish the job. Remember that most people DO NOT want to fill out this form. SO you have to make it as simple as possible for them.

Answer 4

Some general thoughts:

1. Such a long form should never, ever, lose data user put into it. It mean autosave all way through every page, even before he click “next”.
2. Give your users sense of progress (“You already completed 60% of the test. 15 more minutes to go!”). Reward them somehow when they complete a big stage (tell a joke, for example).
3. Give them ability to come back and correct their answers at any time. Even after completion you could give them 15-minutes window to fix what they want to fix.
4. Ask only if you really, really, really cannot live without this data. Every additional field means N% less users will finish your survey.
5. Provide examples of what you expect the user to write (avoid general “comment” fields, it will be confusing and results for you will be a mess, explain what you expect).
6. To make it fun, you could add some funny facts at margins, maybe statistical data (“60% select yes”, “women usually answer no this question”, etc) or historical fact corresponding to question.

Answer 5

Making a web-form fun is going to be hard. I know Luke Wroblewski has already been mentioned, but I'd especially suggest checking out the article on Mad-Lib style forms. That's about as close to fun as you are likely to get with a form.

Answer 6

If you're using multiple webpages - let the user look through them first - without forcing them to complete the first page before you will show them the second page.

Otherwise users will fill the first page with garbage data - so that they can get to see the second page.

Answer 7

There was a recent blog bost (September 13, 2011) about the redesign of the Target checkout form that highlighted a lot of interesting things they're doing. Several good takeaways there to get you going.