Types of UI Affordances

Raymond Dulaney
Sep 7, 2018 · 2 min read

An affordance is defined as “a property or feature of an object which presents a prompt on what can be done with this object.” (UX Design Glossary: How to Use Affordances in User Interfaces). In recent years They find their way into many apps and pieces of technology, even in the classroom. I feel that this article presents multiple different aspects presented in user interfaces that I did not think of as affordances.

As stated in UX Design Glossary: How to Use Affordances in User Interfaces, “affordances are cues which give a hint how users may interact with something, no matter physical or digital.” Simple examples of this are door handles, but they can be more “tech” than that.

One of the biggest affordances I think of in user interfaces is in any word processor or text program. You have a little vertical line that indicates were you are typing. It also blinks to allow you to see it better and to not confuse it with a letter. This is not an inherently obvious thing but it becomes learned with the use. This can be defined as an implicit or hidden affordance.

Another affordance in user interfaces I can think of are what is “clickable”. There are many different aspects in an interface that you can interact with. Many of these aspects take you to another web page, let you zoom on a picture or allow you to close a page. These might not be obvious affordances but much more implicit ones.

Knowing if you click on a company logo takes you back to the home page or that if you click on a picture means you can make it bigger and zoom in on it are both implicit affordances. For experienced users this can be obvious and know. But for new users or students new to an interface this can be challenging to learn. It then becomes the teachers job to teach the users these affordances!

Raymond Dulaney

Written by