Two quick examples of great form treatment

Two quick examples of great form treatment (0)

Robert Beerworth | 27/07/2012

I've written plenty of blogs explaining that the form typically is where the rubber hits the road in terms of website performance.

It's where users commit; purchase your gear, ask a question, become a lead.

It thus goes that you should spend time and effort not only designing and writing your form, though also ongoing in terms of testing and optimising your website.

There are plenty of rules about designing forms, too many for this blog. (It's also Friday 6.27pm!)

At a high-level, reduce fields, keep the form above fold, tell users what is happening and will happen and make it look easy and inviting to engage with.

Two quick examples I like from this week...

The first is below and from The Iconic; nothing more needs to be said:

Example form design from The Iconic

The second is at AirBNB.

When the homepage loads, the only field shown is 'Where do you want to go'. As you start typing, the additional fields of checkin and checkout dates as well as number of guests visually slides out.

The screenshots below don't do it much justice and it is much better seen in the flesh:

Oh, and have a look at the transitions on the Squareup homepage; unrelated to forms, though a nice touch. When you transition from < Left to Right > in the carousel, the layers are slightly differently timed as they load. Nice effect.