Taste of Design 2: Affordances

One of the earliest books I read that related to design was Don Norman’s The Design of Everyday Things. I read it back when I was still in Mechanical Engineering and it generally discusses how we build concepts into both our physical and digital products that psychologically push us to have expectations from them.

The idea of affordances was key throughout the book. Specifically it means:

The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. — Gibson

More generally…it is the idea that an object gives the mental impression it can accomplish something. You walk up to a door and does it have a handle? Or a metal plate? Does it feel like it should be pushed or pulled?

And more importantly, is it designed correctly or not? For the physical world the easy example of this is the door . with a handle, that still is meant to be pushed.

Why is there a handle, when the door is meant to be pushed?

For UX/UI this gets into the idea that everything we see is built on affordances. There aren’t actually buttons or sliders on the screen, just images. But is the button perfectly flat with no reaction? Or does it have a hover effect, a mild visual cue to tell the user “I CAN BE PRESSED” that they don’t even think about but makes it stand out from the rest of the screen.

This is in itself still a very simple way of describing the idea for software design. Dividing it into sections can help:

Explicit Affordances

Things that are spelled out concretely. Buttons that say “PUSH ME” or “See more”. Intuitive and direct but heavy handed.

A more explicit affordance in Workplace Analytics

Pattern Affordances

There are concepts that are built up over time and result in expected behavior from prior usage. This I believe would include things like the waffle in Office or Google. Both elicit the expectation that a menu will open (and generally one with a grid of objects rather than a list).

Office Waffle

Google Waffle

Hidden Affordances

These are actions that you can perform that are hidden. Drop down menus, hover tooltips, they mix with Pattern Affordances in that users build up an expectation over time, but they’re not visually apparent.

Tooltips in Google Keep

Drop down that appears once clicked

False Affordances

Expected actions not occurring from affordances laid out within the UI. Examples could include, how its fairly common that a top left Logo takes the user back to HOME….but not every UI does this.

Clicks but doesn’t go anywhere?

Logo in the top left of Workplace that doesn’t perform any action.

Metaphorical Affordances

Basically think skeuomorphism. We still use a letter to represent email but when was the last time you actually mailed a letter? Or for a button on the screen, its not really a button but we add hover or shadow, outlines, to give the impression of a real world button that is being pressed.

Hover, active, etc.

Negative Affordances

The idea of inactive states, buttons that look like you can’t interact with them. Done wrong and you have users trying to click into areas they can’t.

Good examples here would also be greying out the background when you have a modal. Usually this will leave the user thinking “I can’t interactive with the rest of the screen”…which they shouldn’t be able to.

Greyed out background next to the active modal state.

Further reading

6 types of digital affordance that impact your UX | Webdesigner Depot

The Design of Everyday Things: Revised and Expanded Edition