Web Form Design

Filling in the Blanks

Luke Wroblewski

• Publisher: Rosenfeld Media
• Year: 2008
• Print ISBN: 9781933820248
• eBook ISBN: 9781933820255
• Edition: 1
• Topic: Design
• Subtopic: Human-Computer Interaction

Forms make or break the most crucial online interactions: checkout (commerce), registration (community), data input (participation and sharing), and any task requiring information entry. In Web Form Design, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field's leading designers to show you everything you need to know about designing effective and engaging Web forms.

Chapter 1

The Design of Forms

Form Design Matters

The Impact of Form Design

Design Considerations

Forms suck. If you don’t believe me, try to find people who like filling them in. You may turn up an accountant who gets a rush when wrapping up a client’s tax return or perhaps a desk clerk who loves to tidy up office payroll. But for most of us, forms are just an annoyance. What we want to do is to vote, apply for a job, buy a book online, join a group, or get a rebate back from a recent purchase. Forms just stand in our way.

It doesn’t help that most forms are designed from the “inside out” instead of the “outside in.”[1] Usually inside of an organization or a computer database, a specific set of information has come to define a valid record of a person, place, process, or thing. When it comes time to update or create one of these records, the organization or computer program simply says “here’s the information I need,” and that request shows up in front of people as a form.

For example, a Web site’s database may be constructed in a way that defines a “member” as a unique combination of a first name, last name, email address, and password. So when a person tries to become a member of that site, up pops a form asking for that first name, last name, email address, and password. This is inside out. A set of database fields isn’t how most people think of becoming a member of an organization or service.

Looking at things “outside in” means starting from the perspective of the people outside your organization or Web site. How would they define being a member of your service? Chances are, they’d describe it differently than your database would. They’d talk about what’s on the other side of the form—for example, about the things they’d get or be empowered to do.

All this illustrates why our primary goal when designing forms needs to be getting people through them quickly and easily. Or better yet, making them invisible in a way that gets organizations the information they need and people the things they want. Forms suck. We should design accordingly.

Figure 1.1
The registration form for Facebook, a very popular social networking service. Almost half of this form is devoted to a security check!

Form Design Matters

Though knowing most people dislike filling in forms should be reason enough to care about good form design, there are plenty of other reasons why form design matters—especially online. On the Web, forms are the linchpins of ecommerce, social interactions, and most productivity-based applications.

Photograph by Andrew Walsh

Ecommerce

In the physical world, a typical shopping experience involves moving through product-laden aisles of colorful packaging and marketing promises. Once you select the items you need, it’s off to check out where a (hopefully) friendly clerk greets you, rings up your purchases, processes your payment, bags your items, resolves any issues like missing price tags or discrepancies of cost, and bids you “good day” (see Figure 1.2).

Figure 1.2
When you’re shopping in a local store, checkout usually comes with a smile.

Contrast this experience with shopping online (see Figure 1.3). Within the cyber aisles of an online store, you can search and browse colorful packaging and marketing promises, stack up what you’d like in a “shopping cart,” and make your way to checkout. But here the parallels end. Instead of a smiling and helpful clerk, you get a form.

Figure 1.3
Browsing for products on the ecommerce site, eBay Express, is fun. Checking out, on the other hand, is a form.

The form couldn’t come at a worse time. You want to buy the items you’ve found. The store wants to close the sale so it can make money. Standing between both your goals is a form and as we know—no one likes forms.

Social Interactions

Our daily interactions with people, services, and products are enhanced through visual, tactile, and auditory cues. When having a conversation with someone, we can see their reactions and hear their voice. When we choose to engage with a group of people, the same types of interactions make us feel welcome or not.

Even physical product experiences have the same potential for engagement. Consider, for example, the initial engagement with a new Apple laptop computer (see Figure 1.4). The various materials and textures you encounter as you unwrap the packaging speak to the quality of experience you’ll have with the actual computer: all the details have been well thought out. Perhaps the most personal moment comes when the computer offers to take your picture to represent your account.

Figure 1.4
Unpacking a new Apple MacBook Pro is a tactile, engaging experience that reflects the quality of the product inside.

However, when we’re online, each of these experiences comes to us as a form. Want to join a fun new social network? Just fill in this form (see Figure 1.5). Care to share this great video with a close friend? Just fill in a form. Want to respond to an interesting author’s blog post? You guessed it—a form. Just about everywhere people want to participate in social interactions online, forms get in the way. And since participation—number of members, number of activities completed, etc.—is how most social applications thrive, the organizations running these sites rely on forms for business success.

Figure 1.5
Vox looks like a fun social network but if you want to join, you’ll need to fill out this new account form, which isn’t fun at all.

Productivity

In addition to ecommerce and social interactions, the Web is increasingly a place where people get things done. From online banking to Web-based word processing, Web applications designed for productivity are growing in number. For productivity-based Web applications, the online world doesn’t differ that much from the offline world. If filling in a survey in the physical world requires a form, the cyberspace version is not likely to be much different (see Figure 1.6).

Figure 1.6
California voter registration offline and online—it’s all just a form.

Yet again, we find forms standing between user needs and business goals. People want to manage their information or create new artifacts. The businesses supplying these services are interested in growing and optimizing the amount of data or customer activity they manage. The barrier for both sides is, of course, a form.

All these examples should make it pretty clear that Web forms stand in the way of user needs (what people want from a product or service) and business g...

Table of contents

• How to Use this Book
• Frequently asked Questions
• Foreword
• Chapter 1
• Chapter 2
• Chapter 3
• Chapter 4
• Chapter 5
• Chapter 6
• Chapter 7
• Chapter 8
• Chapter 9
• Chapter 10
• Chapter 11
• Chapter 12
• Chapter 13
• Chapter 14
• Acknowledgments
• About the Author