Ever tried pushing a door that was meant to be pulled? That moment of hesitation where the handle invites one action, but reality demands another, is a classic example of a "poor affordance". 

In UI design, affordances determine how easily users understand what actions are possible. When done right, they make interfaces feel intuitive; when done wrong, they leave users frustrated and confused.

Before jumping into my article, check out userinyerface.com, a wild, chaotic ride through the worst affordances and UI patterns. Trust me, it'll add some fun to your day and make what I’m about to explain way more interesting!

What Are UI Affordances?

Affordances are visual and interactive cues that suggest what an element does. For example, a button typically has a raised effect, indicating it can be pressed. Scrollbars imply dragging, and underlined text hints at a hyperlink. These visual signals create an expectation, reducing cognitive load and improving usability.

🔹 Physical Affordance – Visual cues that suggest how something can be physically interacted with, like buttons, sliders, and toggles.

🔹 Perceived Affordance – When design elements suggest functionality even if the user hasn't interacted with them yet, like a link that looks clickable or a card that appears tappable.

🔹 Cognitive Affordance – Cues that help users understand how to interact based on their prior knowledge or experience, like familiar icons (trash can for delete) or tooltips.

🔹 Hidden Affordance – Interactions that are functional but not immediately obvious, requiring exploration or additional user input, such as swipe gestures or expandable menus.

🔹 False Affordance – When an element looks interactive but isn’t, like a text link styled like a button or a non-clickable card.

❌ Affordance Fails

When affordance is unclear, users get frustrated and abandon the experience. Here’s what to avoid:

• Low Contrast or Hidden Interactions – Elements like links, dropdowns, or form fields that blend into the background make users question their functionality. 
• Misleading Visuals – Non-interactive elements that look clickable (like an image with a "hover" effect or a box that appears draggable) can frustrate users who expect them to do something.
• Unclear Next Steps – After completing an action, such as submitting a form or adding an item to a cart, if users don’t know what to do next, they may become frustrated.
• Lack of Feedback – Interactive elements like sliders, checkboxes, or toggles that don’t provide visual feedback (hover states, color changes, or animations) leave users uncertain if their action was successful.
• Ambiguous Icons or Labels – Icons or text that are unclear or too abstract confuse users about their function.

✅ How to Get Affordances Right

🔹 Make Interactions Obvious – Buttons should look clickable, links should look like links, and draggable items should hint at movement.

🔹 Provide Instant Feedback – Hover effects, button presses, and loading spinners reassure users that their actions are being processed.

🔹 Don’t Reinvent the Wheel – Stick to familiar UI patterns. Users expect a floppy disk icon for saving (yes, even though most people have never used one IRL).

🔹 Test with Real Users – What seems obvious to you may not be obvious to your users. Run usability tests and see where they struggle.

📢 Quick Tip: If you notice users pause and think, your affordance needs tweaking.

💓 Final Thoughts

Great UI affordances make interactions feel effortless. They guide users naturally, without requiring them to think too hard. The best UI is the one users don’t even notice because it just works!

Next time you design something, ask yourself: Would a complete beginner know what to do here? If not, a small affordance tweak might be the missing piece.