Checkboxes, Passwords and Magical Incantations

Share this article

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.

Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

AlexWbuttonscheckboxespasswords
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week