Introducing Boolean Text as a New UI Pattern
Let’s get two things out of the way right off the bat.
- I’m not sure if this exists currently under a different title, but I can’t find it anywhere and I’ve been looking all week.
- I understand it doesn’t fit the dictionary definition of boolean, but I’m not a purist about anything else so…
Okay so what do I mean when I say boolean text? As the name implies, it’s text that has two statuses. Going against the grain and ignoring those options as true and false, we can open this to any list set that contains only two options. We’ve seen this before in web design and even in tv commercials. But those were always intended to be visual in nature and not performative in any way. I think they can be put to really good use, and create a smooth user experience at the same time.
While working on a very complex form at work, a couple of the lines had dropdown menus that each only contained two options. The formatting wasn’t welcoming to toggles in this sense, but I kept feeling like having only two options is, well, kinda lame. They serve a purpose for an MVP as options may be added later. But then again, that’s just not always the case.
I propose implementing a new UI pattern where a user’s click simply changes the word. As a first draft example, see the below two gifs.
Now I know what you’re thinking: This doesn’t show the user their options, how do you show that it’s a required field, how does it work for keyboard-only users!?! Valid questions. If you limit the number of options to two, and it becomes an established pattern, then the single click shows the user both options, just like a single click would do on a dropdown menu. Showing that it’s a required field is simple — the challenge there is how do you know if the user meant to not change it or if they missed it. But that goes back to the old adage — always give your users the ability to fix a mistake. How does it work for keyboard-only users? Exactly the same as it would if they were using a dropdown.
It’s easy to see how this could also work for a third, fourth, etc. option, where the text simply cycles through, but that begs the question of how many is too many? For me, three options just needs a simple dropdown.
