Better Web Forms: Redesigning eBay’s Registration

In: Columns > View Source

By Garrett Dimon

Published on November 12, 2007

Designing interactive forms is one of the most challenging aspects of web design. Done with the user’s experience in mind, and some finesse, it can be one of the most rewarding, too, resulting in increased visitor satisfaction and conversion. Let’s walk through some of the fundamentals of good web form design by taking an existing form and making some very simple changes to take it to the next level.

The eBay registration form isn’t so unusable that it brings sign-ups to a screeching halt, but it is rough enough to justify some tweaking. Oddly enough, after choosing the eBay form as the subject of this article, I came across an alternate version of the registration page—one that they’re presumably using for some randomized AB testing.

After comparing their current page with the newer test version, I decided to focus on the test version. The fields are exactly the same, and only a few design elements are different. Ultimately, the starting point is irrelevant; we can use either one to illustrate simple changes that can improve the usability of most basic web forms.

Significant changes in visual design, functionality, copywriting, and validation would all be relevant topics for a redesign of this form. We’ll keep the complexity and length of the article within reason by zeroing in on objective aspects of form layout that will enhance readability and comprehension.

Before and After

Before we immerse ourselves in a discussion of the details, let’s take a quick look at the Before and After to get a high-level view of the tweaks I made. The biggest change was simply creating a consistent and logical layout for the form fields and their labels.

For more detail, take a look at the full-size versions of the original registration page and the new registration page that I created.

I often find it useful to zoom out and use a Gaussian blur on visual designs to ensure that they have a clear visual hierarchy and appropriate use of whitespace. When comparing the two forms, it’s clear that the original layout has some problems in its overall appearance—and thus the user’s experience. In contrast, my redesigned form looks more straightforward and less cluttered, without making any major changes in the design or layout.

The Modifications

Now that we have a bird’s eye view of my tweaks, let’s examine the details and logic behind each of the changes.

A Unified and Concise Introduction

The introduction and explanation for any form should be concise and unified. Overwhelming visitors with too much visual movement is never a good way to start. The original form created an unnecessary amount of movement with varying line lengths and poor contrast. The heading color was lighter than the body text, and the elements seemed disjointed.

The new version aims to unify elements within the introduction in order to reduce the visual clutter and provide one concise explanation for the entire form. This was almost entirely a design change—I was careful not to make any significant changes to the copy. The primary goal for this adjustment was a smoother transition from the top of the page into the form itself by making the instructions a more visually cohesive unit, instead of a distracting series of statements.

Section Headings

In the original form, the headings were very low contrast. The blurred versions above help illustrate that the headings in the original version were difficult to read. In the new version, the contrast is significantly improved, without dramatically altering the overall design.

The new version shows how a very small, seemingly insignificant change can effectively increase readability. It’s these small tweaks that eventually add up to create a much more appealing and usable form.

You’ll also notice that I chose to remove the thin grey lines bordering the different sections. The change wasn’t absolutely necessary, but the lines didn’t add value to the appearance or usability of the form. In fact, they unnecessarily broke up an otherwise unified process, and I thought we could live without them.

I also decided to move the statement “All fields are required” from the headings to the beginning of the form. In the headings, not only was the statement redundant, but it distracted from the purpose of each heading. As a result, we let the headings be headings and we allow the users to understand what is required before they begin filling out the form. It’s a small detail, but all of the little details add up to eventually create a better overall experience.

Subdividers

In the original form, many of the fields, their labels, and the help text tended to run together, and, in some instances, it became difficult to distinguish where one field ended and another began. When web forms visually run together like this, it can be overwhelming for the user. By providing a subtle visual break between sections and subsections, using a simple, unobtrusive divider, we create more logical and natural groupings that make the form more digestible.

The divider may seem like just a tweak, but—as we saw with the contrast issues—its impact is clear. In fact, much of designing forms is about making a set of almost imperceptible changes that create a more natural and reader-friendly experience.

Field and Label Relationships

Perhaps the most important improvement was changing the arrangement of field labels with respect to their associated fields. Matteo Penzo wrote a great article sharing some of his findings about eye-tracking and positioning form fields and labels. In the article, the results indicate that placing the labels directly above the field leads to the most efficient completion time. However, given the importance of this registration page and the fact that it shouldn’t have many repeat visitors, I was more concerned with simplicity than minor improvements in efficiency.

By looking at the high-level visual flow of the pages below, it’s clear that the original form required more movement around the form to accurately complete all of the fields. The second however, makes it a priority to minimize the amount of additional movement by aligning and arranging the fields in a more consistent manner.

As we saw earlier, the arrangement of some labels in relation to their fields created areas that were visually cluttered and would likely require more attention from users in order to distinguish between different elements. While Penzo’s article reveals an improved efficiency when the labels are placed above the field, it’s also imperative to provide ample whitespace to provide a clear visual distinction between them. Unfortunately, the original form didn’t do that. In our case, we’re going to go ahead and place the labels right-aligned on the left side of the form fields.

Based on the research in the article, the decision to put the labels to the left of the fields instead of above them might lead to a slight decrease in efficiency, but in this case, that should be all right. It’s a safe bet that there aren’t many regular visitors to the registration page; it’s just not a form that someone fills out multiple times over the course of a day. As a result, it’s more important to have the form be clean, simple, and comprehensible than it is to try to create the most efficient form possible.

Our new field layout helps make the page easier to read, breaks it up into more digestible chunks of information, and uses appropriate whitespace to create an even and consistent flow throughout the form.

Additional Tweaks

There are several other small tweaks that aren’t deal-breakers but are worth mentioning. First of all, the date of birth was placed under the User ID section. While I don’t imagine this prevented anyone from successfully completing the form, it really didn’t belong there, even if the next checkbox was about requiring that users be eighteen years old.

Finally, while I made a point not to significantly modify the copywriting and labeling, I did make some small tweaks to create a more consistent labeling scheme. While the changes I made were fairly small, it’s important to note that the copywriting on eBay’s own newer version of the registration page was a huge improvement over what was on their previous page. For example, in the previous version, the section headings were simple statements such as Your Personal Information, but in the new one, they use the more friendly and disarming version Tell us about yourself.

Always Room for Improvement

So, while we’ve made a number of adjustments, remember that there’s always room for improvement. For example, the current form gives us an opportunity to turn the User ID availability check into a progressively enhanced check that happens automatically as the user is typing a username.

Another example is the potential removal of the birth date fields. If the purpose of these fields is simply to validate that people are eighteen years old, then it’s a bit redundant to have a checkbox that forces people to agree that they are, indeed, eighteen. It’s not my call, but removing that birth date field would decrease the number of clicks and keystrokes necessary to complete the form.

Further inspection will surely reveal even more opportunities for improvement. Make a point to take an objective look at how your forms could or should be improved. These suggestions may help spark at least a few basic ideas to do just that.

Evolution Rather than Revolution

Change itself might be inevitable, but we are in direct control of the amount and speed of those changes. Resist the urge to get carried away and completely redesign everything with every opportunity. Large overhauls can potentially alienate regular visitors, and also introduce unnecessary variables and risks. Evolution is almost always better than revolution. Fortunately, we’re all starting to realize that these frequent small changes are much safer and more valuable than infrequent and total overhauls.

Even the smallest adjustments to a page’s design, layout, and content can make a major improvement in the overall quality of the page. Taking a fresh look at sections of a site that have been ignored for a while can give you an entirely new perspective. By making small incremental changes and testing them against real world scenarios, we can more easily focus on continuous improvement without going back to square one every time.

Testing

I haven’t done any sort of testing to validate that the changes I’ve suggested are, in fact, an improvement from the perspective of site visitors. With any adjustments of this nature, some testing is valuable for validating that the changes are for the better. At the same time, though, if the changes are smaller and incremental, it’s usually pretty safe to test them out on a live site and just be ready to roll back if it’s not an improvement. Either way, that’s a subject for an entirely different article.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: XHTML, Web Design, Redesign, Planning, HTML, Basics