400 Bad request

A look at the big sites

Let’s look at the web’s top web sites and applications to see what terminology they use.

Facebook

Login: 1 Sign in: 0

Gowalla

Login: 1 Sign in: 1

Foursquare

Login: 2 Sign in: 1

Basecamp

Login: 2 Sign in: 2

Google

Login: 2 Sign in: 3

Twitter

Login: 2 Sign in: 4

eBay

Login: 2 Sign in: 5

LinkedIn

Login: 2 Sign in: 6

Last.fm

Login: 3 Sign in: 6

SlideShare

Login: 4 Sign in: 6

Vimeo

Login: 4 Sign in: 6 Log In: 1

Spotify

Login: 4 Sign in: 6 Log In: 2

Definitions

Looking at other websites there doesn’t seem to be anything decisive – there’s a mix of login, sign in and log in.

What does each term mean?

Definition of login (from Dictionary.com)

the act of logging in to a computer, esp. a multiuser computer or a remote or networked computer system

Definition of sign in (from Dictionary.com)

an act, an instance, or a time of signing in

No conclusive answer here either, both work fine.

How I work

I use login.

The reason for this is because I tend to keep sign up and login links available at all times, on all pages. These links are usually top right and next to each other e.g. Lookaly.com

Here’s a heatmap visual of this area.

Using the term ‘login’ means that at a glance the user can instantly tell the difference between ‘Login’ and ‘Sign up’.

By using ‘Sign in’ the user has to take a second or two to read the words to identify between the two and there’s more chance of them clicking the wrong link.

Of course this theory only comes into effect if you have a sign up and login link beside one another. As you can also see from the heatmap above, this sign up link doesn’t get a lot of clicks and most of the sign ups come from other call-to-actions throughout the site.

Words of wisdom from Twitter

I put the question out to my Twitter followers and got some good responses.

What do you think?

It’d be great to hear your verdict to see if you have a good reason to use one version over the other.

Use the poll below to cast your vote and please follow up with any comments or advice you have.

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?

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?

It’s an extra field

For me, I don’t think you do need to confirm your password. It’s an extra field to fill in therefore it takes extra time to complete sign up, so the more fields there are to complete the more I’ll think twice about signing up.

But what if I misspell my password?

A password field will be starred out i.e. you don’t see what you’re typing, which means you could easily make a mistake and submit the wrong password without knowing.

This is where the ‘Forget your password‘ function comes in handy, which is an inconvenience but will have you up and running again with your old/new password in a couple of minutes.

Sign up forms with confirm password

WuFoo

GMail

Basecamp

Sign up forms without confirm password

Twitter

Facebook

Tumblr

What you think on Twitter

What’s everyones thoughts on confirm/verify password fields on sign up. Are they necessary?

I’d say if you have a FOOLPROOF password reset mechanism it’s ok, but remember users are always the weak link.

Annoying and not needed if there’s decent ‘forgot your password’ functionality later in the game.

yes! either that or do what neilsen suggests and make password fields plain text… :o

Confirm/Verify just a nuisance to me, I use 1Password or Textexpander to fill that in, so it just makes me paste twice

They are useful, but not necessary, somehow it looks unfriendly, like mistrusting the user.

Unnecessary. The iphone Password system is good. You see the char you typed for 1 sec then it disappears

I despise them. Just make sure they have a means of getting back in if they do manage to mess it up :)

They don’t bother me so much, handy for the odd times when a typo is entered into a password field during a rushed sign-up.

Yes. A large portion of support calls to clients regarding log in issues were reduced when we introduced a p/word confirm field.

i would think so, just incase you mistype it =)

To confirm or not to confirm?

What is the best route to take if designing/developing a sign up form? Have an extra field to verify the password or forget about the extra field and assume if the user makes a mistake they can use the forgotten password link? Or is there something else about the confirm password field that I’m overlooking here?

Let me know what you think as a user and your reasoning behind your preference.

Seth Godin (The Big Red Fez) calls them bananas and your users are the monkeys. The objective is for the monkey to find the banana in less than 3 seconds (before they give up and leave). “Force yourself to design each and every page with one and only one primary objective. That’s the banana. Make it big. Make it blue (or red). Make it obvious.”

This post discusses how to design the perfect ‘call to action’ button and showcases 30 examples of good call to action button designs.

How to design the perfect call to action button

Force yourself to design each and every page with one and only one primary objective. - Seth Godin

Your call to action button needs to be obvious and jump out at the user. Here’s 5 characteristics of a good call to action button.

1. Colour

The colour should stand out from the rest of the page, and is therefore usually a brighter, contrasting colour.

2. Location

It should be located where the user would expect to find it easily. Above the fold, beside a product, in the header, top right navigation; it should be obvious and not hard to find.

3. Language

The language you use to communicate with your user is important. It should be short, to the point (no waffling) and should start with an action verb like signup, download, create, try etc.

And give the user a reason to click on your call to action button, ‘free‘ being the number one incentive.

4. Size matters

To make it obvious that it’s your most important button and that you want users to click on it, make it bigger than any other button and give the user as much area as possible to click on.

5. Room to breathe

Your button shouldn’t be overcrowded with other elements. It needs sufficient margins so it can be distinguished and the text needs enough padding so it’s easy to read.

Showcase of good examples of call to action buttons

1. Things

2. WordPress e-Commerce

3. Skype

4. PB Wiki

5. Exceptional

6. PicsEngine

7. InCase

8. GoodBarry

9. Plan HQ

10. TypePad

11. Mozilla Firefox

12. 37 Signals

13. Hambo Design

14. Cake PHP

15. Traffik

16. Boag World

17. Donor Tools

18. Luke Larsen

19. Square Space

20. Wu Foo

21. Barack Obama

22. Freshbooks

23. Crazy Egg

24. Web Notes

25. Campaign Monitor

26. Light CMS

27. Litmus

28. Stumble Upon

29. Remember The Milk

30. Ekklesia 360

Further reading

• The Big Red Fez Easy read by Seth Godin on how to make your website better

Any other pointers you like to offer or any other good examples you know off, please share them in the comments below.

Sponsored link: Excellent printing brochures available at PsPrint.