Web Form Design | Sue Brandreth's Learning Resources

Web Form Design: Showcases And Solutions
(https://www.smashingmagazine.com/web-form-design-showcases-and-solutions/)

This overview features a hand-picked and organized selection of the most useful and popular Smashing Magazine’s articles related to Web form design and published here over all the years.

Quick Overview

Econsultancy_logo 21 first class examples of effective web form design
(https://econsultancy.com/blog/64669-21-first-class-examples-of-effective-web-form-design/)

Forms are important online. When well designed they make it nice and easy for people to sign up for newsletters, make a purchase, and so on.

However, badly implemented forms can be a real barrier for potential customers, frustrating them to the point where they give up.

Web form optimisation and good design is therefore vital, so here I’ve gathered up 21 examples of form best practice from a range of different sites.

We have checkout forms, contact forms, mobile optimised forms and more…

Website Forms Usability: Top 10 Recommendations
(https://www.nngroup.com/articles/web-form-design/)

Summary: Follow these well-established — but frequently ignored — UX design guidelines to ensure users can successfully complete your website forms.

Wroblewski, L (2008) Web Form Design – Filling in the Blanks, Rosenfeld Media
(http://rosenfeldmedia.com/books/web-form-design/)

Companion web site: http://www.lukew.com/resources/web_form_design.asp

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.

Table of Contents

Chapter 1: The Design of Forms
Chapter 2: Form Organization
Chapter 3: Path to Completion
Chapter 4: Labels
Chapter 5: Input Fields
Chapter 6: Actions
Chapter 7: Help Text
Chapter 8: Errors and Success
Chapter 9: Inline Validation
Chapter 10: Unnecessary Inputs
Chapter 11: Additional Inputs
Chapter 12: Selection-Dependent Inputs
Chapter 13: Gradual Engagement
Chapter 14: What’s Next?

We’ve identified some common questions about web form design. The short answers are provided here; and longer ones are available, of course, in the book.

Why does Web form design matter?
Forms enable commerce, communities, and productivity on the Web to thrive. If you are in online retail, your goal is to sell things. But standing in the way of your products and your customers is a checkout form. If you are developing social software, your goal is to grow your community. Standing in between you and community members is a form. If you’ve built a productivity-based Web application, forms enable key interactions that let people create and manage content.
How should I organize my Web form—within one Web page or across several?
Who is filling the form in and why? Answering this up front allows us to think about our forms as a deliberate conversation instead of the inputs for a database. When you approach forms as a conversation, natural breaks will emerge between topics. When these distinct topics are short enough to fit into a few sections, a single Web page will probably work best to organize them. When each section begins to run long, multiple Web pages may be required to break up the conversation into meaningful, understandable topics.
If my form spans several Web pages, do I tell people what page they’re on?
When the questions that need to be answered before a Web form is complete are spread across multiple Web pages, you may want to include an overview of the number of Web pages involved (scope), an indication of what page you are on (position), and a way to save and return to your progress (status). Though closely integrated, these three progress indicators perform different functions.
Should I top-, right-, or left-align the labels for input fields?
When you are trying to reduce completion times or if you need flexible label lengths for localization, consider top-aligned labels. When you have similar goals but vertical screen real estate constraints, consider right-aligned labels. When your form requires people to scan labels to learn what’s required or to answer a few specific questions out of many, consider left-aligned labels.
How are smart defaults used in Web forms?
Smart defaults can help people answer questions by putting default selections in place that serve the interests of most people. There are many opportunities within Web forms to utilize the power of smart defaults to reduce the number of choices people have to make and thereby expedite form completion.
When should I include help text on my forms?
You should consider adding help text when: forms ask for unfamiliar data; people question why they are being asked for specific data; people may be concerned about the security or privacy of their data; there are recommended ways of providing data; and certain data fields are optional or required when the bulk of the form is not.
How should I indicate required input fields?
If most of the inputs on a form are required, indicate the few that are optional. If most of the inputs on a form are optional, indicate the few that are required. When indicating what form fields are either required or optional, text is the most clear. However, the * symbol is relatively well understood to mean required.
What’s the difference between a primary and secondary action?
Actions such as Submit, Save, or Continue are intended to enable completion, which is the primary goal of just about anyone who has started filling in a form. As a result, they are often referred to as primary actions. Secondary actions, on the other hand, tend to be less utilized.

Excerpts

Chapter 1 (PDF)

I’m sorry to break this to you, but your life is about to change.

I know this because of a study we conducted years ago when we had the opportunity to observe Master Cabinetmakers. What does building kitchen cabinets have to do with designing forms in an online application? Let me explain…

The purpose of our study was to look at the difference between those who do mediocre work and those whose work is excellent. We picked a variety of trades to study, where we could find people who were true masters. We wanted to see the differences between the masters’ work and those of people whose skills weren’t as refined.

This brought us to cabinetmakers. Cabinetry is a very old craft, and the people who master it are amazing in their talents and skills. They can create something that is both useful and beautiful. The best are aware their products are only a piece of the overall décor and know how to blend their results perfectly into the surrounding experience. After all, when we’re in the kitchen, it’s about the cooking and the family interaction—not about eternal admiration of the dovetail joints holding the utensils in place.

One of the biggest takeaways from our research was the carpenters’ extreme attention to detail. Even though each person we interviewed had years of experience, nothing was taken for granted. Every hinge and joint was finely crafted, almost as if it were the most important element in their entire career. The pride they took in the final cabinet was the sum of the pride they took in each individual element.

Cabinetmakers aren’t the only folks who behave this way. So are the master craftsmen of our own field, like Luke Wroblewski. In this book, Luke applies that same loving attention to detail to the design of Web forms. Like the cabinetmakers, his masterwork is both useful and beautiful. But unlike many craftsmen, Luke is willing to share his secrets outside the guildhall.

You are about to learn the secret element of making great forms and, once you start applying this knowledge, you’ll also realize that the perfection of the online experience comes from the sum of the perfect form elements and flows that go into it.

This is what will change your life: the new appreciation of how subtlety and nuance in form design can have dramatic overall effects on the total online experience (and your bottom line). And, once you learn to control those subtleties and nuances, you, too, will be a master of your craft.

As I said, your life is about to change. It starts right … now!