eBay Before and After – A Lesson In Form Design

In his article titled “Better Web Forms: Redesigning eBay’s Registration” for Digital Web Magazine, Garrett Dimon critiques the eBay registration form and applies his web design and usability judo chops to show us what he believes is a more usable version.

Dimon’s revamp includes modifications to the introduction, section headings, subdividers, field and label relationships and some additional, minor tweaks.

Much of designing forms is about making a set of almost imperceptible changes that create a more natural and reader-friendly experience.

What I found most compelling about this article is Dimon’s eye-tracking comparison:

Ebay Redesign Page Flow Screenshot

The design was not commissioned by eBay but serves as an example to illustrate the design principles in the article. Interestingly, the author stumbled upon two versions of eBay’s form suggesting they are doing their own split tests.

Related articles mentioned in the article’s comments offer additional research on label alignment and label placement:

  • Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
  • Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
  • Bold labels—Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
  • Drop-down list boxes—Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
  • Label placement for drop-down list boxes—To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears

(credit: Matteo Penzo)

Why would someone think so hard about this? Reducing visual clutter on a page might subconsciously improve your overall site experience, and customers will have an better impression of your site. It might also increase conversions if the form is easier to fill out, although I can’t imagine that a less-than-perfect label design would be a deal-breaker for a sign-up.

Of course, if you tire out your customer’s eyes too fast with visual clutter, you could also be reducing the amount of time they are willing to spend on your site browsing and converting. But these are just my speculations. What do you think?

Related Articles

6 Responses to “eBay Before and After – A Lesson In Form Design”

  1. Baronnn says:

    If you put the labels above the input field, is it then also better to put several input fields next to each other (like first name and last name) or is it still better to put one input field per row?

  2. Hi Baronm,

    I can’t see there being any problem with that approach, especially as it keeps the form mostly above the fold. But I’m not a user experience designer. So long as it is not visually cluttered I would imagine this being okay.

    The UX experts would tell you to do your own testing ;-) If you do this, please share your findings with us!

    For anyone more interested in the subject, watch out for Luke Wroblewski’s new book coming soon:
    Web Form Design Best Practices

  3. Scott says:

    Very cool. I love this stuff. Keep it coming. Also good lessons for retailers here looking to streamline and improve their sites to, as we all know, ultimately up conversion rates.

  4. I think one of the biggest issues facing websites today is the notion that ‘the fold’ is paramount. People squish tons of information to the top of a page thinking that’s where it needs to be. What we need to be concerned with is flow of information. Scanability. Removing visual blockers. Taking extra time to condense messaging.

    The old adage “if I had more time I would have written less” is 100% accurate online.

  5. [...] not just form length but also label alignment and placement that [...]

  6. Restrictions live only in our thoughts. However if we utilize our creativeness, our possibilities become limitless

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS