Forms that Work: Designing Web Forms for Usability

Bibliographic Information

Forms that Work: Designing Web Forms for Usability
By: Caroline Jarrett; Gerry Gaffney
Publisher: Morgan Kaufmann
Pub. Date: November 12, 2008
Print ISBN-10: 1-55860-710-2

Summary: Making a form look easy

When users are dealing with the questions and answers, they focus tightly on the fields and labels.

But when they swap to a different task, such as asking “Who are you” or looking for contact details, they snap out of the narrow focus and start looking at the page furniture. Help them by making sure your form is lightly but clearly branded as part of your site.

Lining up forms to a vertical grid makes them look tidy and thoughtfully designed; that increases user confidence in the form.

Forms look easier to handle if the fields are organized into groups. Placement is the easiest, clearest way of showing groups, but lines may undermine grouping.

Once you have established a grouping pattern, don’t break it.

Two-column layouts can create ambiguous reading orders; users can go across horizontally or down vertically. Avoid using two columns.

It’s worth getting the details of your design right, but not worth arguing about them or fussing with them if there is more important work to be done.

If you want a set of details that works easily, then go with these suggestions:

  • End each label with a colon.

  • Use an asterisk as a required field indicator, supplemented by the markup and a short explanation of the indicator at the start of the fields.

  • Choose a legible font such as Verdana, use it at a large size, and make sure that users can easily change the size.

  • Aim for a line length that is long enough to create coherent phrases but short enough to allow easy eye movements back to the start of each line.

  • End each label with a colon.

  • Use sentence cases for labels.

  • Use an asterisk as a required field indicator, supplemented by the markup and a short explanation of the indicator at the start of the fields.

  • Choose a legible font such as Verdana, use it at a large size, and make sure that users can easily change the size.

  • Aim for a line length that is long enough to create coherent phrases but short enough to allow easy eye-movements back to the start of each line.

Summary: Making questions easy to answer

In this chapter, we went through the four steps of answering a question:

  1. Understand the question.

  2. Find the answer.

  3. Judge the answer.

  4. Put the answer on the form.

To make these steps as easy as possible:

  • Ask about concepts that the users are familiar with, using words that they understand.

  • Think about how users find the answer. Should you offer help about where an answer could come from?

  • Think about whether users will want to answer. Is this the right moment in the relationship to ask this question?

  • And think about forcing users into your options. Could you offer an “other” option to cater for the unexpected?

Form, document and questionnaire design in general

Forms design

Barnett, R. B. (2005) Forms for people: Designing forms that people can use ACT. Australia: Robert Barnett and Associates Pty Ltd.

A comprehensive book that comes from Rob’s many years of experience in designing paper forms. The 2005 edition includes many updates for electronic forms.

Wroblewski, L. (2008) Web Form Design: Filling in the Blanks. Brooklyn, New York: Rosenfeld Media

Luke’s excellent short book is practical and full of examples.

Beaumont, A., James, J., Stephens, J., and Ullman, C. (2002) Usable Forms for the Web Birmingham. UK: glasshaus Ltd.

Primarily a book about building forms, and is now a bit out of date. Includes a good chapter on basic usability of forms and an equally good chapter on validations.

Reference books for forms terminology

Barnett, R. B. (1994) The Form Designer’s Quick Reference Guide, 2nd ed. Belconnen. ACT Australia: Robert Barnett and Associates Pty Ltd.

A comprehensive reference arranged alphabetically. Primarily describes paper forms, using plenty of short essays and illustrations. Intended for Australian readers but useful for anyone designing paper forms.

Green, M., Jarvis, B. M., McGarry, D. J., and Gerhard, R. A. (1990) The Business Forms Handbook. Alexandria, VA : National Business Forms Association.

Similar to Rob Barnett’s book but four times the size (and weight). Essential if you are printing thousands of different types of paper forms. For most of us, Barnett’s book is enough.

Document design in general

Zwaga, H. J. G., Boersema, T., and Hoonhout, H. (1999) Visual Information for Everyday Use: Design and Research Perspectives. London: Taylor and Francis.

Interesting collection of essays on information design, including three specifically on forms. Very readable for an academic book, with plenty of bibliography if you want to pursue references.

Schriver, K. A. (1997) Dynamics in Document Design. New York: John Wiley and Sons, Inc.

Fascinating book on document design, with particularly strong chapters on “seeing the text” (typography and use of space) and “the interplay of words and pictures” (how graphics and text interact).

Hartley, J. (1994) Designing Instructional Text, 3rd ed. London: Kogan Page.

Short, clear, and authoritative book on designing “instructional text.” Aimed at teaching materials, but the advice works equally well on any text that is intended to convey information: Now out of print but generally easy to find (and worth the effort).

Questionnaire design

Dillman, D. A. (2007) Mail and Internet Surveys: The Tailored Design Method. New York: John Wiley & Sons Inc.

When you pick up this book, don’t be put off by its somewhat boring appearance and large size. It is packed with straightforward, realistic and helpful advice—backed by top-quality research. The 2007 edition contains interesting extra chapters including an analysis of the infamous 2000 “Butterfly Ballot” that had a pivotal effect in that year’s US Presidential election.

Oppenheim, A. N. (1992) Questionnaire Design, Interviewing and Attitude Measurement. London: Pinter Publishers Ltd.

Another book on questionnaire design that looks unattractive but is full of excellent advice.

Usability and accessibility in general

Books on usability in general

Krug, S. (2005) Don’t Make Me Think: A Common Sense Approach to Web Usability. Indianapolis: New Riders.

Accurate, enjoyable, short—the must-read book on usability for you, your boss and your friends.

Gaffney, G., and Szuc, D. (2006) The Usability Kit: Melbourne. Australia: SitePoint.

Step-by-step kit for designing usable web sites with loads of blueprints offering practical solutions and patterns for blogs, product pages, shopping carts, and sitemaps.

Stone, D., Jarrett, C., Woodroffe, M., and Minocha, S. (2005) User Interface Design and Evaluation. San Francisco: Morgan Kaufmann.

A textbook that is aimed at people who want to learn about user interface design from scratch on their own. Hardly anything in it about forms but the chapters on ‘Persuasion’ are relevant if you are having difficulty in getting your organization to support your usability efforts.

Online materials on usability in general

The authoritative site on usability in general, with particular relevance to government and not-for-profit websites is

www.usability.gov

The Usability Professionals’ Association is developing a Body of Knowledge for usability at:

http://www.usabilitybok.org/

Resources for accessibility

Horton, S. (2005) Access by Design: A Guide to Universal Usability for Web Designers. Indianapolis: New Riders

Readable, clear, short book that explains how designing for people with disabilities helps everyone. Has a useful chapter on markup of forms. Also available as an online book at: universalusability.com

The UK Royal National Institute of Blind People has a good selection of pages on making information accessible:

http://www.rnib.org.uk/xpedio/groups/public/documents/code/public_rnib003460.hcsp

The World Wide Web consortium has a Web Accessibility Initiative. Home page and guidelines are at: http://www.w3.org/WAI/

UK government website about the Disability Discrimination Act and how to comply with it: http://www.direct.gov.uk/en/DisabledPeople/RightsAndObligations/DisabilityRights/DG_4001068

U.S. government website about Section 508, the law that mandates federal government to be accessible: http://www.section508.gov/

The United Nations is working for the rights and dignities of disabled persons: http://www.un.org/disabilities/

Relationship

Finding out about your users and your organization

Gerry Gaffney’s site has downloadable, easy instructions on how to do investigation activities such as contextual inquiry and card sorting.

http://www.infodesign.com.au/usabilityresources

Henry, S. L. (2007). Just Ask: Integrating Accessibility Throughout Design. www.uiAccess.com

Short, clear book that explains how to involve people with disabilities throughout your project, particularly in the early stages. Also available as an online book at http://www.uiaccess.com/JustAsk/

Hackos, J. T., and Redish, J. C. (1998) User and Task Analysis for Interface Design. New York: John Wiley and Sons, Inc.

Although this book is over 10 years old, it is still the best book on why you should do site visits, how to do them, and what to do with your findings. Clear and practical.

Courage, C., and Baxter, K. (2005) Understanding Your Users: A practical guide to user requirements. San Francisco: Morgan Kaufmann Publishers, Inc.

This hefty book (781 pages) is a comprehensive ‘how to’ manual that will take you step by step through a range of ways of finding out about your users and then turning that understanding into specific requirements.

Beyer, H., and Holtzblatt, K. (1998) Contextual Design: Defining Customer-Centred Systems. San Francisco: Morgan Kaufmann Publishers, Inc.

A key resource on finding out about how users do their work. Quite difficult, but definitely worth the effort if you are working on a big project in a complex organization.

Pruitt, J., and Adlin, T. (2006) The Persona Lifecycle: Keeping People in Mind Throughout Product Design. San Francisco: Morgan Kaufmann Publishers, Inc,

If your organization decides to commit to using personas as an ongoing way of understanding and thinking about your users, then you’ll definitely need this large and thorough book.

Designing persuasive systems

Fogg, B. J. (2003) Persuasive Technology: Using Computers to Change What We Think and Do. San Francisco: Morgan Kaufmann Publishers, Inc.

This challenging and thoughtful book draws extensively on work done at Stanford University on web credibility.

Conversation: making questions easy to answer

Questions and answers

Books on survey methodology are good sources of ideas about the design of questions and how people answer questions.

Tourangeau, R., Rips, L. J., and Rasinski, K. (2000) The Psychology of Survey Response. New York: Cambridge University Press.

Written for cognitive psychologists and survey methodologists, and backed by comprehensive references to the relevant research. We found this book helpful in working out our ideas on how users answer questions.

Sudman, S., Bradburn, N. M., and Schwartz, N. (1996) Thinking about Answers: The Application of Cognitive Processes to Survey Methodology. San Francisco: Jossey-Bass Publishers.

Not the easiest book to read, but worth the effort if it is important for you to get accurate answers to questionnaires.

Tanur, J. M. (Ed.) (1992) Questions about Questions: Inquiries into the Cognitive Bases of Surveys. New York: Russell Sage Foundation.

A convenient collection of chapters about research on questions. We particularly like the chapter by Suchman and Jordan, which describes in detail some horrible mismatches of questions being asked and questions being answered.

Choosing controls and other interface elements

Tidwell, J. (2006) Designing Interfaces: Patterns for Effective Interaction Design. Sebastopol, California: O’Reilly

Looks at a whole range of different patterns: the basic set of controls that we discuss in this book, and many other more complex ones. Has a good chapter on forms design.

Johnson, J. (2007) GUI Bloopers 2.0: Common User Interface Design Don’ts and Dos. San Francisco: Morgan Kaufmann Publishers.

Jeff Johnson has updated his popular book that is full of practical advice put across in a fun way.

Johnson, J. (2003) Web Bloopers: 60 Common Web Design Mistakes and How to Avoid Them. San Francisco: Morgan Kaufmann Publishers.

Similar to GUI Bloopers, but focusing on the web.

37 signals (2004) Defensive Design for the Web: How to Improve Error Messages, Help, Forms, and Other Crisis Points. Indianapolis: New Riders.

Short book with plentiful examples and practical tips.

Writing instructions

Redish, J. (Ginny) (2007) Letting Go of the Words: Writing Web Content that Works. San Francisco: Morgan Kaufmann Publishers.

Wonderful book on how to structure content-rich web sites, and how to write for them. Beautifully written, very practical. If you only buy one book, make it this one.

Cutts, M. (1995) The Plain English Guide. Oxford: Oxford University Press.

Small, thorough, and clear book on writing Plain English. Includes a short section on forms.

Gentle, R. (2002) Business Writing That Works. London: Pearson Education.

A crisp set of guidelines on writing well, illustrated with before- and after- examples. Even shorter versions are available as training materials from: http://www.plainwriting.co.za/Training_material.htm

Readability tests

Balanced assessment of the value of readability tests:

http://www.plainlanguagenetwork.org/stephens/index.html

Please note: These tests have some value for continuous prose, as you will see if you read this article. However, they are almost completely useless for forms and questionnaires. The reason we say “almost completely useless” rather than “completely useless” is that if the text of your form gives a poor score on a readability test, then you definitely have a problem. However, getting a good score tells you nothing.

Appearance

Lupton, E. (2004) Thinking with type: A Critical Guide for Designers, Writers, Editors & Students. New York: Princeton Architectural Press.

Beautiful short book. A superb introduction to the subtleties of typography.

Spiekermann, E., and Ginger, E. M. (1993) Stop Stealing Sheep & Find Out How Type Works. Mountain View, California: Adobe Press.

Easy, interesting book on typography. Font-led, paper-oriented. Good for advice on choosing style of font and legibility. The book’s form example has ambiguous prompted underlines, so don’t copy it.

Williams, R. (1994) The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice. Berkely, California: Peachpit Press.

A short book that helps the non-designer to get a feel for design; includes quizzes and exercises for you to try.

Elam, K. (2004) Grid Systems: Principles of Organizing Type. New York: Princeton Architectural Press.

Another engaging book in the Princton Architectual Press series. This one deals with designing to a grid.

Ware, C. (2000) Information Visualization: Perception for Design. San Francisco: Morgan Kaufmann Publishers.

Interesting chapter on color within scientific but readable textbook on visualization and perception.

Usability Testing

Dumas, J. S., and Redish, J. C. (1999) A Practical Guide to Usability Testing. Portland, Oregon: Intellect Books.

Dumas and Redish is the standard text on usability testing. Practical, easy to read, easy to follow.

Rubin, J., and Chisnell, D. (2007) Handbook of Usability Testing: How to Plan, Design and Conduct Effective Tests. New York: John Wiley & Sons, Inc.

A comprehensive, clear, and down-to-earth handbook of usability testing. Recently updated and issued in a new edition.

Snyder, C. (2007) Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces. San Francisco: Morgan Kaufmann Publishers.

Thorough and practical book on how to create and test paper protoypes.

Barnum, C. M. (2002) Usability Testing and Research. New York: Longman.

Barnum’s book sets usability testing in context and then takes you through planning, conducting, and reporting on a test. She uses a running example of a web usability test conducted by her students at Southern Polytechnic State University, so it is easy to see how to apply the techniques.

Professional associations

Society for Technical Communication (STC)

http://www.stc.org

For technical communicators. Has a strong usability and user experience special interest group and an excellent, very readable but authoritative journal that frequently contains articles on usability and information design.

Usability Professionals’ Association (UPA)

http://www.usabilityprofessionals.org

For usability practitioners and people interested in usability as part of their work.

Business Forms Management Association (BFMA)

http://www.bfma.org

Originally for people who manage forms, but increasingly also of interest if you design forms. Essential if you are trying to control a large number of forms.

Print Services & Distribution Association (PSDA)

http://www.psda.org/

Formerly the Document Management Industries Association (DMIA). PSDA is the resource if you need to learn about the manufacture of paper forms. Look in the “Education” section, then “Catalog” for their books and other resources. For example, this is where to come if you need to learn about printing multipart forms with tear-off sections.

Clarity

http://www.clarity-international.net

The lawyers’ association for plain language, also open to non-lawyers. Publishes an interesting journal and has remarkably low dues.