Bad Form Design & Wasted Time: Resetting Passwords

password changing cartoon You know the email alert: “Our database may have been breached and exposed customer logins/password credentials/credit card numbers/email addresses [fill in the blanks]. Since we take your privacy extremely seriously and out of an abundance of caution, we urge you to reset your passwords now.”

And there are also those randomly sent email alerts that shame you for not having changed your account password in a while, suggesting you do so now and then make you jump through hoops to comply and deliver a terrible user experience with bad form design that wastes your time. (That said, I prefer such reminders to the alternative: Being asked to reset my password the next time I’m trying to log in—or else I’m locked out.)

I decided to explore how easy it really was to change passwords all at once, and I spent the past weeks painstakingly resetting all of my passwords too complicated, long and unique ones for each account.

The experience was eye-opening and frustrating. A root canal is faster and less painful.

Password Strength Too many sites place real hurdles on changing login credentials— and yet they claim to be secure, which they’re clearly not. Many don’t offer additional security measures to add to a standard login, and they feature login forms that are so poorly designed that the effort to change anything is a dreadful chore.

That said, I also encountered websites that make it very easy to change and reset passwords or delete your account with ease in a few simple, intuitive steps. Most of the sites were based in Europe though. The majority of US-based websites that I visited, however, won’t let you delete your data that easily unless your IP address is European. Too many sites won’t even let you change basic personal details. It seems that those companies prefer to bloat their databases with outdated data just to hold on to a (probably incorrect) email address.

delete button — Most sites don’t make it this easy to take control of your data—unless you’re in Europe.

I became increasingly frustrated that many services and companies seem adamant in preventing their users from changing/updating/resetting/deleting their credentials; instead, they prefer hogging their users’ data. And too many times to count, I landed on sites that were so poorly designed that I got slowed down by an inconsistent navigation and site structure and ended up in an endless loop.

Many web designers & devs urgently need a refresher in user-friendly form design to help them create a positive user experience and interface. On most sites, changing passwords feels like undergoing a root canal. Click To Tweet

Too many sites that I visited looked like they provided a secure platform—and then exposed obvious, gaping security holes. And if by now a company hasn’t switched over to a secure SSL connection (https://….), it should leave the online business altogether before causing any harm. Because of their complacency, their database could be next in line to be hacked—and then we all have to change our passwords across our various online accounts yet again unless we finally commit to having one unique password for each site (more on that below).

password forms — Good design: While the user types, password requirements are simultaneously vetted until all boxes are checked green. A visual guide that is very effective.

From what I encountered, many web designers and developers urgently need a refresher in user-friendly form design to help them create a positive user experience and interface. The login, sign up or registration forms are usually the first elements we see—and the first impression we get from the organization, the service or the brand. The efficiency of your site navigation and of your online forms is what keeps users happily engaged—or makes them flee to seek out your competition.

Password managers are an efficient way to keep track of all the accounts that you own; in case of a breach, you can quickly see which passwords need to be changed and where. It gives you a master list to decide which online accounts you no longer need. The less data is out there, the better. At the very least, make it a habit of changing your password to a unique string (more on that at the end) on each site that you log on next—until you have covered all the accounts that are important to you.

So, here you go. My content + design list of what NOT to do with your online forms and how to improve them—from a frustrated user, trying to reset old passwords to strong ones, and then getting lost in a virtual maze.

What Not to Do

STOP not providing me with your password creation rules (letter combination requirements, length) before I type and retype my new and carefully constructed, long and impossible to remember password.

STOP giving me restrictions on the maximum length of my password. Adjust your database rules. A maximum of 8 characters is not enough anymore. It shouldn’t be my problem that your database can’t handle longer strings.

login box — Above, what not to do: Hiding passwords while typing and restricting their length.

STOP not giving me the option to view my long and complicated password while I’m typing it, just to have me retype it, again blindly, to check if it matches and then alert me that the passwords don’t match and let me start all over again—blindly. And don’t make me count tiny dots to make sure that the password that I chose wasn’t cut off mid-way through typing because I wasn’t made aware of your maximum letter requirements.

STOP locking my account temporarily without prior warning for “my protection” because of too many attempts of resetting my password; attempts that I was forced to do because of your poor design. Find better ways to secure my account (security questions, a text message with a code, Google Authenticator, an email, to name a few).

STOP not providing me with an option to add 2-step-verification to secure my account or at the very least add a security question. And please let me phrase those questions myself. Anyone can Google my mother’s maiden name.

STOP making me reenter my email address on the forgotten password page that I’ve already provided while trying to sign on. Send a reset password link promptly to my registered address (a link, not a temporary password that I need to change yet again). And alert me immediately if that email address is no longer found in your database.

STOP not providing me a way to log out. Yes, some sites encourage you to choose strong passwords—and then they don’t give you an option to log out. I don’t want to stay logged in. It is not secure. And, by the way, I don’t care for the option to sign in with my social media accounts either. We know what that leads to.

STOP not letting me control my data. It shouldn’t matter whether I live in the US or in Europe. Don’t punish me for where I live and assume my data is fair play. Know that if I can’t easily delete my account, I will enter bogus details and a 10-minute email address. Do you really want to clutter your databases with my fake user details? You probably don’t even care.

GDPR — Above, from a US-based site: Lucky you if you’re in the EU. You can “request to be forgotten”. For the rest of us, our data is a free-for-all. But it is rare to see it so blatantly stated as in the last bullet point.

STOP signing me up for your newsletter/notifications by default. If you do, I will delete my account, or, if that’s not possible, I’ll give you a bogus email address and never come back.

STOP requesting that I send an email if I want to cancel my account or require that I call you to do so. Why not demand a letter? Sent by my owl? Do you really think that an extra step is a legitimate way to keep me at your side? If a cancellation can’t be done online with one click, you are putting an unnecessary burden on your users. You want me to jump through hoops to get rid of you? I’ll enter bogus user details and never come back.

STOP not giving me a prominent “forgot password” link on your login form to help me recover my password with one click.

STOP placing your cancel/back/previous button to the right of the submit/OK/next button. We intuitively go/swap right when we want to advance (like reading a book). How many times have I mistakenly hit back/cancel when I wanted to proceed because of your poor design?

faux form check boxes — Just don’t. Faux checkboxes instead of bullet points. Thank you @faundez_alex for pointing this out.

STOP using checkboxes instead of bullet points for elements that can’t be checked (example at right, as seen on Twitter).

NEVER ask me to call for assistance or instigate a chat session with you if I want to change any of MY basic data—unless you deal with sensitive financial or medical services or store data that has to be protected for my safety and security.

What You Should Do

Good online form — Above, this login form uses a simple and effective design that works well. And yet, missing is a “delete my account” link.

To prevent poor user experience from the get-go, online forms need to be designed better:

Less design adds more functionality to your form. The form should be intuitive and clean with clear instructions and expectations on how to proceed.
Every login form has to be mobile-friendly.
Minimize the steps a user has to take to the bare minimum.
Visually distinguish between sign-up and login forms. Provide both but not together on the same page. Password managers won’t always distinguish between the two and attempt to fill out/submit both, which leads to errors and wasted time.
Provide ample white space between input fields, since users will fill out your form on mobile as well.
Center or align your labels, place them above or within the fields; but whatever you choose, be consistent.
Label each field clearly and autofocus (highlight) the first field the user has to fill out in longer forms.
Use sticky forms, so when a user has to go back, s/he will not have to start all over again.
Confusing design: Required fields are usually indicated with an asterisk. Here, the optional fields are marked instead; only after a user inputs details, the *optional alert pops up.

Clearly mark all fields that need to be filled with an asterisk. Don’t mark optional fields with an asterisk instead (see example at right). Don’t wait until the users hit submit to let them know what they’ve missed. Don’t rely on tiny letters or whimsical colored clues to show what was missed.
Show clearly defined error messages that help solve any problems with the submitted form.
Only ask for the least information needed. No, that shouldn’t include my birth date, full address, gender or title (Mrs. or Ms. or maybe Miss? Seriously?).
Don’t use pop-up login forms that first ask for a username/email and then in a new popup for the password; many password managers can’t handle those dual steps.
Clearly indicate password requirements upfront: minimum of 8—but don’t set a maximum length limit. Indicate letter sequence/symbols/numbers/upper case and lower case rules.
Always give the option to view/hide what the user types by providing a checkbox or toggle option to “show password”.
Alert the user if caps lock is on while typing the password.
Use an email address as a username. Chances are that we remember our email address better than any user name. An email address is unique and eliminates the “forgot username?” link.
Place a prominent link under the login form to reset the password (“forgot/reset your password” not “lost your password?”. I didn’t lose it. I forgot it). And if the username/email is not in your database, let users know immediately rather than having them check their inbox for the next hour.
Provide a prominent link under the login form “delete my account” or at the very least on the account settings page.
The submit/next/OK button should be on the bottom right of the form and more prominently colored. The cancel/back/previous button should be placed to its left, colored in a lighter hue. We intuitively go/swap right when we want to advance (like reading a book). Placing the next/submit button to the left of the
Bad design: If you have required fields, clearly mark those before the user fills out the form.

cancel/back button confuses your users.

What to Do Next?

Check your password by using The Password Meter, an online tool to analyze whether passwords are strong. Create a strong password by combining a long phrase or a sentence that you can remember, using lower case and upper case letters, symbols and numbers, with an added unique identifier for each website it is used on, for example:

!1RainDropsKeep@FallingOnAmazon1!

!1RainDropsKeep@FallingOnNetflix1!

Check Have I Been Pwned? regularly to see whether your email address has been exposed in a data breach and then set up alerts.
Choose a password manager to keep up with all your accounts.
Please let me know which sites make it impossible to change your data, delete your account, or are too frustrating to deal with. Let’s out them.

Every breach is on the companies. Not you. At the very least, we, as consumers, can expect to be compensated for our pain when we’re asked to fix these frequent security hacks again and again by providing us with streamlined, intuitive, aesthetic and efficient user experiences that will make changing account details, or deleting our data, a breeze.

More on the topic: