Checklist – A better password form fields

JIN Design

15 Aug, 2017


A big issue

One major mistake a lot of signup forms today is that many times, a user is required to fill in their password the second time just to get through the initial step. These causes users to abandon the signup process completely without thinking twice.

Below is an example:

Users were required to fill in their passwords again because they missed out the uppercase letter requirement.

What is missing?

First, there is no indication of the limitation for the password. A user has no idea the password needs to be “at least 6 characters, including one number, one uppercase, and one lowercase character”. According to Don Norman in Norman’s door theory, the door design provided no indication on whether to push or pull the door, which can be confusing to users. Instead of playing the guessing game with the user, registration should be straightforward.

How to do better?

A good way to design the password indicator is simple:

  1. Let the user know there are limitations
  2. Let the user know what are the limitations

The above is one solution on improving the design to allow the user to know what password to fill in when they want to proceed with registration.


Password field can also be temporarily unmasked so that the user can fill in the field quickly and accurately. Unmasking the password for a moment can decrease typos and make it easier for users to catch what they’re typing.reference:

Reduce the friction between user experience and usability

Our job at JIN Design is to remove as many steps as possible to let user complete their job as fast as possible. A good form is needed such that users do not feel frustrated when he/she just want to register. Whether it’s performance or design, it’s about recognising that we make things people use, and people are generally busy. They want to get on as quickly and most definitely do not want to wrestle with technology. The best we can do for them is to make things quick and easy.

More From the Blog.


How Icons impact UX design

How Icons impact UX design Icons are ubiquitous. They are everywhere in our lives. As we’re sat here, typing this out, there are at least twenty visible icons


Microinteractions: What Are They?

Micro-interactions: What Are They? You’re using a chat app to talk to a friend. Anytime they take a while to type a message, a familiar indicator appears, along