THE REDESIGN OF 
GOOGLE RECAPTCHA

Prototyping, Coding,

UI Interactions

Credits

Created by Cheryl Vo

reCAPTCHA is a free service from Google that helps protect websites from spam. By using Recaptcha, companies can prevent automated software from accessing your websites, which can welcome users to enter the site. 

Behance

The Original Version

I. PROBLEMS


Users are familiar with the original Google Recaptcha with its distinctive color and images. However, there are some problems that users often encounter that we should take into account.

1. Sometimes difficult to read

The most obvious problem users usually have with Google Recaptcha is that sometimes... their images look so similar to each other that they are so hard to identify the correct selection

 

2. Microinteraction

With the original microinteraction, when users click the selected image, the selected image gets smaller and a tick box appears. The overall design of Google Recaptcha is easy enough to use, but it can be improved to bring out the best experience to users.

3. Hover Effect

Currently, Google Recaptcha does not have any hover effects when users hover over the options. Therefore, I believe adding a hover effect with greatly improve users' experience. 

What I Hope To Improve

II. GOALS

1. Pop-up Box

With the original version, Google Recaptcha automatically after users tick on the check box "I am not a Robot". I personally believe this step is unnecessary. To simplify the process, users can initially fill in all required content, then click on the "Submit" button, the pop-up page will automatically appear, which minimizes the process from 3 to 2 steps. 

2. Hover Effect

The original Google Recaptcha does not have a hover effect. I believe adding a hover effect will not only draw attention from users but also make the site interactive while letting users know its functionality.

3. Sound Effect

Same with Hover Effect, the original  Google Recaptcha does not have a sound effect. The sound effect I selected for this project is the sound of an unlocked door. With this sound, I want to welcome all users to the site with fun and energetic sound, so they can feel like they are entering a house and are welcomed. 

The Making Process

1. Alpha Project

Alpha Project explores drawbacks of the original version. The project is build with Adobe Photoshop, giving a board view of how the project will look like.


 

 

 

 

 

 

2. Beta Project

Beta Project brings what I have designed from the Alpha Project into coding, using HTML, CSS, and Javascript. 

 

3. Final Project

The final project is my final design using HTML, CSS, and Javascript.

The Result

With the helpful feedback from Professor Jervis, I finally completed the project and ready to present my final result. The following link will leads to my self-code microinteraction. 

My improvements

Triggers

Users type names and tap on "Submit" button. Users hover on each images.

Users select images,

double click to undo.

Feedbacks

Users hover on each image, the image turns to grayscale. Users click to select, and an arrow appears on selected image.

Rules

The button can only be clicked after users fill contents. 

Users can double click to un-select.

Mode and Loops

There are no loops

and modes in this microinteraction.