by anthony on 04/08/11 at 4:09 pm
How fast can you spot the difference between ‘sign up’ and ‘sign in’? Using these together as button labels causes users to click the wrong button because they’re too similar. This annoys users who sign up, but it especially annoys users who sign in because they make the mistake the most.
However, it’s not their fault. When users perform rote tasks, such as signing in, they’ll often scan for what they need to click without reading or thinking. It’s easy for them to get confused when they see two buttons next to each other that use the same verb in the labels. In order for them to click the right button, they have to make a cognitive effort to distinguish between ‘sign up’ and ‘sign in’. This extra work they have to do creates a bad user experience.
If you want to give your users a fast and mistake-free login experience, avoid using ‘sign up’ and ‘sign in’ together on your buttons. Instead, make the button labels distinct from each other by using different verbs. There are alternative ways to say ‘sign up’ and ‘sign in’ that mean the same thing. A better way to say ‘sign in’ is ‘log in’. If you want to use ‘sign up’ as a button label, use ‘log in’ with it. The verbs are different and won’t cause as much confusion. However, if you want to make your button labels more distinct than that, use a more descriptive phrase for ‘sign up’.
Some better ways to say ‘sign up’ are:
Join [Name of your site]
In ‘sign up’ and ‘log in’, the verbs are different, but the prepositions are similar and the syllables are the same. This can still cause confusion among some users. By using an alternative to ‘sign up’, you remove the preposition and use a phrase with different syllables. This gives the text labels on your buttons a different length and makes it even more clear to users.
Text labels aren’t the only way to make buttons distinct. To help users click the right button every time, give your buttons a different visual style as well. Since it’s important for users to find your ‘sign up’ when they first visit your site, you should give the button a high-contrast color that stands out from the background, and the ‘sign in’ button a color that blends in with the background.
When you make the text labels and visual style of your ‘sign up’ and ‘sign in’ buttons distinct, users won’t click the wrong one anymore. They won’t get confused and have to exert cognitive effort to distinguish between two similar buttons. Instead of clicking the wrong button because they’re too similar, they’ll click the right button because they’re so distinct.