As designers we often get carried away with how a sign up form looks and forget about the user experience. Border here, rounded corners there, maybe a hint of shadow…

Truth is users don’t care about how it looks. They care about getting through the form as quickly as possible. They care about what information you’re asking for and why you need it. They care about getting access to your website or app so they can start using it.

What’s the minimum amount of data you need to let someone in?

Ask yourself “Do I need to know this right now?”

Email address

The one thing you need to create an account is most likely an email address.

Everyone online has at least one email address so this is the perfect way to identify someone using your app and when you have their email you can contact them, send them setup details, keep them up-to-date.

Password

You more than likely need a password as well to let users into your app.

That said you can always email them a password then let them change it later, for the sake of giving them even quicker access.

It’s debatable whether you need a field to confirm the user’s password or not.

Username

If your app involves some sort of public profile, you’ll need a username that will identify the person. This username can then be used for login, as well as their email.

What you (probably) don’t need to know “right now”

• Date of birth
• Zip/post code
• Gender of the user
• First name
• Last name

All these are extra fields that will potentially scare your user away.

I don’t know what the stats are but I guarantee sign up forms that have these required fields end up getting a good lot of Joe Bloggs, born on 1st January from Beverly Hills 90210. Why? Because users just want quick access and they’ll enter the first thing that comes to mind that doesn’t lead back to them.

Gradual engagement

I’ve been reading Web Form Design: Filling In The Blanks, where Luke Wroblewski talks about gradual engagement.

Lets look at this process.

Sign up process 1: Facebook

1. I’m presented with this form. This is enough to turn me away as there are quite a few fields.
2. After submitting these details I have to complete a captcha for anti-spam.
3. I successfully sign up but an activation link has been sent to my email and I need to verify. I have to leave the site now to check my mail.
4. Verification email link clicked. Thankfully this wasn’t delayed or marked as spam.
5. I’m in. Now to complete the process, find friends etc.

See how many annoying things happened here. The thing is though, Facebook can get away with it. Your website can’t. If this was another site and Facebook wasn’t one of the biggest sites on the planet, you probably would have walked away by now.

Sign up process 2: Twitter

1. Sign up – pretty good, bit more fields than I would like but satisfactory.
2. After submitting details I’m presented with a captcha for anti-spam.
3. Now I’m in and I can start using it.

Twitter definitely has a nicer sign up process than Facebook. They also sent me an activation email but notice how Twitter lets you into their app (with limited access) before you have to click the activation link. Good job.

Sign up process 3: Geni

Geni is a family tree web app and has a very interesting sign up process:

1. You don’t sign up, you just start making your family tree.

Geni has a form on the homepage that records your email address, which is all they need to setup your account, but it’s cleverly disguised as part of the application so I never *really* sign up. Instead I’m jumping straight in and using the service.

Behind the scenes Geni has emailed be a temporary password to use until I create my own.

This is gradual engagement. I’m able to start using the service without actually signing up. I’m happy as there’s no time wasted. They’re happy as they have another user using their service.

Conclusion

Try to get the user involved first before asking them to sign up, then only ask for the information you really need.

If you need email confirmation (to prevent spam accounts) let the user continue to use your website in the mean time. Maybe close the account after a week or a month if they still haven’t verified, or restrict access to certain parts of your app.

Don’t scare users away with many fields. Often zip codes, DOB, even names can come later. Let them in fast.

For handiness make use of Twitter oAuth, Facebook Connect and OpenID etc. so users can sign in with 3rd party tools.

Further reading

This blog post is based on my own interpretation of a chapter of Web Form Design: Filling In The Blanks.

I highly recommend this book if you’re a UI designer as you undoubtedly work with forms daily. If you’re interested in usability, eye fixations, error prevention, web apps etc. then you should read this book.

• WebFinger – a protocol that lets users sign into a site using just their email address
• Sign up forms must die – a more in depth look at gradual engagement

What annoys you most about sign up forms? Have you tried gradual engagement?

Rocket Surgery Made Easy is Krug’s follow up to the successful Don’t Make Me Think, which introduced us to the world of common sense web usability.

The purpose of this book is not to make you a usability professional or a usability testing expert; it’s just to get you to do some testing.

Who is it for?

The book isn’t for professional usability experts. It’s more so aimed at people who don’t do usability testing, and tries to encourage you to start or do more by guiding you through the basic simple steps that are involved in low budget, but extremely useful, usability tests.

The cover doesn’t specifically imply that the book is about the web, but it is very much focused on websites and web applications.

If you work on a large web site or application, or design websites for a living, then you will find this book very useful.

What’s in it?

• Why you need to perform tests
• What to test and how to test it
• How to recruit testers
• How to perform you own tests, with little to no budget
• A script for performing your own tests
• What to do with the results

Verdict

This is just what I needed to remind me of the important of usability testing. Krug’s book outlines simple usability tests that only need to be performed one morning a month with as little as 3 testers, but that will help you identify and prioritise key problems and user issues with your website.

With an easy to follow step by step guide, checklist and script, you’ll be sure to finish this book feeling like a usability pro.

Now you just need to put it into action!

Buy on Amazon

Pull quotes

As a result, we end up designing for our abstract idea of users, based for the most part on ourselves.

…it’s possible to detect serious usability problems very early in the development process…

Designers are often reluctant to show things that look unfinished…you will come across problems that you already know about, but there will also be surprises.

…there are many things you can learn by watching almost anyone use it.

The first step is to jot down a list of the most important tasks that people need to be able to do on your site.

A scenario provides some context (“You are…,”"You need to…”)

You can’t tell them what to do or give them clues.

When fixing problems, try to do the least you can do.

Do we need to explain what it means?

A legend is a key that tells the user what certain symbols or words mean (I’m not talking about the <legend> element here). In most cases a form legend will look something like so:

* Required field

When you design a website there is typically at least one type of form (contact) and possibly many others (sign up, checkout etc.). Sometimes I do include a legend and sometimes I don’t – but do we need to?

What do the big boys do?

eBay

eBay indicates their required fields with * and includes a legend at the top “* Indicates required field”.

Yahoo

Yahoo puts “(Optional)” beside the only field on their sign up form that is optional (out of 18 fields). This means the form doesn’t get cluttered with asterisks. Good thinking as the label speaks for itself.

LinkedIn

LinkedIn interestingly has a legend at the bottom (below the submit button) indicating what * means, even though all fields are required.

BBC

The BBC complaint form marks required fields with * and includes a legend at the top.

Required fields only

Now you could argue the point that only required information should be asked for on forms. I’m a firm believer in the least amount of fields possible, and particularly for sign up forms this is true. Although for contact forms or checkout forms there will always be information that is optional e.g. web address, address line 2 etc.

It depends

I made the decision not to include a legend on my own contact page. My thoughts here are that:

1. Most people using my site will know what the asterisk means
2. If someone really doesn’t know what it means, they’re probably not the type of person I want to work with anyway

Depending on who your website is aimed at, you may or may not have to include a legend. New users or older generation users may not know what the asterisk means, so make the decision based on your target user.

Over to you

This is a very small thing and probably something as web designers we take for granted, but it can make a big difference as generally it involves your conversion page (signups, enquiries) so you don’t want to lose any users.

Similarly to my blog post about signup forms requiring confirmation passwords, I’m interested in your perspective on this.

Do you still need to explain what an asterisk means on a form? Do you use some other method of indicating required fields?

You also want to make sure that visually your website has a hierarchy and is broken down in order of ‘importance’. Call to actions, H1s and H2s will fall under the more important elements, then H3s, H4s and links, then paragraph text and other images towards the bottom of the scale.

A user should be able to look at a page and instantly recognise this hierarchy. Now here’s a useful way to check if your hierarchy is as clear as you hope it is.

Blur your vision

Usually after designing a website I’ll use this technique to check for visual hierarchy. Look at the website and blur your vision. Yep, sounds a bit weird, but what you’re trying to see is if the elements you want to stand out still stand out.

Blur your screenshot

So that your eyes don’t get sore and to give you a bit more time to analyse it, take a screenshot of your website, bring it into Photoshop and give it a Gaussian Blur (Filter > Blur > Gaussian Blur) of 5px.

Here are the results.

Does it work?

If you find you need to improve the visual hierarchy for different elements you can alter the following.

• Size
• Contrast
• Colour
• Shape
• Position
• Whitespace and padding

You could go one better and blur the screenshot by 10 pixels to see if your ‘banana’ still sticks out.

What do you think, does it work? Does it help?

Further reading

• Five second test
• Call to action buttons
• Visual hierarchy in web design
• Contrast and meaning

A short story about a safe

Recently I was staying in a hotel and like most hotels it had a safe in the room. To activate the safe I had to dial in a pin number of my choice and press the lock button.

I put my valuables into the safe, keyed in a 4-digit number and hit the big green button. But it didn’t lock. Instead it cleared the pin I entered.

I then read what the buttons said and the green button actually said ‘Clear’ and red said ‘Lock’.

Colour association

We associate colours with various actions in our everyday life. Green tends to stand for good, and red for bad. On a traffic light, for example, green means go and red means stop.

In the case of the safe above, I expected to type in a number and hit the green button to indicate that I was good to go. I based this decision on other interactions in everyday life, for example, taking money out of an ATM where I would enter a 4 digit pin and hit the green button. I did this automatically, without even reading what the buttons said.

I don’t think there’s either of us at fault here, we just interpreted the colour in different ways. The safe manufacturer probably assumed red means secure, where as I thought it meant error and green meant confirm.

Applying colour to web interaction

We can use this technique in our designs too, assigning different colours to different actions.

Using red for delete or cancel actions may make it quicker for your user to make an association with that link. Likewise, green can be associated with an add or save action.

Lets look at LinkedIn for example. Here are the actions associated with someone requesting to be connected to me.

But what if we gave these actions some colour association.

To me this cuts down the amount of time a user has to spend reading the action text. Instead, they are able to visually identify the green link and assume by clicking it will be a confirm action.

What are your thoughts on associating colours with actions and have you any good examples?

A/B testing

A/B testing involves showing different users different versions of a site and measuring how each version performs.

• Design two (or more) versions
• Randomly show users different versions
• Track which version performs/converts better
• Evaluate
• Use the best version

Sounds complicated doesn’t it? Thanks to Google it’s not as hard as you think. Google has a Website Optimizer service that enables you to easily setup A/B tests and then analyze the results for you.

A/B testing in action

I recently setup a very simple test with Sharethrough changing the call to action text of two buttons and measuring conversion to the products page.

Some users seen these buttons…	and others seen these (50/50 split)
A	B 5% improvement

Version B showed a 5% improvement on conversions to version A, the original.

I must stress this is a very simple test I put together but it just goes to show that even the smallest text change can make a difference. I can now go onto setup more tests and experiment with button placement, language used etc. while measuring conversions to enquiries and conversions to user signups.

A/B testing resources

Before you get started with A/B testing, check out the following:

Carsonified: How to do A/B testing in Wordpress

37 Signals: Writing Decisions: Headline tests on the Highrise signup page

UX Booth: How to increase site performance through A/B split testing

ABtests.com

Google: Website Optimizer

Do you use A/B testing?

Please share any experience or tips while doing A/B tests.