Welcome to the worst form ever!

I am sure you have seen some bad forms around the internet. Sometimes the inputs are disabled at the wrong moment, sometimes the navigation is not very intuitive, and the buttons don’t work! But here, we’re not discussing those forms. I want to open your eyes to those perfectly functioning forms, where the inputs are beautiful, buttons work, and everything looks fine, but the user experience is bad despite the code working perfectly.

As a web developer, I often receive requests to implement certain features, such as creating a form. However, if we dive into coding without careful consideration, we might produce a solution that works but isn’t the best fit for our application. That’s why it’s important to be mindful of cognitive biases.

First of all, I will explain what a Cognitive Bias is, long story short it is a pattern of distortion of judgment in specific situations, a line of thought that can alter an individual’s decision-making on certain occasions. Those biases can help us implement better application behaviors to avoid a bad UX.

This post could be a lecture about the concept of these biases, which isn’t the best way to link this subject with programming. So, to make this more intuitive, let’s illustrate how bad a form can be if we ignore those cognitive biases.

Status Quo

Like the first of Newton’s laws, a user will not (hardly will) change its decision unless a force acts on it. In the Status Quo cognitive bias, we tend to maintain the decisions already made for us.

Warner Bros / Via youtu.be

Imagine building a form for your application with three checkbox multiple-choice fields. Still, only one is advantageous for you, but you chose to leave the first option in that list as checked by default. The most likely scenario is that the user won’t change the default selection, especially if the form is too long and tiring.

The above scenario is not bad for the user, but it’s bad for the project’s owner, showing that sometimes planning how to build a good application is beyond the user experience.

Ok, you got it! With a better option let’s check it by default. What if there was no difference between the options on that form? Any of them would be equally advantageous. This can lead to another poor decision a developer can make: Checking no option at all. This way, a time-consuming decision is completely in the user’s hands.

In this case, leaving the user to choose freely isn’t the best decision. Part of a good UX is making the interaction between application and user fluid and as effortless as it can be. An easy way out of this is to use the most popular choice already checked to make the user’s life easier.

Goal Gradient Effect

Imagine there is the need to collect a large amount of information in this application. In other words, a monumental form must be implemented. In our worst form ever of course we’re going to create a long page with one input after another, making it very boring to fill out. As a result, the chances of users abandoning this task are quite high.

Well, you may be thinking that it is so bad that even the worst forms no longer follow this approach. Everybody knows the solution: Break this long task into smaller steps. Okay, that’s fair. With that in mind implement several form pages, each containing a limited number of inputs. Once the user completes a page, they can click a button to go to the next form page, and that’s it.

Are you sure that’s all you can do? The problem seems solved, but something important is missing in this solution: Feedback.

Not giving any feedback to the user on how much is left for him to finish the task makes us lose the benefits of the Goal Gradient Effect.

In this bias, the motivation to finish a task increases as the user gets close to the finish line, making it easier to induce someone to fill a form to the end when it has clear feedback on its progress. I bet that adding that progress bar doesn’t seem so useless now.

Loss Aversion

Losing something affects us more when we dedicate time and effort to it.

Take, for example, a long, tedious, and confusing form. Users often leave it incomplete before finishing. Although there is a progress bar to track their completion, it may not be very effective in encouraging them to continue.

To improve the user experience, we can develop a feature that saves progress, allowing users to fill out the form later. When they click the button to leave the form, a modal appears, reassuring them that their information won’t be lost. This sounds promising, right?

The chances of the user simply forgetting about the form are massive, and even more, the delay in gathering all the data that the application needs is a big red flag here.

The issue is not with the leave button; rather, it’s important to address the user’s fear of losing the time and effort spent filling out the form. To tackle this problem and prevent users from leaving before completing their task, we should modify the modal message and the form’s behavior.

It must be explicitly communicated to the user that if they leave, their information will be lost. Additionally, the form should reset after this decision. This strategy will invoke Loss Aversion, where the fear of wasting time on the form outweighs the desire to leave that tedious task.

Wrapping Up

As you can see, ignoring cognitive biases can lead us to well-functioning forms with significant UX challenges.

To conclude, as web developers, we must go beyond simply writing code that works and take the time to consider how users think, behave, and make decisions. Whether it’s leveraging the Status Quo bias to pre-select user-friendly options, using the Goal Gradient Effect to motivate users with clear progress indicators, or invoking Loss Aversion to encourage task completion, understanding these psychological patterns can help us design forms that truly enhance the UX.