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?

The same principle can be applied to web design. Once you have your user committed, whether that be reading your blog post, signing up, making a purchase or making a contribution, design the next step so that the user flow doesn’t just come to a halt.

Blog

Someone has just read your blog post. Let’s assume it was a good post and they liked it. Rather than them leaving, satisfied with the knowledge you just provided, wouldn’t it be good if they would contribute or market your blog for you?

• Add share links to the bottom of your post and make it easy for users to share it across their social networks
• Ask a question that leads the user towards leaving a comment
• Suggest other posts that they might be interested in, and keep them on your site

At the end of each post, Design Informer encourages users to share the love, share their thoughts and also suggests other posts they may be interested in

Sign up

When a user signs up you’ve got them on board. A quick easy sign up process is extremely important but once you have them in through the door, you can encourage next steps.

1. Let them connect with their friends from other networks
2. Make it obvious where to start

Twitter does a good job of encouraging you to invite and follow friends from your other networks.

Beanstalk designs the blank state with an obvious ‘Create a new repository’ button and also provides some help for new users.

Contributions

When people contribute to your website, whether that be a status update, a review, a photo or even a blog comment, chances are they want to share that with their friends. After all, the reason they’ve contributed is so the rest of the world can see it.

By making it easy for users to share this link across their other social networks, they get to share it with their friends and it also helps get your own website or service out there.

When someone writes a review on Lookaly, they can easily share this review with their friends on Twitter and Facebook with the click of a button.

Contact form

Your contact form confirmation is often something that is overlooked. Once you’ve confirmed to the user that their enquiry has been received, suggest other things they can do while they wait for their reply:

• Check out our blog
• Follow us on Twitter
• Make a donation

When you submit your email to Ecliptic’s website, you are presented with a compliment, along with links to their Twitter profile and direct email.

Checkout

If a user buys something from you, fantastic, you got the sale. But why leave it there? If they’ve departed with their money for something you are selling, chances are they’d do it again.

Amazon uses a smart shopping basket and checkout system that suggests related products during and after you have checked out.

Conclusion

The key is not to lead your users to a dead end – keep the flow going, always suggest more.

Getting them on board first is the hard part, but once you have them committed, it should be easier to lead them onto next steps.

Is this something you’ve thought about? Have you any other suggestions for designing next steps?

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.