Goal
Besides slowing down the users, the current CAPTCHAs do not stimulate a positive and engaging experience when being solved. It usually asks users to find all items e.g., trees or traffic lights. Thus, users must solve repetitive, error-prone, and unmeaningful "find an item" problems to prove to the computer that whoever is using the system is a human being, not a bot.
My role.
- Create paper prototype;
- Illustrations;
- User test;
- Wireframes;
- Visual design.
Tools utilized:
- Figma;
- Illustrator.
Research and Analysis
With the advancement of technology come some problems. On the internet, one of the most common problems is bots. They are programmed to have specific behaviour and to mimic humans. Due to that, CAPTCHAs were created to verify if a user is a human before accessing a particular part of a website. However, that brought some UX problems:
- It is difficult to identify what is shown by the CAPTCHA and where the boundaries of the elements that should be selected are. For instance, an image captcha can request a user to select specific elements, but, sometimes, small parts of the object can overlap the selectable container. Users end up not knowing what to select.
- Current CAPTCHAs (e.g., text captchas) do not take into consideration differences in culture and assume all users know Latin characters.
- CAPTCHAs are seen as annoying and are a friction point in the user process to accomplish their goals.
- CAPTCHA smuggling can mislead users to make them solve challenges that benefit hackers.
Idea generation and prototyping
With the initial data from the research, a solution was designed on Figma, starting from the wireframe until the illustration.
After user testing with a Figma prototype some usability problems were identified:
- Users were unsure if all elements needed to be moved into the canvas or only a few.
- Users had problems when they had to move the item in a specific order. They preferred to choose what they wanted to move first.
- In the illustration of the robot, users had difficulty understanding that they could skip the puzzle by clicking on the button.
- Users had problems with low-contrast illustrations.
- During the creation of a challenge, users were not sure about what they should do first.
After iteration, the final proposed solution allowed users to:
- Verify if the CAPTCHA is legit by the confirmation code visible on both the website where the CAPTCHA is added and the CAPTCHA fly out.
- Users can create their own CAPTCHA challenge that is displayed with the creator's name.
- Solve engaging CAPTCHA.
- Respect multiple cultures by the representation of different human characteristics in the illustrations.
The paper prototype was built using magnetic strips glued on the printed paper. So, when moved, the pieces would stay fixed in the correct places.
Results
Check some videos demonstrating the 3 main flows: solving a CAPTCHA challenge, reloading the challenge and creating a new puzzle.
Solving a CAPTCHA challenge
Reloading a CAPTCHA challenge
Creating a challenge
Designing interfaces in an "intelligent" digital world is challenging. There are extra layers of difficulty introduced by how machines collaborate with humans, e.g., trust (to what extent we can trust machine outputs?). In this project, I could see that the utilization of CAPTCHAs to fight bots will have to evolve and go beyond images, sounds, and character recognition. There are already many AI algorithms and machine learning, and external CAPTCHA solving services able to resolve those puzzles.
Due to the variety of styles and abstraction of reality, illustrations could add some obstacles for algorithms to learn how to solve them, while providing more engaging problems to be solved by humans.