Introduction

I hate telling people what I do.

Usually, the response is one of confusion: blank looks and pregnant pauses. I go on to explain, “You know, like when you have to register your car or be admitted to hospital: I design the form you fill out, so it’s less painful.” Some understanding is restored using these everyday examples. Yet people are still surprised to learn that someone actually designs these forms (a depressingly apt reflection on the quality of most).

Designing Forms Is the Worst Best Job in the World

Surprising as it may be, I love what I do. As it draws on so many different subject areas, designing forms is one of the most interesting professions you can have. It’s kinda like getting paid to solve rewarding puzzles that make other people’s lives easier.

And boy are there a lot of puzzles out there that need solving. After all, when was the last time you heard someone gush with delight about a wonderful form they just filled out? Instead, every day, forms make people want to pull their hair out in frustration. And every day, organizations waste millions of dollars collecting information poorly.

But despite the huge need, and the fascinating, diverse work, form design isn’t a recognized discipline. If you tell people you’re an accountant, or a landscaper, or even a web developer, they have an inkling of what you do. Form design, on the other hand, is a niche within the niche of user experience.

It shouldn’t be this way. The world needs more people who understand what makes one form easier to fill out than another. For some of you, reading this book will light a spark that sets you on the path to becoming a specialist form designer. For most of you, however, it’ll mean you’re a bit more prepared to design the form that’s part of a bigger web project. And while you may not be boisterously celebrated for the functional and aesthetic form you produce, know that you’ve made a real, tangible difference both to the people filling it out, and to your organization. Besides, at the end of the day, nothing happens without a form.

Some (Crucial) Definitions

You’d be hard pressed to find professions that ruminate about definitions more than User Experience and Design. But I’m rather inclined to go against the grain, and this is meant to be a practical book, so I’m just going to tell you straight up what you need to know.

In this book:

• A form is any physical interface that collects information from at least one party, and delivers it to at least one other party, so that a product or service can be provided. A form can be on paper, on a mobile, within a complex desktop application, or even a bank’s automatic teller machine (ATM).

• A web form is a form that people fill out inside the browser, and is the only kind of form we’re going to cover in this book (although many of the techniques can be used with other types of forms). It has its basis in HTML, CSS and JavaScript, but may be built using:

  • a front-end framework such as Twitter’s Bootstrap
  • a CSS preprocessor like Sass or Less
  • JavaScript libraries like jQuery
  • programming languages such as PHP and Ruby on Rails (Don’t worry if you don’t know anything about these programming languages. You won’t need to for the purposes of this book.).

• A user is someone who is filling out your form. It’s a regular person, who may be internal or external to your organization. Yes, “user” isn’t an especially elegant term, but it’s simpler than “form filler”, so I’m sticking with it.

• The target audience is the group of users for whom the form applies, as a whole. Sometimes the target audience can be segmented into groups according to things like characteristics, motivations, preferences or demographics.

• The form owner is the organization that creates the form, to collect some necessary information, from the target audience. Within the organization, there will be many people who have a stake in the form—the stakeholders —but hopefully there’s one person who has the ultimate decision-making authority—the project owner.

• User experience is the experience users have when they use something. In our case, it refers to the experience they have when they fill out your form. Our aim is to create an optimal user experience, such that the needs of both the users and the form owner are met.

• Design means the choices we make about how our form will look, feel and work. It doesn’t matter what your actual job title is, or whether you’ve ever studied design. If you’re writing words, setting out text boxes or coding up a button, you’re doing design.

• Research refers to learning about the needs, wants, contexts, preferences and opinions of both users and stakeholders. To some extent, all user experience research techniques (http://uxmastery.com/resources/techniques/) are applicable to forms. But the most relevant are:

  • contextual enquiry (observing and interviewing users in the situation where the form would be filled)
  • analytics review (examining form metrics and samples of completed forms, to see where things are going wrong)
  • usability testing (watching people fill out a form to see what’s working and what isn’t) (Sometimes people call this “user testing”, but usability testing better conveys that it’s not the user that’s being tested, it’s the interface.)
  • A/B testing (a controlled experiment to see which of two design options for a particular element performs best).

  There’s also a specialist technique for form research called cognitive interviewing, which is a combination of contextual enquiry and user testing tailored for the form-filling context. It was developed out of social psychology, for testing survey questionnaires. If you’re interested in learning more about cognitive interviewing, a place to start is the “How To” guide by Gordon Willis (http://www.hkr.se/pagefiles/35002/gordonwillis.pdf).

Three Dimensions

Every form has three dimensions (from relatively most to least influential for user experience) (Technically speaking, I also talk about a fourth dimension: Process. Process is everything that happens around the form itself, from how people get access to it, to what happens after it’s submitted, and all the associated organizational activity. Process can also significantly influence user experience, but is beyond the scope of this book. Having said that, you’re likely to uncover opportunities for process improvement just by following the techniques we discuss, especially those specific to managing a forms project (Chapter 2).) :

1. Words (what you say in the form, and how you say it)
2. Layout (how things are presented, visually)
3. Flow (how the user moves through the form).

You’ll probably find form design more manageable if you can get a firm sense of these three dimensions. They’ll help ensure you’ve considered all key components, and will provide a common language for discussions with colleagues and peers. The dimensions can also provide a framework for the planning and division of work, as well as pinpointing where design problems are occurring. Finally, it’s just too damn overwhelming to try to design all three dimensions at once!

Correspondingly, the core of this book is divided into three major chapters—one for each dimension—plus a brief summary of managing form projects:

• Chapter 2: Form Projects
• Chapter 3: Words
• Chapter 4: Layout
• Chapter 5: Flow.

Which Forms This Book Is About

Before we get too much further into detail, we should further clarify which forms this book is about.

Online

Would you design a novel the same way you’d design an advertising billboard? Surely not, as the medium influences the design. The constraints and goals also differ.

The same is true for forms. While there are some commonalities, forms designed for paper follow different rules from those designed for digital. And within digital, designing a native app for an Android smartphone is very different from designing an enterprise system to run on the desktop. Furthermore, what defines a native app today—let alone what operating system the app is native to—may have changed by tomorrow.

If we tried to cover all these different types of forms, as well as all the aspects of good form design, your head would explode. (Plus, researching, writing and designing a book takes a lot of work, so I want it to be valid for more than two minutes!)

So we’re going to focus on the most adaptable, accessible and durable type of form: web forms. As we defined earlier, web forms are those that run in the browser (e.g. Google Chrome or mobile Safari on the iPhone) and are based on HTML, CSS, and JavaScript.

This is a book about designing forms, though, so you don’t need to understand these programming languages, or coding generally. Rather, all the rationale and recommendations apply to web forms, but may not carry across directly to other contexts.

We’ll dip into HTML from time to time, where it’s relevant for enhancing the user experience. And if you don’t have any familiarity with programming for the web, SitePoint has some great places to start, such as the free Build Your First Website: HTML & CSS (https://www.sitepoint.com/premium/courses/build-your-first-website-html-css-2891) course by Russ Weakley.

Mobile

One of the reasons I declare web forms to be the most adaptable is that they work on mobiles, tablets and other small screens as well as laptops, desktops and TVs. In fact, this is one of the real advantages of web forms: you can design a single form that will respond to the screen size.

Consequently, in this book you won’t find any chapters specifically on “mobile form design”. Instead we’re going to produce one design that works everywhere. In other words, we’re going to do responsive form design. This is much better than having to come up with multiple designs that each need to be developed and maintained, right?

In fact, the great news is that most of the design approaches work for all screen sizes, without any particular modification. The key exceptions—which we’ll point out as we go along—are:

• label placement
• text sizes
• buttons.

Touch

As Josh Clark says in the introduction to his great book Designing for Touch (https://abookapart.com/products/designing-for-touch) :

For decades, we explored the digital world with prosthetics called mouse, keyboard and cursor. We nudged plastic bricks across our desks. We directed onscreen arrows to poke buttons from afar. We clicked icons. We pointed at pixels. But then we started holding those pixels in our hands. Thanks to smartphones, billions of people wrangle touch screens every day, all day.

It’s no longer enough to design our forms so that they work just with mouse and keyboard. We have to accommodate fingers and thumbs, too. But touch, as a way of interacting with an interface, is not clearly associated with a particular environment, unlike screen size, operating system or device type. We can never really know when our form will be filled out using touch. Thus, we must make all our forms touch-friendly by default.

If you don’t know much about touch, here are some key tips:

• Touch can be found on all sizes of screen, from small smartphones to large display monitors. So don’t use screen size as an indicator of touch.
• The minimum touch target size is 7mm, which equates to 44 pixels (or points or dp).
• For responsive designs, this equates to 2.75 rems (a “rem” is a “root em”—see “Font sizing with rem” (https://snook.ca/archives/html_and_css/font-size-with-rem).
• There’s no such thing as “hover” on a touch device, so try to avoid using it in your designs.
• Fewer taps are better, as arms, hands and wrists get sore easily.

And if all of that is way too technical for you, just pass it on to your developers!

Accessibility

The same applies to accessibility. Instead of trying to retrofit accessibility to our form after the fact, or try to apply it in a subset of use cases, we’re going to bake accessibility right into our design. After all, accessibility “features”—like readable text and colors that don’t clash—help all users, not just those with disabilities.

Performance

As web technology has evolved, web pages have grown in size (or weight, depending on how you like to think about it). Larger pages take longer to load, and slow-loading pages certainly detract from user experience. True, internet connectivity and mobile networks have also improved. But these improvements struggle to keep pace with the evolution of the web. The improvements are also not evenly distributed—as people from rural areas to inner city black spots can tell you, not to mention other countries.

Ideally, we should aim to create forms that load and respond comparatively fast, using familiar, straightforward, standards-compliant design approaches, and keeping our forms free from many of the things that increase the size of web pages, such as advertisements. (See “What’s Absent from Our Layout” in Chapter 4.)

One Design to Rule Them All

In summary, this book will show you how to design a form that will:

• work on the web—on all devices (including mobile), and regardless of browser or operating system
• be responsive to screen size
• suit touch, in addition to the more traditional input devices of mouse and keyboard
• be accessible to people of all abilities, including those using assistive technologies like screen readers and magnifiers
• load quickly, and respond quickly to user interaction.

What Makes a Good Form?

Imagine we were to create this one design to rule them all. How would we know that it’s actually good?

Frank Pick is famous for transforming the London Underground from “a mild form of torture” to “the most famous and respected transport system in the world” (http://distortedarts.com/lives-frank-pick/). In 1916, he is quoted as saying:

The test of the goodness of a thing is its fitness for use. If it fails on this first test, no amount of ornamentation or finish will make it any better; it will only make it more expensive, more foolish.

When it comes to a form, being “fit for use” means that it collects information that an organization needs, within context, while also catering for the needs and context of users.

As you can see from this definition:

• collecting information is what sets forms apart from other types of interaction
• a form is only as good as the knowledge you have about the specific needs and context of both your users and your organization.

I’ve helped organizations collect information for 20 years. This book represents the core of what I’ve learned in that time, and will take you a long way toward efficient, effective and satisfying forms. But because every need and context is unique, your forms will only be great with research.

It’s beyond the scope of this book to explore research. Instead, I’ll mention when it will especially help to draw on the key techniques mentioned earlier:

• contextual enquiry
• analytics review
• usability testing
• A/B testing.

For those interested in further information, these and other techniques are covered extensively elsewhere, in books like Observing the User Experience, Second Edition: A Practitioner’s Guide to User Research by Goodman, Kuniavsky and Moed and Usability Testing Essentials: Ready, Set…Test! by Carol Barnum, and websites bursting with resources, like SitePoint (https://www.sitepoint.com/design-ux/) and UX Mastery (http://uxmastery.com/). Also keep an eye out for future design, planning and research books in the SitePoint Aspects of UX series, of which this is the first release.

Now that we’ve established what a form is, which forms we’re talking about, and what makes a form good, in the next chapter we’ll focus briefly on form design projects, before diving deeper into the meaty details of form design.