Digital Web Magazine

The web professional's online magazine of choice.

Better Web Forms: Redesigning eBay's Registration : Comments

By Garrett Dimon

November 12, 2007

Comments

Shaun O'Connell

November 13, 2007 2:51 AM

I wonder if you can test whether your changes make the form more effective. i.e. improve number of registrations.

If it takes less time to complete, you could argue that less people will abandon the registration process. You could test the average time it takes to fill out your form versus the current form across a small set of users.

A good article Garrett, thanks. Now back it up with some testing. :)

John Faulds

November 13, 2007 4:39 AM

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.

What sort of forms would a single person fill out multiple times over the course of a day? Or is that not quite what you meant?

Blaise Kal

November 13, 2007 5:09 AM

I’m always a big fan of reducing the number of form fields. Unfortunately, most form fields in the eBay form look pretty essential.

Except for “confirm email address”: I think confirm-fields should only be used with hidden data, like password fields. I hate typing the same thing twice.

If you really want to be sure the form doesn’t contain errors or typos, show the user its data with the question “ is this correct?” after submittal.

John Whitaker

November 13, 2007 5:37 AM

While I would agree that placing the form labels to the left as a trade-off on efficiency makes sense with this form, how would you feel this would play out with design consistency with other forms on the same site? If it were to make more sense to keep the labels above the fields on other forms, shouldn’t this one be laid out the same to keep the overall site design consistant?

Geof Harries

November 13, 2007 6:14 AM

John, I’d worry less about site-wide consistency and more about what the most efficient design happens to be. Luke Wroblewski has written extensively on this topic, starting with Top, Right or Left Aligned Form Labels and the links contained within. Depending on the type of form it is, you make different design decisions regarding form layout and positioning.

Garrett Dimon

November 13, 2007 6:16 AM

Shaun – You absolutely could test this, and based on the fact that I encountered two different versions of the form during my research, I imagine eBay is already very familiar with AB testing and running an alternate version to a small subset of their audience. In my opinion, that’s the best way to test pure conversion.

John – There are plenty of applications and forms that many people use on a daily basis to do their job. I’ve been involved with many web applications that are essential to business functions, and the people using those generally want a very efficient form that carefully considers their workflow and minimizes keystrokes and mouse usage.

Blaise – While I don’t have any hard numbers, my experience and intuition tell me that a checkbox to verify that people have entered the correct information wouldn’t actually get a significant number of people to recheck their work.

John – I don’t believe it’s necessary to keep form field layouts so absolutely consistent. I do feel they should visually feel the same, but the context within which the person is completing the activity is generally more important than exact consistency.

For instance, if someone is filling out a form that they aren’t familiar with, it’s best to keep it simple and digestible. However, if someone repeatedly uses a form over the course of a day, they’re more likely to want efficiency over some other benefits. Consistency of that sort is over-rated.

The team at 37signals do a great job of providing regular examples of this. One of the more recent ones I remember is this post about the iPhone buttons.

Justin Stevens

November 13, 2007 7:42 AM

Could you show us your source code for this? Putting labels to the left of an input field is a great idea but it’s often difficult to align everything with out using a ton of CSS. Id be curious to know if you’ve come up with any good tricks.

Allen

November 13, 2007 9:08 AM

There are more concerns than just usability when designing a form as well. Another reason to keep the field labels above is because of localization. Words have varying length in different languages and so to have adequate space for a label you must delegate extra space.

Tania Schlatter

November 13, 2007 12:25 PM

I used the squint or blur test for print design way back when, but never thought of applying it to a web page. Statistics from testing would be great, however it is obvious that the new form creates clear lines for the eye to follow. Thanks for the article!

Tony Pritchard

November 13, 2007 1:44 PM

The layout is without question much better.

Now there needs to be some thought put into the wording.

My pet hate — why do designers of forms such as this always assume that everyone lives in a city? I don’t, so I don’t know what to put in that field. It’s especially bad when I type in the name of my little town and get a message back “Not a valid city.”
The wording should be “City/town”.

Kit Grose

November 13, 2007 2:14 PM

I disagree with your choice to use select boxes for birthdate entry.

No site with as wide an age variety should make people pick a year from a list of 20 or more almost identical options.

Mark

November 13, 2007 2:19 PM

Similar to Geoff’s comment, I found the following site very useful when determining label placement.

Garrett’s approach above does look nicer visually – but the UX Matters research, as well as my own validation on several projects, has shown that labels above the form inputs are actually more usable even though they’re not as strong visually.

Mark

November 13, 2007 2:24 PM

Ah, I see you linked to the article I mentioned in my previous post. That’s what I get for skimming the first time through. :)

Garrett Dimon

November 13, 2007 5:34 PM

Justin – I didn’t actually write any code for this, but having done it in the past, you’re absolutely correct. It’s not easy. That said, it’s not impossible. Unfortunately, I don’t know of any resources off the top of my head that discuss it.

Allen – You’re right, that is a very valid concern. I didn’t worry about it in this scenario simply because it appeared to me that eBay was redirecting to different sites based on the country anyways. However, based on some followup research and e-mails, it does appear that testing and research is indicating that labels above the field do end up leading to statistically significant improvements.

Tony – I think that’s a pretty small pet peeve, and feel pretty comfortable that nobody is going to be confused by the distinction.

Kit – I can’t say I’m too thrilled with the use of drop downs myself. I didn’t worry about it too much, because as I mentioned later in the article, I wasn’t sure that birthday was even a relevant field at all. In general, I completely agree with you and wouldn’t want to use drop downs at all.

Mark – As it turns out, having the labels above the fields does provide a statistically significant conversion improvement. Fortunately, this layout would still work nicely with very minor adjustments. The important part is the white space and a smother flow through the fields.

Of course, as I said in the article, I learned long ago that no design change should be expected to be an absolute improvement. The only way to know whether changes like this are definitive improvements is by putting them through the ringer and testing them.

Dennis

November 14, 2007 8:19 AM

@Justin:

you could do this with the following markup and css:

CSS:
ol { list-style: none; margin:0; padding:0;
}
li { clear: left;
}
label { display: block; float: left; text-align: right; width: 150px;
}
input { margin-left: 10px;
}

Markup:
<form id=“testform” action=”#” method=“post”> <fieldset> <legend>Tell us about yourself…</legend> <ol> <li> <label for=“firstname”>First Name First Name First Name First Name First Name</label> <input type=“text” name=“firstname” id=“firstname” /> </li> <li> <label for=“lastname”>Last Name</label> <input type=“text” name=“lastname” id=“lastname” /> </li> </ol> </fieldset>
</form>

Bryan

November 14, 2007 9:29 AM

@Justin Stevens: Putting labels to the left of an input field is a great idea but it’s often difficult to align everything with out using a ton of CSS.

Not so! (Dennis beat me to it :P)

Check out the very excellent AListApart article Practical CSS Layout Tips, Tricks, & Techniques."

Bryan

November 14, 2007 9:33 AM

Oh, I forgot — the dropdown on the State/Province is a UI nightmare. It is far, far easier for the user to type in the correct info than select from a drop-down, especially if the user is older and/or a novice.

Ensuring proper formatting, etc. is very easy to do on the backend. You ARE performing server-side validation anyway; trust no input and all that, right?

Miha Hribar

November 15, 2007 1:09 AM

The Gaussian blur is just brilliant. You can really spot any hierarchical errors on your page. Thanks for sharing :)

Blaise Kal

November 15, 2007 6:26 AM

Quote Garrett Dimon: Blaise – While I don’t have any hard numbers, my experience and intuition tell me that a checkbox to verify that people have entered the correct information wouldn’t actually get a significant number of people to recheck their work.

I’m sorry if I was somewhat unclear. I didn’t mean with an checkbox, or on the same page.

What I meant is that after the user submits the form, he gets a new page with the submitted data. Below the data the question “is this correct?” and two buttons: one with “Yes, submit” and another with (for example) “No, return to form”.

My experience is that this is a good measure to prevent errors and typos (and you don’t need a “confirm e-mail address” field).

There is a good reason I don’t use a checkbox or a “please verify fields” notice on the same page as the form: A filled form is less convenient for recognizing errors for a user. Sometimes fields hide their value partially, and form are often cluttered with buttons, instructions, required marks, etc.

Beth

November 15, 2007 3:40 PM

Great article Garrett! While having two birthday fields is redundant, I think it has to do with COPA.

At American Greetings and our partner sites I constantly have to put this (in my opinion) unnecessary clutter on forms, just so we’re at least attempting to verify a person’s age to satisfy legal requirements. (Not sure the checkbox by itself flies for this.)

John Barbagallo

November 17, 2007 2:37 PM

Excellent article. Thanks so much! Helped me open my eyes to new aspects of form flow.

Chris

November 22, 2007 5:24 AM

What’s with the hostile “confirm email address” stupidity?

Hey – here’s a great design idea – lest make users type the exact same TWICE before we let them sign up!!

SHAME SHAME SHAME on you for attempting to “improve” something, and leaving the worst aspect of the entire form right there.

Pieter-Jan

November 22, 2007 8:54 AM

Well it can make some kind of “heey I am part of the family” if you make it TWICE. So the users can think that they are important. Maybe…

Kyrre Nygård

November 22, 2007 2:28 PM

Brilliant. Making things better, taking something complex and making it simple. Brilliant.

Kristy

November 24, 2007 7:48 PM

I totally love how you suggested laying out the labels on the left and input fields on right. I have noticed that this is the norm on most online and hard copy forms. The users will feel more comfortable filling out something they are already familiar with. eBay is just one of the many companies that should consider doing additional usability testing and maybe doing some more research to see what people are really using.

Ricardo

November 26, 2007 11:46 AM

I have found interesting the use of gaussian blur for hierarchy and whitespaces.
Nice.

Garrett Dimon

November 26, 2007 3:17 PM

Chris – As I stated in the article, I wasn’t comfortable taking liberties with their business requirements. That’s a topic for a totally different, and probably much longer and more involved article.

Bruce Lill

November 27, 2007 12:25 PM

Great info.
Only 2 complaints: I found users copy the email to enter into the 2nd, making it useless for validation and just a pain to use.
The other is the state pulldown, it takes about 5 clicks to get to missouri. If the user doesn’t know the state code then there’s little chance they know the rest. Let them just enter it.

Garrett Dimon

November 27, 2007 1:37 PM

Bruce – I completely agree with both of those points. In general though, I wanted to focus on layout rather than making significant changes to the form fields.

Sorry, comments are closed.

Media Temple

via Ad Packs