Tuesday UX Trainer: WTF is an affordance?


You’re reading an issue of Tuesday UX Trainer, a series that teaches you something new about UX design every week.

One of the first words I learned in UX class was affordance. It sounded fancy and made me feel 10% more hipster as a designer. To oversimplify, an affordance is a signal for something that a user can act upon – for example an underline in web design affords the idea of text that can be clicked on.

In this issue, we get into the nitty-gritty of affordances. Do you feel 10% cooler already?

1. Affordances and Metaphors (article)

If you haven’t heard of Joel Spolsky, then you’ve probably heard of StackOverflow – the internet’s most popular programming Q&A website.

Joel’s oldie-but-goodie article explains how affordances help bridge the gap between the software UI and users’ mental models of how things should work.

There are many conventions and mental models I took for granted, especially with “desktop” and “folders.”

Read the article for a trip down UI memory lane (especially the bit about the Microsoft “briefcase”):


2. Why is the blue tap colder than the white one? (Discussion)

Speaking of StackOverflow, here’s an interesting discussion on StackExchange – the expert Q&A community for dozens of topics like UX, design, and mo’.

The user’s question about temperature knobs reminds me of the types of questions children ask sometimes – 100% valid and makes you wonder how things got to be the way they are. Even if it’s something as mundane as temp colors.

Check out the discussion: https://ux.stackexchange.com/questions/111099/on-water-fountains-why-the-blue-tap-is-supposed-to-be-colder-than-the-white-one

3. Affordances and their importance to UX practitioners (training course)

Affordances are such an important thing to nail down when you’re designing interactions, and fortunately there’s a quick (but actionable) course around the topic.

UX Designer Rex Hartson teaches you the 5 most common types of affordances (+ how to use them), and also how to avoid false affordances that confuse users.

I dig this course because there’s plenty of visual examples to make sense of it all.

UX course here: Affordances and Their Importance to UX Practitioners

_ _ _ _

Keep learnin’,

Oz / UX Coach @ UXBeginner.com

Leave a Reply