In defense of reusing existing design patterns
Leveraging affordances, signifiers, and standard interaction patterns for intuitive design.
A known mantra in UX design is: ‘Don’t make me think’.
In other words — make interactions intuitive.
Intuitive design implicitly suggests to the user possible functionalities and expected outcomes of the product. Affordances play a significant part in determining how intuitive a design is.
Affordances are the possibilities of utilizing or interacting with an object based on its appearance and capabilities. For example, a horizontal, flat, extended, rigid, and knee-high surface looks like it can be sat upon. So it affords sitting. A raised ‘button’ looks clickable. It affords to click.
The concept of affordance was first coined by psychologist James J. Gibson who worked in the field of perception. According to Gibson, affordances are implicit qualities of an environment about what it offers provides, or furnishes. Affordances are not necessarily visible.
The concept was borrowed in multiple fields, including in interaction design by Don Norman. In his book The Design of Everyday Things, he adapted the concept to perceived affordances — what someone thinks an object can do (perception). This is the widely accepted definition of the interaction design field.
Wikipedia has a clear example to distinguish between the two interpretations:
If an actor steps into a room containing an armchair and a softball, Gibson’s original definition of affordances allows that the actor may throw the chair and sit on the ball, because this is objectively possible. Norman’s definition of (perceived) affordances captures the likelihood that the actor will sit on the armchair and throw the softball.
Effectively, Norman’s affordances “suggest” how an object may be interacted with. (Norman later explained that this restriction of the term’s meaning had been unintended, and added the concept “signifiers”)
Signifiers are (additional) cues about how people may interact with an object.
Signifiers are used to:
- Clarify affordances and make intended way of using an object more explicit. Example: pull/push signs on door, earcons in voice interfaces etc.
- Communicate state of an object or what an interaction or action with it will lead to. Example: the red dot to signify hot water on a tap, state of fan regulators, etc.
The concept of signifier is borrowed from signified and signifier concept in semiotics.
Affordances define what actions are possible. Signifiers specify how people discover those possibilities.
— Donald A. Norman, The Design of Everyday Things
Together affordances and signifiers make objects — even those otherwise unfamiliar — intuitive.
Signifiers are context-dependent and convey different meanings based on the object it is associated with. For example: an ‘+’ icon on an accordion and one on a button allude to different responses.
GUIs — where do the perceptions arise from?
Unlike the physical world, objects in GUIs do not have innate affordances — they are actually created — intentionally or unintentionally, successfully or unsuccessfully — by the ‘designer’.
The user’s perceived affordance of the interface elements are shaped by their past experiences in the real world or previous interactions with similar products.
Examples of physical world experienced extrapolated into digital products would be skeuomorphic designs, common icons, etc.
The influence of past design conventions would be knowing logo as a navigator to home page of a website, or recognizing header elements to be links even without any signifier. Another example would be knowing buttons are clickable, cross-hair cursor allows selecting, areas with scrollbar are scrollable, etc.
If a design convention is used frequently, it becomes a perceived affordance.
Perceptions aren’t static — they evolve with user’s experience across the physical and digital worlds. This is Jakob’s law.
Jakob’s law:
Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know
To give an example: I had been using underline as a way to emphasize words and phrases since childhood. And yet, now I cannot not associate underlines with hyperlinks.
Cost of absent signifiers
When facing a signifier-less design, users may be confused about what they should or can do.
They may have to resort to sub-optimal and unnecessary ways to explore interface to find clickable components, out-of-view elements and hidden gestural interaction. These explorations would be through hovering, swiping, clicking, etc.
Such interactions lead to increased cognitive load and reduce efficiency and ease-of-use.
Let’s also consider the higher-level consequences of designing such patterns.
Say — as a designer — we are able to use other design conventions (UX copy, layout, etc.) as signifiers to alleviate the usability .
However, a large part of the web is not designed by designers. When non-designers borrow practices from such trends, a lot of the nuances and understanding of principles including affordances are absent. This affects the user experience on the web as a whole.
Putting theory into practice
- Research: Well, this is going to be the first point in any design process. Find out user’s mental model. As Norman notes here, signifier is an important communication device — whether or not communication was intended. Good designers have a better understanding of how users perceive things so that they can use affordance as a tool. This understanding comes from research.
Consider different factors which may affect affordance; ex: culture. - Design conventions and patterns: Leverage existing components, metaphors and patterns whenever possible instead of forcing users to learn something new. Maintain consistency within your design system.
If you are using a familiar recognizable pattern (a like button, swipe) don’t change the interaction — because if you do, it is a new and confusing pattern that user needs to learn. (This may not be possible at individual level — but we need to define standard interaction behavior for common patterns. I cannot count the number of times I have clicked on overlays to close a modal which didn’t allow that — only because some other modals do) - Deliberately design the affordance and signifiers: A good understanding of different affordances and when and how to use them is important to be able to map objects to functions. Natasha Postolovski has written a detailed article on different types of affordances in this Smashing Magazine article. The next part is consciously designing for each step of the interaction. Redundancy doesn’t harm.
Let’s look at two common interactions in UI design and the associated affordance/signifiers.
Button
Here are three states of a button — default, hovered and disabled. The affordance is clickability.
Let’s look at all the signifiers in place:
- The text label on the button (including any helper text near the component)
- The icon on the component
- The visual design within the context of your design system.
- A filled button may be signify the primary action as opposed to an outlined secondary button.
- A background may signify clickability - The color of the button within your system or convention.
- Color as feedback on hover
- Color to indicate favorable or unfavorable actions (red for destructive actions) - Shadows to indicate raised or clickable component
- The mouse pointer to indicate click-ability
Drag-and-drop
Drag-and-drop is relatively a more complex interaction pattern as compared to a click. Here we use signifiers to convey continuous information about the results of user actions and the current state of the object being dragged:
- feedback that the component is now ‘draggable’ (mousetip changing from point to grip)
- position/shadow of the object being dragged
- possible places to drop the component
- action that will happen if component is ‘dropped’ (ex: if it is too ‘far’ from the target area, it will go back to its original position)
- the expanded drop zone around the target parent where the object can be safely dropped
Conclusion
Intuitive use of products involves utilizing knowledge gained through other experiences, and mapping mental representations of past experiences and the current interaction. Affordances are a great way to ‘design’ this intuitiveness.
While we have some standard patterns, it is to note that standards and ‘intuitiveness’ are not constant — users are continuously interacting with different products and updating their representations, making ‘intuitiveness’ a moving target.
The objective of this article is to be more mindful and conscious about affordances while designing. Utilize existing patterns rather than creating a new one. Moreover, apart from just visual representations, shift the focus to complete interactivity.
Other References:
Wikipedia: Affordance
The theory of affordances
H Locke: Affordances and signifiers
UX Design Glossary: How to Use Affordances in User Interfaces
Affordances and Signifiers: applying design theory to your dashboards
