By Luke Wroblewski. Rosenfeld Media, May 2008. Available in paperback and digital package (1-933820-24-1), 2 digital (PDF) editions (ISBN 1-933820-25-X)
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.
"Luke Wroblewski has done the entire world a great favor by writing this book. Online forms are ubiquitous and ubiquitously annoying but they don't have to be. Wroblewski shows Web designers how to present forms that gather necessary information without unnecessarily badgering and annoying visitors. With deft explanations and clear examples, he presents a clear case for better Web forms and how to achieve them. This book will help you every day."
—Alan Cooper, Chairman, Cooper; author, The Inmates are Running the Asylum
(more testimonials)
Web Form Design is available in full-color paperback and digital (PDF) versions. Supplemental content is available on this site, and all of the book's images can be downloaded from Flickr.
In my Modern Web Form Design presentation at Microsoft's MIX10 conference I outlined rich interactions that can enhance Web forms and mobile form design considerations.
In the talk, I discussed dynamic inline (accordion) forms, unnecessary inputs, selection-dependent inputs, and inline validation. Where possible, I included recent research findings for several of these design solutions. The second half focused on mobile form design including field zoom, input types, pop-up and compound menus, and new device capabilities that make input faster and easier. Video and downloads of the presentation are below.
The web has been transformed by the recent proliferation of rich interactions and applications. But the workhorses of the online world, web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, web form design matters. But web forms aren't keeping up.
Come see a walk-through of the latest applications of rich web form interactions (made possible by dynamic technologies like AJAX) including: inline validation, selection dependent inputs, and more. Also get an outline of how mobile form design can create compelling new user experiences for a wide variety of web applications and services. Learn how these modern approaches to web form design can enhance your websites and mobile applications.
Microsoft released the Windows Phone UI Design and Interaction Guide (PDF) today which outlines design fundamentals for building on the Windows Phone platform. Here's an overview of the standard input controls available in the Windows Phone Series 7 operating system:
My article on Forms On Mobile Devices: Modern Solutions was published on Smashing Magazine this week. In it, I outline how modern mobile operating systems have taken steps to improve the usability of forms. You can read the the full article here.
Overview
Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller; connections are slower; text entry is trickier; the list goes on. So, limiting the number of forms in your mobile applications and websites is generally a good idea. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.
But constraints breed innovation, and mobile forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. Thanks to the modern solutions covered in this article, the mobile space may not be a place to avoid forms much longer. Instead, it may become the place to encourage them.
When a specific format for input is required, the Web form responsible for gathering that input can do one of three things:
Provide some basic help text next to the input field to let people know how they should answer the question: ?Use xxx-xxx-xxxx as the format for your answer.?
Structure the input fields and their affordances to accept only a specific format: three text boxes of the appropriate length separated by the appropriate punctuation.
Provide a flexible input field that uses a simple script to check if a valid input has been entered then submits that input in whatever format the back-end system requires.
I?ve long been advocating the use of flexible inputs within Web forms. Flexible input fields allow people to answer questions the way they want instead of the way a database requires them to. With flexible inputs, the chore of adhering to a specific format is taken off the person providing an answer and instead given to a small bit of code.
Despite, the user experience advantages of flexible inputs, many Web forms still require specific formatting up front and rely on help text that pleads with people to not use "dashes or spaces" in their inputs. This problem is especially common in credit card inputs. So common, in fact, that Steve Friedl has a "No Dashes Or Spaces" Hall of Shame highlighting the issue on many popular sites. Here's a sample of what he's found:
As Steve points out, accepting spaces and dashes in credit card inputs is a trivial technical challenge. So there's really no excuse for Web forms not to apply flexible inputs for credit card numbers to make things easier for their customers.
Trust me, no one likes filling in forms —especially on mobile devices where one-handed, on-the-go data input and slow connections are common place. As a result, designing forms that make mobile input faster, easier, and less error-prone is crucial. Here's a few ways it can be done.
Expedia's mobile Web site has made several modifications to the desktop version of their hotel booking form: the layout has been optimized for slender mobile screens; the "search near" set of options has been listed out; and the room count input uses a set of "+" and "-" buttons instead of a drop-down menu for input. Yet, there's still room for improvement.
The form uses a free-form text input field that requires users to provide clarifying information on another screen if a mistake is made. And in many mobile contexts (fat fingers, one-handed typing, on the go) —mistakes do happen.
The date selection field makes use of a calendar pop-up that requires people to tap a small ">>" target to advance to the previous or next month.
The set of inputs for guest count uses (up to) three drop-down select menus for input, which require manipulating a list of options in a pop-up list.
Kayak's mobile iPhone application also allows people to book hotels but it features a few additional mobile optimizations.
Current location is available as a single click input in addition to a free-form text input. This allows people to search for hotels where they are now without typing.
The free-form text entry field provides inline suggestions as you type. This not only reduces the amount of typing required (it only took me 3 characters to see Monterrey, CA), but it reduces errors as well. On the Kayak form, there's little need for the clarification screen Expedia requires.
The date selection calendar allows people to use a simple scroll gesture to move between months instead of tapping a small target to change months. Users can just flick the calendar itself up or down through direct manipulation instead of having to use the ">>" control Expedia requires.
The Kayak form doesn't use any drop-down menus, opting instead for "+" and "-" buttons that are easily tapped on a touch screen. (I'm not sure why Expedia uses these for room count but not guest count as both inputs only need to support a small number of possible values.)
In aggregate, these small enhancements go a long way to making forms on mobile devices faster and easier for people to complete.
On March 16th I?ll be speaking at Microsoft's MIX10 conference in Las Vegas, NV on Modern Web Form Design. I'll be building on my presentation at last year's MIX conference with a deeper dive into the usability and interaction design of today's Web forms including: inline validation, accordion forms, mobile Web forms, and more.
Official Description
The web has been transformed by the recent proliferation of rich interactions and applications. But the workhorses of the online world, web forms, have been slow to evolve with these changes. As brokers of crucial online interactions like e-commerce checkout and registration, forms bridge the gap between people, their information, and your product or service. As a result, web form design matters. But web forms aren't keeping up.
Come see a walk-through of the latest applications of rich web form interactions (made possible by dynamic technologies like AJAX) including: dynamic help systems, inline validation, selection dependent inputs, and more. Also get an outline of how gradual engagement approaches to form design can create compelling new user experiences for a wide variety of web applications and services. Learn how these modern approaches to web form design can enhance your websites and applications.
On March 24th 2010 I?ll be speaking at the UIE Web App Masters Tour in San Diego, CA about Input: Moving Beyond Static Web Forms. I'll discuss several ways Web applications can collect user input, through both mobile devices and desktop software, without forcing users to complete a lengthy sequential forms.
If you are interested in going, feel free to use the discount code: LUKE for $100 savings on the event cost.
Official Description
A web app can't exist without the user's input. We need the data, but do we need the form? Traditional web forms, made up from text fields, radio buttons, check boxes, and a submit button, have been the mainstay of application design. In e-commerce, social applications, and productivity tools, web forms continue to define crucial web interactions. Thankfully, new approaches for input now give designers more to work with and create better user experiences.
Today's interaction techniques, powered by technologies like Ajax, move us beyond the static submit-and-refresh page model, delivering users real-time feedback and providing lightweight interactions. With these tools, we increase the quality and accuracy of user inputs, encourage further contributions, and reduce the users' pain. What was a static form now becomes an engaging conversation.
Luke will explore several novel ways web applications can collect user input, through both mobile devices and desktop software, without forcing users to complete a lengthy sequential forms. He?ll provide detailed research-based solutions that articulate not only the ?how? but the ?why? as well. You'll walk away with practical web form design solutions you'll immediately put to use.
Luke's pioneering approach to web design has always made us think about how to create great user experiences. His best-selling book, Web Form Design, is a treasure we reference frequently. We easily understand why Yahoo! appointed him as their Chief Design Architect, where he's contributed to major design improvements across the entire company. We know you'll be blown away by his session.
A while ago, I came across a unique registration form built by Jeremy Keith for his audio sharing site, Huffduffer. Though it asked people the same questions found in typical sign-up forms, the Huffduffer registration form did so in a narrative format. It presented input fields to people as blanks within sentences (Mad Libs-style, if you will).
Jeremy built the form to work as you'd expect. You can tab between the "blanks" just the way you tab between standard Web form input fields. You can click on any "blank" to start entering text. The password "blank" masks any characters you enter just like a standard password input, and the whole form manages errors if you answer any questions incorrectly. In other words, it works like a standard Web form but it looks quite different. The presentation is inviting and fun, which is quite unlike a standard Web form.
After seeing the Huffduffer form in action, I was curious how it would perform against a traditional form. Would people be more inclined to complete it because of the narrative format? Or would the unfamiliar presentation format confuse people? Thanks to Ron Kurti and the team at Vast.com, I now have some early answers.
Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative "Mad Libs" format. In Vast.com's testing, Mad Libs style forms increased conversion across the board by 25-40%. You can see a before and after view of the Contact Dealer forms where they ran these tests below.
Most of the input fields have stayed the same but the "comments" text area has been replaced by a "personalize this message link" and the phone number set of three input fields has been replaced a single flexible input. While it's possible these adjustments also contributed to the increase, it's unlikely they were solely responsible for it. As a result, the mad libs layout likely had an impact as well.
Examples of this form are live at Vast, Kelley Blue Book, and several more sites. Ron and the Vast.com team are rolling out new versions of these forms over the coming weeks and will continue to test improvements. Hopefully, they'll be able to share their results again.
Thanks to Ron Kurti for sharing these images and performance stats!
Vast.com, Inc works within the auto, travel, and real estate industries to create online marketplaces for the world's most respected companies. Partners such as Kelley Blue Book, Orbitz Worldwide, AOL, and Overstock have integrated Vast's custom platform into their portals to serve over 20 million consumers per month.
I recently had the pleasure of sitting down with User Interface Engineering's Jared Spool to talk a bit about Moving Beyond Web Forms and new ways to gather input from users in digital software products:
Jared Spool sat down with Luke to discuss what?s been happening with Web forms since Luke's book, Web Form Design, came out. It winds up there have been some interesting developments recently. Luke provides us with several examples in the podcast. Tune in to hear his advice on how to help and not hinder your users...
Mobile Web forms tend to have significantly more constraints than their desktop cousins: mobile screens are smaller; connection speeds are slower; entering text is harder; and so on. As a result, it's generally a good idea to limit the number of Web forms in mobile applications and sites. In situations where you do have to get input from people on mobile devices, radio buttons, checkboxes, select menus, and lists tend to fare much better than open text fields.
But constraints breed innovation and mobile Web forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to make providing input faster and easier. Several of these innovations are now making their way back to the desktop and beyond.
Field Zoom
When a user selects an input field in a Web form, field zoom brings it to the foreground and expands it to fill the screen's viewable area. This makes an otherwise tiny input field large enough for people to actually see the input they enter. When you consider that many form errors are caused by people not seeing their input well enough to correct misspellings, the usability implications of this approach become clear.
Field zoom also provides another great reason to top-align input field labels in forms. As you can see in the example of Goolge's registration form (below), left-aligned labels don't show up on screen when the input field is expanded to fill the screen. So it's not clear what question you need to answer because there's no label! Longer input fields also suffer a bit with field zoom.
Input Formats
Several mobile Web browsers can recognize specific input types (part of the developing HTML5 standard) and adjust their input modes accordingly. For example, specifying an input of TYPE "url" will bring up a virtual alpha numeric keyboard with a ".", "/", and ".com" key. Specifying an input of TYPE "email" will bring up a virtual alpha numeric keyboard with a "." and "@" key. Specifying an input of TYPE "number" will bring up a virtual numeric keyboard. These input-specific keyboards make entering the particular type of data each input field requires much easier. And anything we do to make providing input (both on mobile and the desktop) goes a long way.
Password Masking
Most password input fields in Web forms instantly obscure any characters people enter in an effort to keep sensitive information (like your password) hidden from prying eyes. Automatic masking of people's passwords may provide the appearance of security, but it can also create usability issues as well when people are left staring at a row of bullets they hope (but can't verify) is their password.
Several mobile devices have implemented a solution that addresses this issue by displaying the most recent character someone has entered, then changing that character into an obscured bullet only after a brief delay. This technique has made it's way onto the desktop as illustrated in this password masking solution from ZURB.
Pop-up Menu Controls
Drop-down select menus are one of the hardest input types to manipulate. First you have to click on the menu to open it, then maneuver through a potentially long list of small targets. Once you find the value you want, you need place your cursor on the right target and select it. To top it off, many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list, else the menu closes. Even quite dexterous users often miss and need to start over. Couple this interaction challenge with the small screens found on mobile devices and it becomes quite obvious that a different solution for select menus is needed.
When faced with drop-down select menus in Web forms, Apple's iPhone presents users with a pop-up menu control. This control displays the options within a menu in a contained list that can be scrolled at various speeds though drag, nudge, or flick gestures. The large touch targets also make it easy to select a value once you find the right one.
Compound Menu Controls
Pop-menu controls can be applied to compound inputs as well. So instead of requiring three separate input fields for the month, day, and year of a date, one date field can bring up a set of pop-up menus that allow people to scroll through three lists at once to find the right answer. This approach can be applied to other kinds of compound inputs as well -like height in feet and inches for example.
Google's Android operating system provides a similar solution for compound input fields though it makes use of visible interface elements to move through a list instead of relying only on gesture-based scrolling.
Voice Input
Google's Nexus One phone allows people to use voice input for any text field they encounter in an application. The virtual keyboard can be swiped to put the phone into audio input mode or you can use the microphone button. The video below demonstrates both of these options in action. With effective voice input, the need to type any characters on the mobile device goes away completely.
