Pixelmatrix Design

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.