When thinking about affordances, as outlined by Victor Kaptelinin, it is essential to also think about perception, or more especially the perception of possible action that may be taken. In terms of design and usability it all comes down to using perception to determine what action the user will take so that the final product is intuitive and requires no instruction.
Although it may be easier to see the use of affordances at work in physical objects that is not to say it is not an extremely important tool when also thinking about HCI, or, human-computer interaction. In fact, it can be much easier for a UX/UI designer to identify the kinds of properties they will need to provide visual clues for considering they have a greater amount of control as to how customers interact with their product.
These visual clues go by another name called signifiers. It is important not to get these confused with affordances, as Donald Norman puts it “Affordances define what actions are possible. Signifiers specify how people discover those possibilities”. The other term to consider when looking at affordances is feedback. So if affordances deal with defining possible actions, signifiers with the discoverability of those actions, then feedback is the natural progression of providing users with some form of feedback on the action that has been completed. To help us understand the harmony of how these three theories work together let’s look at a working example.
Case Study – Spotify Desktop App
First, let’s identify the affordances we can take with a user’s needs in a music playing application.
- Music controls – play, pause, forward, backward, volume. These are all controls the user would expect to find in an application dedicated to providing music.
- Searching – finding songs, artists, playlists should not only be easy to find but there should be enough of a variety of them to suit every users needs/desires.
Now that we have identified some of the key affordances let’s take a look at some of the signifiers and feedback Spotify have put in place to make these possible, and decide on how well these work.
Signifiers & Feedback:
1. Music Controls
Upon first opening Spotify the first things I noticed was that the colour scheme is all very similar and the design is very minimal. Because of this minimal design it is pretty obvious after looking around for a few seconds that the music controls are located along the bottom of the screen.
Great! When hovering over each of these controls they increase in brightness and size slightly signifying to me that I can click them, a handy little tooltip also pops if I hover too long giving me a description of what each control will do so there can be no confusion. Here we have our first example of a signifier and feedback.
Although the changes to the UI are very subtle, they do their job in alerting users to their function in a clear consise manner. Hover events can be useful UI tools when you wish to convey interactivity without cluttering up your screen, however it is important to keep in mind hover events are rendered useless on mobile devices so this will be something Spotify needs to rethink in their mobile app. Let’s look at some more permanent signs of feedback on our music controls. I notice that when I click on the shuffle and repeat options they are now highlighted in bright green. This somewhat dramatic change means I have no doubt at a glance whether I have these options selected or not.
When you first open Spotify we can see from our left menu that we are automatically placed in the ‘Browse’ page. This in itself is a signifier that Spotify have put in place to let us know that they consider our searching for music as one of the highest priorities of the app. We can start to see a pattern building in this section with the subtle but distinct use of the green colour to signify when which section we are browsing in.
The dark colour scheme also works to Spotify’s advantage in the searching regard as because the search bar along the top has been made white this clearly jumps out at us. I wanted to see an example of an error message to see how Spotify deal with this important kind of feedback. Upon searching for something I knew would probably not be on Spotify I was presented with the following message:
The error is presented with a clear easy to understand message, there can be no confusion as to what went wrong, and the added line of suggested actions means that Spotify reduce the chance of further user frustration.
Overall Spotify seem to have taken into account the main affordances we can take when it comes to a music application. They’ve made the necessary signifiers and feedback to guide their users through these affordances all the while maintaining a very subtle and minimal design – keeping their UI as modern as possible without sacrificing user usability.