June 2, 2008
Making a better reCAPTCHA
I’ve noticed a lot of people using the reCAPTCHA widget lately. While it’s my belief that users shouldn’t have to pay the price for websites’ spam issues, I think this is a neat service and idea overall. The only problem is that reCAPTCHA has an awful UI, and confused me the first 4 times I used it! I have a few ideas that will make this widget a lot more user-friendly and usable.
PROBLEMS
So let’s talk about what’s making this widget suck. The biggest issue I see is that it’s not clear how you are supposed to type the two words. They are spaced out in the graphic, but for some reason, you’re not supposed to put a space in the input box. Even worse, it does not explain how it wants you to enter the words.
There’s also an issue with spacing. The words are scattered above in the top area, and they don’t really relate to the field below. Optimally the text input would be directly under the words.
For some reason, they’ve also decided to take up a lot of space with their branding and slogan (which doesn’t make a lot of sense to me). The logo could be a lot smaller, and we could easily remove the slogan: “stop spam. read books.” Let’s be honest. You’re not actually going to read any books like this, and it just serves to add to the confusion currently.
Lastly, there’s no clear way to see if you’ve entered the information correctly. It seems like some feedback given to the user would be very helpful. If you misread a character you would know you’ve made an error right away, and if you entered everything correctly, you would be able to see that and know that when you click the “Submit” button that it will work.
SOLUTIONS
To solve the formatting issues I decided to split the text input into two separate fields. This makes it very clear that you need to enter both words, and that there should be one word per field.
In order to solve the spacing issues, i’ve aligned the inputs with their corresponding text. This helps users instantly understand where they need to type and what goes in each box.
I’ve reduced the size of the branding to better utilize the space, and also moved the function buttons to the top right corner to fit with the new layout.
I added a new function to the widget which would really help the interaction a lot. It’s a submit button built right into the widget. Since this widget is really the gatekeeper of the submit button, it makes a lot of sense for that to be contained in the widget itself. Before the user is validated the button is disabled, and when they type in the correct values it enables the button. This wouldn’t be difficult for them to implement with javascript.
Last but not least, I added some inline validation to better communicate with the user whether or not they are ready to submit the form, and where any errors are.
THE END RESULT
And here’s how my improved version of reCAPTCHA looks:
Got a better idea? Let me know in the comments.
that looks Much better. information presentation really counts. (the openid plugin appears to be borked, btw)
Thanks Don! Sorry the Open ID plugin isn’t working. We’re still working on it, and not quite sure what’s going on here. Will investigate :)
The key feature of this setup, adding instant feedback and acting as the gatekeeper of the form, is a great idea for normal captchas but not for reCaptcha. The whole point of reCaptcha that one of the words is known to the computer and the other is unknown. This is how the “read books” portion of the concept works.
Actually, it probably could work for reCaptcha, but only if the two words were entered in a single field as in their original design.
Reid: I didn’t know that about reCaptcha. I’m not sure why it couldn’t work with 2 fields in any capacity. The system could combine the 2 inputs into 1 hidden field via Javascript without any issue.
I kind of see what you’re saying with the gatekeeper and validation, but I am not sure that it’s a good idea to have the computer not know one of the words. In that case it’s just more of an inconvenience for the users if it doesn’t actually check one of the words.
Regardless, having the button there still makes sense to me, but without the validation it would lose some value.
Right off the top of my head: inline text correction rocks, but could it be rendered obsolete if spammer decided to couple character count and form recognition (what they do right now) with brute force attacks (a common hacking method.)
Yes, instant feedback would pretty much make the CAPTCHA useless. Automated scripts could easily bypass the form, even if it would take a while. Although, since the ‘computer’ checks the word (I would think through some asynchronous method) it could have counters in place to limit the number of tries, until a new picture is given.
I never had the “one word” problem. I always leave a space between my words and have never gotten a message back to say I have made an error. On occasion, there were three words in total to type, so I had two spaces, and not even then did I encounter any problems.
I do agree, partly, with your assertion that CAPTCHAs are a way to offload onto the user the spam problem. I do agree to and don’t mind CAPTCHAs when I sign up to new accounts on different services, but blogs, using one everytime you log into a site etc is overkill.
inaequitas: Yeah, I think you’re right. The validation is out. I think the new design is still better for this widget. I’m not a security expert, so it’s good to hear these concerns from people who know the technology behind it all.
Good insights. You should be working for them.