Design Humor Users

Watch this video: “What happened to text inputs?”

If you design or develop front ends, whether web, mobile, or even desktop, you really should watch the latest Web Briefs video by Heydon Pickering, What happened to text inputs?

Title card: “What happened to text inputs?", decorated with illustrations of three howling wolves and “type=‘silly’” and “type=‘pants’” tag attributes.
Tap to watch the video.

The video starts with a twist on the classic parable, Inside you are two wolves. In this twist, one of the wolves is called “Adrian”…

Adrian wolf: A wolf wearing an “AltaVista” trucker cap, captioned with these bullet points:

- A user of the web
- Wants interfaces to be easy
Tap to watch the video.

…and the other’s called “Chris”:

Chris wolf: A wolf wearing a “Macromedia” trucker cap, captioned with these bullet points:

- Designer for the web
- Wants to get ahead
- Has heard about “disruption”
Tap to watch the video.

The video covers its topic very well, and very amusingly — stop messing with text input boxes and making them less usable! They should very clearly indicate that:

  • The user should enter some text into them (i.e. they should look like text inputs, and right now, the widely-understood convention is the text box)
  • What kind of text the user is expected to enter into them (i.e. use labels)
Examples of different text box styles, with the title “Only one of these is right!”

- text box, no label, placeholder as label
- Text box and label
- Text line and label
Tap to watch the video.

The video also goes into topic such as why using text input value placeholders are a poor substitute for labels, as well as why the latest slew of aesthetic tricks are still worse than using a good ol’ text box and label.

If definitely worth checking out the video. Watch it now!


Just a reminder…

Diagram: Why technology is not neutral, created by the Center for Humane Technology.

I found this via Maria Lambert Bridge, the CCO for the Center for Human Technology. She writes:

Tech isn’t just a passive tool. Tech shapes us, and we shape technology.

Every design choice has an implication.
Every interaction has an effect.


UI developer hint: Test your apps in both light mode and dark mode!

Tap the image to see it at full size.

I recently made the mistake of not double-checking my UIs in light mode and dark mode, which left the checklist app in the book I co-wrote unusable in dark mode:

I’d set the text color to the system default text color, which becomes white in dark mode. I also set the background color for rows to white, but forgot to account for dark mode, resulting in this white-text-on-white-background mess. The fix was simple: set the background color of the rows to the system default background color, which adjusts automatically for the current mode.

My mistake didn’t produce results as demonically hilarious as the “We missed you!” message from a web hosting service. In light mode, you were greeted by this fluffy llama…

…but dark mode turned the llamas into something completely different (but oh so very METAL):

This observation was made by Rémi Parmentier:

It translates as: “Trust Gmail’s dark mode of Gmail to transform an ‘Oh, such cute little llamas’ into ‘OH MY GOD WE ARE IN HELL WHAT THEY WANT FROM ME’”.