Captcha Design pattern

Problem summary

The application needs to verify that the data submitted originates from an actual human and not a robot.

Example

Captcha

Usage

Websites featuring the ability for visitors to comment, register as a user, or otherwise actively post content on the website are often exposed to attacks from spam-robots. The content posted by such spam-robots can be compared to spam sent by e-mail. The main purpose for the spam-robot on the web is however often to just create links to a specific website, so that website will rise in search results on for instance google.com. These spam-posts rarely have anything to do with the subject of the website, hence the spam categorization.

To avoid such spam, captchas are introduced. The whole idea is to create a way to distinguish real human beings from automated robots.

  • Use when your web application experiences attacks from malicious web-robots trying to post spam-content on your site
  • Use to protect your website from automated robots
  • Use when the capability to post content to your website is not blocked by the need to be logged in. Registration processes are included.

Solution

The most popular form of Captchas are images with letters and numbers inside. The user is then to write in a separate form field what the image reads. To prevent spammers from using OCR software to read the image, the image is manipulated in different ways, that makes it hard to interpret for computers while maintaining readability for humans.

If the user succeeds in typing what the image says, his content is posted to the website. If not, the action will be refused. It is common to allow a number of tries to enter the captcha text, as some captcha images are even unreadable to humans due to the strong image manipulation is has been exposed to.

Rationale

Captchas are short for ‘Completely Automated Public Turing test to tell Computers and Humans Apart’. The whole idea behind Captchas is to distinguish humans from computers letting the user perform an action a computer can’t. A captcha is a simple Turing test.

There is a fine line between making a captcha unrecognizable for OCR scanners and still readable for human beings. Readability for the human has to come first. Other problems with implementing captchas to protect your website include a lock-out from visually impaired users as they can’t use voice software to speak what the captcha reads.

Other forms of protection from malicious spammers are asking questions like “what is 2 + 3” or “what is two plus three” or using voice captchas,

More example images of the 'Captcha' pattern

  • Captcha

    The Captcha used for registrering a facebook account lets you ask for another captcha in case the image is too distorted. You also have the option of listening to what the captcha reads.

  • www.youtube.com

    A captcha is used to at the youtube.com signup form to protect the site from spam.

  • Perhaps the simplest sign up form found anywhere is at craigslist. The only information the user must give is his or her email. Except from that, their authenticity is verified via a Captcha.

    The Captcha from the Craigslist sign up form lets you hear the words printed on the Captcha image.

  • At delicious.com, several steps are taken to ensure that the user only have to submit the sign up form once: All fields are marked as required (instead of none), you can check if your selected username is available, and several hints are given to aid the

    The delicious team stands by with a support team, if you are not able to validate your captcha due to physical impairment.

8 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 34 votes, 47.06% like this one.

Example images

  • Captcha
  • www.youtube.com
  • Perhaps the simplest sign up form found anywhere is at craigslist. The only information the user must give is his or her email. Except from that, their authenticity is verified via a Captcha.
  • At delicious.com, several steps are taken to ensure that the user only have to submit the sign up form once: All fields are marked as required (instead of none), you can check if your selected username is available, and several hints are given to aid the
  • stumbleupon.com
  • When signing up at twitter, you instantly, as you type, receive feedback to what you have typed.
  • www.evelmerch.com
  • The sign up form at livestream.com acts as part of a wizard. Immidiate feedback is provided as the user types in his or her data.
  • www.monopolycitystreets.com
  • theymakeapps.com
  • www.tumblr.com