Stop Saying "That Thing" — Why UI Vocabulary Matters More Than Ever

Blog content with my own commentary, not copying the original

Let's be honest — we've all been there. You're in a meeting, trying to explain a bug, and you say something like "that blue thing next to the button" instead of "the insertion caret" or "the disclosure triangle." The developer across from you nods politely, understanding approximately nothing.

This isn't just a casual inconvenience. In the age of AI-assisted development and vibe coding, precision matters more than ever. When you're crafting prompts for coding agents, vague descriptions produce vague results. Say "make the dropdown look nicer" and you'll get exactly what you asked for — a mess. Say "style the combobox with a clear button and appropriate focus ring" and suddenly your AI assistant delivers exactly what you envisioned.

The Terminology Gap

Here's the thing about UI design: every element has a name. Some are intuitive — button, checkbox, slider. Others are surprisingly specific and oddly delightful. "Traffic Lights" refers to the macOS window controls (you know, the red-yellow-green circles). "Bento Grid" describes that modern layout with mixed tile sizes. "Scrim" is the technical term for that semi-transparent overlay behind a modal.

This gap between common parlance and proper terminology creates real friction. Designers and developers often talk past each other. Stakeholders request "that notification thing that pops up" when they mean "toast" or "snackbar" — and yes, those are different things with distinct use cases and behaviors.

Why This Matters for AI Coding

If you're using AI coding assistants (and let's be real, if you're not yet, you will be), the words you choose directly impact the code you receive. Think about it: modern UI frameworks have thousands of components. When you describe what you want, you're essentially translating your vision into a prompt that the AI must interpret.

A prompt like "add a segmented control with an active state" will get you far better results than "that tab-like thing where one is selected." The AI isn't guessing at your intentions — it's following your description. More precise language means fewer iterations, less back-and-forth, and code that actually matches your mental model.

Beyond the Obvious

Some UI terms are delightfully specific. "Visual Effect Material" or "Vibrancy" refers to that translucent, blurred effect macOS uses throughout its interface. "Easing" or "timing functions" control how animations feel — whether movements are snappy, bouncy, or smooth. These aren't just pedantic distinctions; they represent the difference between interfaces that feel mechanical and ones that feel alive.

Other distinctions are surprisingly important for accessibility. "Focus Ring" isn't just a visual indicator — it's how keyboard users navigate. Understanding that :focus-visible behaves differently than a standard focus indicator matters enormously when building inclusive applications.

Building Your UI Vocabulary

You don't need to memorize every term from a visual dictionary to improve your work. Start small. Pick three elements you regularly confuse — maybe popovers versus dropdowns, or tooltips versus hover cards. Understanding when to use each transforms your component selection from guesswork to intentional design.

The real shift happens when terminology becomes part of your design and development vocabulary. Instead of "that thing," you start saying "the resize handle" or "the scrim overlay" or "the popover container." Suddenly, everyone at the table understands exactly what you're describing.

The Bottom Line

Naming things is hard. Even the great Martin Fowler acknowledged that naming conventions are one of the most difficult aspects of software development. UI elements are no different — we interact with them constantly, but rarely pause to learn their proper names.

Whether you're debugging with a developer, prompt-engineering an AI assistant, or simply trying to Google why your CSS animation looks wrong, knowing the right terminology unlocks faster solutions and clearer communication.

So next time you encounter "that thing" in an interface, take a moment to learn its real name. Your future self — and everyone you work with — will thank you.

And if you need a quick reference? The NameThatUI project serves as a handy visual dictionary for exactly these moments. Bookmark it. Use it. Your communication will improve almost immediately.