Affordances are a general design concept that comes from physical product design but can be applied to visual design. I first learned about affordances from the book The Design of Everyday Things. The book describes affordances as the following.
“Affordances provide strong clues as to the operations of things… When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction is required. Complex things may require explanation, but simple things should not.”
Affordances allow us to take advantage of common experiences and cultural standards to create immediate understanding of our designs. Examples of affordances in physical products include:
- A coffee cup with a handle suggests that you should grip the cup by the handle.
- Buttons on doorbells are for pushing.
- The material and shape of balls suggest they are for throwing and bouncing.
In digital design, users form and develop notions of what they can do according to conventions, constraints, and visual, auditory, and haptic feedback. Examples of perceived affordances in web design include:
- Scroll bars
- A colored button, such as the Tweet button on Twitter.com
- A light gray button with light text that indicates the button is not clickable
- A disk icon used to indicate the save command
- Breadcrumb navigation
There is also a complementary concept called a false affordance. False affordances give a clue as to usage that does not match the resulting action. There are examples of this all over the web: buttons that do nothing, text that says “click here” but isn’t a hyperlink, a logo that doesn’t return the user to the home page.
Here’s a 5-minute video from Vox Media about bad doors and false affordances. You might remember it from when it made its way across the internet a year or two ago.
Affordances in Data Visualization Design
Affordances are very relevant in data visualization design. I first saw this application discussed by Storytelling With Data. She describes the use of affordances in data viz design as follows:
“Through strategic use of things like color, size of elements, spacial position, and text, it is so clear to the audience how to interact with the data visualization that they don’t even notice the design.”
But she isn’t the only one talking about it. The idea here is the same: Use existing knowledge and consistent design to make it obvious how users should interact with your data visualization.
Affordances in Power BI
Since Power BI is largely an off-the-shelf product rather than a custom application (with the exception of Power BI Developer features), much of the user interaction is handled by Power BI desktop or the Power BI web service. For instance, Power BI provides the button for Focus Mode and a contextual menu at the top right of each visual on a report page. Tables automatically have interactive sorting, activated by clicking the column header. Hover text exists when you hover over a data point on a chart.
That doesn’t mean we don’t need to pay attention to affordances. The biggest thing we can do as report designers is implement consistent design.
Use a consistent color palette. If users get used to a certain shade of yellow or orange that indicates something needs attention, they will take that visual cue when they see it elsewhere in the report or in the next report. Colors have meaning for us, so we can define colors to indicate good/bad results, or associate colors with categorical values. Power BI Report Themes can be very helpful in this regard, since they can define a color palette and visual formatting.
Using consist placement and formatting of slicers across report pages and reports can also be helpful. If you use the same slicers on multiple reports/report pages, can you use consistent formatting and spacial position? Do you have a slicer section of your report page where all slicers sit, along the top or left? Could you format your region slicer in a similar manner on every page (e.g., vertically with simple dark text and no background color)? Power BI Report Templates can come in handy in this regard. You can create a template that has the title, slicers, and chart positions and formatting already set.
As fun and interesting as it may be to use a new and shiny custom visual, if that visual doesn’t make its interaction and information obvious to users, it may not be the appropriate choice. There is a reason people like bar charts – they follow common convention and are easy to read.
Another thing to consider is the use of images to link to bookmarks and websites. Make sure it is obvious that your image is clickable, and make sure it’s obvious where clicking that image will take you. If it’s not clear, add some text to indicate that there is a possible interaction there.
Also, be aware of how you use visual interactions. If you choose to edit the default, do so with reason and try to make it obvious through design cues what the expected interaction will be. Otherwise, users might click a slicer or a bar in a bar chart and wonder why values in another chart aren’t being filtered or highlighted.
This is not to say you should never try anything new or deviate from the norm, but that you should do so purposefully when learning a new design/convention is worth the effort to your users. The consistency and simplicity of affordances corresponds to reducing extraneous cognitive load.
Finally, be aware that affordances are cultural, and may be different across different user groups. For example, colors have different meanings in difference cultures. Be sure you are designing for your intended audience rather than yourself. It can be helpful to confirm with a potential user during user acceptance testing that the design affordance you think is obvious is indeed obvious to them.
This post is part of a series. Go here to see the list of posts in the series.
Data Savvy 