“The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.” — Jakob Nielsen
Below are six small, working demos. Each one deliberately breaks a convention borrowed from the physical world, from language, or from colour and iconography that people already understand. Try each one first, then click “Reveal what actually happened” to see the real behaviour hiding behind the mismatch.
Every rocker light switch you've ever used works the same way: flip it up for on, down for off. This one is wired backwards — flipping it up (the universal “on” gesture) turns the light off.
On every volume control in the physical and digital world, sliding right or up means louder. Drag this one and you'll find it's inverted: right means quieter, left means louder.
Red means stop or danger, green means go or safe — traffic lights, warning labels, every wired convention agrees. This status indicator swaps them: it turns green during an outage and red when everything is fine.
A trash can icon means “delete” everywhere you look. Here it actually duplicates the file, while the recycle/restore icon — which should bring something back — permanently deletes it.
Submitting this form always fails, and the system does technically tell you why — in raw database and stack-trace language nobody outside the engineering team would recognise, instead of the plain sentence it could have shown.
Every label on this profile form is the internal database column name instead of a phrase a person would use. It works, but it forces you to think like the schema instead of thinking like yourself.