I Think I'm a Button?

Vibe Check – I Think I'm a Button?

Buttons are one of the most fundamental interactive elements in digital design, yet not all buttons look like buttons. Sometimes, designers prioritize aesthetics over usability, creating buttons that lack clear affordance—no background, no borders, just an icon and text floating in space. While these designs might look sleek, they introduce significant challenges for people relying on voice technology and those with cognitive disabilities.

When a button doesn’t look like a button, it increases cognitive load, making it harder for people to understand and process. Let’s dive into why this matters and how we can create buttons that are both accessible and intuitive.

Personal Story – The Mystery Button Mishap

I was auditing a website using voice technology, testing how well it responded to voice commands for navigation. Everything seemed to be working as expected—until I moved on to a section with what appeared to be static text and an icon. I skipped over it, thinking it was just a label, not an interactive element.

It wasn’t until I switched to a screen reader audit that I discovered the real issue: the screen reader announced it as a button. I was shocked. This so-called button had no background, no border, and no visual indication that it was something clickable. If I had missed it using voice commands, how many others were skipping over it too?

After inspecting the code, I found that it was technically marked as a button in HTML, but its styling made it look like ordinary text. The issue? The design team had stripped away all affordance to keep the interface "clean." When I shared my findings, the team realized that their minimalist approach was actively making the experience harder for people using voice technology and those with cognitive disabilities. We worked together to add a visible background, a hover state, and clearer button styling—ensuring that the next person wouldn’t miss it.

This experience reinforced a crucial lesson: if people have to guess whether something is a button, the design has failed them.

Elevate the Vibe – Why Clear Affordance Matters

Affordance refers to how design elements visually communicate their function. A well-designed button tells people, "Hey, I'm clickable!" through its shape, color, and other visual cues. When affordance is weak, people may struggle to identify interactive elements, leading to frustration and a poor user experience.

Vibe Up – The Impact of Poorly Designed Buttons

1) Challenges for Voice Technology Users

People who use voice control to navigate interfaces often rely on clear labels and well-structured buttons. If a button lacks a clear style, it may not be properly recognized or announced by voice assistants, leading to confusion or unexpected interactions.

Example Issue:

• A voice user says, "Tap the submit button," but because the button isn’t visually clear or properly labeled, the voice assistant doesn’t register it as an interactive element.

Fix:

• Use proper button semantics in code (e.g., <button> instead of <div> or <span>).
• Provide visible focus styles so people can see what’s being selected.

2) Increased Cognitive Load

For people with cognitive disabilities, ambiguous UI elements can make digital experiences overwhelming. If a button looks like plain text, users have to think about whether it’s clickable, increasing effort and slowing down interactions.

Example Issue:

• Someone sees text that might be a button but isn’t sure. They hover over it, click it, and then realize it was a button—but only after trial and error.

Fix:

• Give buttons distinct styles with clear borders, backgrounds, or hover states.
• Ensure buttons stand out from surrounding content so they are easily identifiable.

3) Higher Processing Effort for All Users

Even for people without disabilities, unclear buttons require more effort to process. When buttons blend into the background, users must rely on context clues or prior knowledge, adding unnecessary friction to their experience.

Example Issue:

• A user skims a page and completely misses an important call-to-action because the button looks like regular text.

Fix:

• Use contrast, padding, and distinct shapes to separate buttons from non-interactive elements.
• Avoid relying solely on color to indicate interactivity.

Vibe Boost – How to Design Clear, Accessible Buttons

1) Add Visual Distinctions

Make sure buttons have:

• A visible background color
• Borders or shadows to define shape
• Hover and focus states to reinforce interactivity

2) Use Proper Button Semantics

Buttons should always be coded as <button> elements or <a> links when appropriate. Avoid using <div> or <span> for interactive elements, as they lack the necessary built-in functionality.

3) Label Buttons Clearly

For voice control and screen reader users:

• Ensure all buttons have meaningful labels (e.g., <button aria-label="Submit Form">Submit</button>).
• Avoid using icons alone—always pair them with text or accessible labels.

4) Consider Cognitive Load

• Reduce ambiguity by making buttons visually distinct.
• Use clear, concise action words (e.g., “Buy Now” instead of “More”).
• Keep interactions predictable—buttons should behave as expected.

5) Test with Real Users

• Conduct usability testing with people who use voice technology and assistive devices.
• Check for common frustrations, like buttons being overlooked or hard to activate.

Self-Reflection – Evaluating Your Button Design

Ask yourself:

• Do my buttons clearly look interactive?
• Would a first-time visitor recognize them as buttons without guessing?
• Can someone using voice commands easily activate them?
• Have I tested for accessibility, including focus styles and screen reader support?

If your buttons fail these checks, it might be time for a redesign!

Vibe in Action – Making Buttons Better for Everyone

1) Apply What You’ve Learned

• Audit your designs to identify low-affordance buttons.
• Update styling to make buttons visually distinct and easy to recognize.

2) Share the Knowledge

• Educate your team on the importance of button affordance.
• Advocate for accessibility-first design decisions.

3) Keep Learning

• Follow accessibility guidelines like WCAG and ARIA best practices.
• Stay engaged with accessibility communities to learn from real-world experiences.

Vibing Out

If people have to guess whether something is a button, the design has failed them. Clear affordance makes interfaces intuitive, reducing frustration for all people—especially those who rely on assistive technologies or have cognitive disabilities.

Let’s move beyond the trend of "invisible" buttons and embrace designs that are accessible, intuitive, and easy to use. Because when people know what’s interactive, everyone wins.