It might not need a label

One hallmark of “programmer UI” is using labels for everything. Here I show why this is often a design mistake, with some examples. I suggest how to identify over-labelling, and how to fix it. Finally I suggest why programmers are biased towards this design mistake.

Recently I built this “card” component showing the details of an event:

Date: 11th March
Time: 17:10
Venue: Down Lane Park
Address: London, N17 9AU
Description
Please arrive ten minutes before the game starts. Wear a dark top; bibs are provided.

Note the labels Date, Description, et cetera. These indicate my “programmer design”. Now here’s an alternative design, which just removes the labels:

11th March
17:10
Down Lane Park
London, N17 9AU
Please arrive ten minutes before the game starts. Wear a dark top; bibs are provided.

This re-design shows that the labels were unnecessary. We can see that the text “11th March” is a date. And the bottom text does not need to be labelled “Description”, because what else could it be?

Worse, the labels were actively distracting. One argument for labels is to make text scannable, so users can quickly find what they’re looking for in the UI. But users are not scanning for the text “Date”, they’re scanning for something that looks like a date. And to find the event details, you don’t hunt for text like “Description”; you look for something that looks like a paragraph.

Why did I add these labels? One reason is that I was translating JSON data like this:

{
  "date": "2024-03-11",
  "time": "17:10",
  "venue": "Down Lane Park",
  "address": "London, N17 9AU",
  "description": "Please arrive ..."
}

Our code uses labels everywhere. That JSON object could instead be represented as an array of five strings, but that would be a horrible data structure! It’s tempting to apply this software design principle to UI, but it often doesn’t work.

To be clear, you shouldn’t remove all your labels. Just identify which values are self-labelling. For example, the event date was self-labelling, because the user knows:

  1. That this box represents an event
  2. That events have dates
  3. What dates look like

Unless you have all three, you should use a label.

Discussion on Hacker News.
Tagged #programming, #design.
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2024. Content is not associated with my employer. Found an error? Edit this page.