LearnHow to Increase Sign-ups with Easier Captchas

Treehouse
writes on August 11, 2009

As everyone knows, captchas can be a real nightmare. Besides their serious accessibility issues (have you ever clicked the “Hear a set of words”?) they’re a real pain in the ass to enter.

It can be very discouraging to a visitor if they have to re-enter the captcha text every time they make a mistake on the form. So frustrating in fact, that they’re likely to give up after making a couple mistakes.

Here’s an example from the Gmail signup, of how not to do it:

Yesterday, I came across a great way to handle this. When you’re signing up for Twitter and you enter the captcha correctly, but make a mistake on another field (like email address), it removes the captcha which means you don’t have to enter it again. Hoorah!


View larger

I’m not sure if Twitter has A/B tested this screen, but I’d bet a chunk of change that it improves signup rates significantly.

On a side note, if you’re a frontend developer, you’ll enjoy two awesome talks by Britt and Dustin from Twitter:

  1. “The Future of Frontend Engineering – Learning from Twitter” by Britt Selvitelle
  2. “The Future of JavaScript Design Patterns – Unleashing Full Object-Oriented Capability” by Dustin Diaz

Read more at The Future of Web Apps site.

0 Responses to “How to Increase Sign-ups with Easier Captchas”

  1. Anonymous on October 27, 2010 at 6:40 pm said:

    Yeah, I find it amazing how websites seem to have blindly accepted that dodgy captchas are the way to go. In fact, captchas are completely unnecessary – you don’t need them at all. I wrote a post about it here http://www.webmasterworld.com/webmaster/3218242.htm

    • I’m not sure that would work every time for people who use browsers that will fill in forms automatically (if enabled). Has anyone tested that out?

      • Anonymous on April 27, 2011 at 5:06 pm said:

        Wow, that’s a really good point – hadn’t thought of that. I’ve just done some tests with IE 8, Firefox 4, Safari 5 and Chrome 10 and it turns out they were all fine except there was actually a problem with Chrome. So, thanks a lot for the heads up!

        I was using “name2” for my hidden field and Chrome was filling this in. But this was solved by changing the field name to something random like “isd7sufh45n”. Now it seems to work fine again 🙂

  2. Then to the Supreme Court for visits with some of them . ,

  3. No_limits43 on October 22, 2009 at 10:53 am said:

    Then to the Supreme Court for visits with some of them . ,

  4. i like this article. it is very knowledge ful article.
    hire london bus

  5. Even better would be an article on alternatives to using captcha. I’d love to see some creative examples and solutions. I like what @Martin Tajur had to say. This is an acceptable solution as it was in context with the subject matter.

  6. Captchas are such a pain.. Yet necessary to fight the spam, there are times that I know for a “fact”there in NO way anybody can make them out… Some people just have too much fun thinking about what hell they are putting people through. It is a good idea to remove the captcha once it is correct… Yea!

  7. Thanks Ryan for good examples and for sharing with us.

  8. Michel Tel on August 11, 2009 at 3:27 pm said:

    Great use of interaction design and usability. Glad to see there are some real good examples, that don’t frustrate the users.

  9. Thanks Ryan. I appreciate it very much if you can record and share the videos after the conference. It’s too difficulty for me to go abroad and join the conference.

  10. Where are the two awesome talks by Britt and Dustin? I can’t find them though google.

  11. Amazingly enough, I just created a Twitter account about 10 minutes ago and experienced this very thing when the email address was recognised as already being in use.

    What I would recommend, though, which is what we implemented on my other company’s redesign (yet to go live), is to use some other form of bot recognition first. If the form’s submission was suspicious in any way, then ask the user to do a captcha.

    This way, the vast majority of innocent people need not be bothered by it at all. And the few suspicious ones pay the price for being suspicious.

  12. What we did with our Stop Killing Dogs online petition (located at http://www.uniteddogs.com/stopkillingdogs ) was that we introduced three images – each containing a silhouette of an animal. One of the three was a dog and the order of these images was always different. The visitor had to indicate which of the images was a dog. Of course, this approach has implications with accessibility, but we keep on thinking and improving. Perhaps it can be solved with audio or textual captions (e.g. using onomatopoeia-like words for alt=”” parameters that represent the sound each animal makes – woof-woof, oink oink, etc)

  13. Nice tip!

    Another thing that I do is to hide the captcha until gets to the filling in password verification field. My thinking is that this makes the form less of a visual/conceptual burden on first appearances, so less likely to scare them off.

  14. Would be interesting to get some figures for A/B testing like you mentioned, but certainly a good example to follow

  15. Alternatively, you could use inline validation before the form is sent to avoid filling in those horrible captchas over and over. Although this is a good non-JavaScript solution.

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more