How bad hierarchy in design can confuse users
Why clarity matters.
A few weeks ago, I received an alert from Google Chrome letting me know there had been a data breach and that my accounts and passwords were at risk on a few websites. It ran a scan of my accounts and suggested at least 47 of them were at risk. On the one hand, I was impressed and thankful it had alerted me to this issue, on the other, I didn’t realise I had over 40 accounts I’d signed up for, and that was a long list to sort through!
It’s a good motivation to kickstart a digital cleanse, so I decided to go through each potential breach and decide if I wanted to keep that account or delete it, and to change my passwords.
During this process, however, I noticed a particular frustrating pattern when it came to security management on different accounts. Finding the option to change my password.
On a particular fitness tracking website, I went to the Settings menu, and then Personal Info to find the option to change my password.
Everything text related that could be changed was in an input box, so because of that visual language, I expected to find a password text field to edit.
There wasn’t one.
In the end, I googled where to find the setting, and it was a small option below the input fields, hidden in plain sight.
I felt silly for missing it, but it’s the only option that can be changed that’s presented like this. And I would argue that the option for changing your password (in particular in the context of account breach) should be one of the first and easiest things to access for users when trying to safeguard their account.
Another example of this happening was on another website and it was similar to this instance, de-prioritising the option to change the password.
Again, it’s easy to miss, and displayed as a text link, rather than an input box option to change.
It’s also nested under the “Superuser” label, which is a confusing classification to put password management under for users.
Managing your security and changing your account passwords shouldn’t be this difficult to find for users.
Good design allows the user to be informed and in control, especially of their own data, which in these examples is hard to make a case for. Anything to do with account management should be presented in an upfront and easy to find/access way for the user. Especially when matters of security arise.
An example of account security and password management done right is Apple. They present a pro-privacy and security standard for their users which is reflected in how they allow users to manage that.
Password and Security is the second option in your account/apple ID settings.
It’s its own dedicated section.
Tapping on that option takes you to a screen where the first option is allowing the user to change their password. It’s top of the page. It indicates that it can be tapped on to interact with. It’s upfront. It’s simple.
There are also secondary security options that can be managed here like two factor authentication and verification codes. Including these types of additional security measures in the account management on other services can help increase the amount of security and control users have to protect and manage their accounts.
In these examples, it comes down to confusing hierarchy in the layout. Making sure to have clearly labelled sections and prominent CTAs that relate to what the user expects and wants to change can improve the experience.
Establishing a simple and consistent visual language with the user can help avoid confusion. In the above image, I gave the email address and password the same visual treatment (both a labelled input box) with a prominently labelled button next to each one.
It’s simple but clear.
