TNS
VOXPOP
Where are you using WebAssembly?
Wasm promises to let developers build once and run anywhere. Are you using it yet?
At work, for production apps
0%
At work, but not for production apps
0%
I don’t use WebAssembly but expect to when the technology matures
0%
I have no plans to use WebAssembly
0%
No plans and I get mad whenever I see the buzzword
0%
Frontend Development / Software Development / Tech Culture

Bad by Design: The World of Intentionally Awful User Interfaces

Can developers learn better UX by intentionally creating bad interfaces. The results certainly are hilarious enough at any rate...
May 28th, 2023 6:00am by
Featued image for: Bad by Design: The World of Intentionally Awful User Interfaces
Image by meineresterampe from Pixabay.

They’re funny — and strangely relatable. But also thought-provoking, if not downright educational.

And, lately, these intentionally bad interfaces have been provoking a new round of laughter on Twitter

Because it’s 2023, one of the most insightful reactions was apparently even generated by an AI bot.

“Well, at least they’re finally acknowledging that engineers are responsible for the worst user interfaces on the internet.

“Maybe next they can have a competition for who can create the most confusing automated customer service system…”

But it turns out the comical controls are all part of a long-standing meme — a kind of internet running joke with a dire yet light-hearted warning for our times.

“I build user interfaces for a living, and my primary source of inspiration during a 20-year-long career has been bad interfaces,” said Swedish frontend developer and interface designer Hakim El Hattab. It’s all a reminder that frustrating consumer experiences can reach cosmically comic proportions. That we’re all at the mercy of engineers building our user interfaces.

And that our programming tools are now powerful enough to let bored internet satirists dream up alternate interfaces whenever they feel like it…

Challenge Accepted

All the bad design craziness apparently started back in 2017 in Reddit’s “Programmer Humor” subreddit, when a user posted a tall green volume bar that needed to be dragged… horizontally. “Who can make the best volume slider? the post had asked.

And the message was heard, the challenge accepted…

“It was wild,” remembered a recent comment on Reddit. “For weeks the subreddit was just terrible volume controllers.” After 11,000 upvotes and 403 comments, the original discussion thread was permanently archived (and closed for new comments).

But then dozens of new discussion threads were started for each new, bad volume-control interface.

GPS Volume Control
by u/mrzacharyjensen in ProgrammerHumor

Over the years the best ones have been featured in writeups by sites like Bored Panda and the Verge. Back in 2017, designer Fabricio Teixeira even collected them together for a post on his design blog UX Collective, calling their attempts “a fun exercise/joke, that can strengthen one’s creative muscles and ability to think outside of the box.”

Yet these curated collections only scratched the surface of the original event, missing the scope of just how many more different volume controls were created. Even the ones circulating now on social media had each offered their own tantalizing headlines like:

There were many more — and all of them were oh-so-creatively bad. “It’s like a daily Far Side comic, with a volume theme…” one Redditor had posted at the time — adding “I kinda hope it goes on forever.” But along the way, maybe this spontaneous outpouring also offered some grassroots meta-commentary about our own over-engineered world…

Implicit Critiques

One poster imagined a volume control interface that subjected its input to the usual checks for password strength. (“Your volume must have at least six characters… Your volume must contain at least one uppercase letter… “)

Another imagined a volume control whose upper bound was…the amount of charge left in your battery. (“Please charge device to increase volume…”)

Running low on volume
by u/fluiux in ProgrammerHumor

And then there was the seemingly innocuous volume controller that demanded of its users, “To change volume to 35%, please solve CAPTCHA below…”

The blog post on Teixeira’s site argues that “there’s definitely a reflection point about the state our industry here.”

In short, Teixeira believes designers today often feel the urge to innovate (not mention professional pressures) — and that’s met with the easy availability of tools. But that doesn’t mean that innovation needs to happen, Teixeira writes.

“Let’s be honest: the volume control design pattern has been around for decades, works pretty well for the majority of users, and is incredibly familiar to a lot of people. You don’t need to reinvent it.”

“People expect interfaces to look and behave in a predictable way,” acknowledged UI designer Hakim El Hattab — before emailing me two of their alternate versions of a checkbox. “I think it’s a lot of fun to break the rules and try to surprise people.”

But even as the original meme offered its implicit critique of the design industry, there were also some moments that were oddly educational for programmers. One maker actually built their volume control in the real world — using an Arduino that adjusts the volume based on the amount of heat detected by a temperature sensor.

And one stripped-down user interface even needed the desired volume to be spelled out in Morse code.

Single button volume interface
by u/LinAGKar in ProgrammerHumor

That same thoughtful spirit continues to this day — even as the phenomenon has become almost a Reddit institution. There’s now a subreddit on the site dedicated just to “Intentionally bad User Interfaces,” which was “spawned” from the “ProgrammerHumor” subreddit and its “constant need to find bad UI then make more of it” (according to the subreddit’s official description).

Named “badUIbattles,” this subreddit now has 203,000 members committed to creating “bad UIs just for the sake of them being bad.”

And yet to this day, there’s also a tradition of encouraging posters to share their source code. “I think it’s important to share the source wherever possible so that others can learn,” Hakim El Hattab told me. “I learned that way myself and it’s nice to pay it forward.”

Spreading to the Web

In the new subreddit, El Hattab recently shared their own perfectly maddening interface that perhaps sends a second message: That the people who make “unsubscribe” buttons secretly don’t want you to.

Working on my new unsubscribe page
by u/hakimel in badUIbattles

A hint may be hidden in its URL: clickmeifyoucan.

But part of the subreddit’s charm is reading the comments, where people post their honest reactions, marvel at the UI’s ingenuity and share a laugh.

“Thanks, I hate it”

“In germany, stuff like this would be illegal”

And then there was that one user who wrote sardonically…

“I would like to subscribe to your newsletter…”

So the tradition continues as the years roll along, and the new subreddit even inspired Brazil-based physics engineer (and self-taught programmer) André Goulart Nogueira to create a web repository for all the “best (or worst?) bad-UI I’ve seen.”

And Nogueira’s own creations also appear on that page, including an interface for submitting your phone number which uses nothing but a sliding selector that scrolls through… every possible phone number. (Selecting “Advanced Mode” even activates a second slider which moves the first slider — but only if you tilt it just right…)

Meanwhile, Nogueira’s “birthday selector” also seems deceptively easy — until you realize it wants you to scroll through every day of your life until you reach the exact date of your birth. (Although two additional options let you start with the year 1 A.D. — or with the year 9999…)

And over in the badUIbattles subreddit, another user shared their even more diabolical creation: the notorious “tabbed keyboard”. Implemented with some simple JavaScript (in an HTML/CSS webpage), its distinguishing feature is really its lack of a keyboard. (You can try it yourself in a web browser.) The “Enter User Name” window just contains a single key — marked with a “plus” symbol — that when clicked will create a second window with exactly one more key — Which you can now use only for typing its one randomly-assigned letter of the alphabet.)

Tab back to that first window — the plus sign — and you can click the “plus” key again to create another window with a key for typing one more letter… Then continue until you’ve randomly received enough letters to type out your entire user name. (Plus, the additional “submit” key you’ll actually need for entering that name…)

The punchline? The user interface is programmed to then tell you “Username already taken. Please pick another.”

The creator joked on Reddit that it’s good for people with poor eyesight — since to view each single key, they can use the entire screen.

And again, comments of appreciation flooded in.

“God it’s awful… good job.”

“This is even worse on mobile and I love it.”

One commenter even sarcastically applauded the interface for “ensuring the screen isn’t cluttered by any functions you don’t need at that exact moment. Truly the future.”

“When will user experience jokes not be funny? Probably never,” quipped the Verge, “as services/products continue to be in a constant race with themselves to make things ‘better’ while often neglecting how we interact with them…” And sure enough, back in Reddit’s original “ProgrammerHumor” subreddit, yet another intentionally-bad volume control interface appeared earlier this year.

Though this one appears to be more of a joke about Vim.

I’ve suddenly remembered the old challenge to make the worst volume slider, so here’s my entry. Unexitable
by u/sicve011 in ProgrammerHumor

But maybe satire is the sincerest form of criticism, pointing a way forward to a better world. “It’s incredibly frustrating when a simple task is made difficult by a poorly designed interface,” Hakim El Hattab told me.

“This frustration with bad interfaces has taught me what to avoid and enabled me to create more user-friendly interfaces at work.”

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.