Curated by Carsonified

Topics

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 29

How to Increase Sign-ups with Easier Captchas

By @ryancarson

11 August 2009 | Category: Uncategorized

Twitter signup page

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:

Screengrab showing the signup screen for Gmail which makes you re-enter the captcha if you made an error on the form

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!

Twitter signup page showing captcha filled out correctly so you don't have to enter it again
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.

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://jordanmooredesign.com/ Jordan Moore

    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.

  • http://www.kamikazemusic.com Dave Sparks

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

  • Ryan Carson

    They’re actually already doing that – it’s a great combo of the methodologies.

  • http://engineroomapps.com Tobin Harris

    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.

  • http://www.uniteddogs.com Martin Tajur

    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)

  • http://www.onlineassociates.ae/ Fahed

    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.

  • http://amirotter.wordpress.com/2009/07/27/hello-world/ Design for Delight « Ami Rotter | UX Designer

    [...] July 27, 2009 · Leave a Comment A great example from Carsonified on » How to Increase Sign-ups with Easier Captchas [...]

  • John

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

  • Ryan Carson

    You can see the whole schedule here: http://events.carsonified.com/fowa/2009/london/schedule

  • John

    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.

  • Michel Tel

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

  • http://www.recessionprofitplan.com/about Angelina

    Thanks Ryan for good examples and for sharing with us.

  • http://www.lorislingerie.com/ Lingerie Lori Dell

    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!

  • http://artsbox.com Michael Troy

    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.

  • http://www.london-bus-hire.com/hire_london_bus.html hire london bus

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

  • http://wind333.wordpress.com/2009/08/12/my-daily-readings-08122009/ My daily readings 08/12/2009 « Strange Kite

    [...] Carsonified » How to Increase Sign-ups with Easier Captchas [...]

  • http://www.xdesignblog.com/best-of-the-week-78 Best of the Week #78 | X Design Blog

    [...] How to Increase Sign-ups with Easier Captchas [...]

  • http://carsonified.com/blog/design/10-user-interface-design-fundamentals/ Carsonified » 10 User Interface Design Fundamentals

    [...] A great example can be seen in How to increase signups with easier captchas. [...]

  • http://www.vleerkatcreations.com/2009/08/17/10-user-interface-design-fundamentals/ 10 User Interface Design Fundamentals « Vleerkatcreations

    [...] A great example can be seen in How to increase signups with easier captchas. [...]

  • http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/10-user-interface-design-fundamentals/ 10 User Interface Design Fundamentals – Programming Blog

    [...] A great example can be seen in How to increase signups with easier captchas. [...]

  • http://uxzentrisch.de/captchas-verbessern-bei-fehlermeldungen/ So macht man Captchas nur noch halb so nervig… – uxzentrisch

    [...] Ryan Carson hat diesen Fall entdeckt und schön mit Screenshots in seinem Blog dokumentiert: »How to Increase Sign-ups with Easier Captchas«. [...]

  • http://karinalthuon.wordpress.com/2009/08/28/captcha/ Captcha « Arquiteta de Informação

    [...] Acessar a matéria [...]

  • http://www.alibuybuy.com/9790.html 用户界面设计10原则 | 互联网的那点事

    [...] 如何利用简单的验证码提高注册率一文中讲述了一个绝佳的例子。 [...]

  • No_limits43

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

  • http://link No_limits43

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

  • http://uxzentrisch.de/hunde-statt-captchas/ Hunde statt Captchas – uxzentrisch

    [...] der Petition von Stop Killing Dogs (via) kann man eine andere Lösung sehen, wie man Maschinen davon abhält, automatisiert ein Formular [...]

  • Anonymous

    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

  • http://twitter.com/gemmaweirs Gemma Weirs

    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

    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 :)

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.