Design & UX

Checkboxes, Passwords and Magical Incantations

By Alex Walker

We are not our users‘.

It’s simultaneously the simplest of ideas, and one of the hardest problems for designer/developers to grapple with.  

For instance, when WE use a fast MacBook Pro running Chrome XXX, and the people working next to us do the same, it’s very easy to forget the world isn’t like that. 
Sometimes it’s even more subtle than that. Sometimes we’re trained to think differently to our users. I recently had an interesting conversation with Jessica Enders and James Edwards that raised this idea:

As we know, the web is crammed with buttons and checkboxes. Jessica’s view is that buttons ‘perform actions’ — perhaps calling an elevator or stopping traffic at a crossing — and checkboxes ‘mark states’ — such as the locked/unlock setting on a bathroom door.

That certainly makes sense to me.

As web people commonly using technologies like CSS and JSON, I think we are trained to look at the world as a collection objects with properties and settings. 

For instance, we might understand an article title as:

.title {  
  color: black;
  font-family: Helvetica, sans-serif;   
  font-size: 24px;  


And, out of habit, we probably also think of our car as:

.car {  
  car-brand: Honda;  
  color: red;  
  model: CRX;
  transmission: auto; 


I’ve used a CSS-like example here, but it could just as easily be JSON or XML. Even plain ol’ HTML has properties and values.

It’s perfectly natural for us to understand our car (or sandwich or shopping list) as an item with a series of settings or states.

And I’d argue that this likely affects the way we build web things.

Two password forms - one using a checkbox to show password, the other using an icon button

‘Show password’ controls can be implemented with buttons or checkboxes.

Here’s an example to think about: Many web and mobile apps that use a password field, also offer a ‘Show password’ control nearby that allows users to mask (make it asterisks) and unmask their password.

There’s a good chance that if you work on the web, you probably think of password visibility as a ‘setting’ associated with the password — as in ‘Show password: yes/no’. And that makes perfect sense as a checkbox, right? It feels right to me, and James had a strong preference for it.

Harry Potter casting a spell

“Passwurdius Revelio!”

So far, in my testing of a small group of non-web people, that’s **not** necessarily how they think. In general terms, they tend to look at ‘unmasking a password’ as an action — almost like Harry Potter casting a spell.
That means for these people, it probably makes more sense as a button control.

This idea definitely needs more research, but it does raise some interesting questions about the ways that working with computers changes the way our brains work.

All this time we’ve been telling our computers how to think, they may have been doing the same to us.


This is a great article, Alex.

I know that I think differently than many people around me, and sometimes I even celebrate that. But the difference in the way "architects" of something perceive it from the "users" can be a hurdle that must be overcome.

I had never given it very much thought - until now!


In the screenshot example you showed, there is an "eye" icon, which can be used to toggle the reveal password state. This seems obvious to people who work and dwell in the world of computers and technology. A lot of users don't even know this option exists.

Being a UX designer is all about battling design from the user's perspective. It boils down to specific use case and specific audience. Common patterns don't always work for your audience.

Same with showing password by default, which, IMO, is a bad idea. It's an anti pattern and should not be used.

Enjoyed the "Passwurdius Revelio!” wink


There are even people who think that we should all leave Windows, retire our mice, learn thousands of obscure commands and parameters, and edit every part of our computers in YAML config files. Buttons are for losers. Why click a web link with a mouse when you can just type a wget command and some parameters in a text box and grep the result? Silly people!

This article reminds of Linux people every time someone complains how difficult it is to get around, configure things, remember what commands to type, etc. They always act like things are so easy, but they live in a bubble, most of the world does not want to use computers like it's 1981 again.

It was said here on Sitepoint by somebody or another, put your apps/websites through the "grandma" test. If grandma can use it intuitively, it's probably done right for the bulk of people.


Yes, I guess I'm calling that eye icon a 'button' as it has a button-like on/off state, but you're right -- it's barely recognisable as a button. I had a look around, but had no luck finding a show password control with a standard, garden-variety button (though I'm sure there are plenty out there).


Thanks ParkinT! Jessica is so switched on when it comes to how normal people use forms, so it certainly got me thinking about why James and I might both be so into checkboxes.


Like math. Whoa!

A binary - (yes/no), (on/off), (true/false/dunno), radio buttons "Choose only one"
A choice - steak and/or potatos and/or caesar salad, check box "Choose all that apply".

To me, set containment in mathematical logic is an observation on the species. And "effective" user interface elements are luck and good fortune - are an abstractions of the logic, or functionality, they initiate. If the user interprets wrong - fail. Blind man and digital camera. Deaf man and electric piano. Etc.

I say this because I find it harder to keep up with the actions behind the interface elements due to the variety of applications I use. User fail probability rises with advancing technology, and decreases with less technology. Is that high tech?



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.