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:
Note the labels Date, Description, et cetera. These indicate my “programmer design”. Now here’s an alternative design, which just removes the labels:
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:
- That this box represents an event
- That events have dates
- What dates look like
Unless you have all three, you should use a label.
This page copyright James Fisher 2024. Content is not associated with my employer.
TigYog
Kickabout