Well-Designed Forms from Bad Design to Accessible

Session Summary:

This class combines design concepts and basic HTML coding of forms.

Description:

This class combines design concepts and basic HTML coding of forms. Starting with real life examples of forms, we will discuss what to consider and learn how to improve the usability of HTML web forms. HTML Form Concepts Basic and general HTML form concepts are covered at the beginning so attendees have the context later on in the presentation. These same concepts will be illustrated when they are actually used in examples throughout the presentation. These include form elements, form fields and ARIA, field set and legend, buttons, error handling and testing. It’s All About Simplicity Using school forms as an example, the audience is reminded to keep forms simple. Do you really need to ask for the same information on each form? Do you really need both the age and the birth date? Do you really need the same address written on four different forms? You want to take your form design to the next level by being smart about the data you need. It’s All About Titles Every document needs a title. The title needs to be specific and indicative of what is being communicated. It’s All About Language Having forms available in multiple languages is crucial to our schools. Out of the several forms sent home at the beginning of each year, the school in our example provides only one of the forms in Spanish. The school in question never mentions how a parent may request all forms in another language. This is an item the audience needs to care for and not be bashful about. It’s All About Instructions Instructions need to be simple, succinct, and accurate. The more complicated the form, the more valuable your instructions need to be. Design is imperative here as well. A well designed form will not need to rely heavily on instructions because it will be intuitive. It’s All About the 4 C’s of Good Form Design The Formulate group developed the 4 C’s of Good Form Design. They ask that we reflect on what we don’t like about doing our taxes. Tax forms are typically a great illustration of what aspects of a form’s design make it painful. They: Are confusing Are long Are burdensome and Rarely just ‘work’ and make sense If a form’s characteristics are the opposite of those pain points, of being confusing, long, and burdensome, then the form should be painless. These positive characteristics are the 4 C’s: Clear Concise Clever Cooperative. Clear Clarity is influenced by many things, like the language used, layout of the form and actions that are available to the user. All the things that we have talked about today. It is so important to have an in-depth understanding of your specific users and the context of information you need to get from them. Another very important approach for enhancing clarity is consistency. You all know that is a buzzword of mine, Consistency. Consistency of language, consistency of layout, consistency of actions. Consistency makes the form predictable and learnable. We are all creatures of habit and take actions based on our past experiences. Concise Conciseness is about gathering the required information in the most efficient way possible. Many people mistakenly believe that a good form is short. They aim for the fewest possible number of pages or screens and the least number of questions. However, quality is not linearly related to length. This is because things that add length, like questions tailored to different circumstances, often improve the experience for the person filling out the form. Clever Making the form clever reduces the workload for the user. The most basic level of cleverness comes from “sequencing”. Sequencing is the process of directing the user around the form, skipping questions that don’t apply to them. Forms intelligence really comes into its own in the electronic realm. Here, sequencing can be automated, inputs can be restricted (number of children must be at least 0) and many other smarts, like calculation of totals, can be built in. Forms that aren’t smart are not only burdensome, they are frustrating. Cooperative A good form works with the form-filler, it is cooperative. Being cooperative is all about stepping into the form-filler’s shoes, and doing what will make the experience better for them. Specifically, cooperative forms: Manage expectations Match the user’s mental model Provide definitions and explicit boundaries Give background information and explanations Are consistent but flexible. In the electronic medium, being cooperative is also about: Confirming before submission, allowing modification, and Being bug free and stable. In other words, cooperative forms don’t frustrate! Being transparent and inclusive can improve not only data quality, but response rates as well. References Four C’s of Good Form Design http://www.formulate.com/au/blog/what-makes-a-good-form

Presentation Materials:

• Download course materialsfor