Affording Affordances in a Fast Paced Tech World
When half of the things we interact with today are new, affordances and user experience goes beyond just making something usable.
As user experience designers, we are always looking to simplify a user’s workflow and make things work like magic. We focus on creating “affordances,” (presenting) opportunities for users to perform an action, to help users deal with unfamiliar situations. This is critical to making users feel good using what you are making — since: they get it. In turn, this makes your product succesful.
Good affordances rely on accessibility, visibility, understanding, and a mental model. This is especially necessary, when you are creating something “new” and “magical,” (#apps) which has the curse of being “new” and “magical” (see: no one knows it exists, no one knows how to use it, no one uses it.).
But sometimes, maybe you want to forget about all of that — especially in the world of apps where affordances can appear and disappear. In fact, it can be a tool to carve and hold a market.
A coffee cup has a handle that not only allows you to pick up a hot cup of coffee without burning yourself, but also provides you with subconscious affordance and knowledge that it can be picked up. A cup’s handle does not help it do its job to contain liquid. It does, however, help it convey that it is liftable container for drinking. This is an object for users to lift up and drink from; not just a liquid container.
However, we sometimes fall into the trap of thinking good affordances eschew instructions: I have crafted something so well that I do not need to explain its feature — they can find out actions by simply seeing and interacting. We put instructions in opposition with affordances (“if I have to put instructions, I have not designed this well enough”).
It is true that instructions can lead to a bad experience. It can lead to users feeling dumb — having to read and get help instead of just knowing. It can lead to a cloudy experience — instructions overwhelming actual functions. After all, who reads the manual?
But we must remember that affordance comes in many way. Affordance is, again, about presenting opportunities to perform an action. When a user is not familiar with possible actions, instructions can present possible actions (opportunities through knowing) and become useful affordances.
Block of Text != Evil
A Tale of Two Great Unused Technology
Take for example the action of nearby location file-sharing. Both Apple and Android have features to transfer files to nearby friends easily: AirDrop and Beam, respectively. These features are useful since they transfer data much faster, and have a higher size transfer limit. Moreover, they have been around for a while (AirDrop with iOS7, and Beam with Android ICS 4.0, both in 2011).
It is not hard to imagine how useful a good system of transferring file based on location could be. It is not uncommon for friends to want to share things in the same geolocation. One example that happens all the time is sharing a photo with all parties in it right after it has been taken.
Furthermore, the fact that many apps have methods of communicating information based on geolocation proves that there is a market for geolocation based sharing. Bump Technologies, which initiates file transfer by bumping 2 parties’ phone, was #8 in Apple’s list of all-time most popular free iPhone apps before being bought by Google in 2014. Most messaging services has a feature that uses location to add friends (e.g. Line’s shake your phone, Snapchat’s QR code, etc.).
Edit (7/14/2015): Further proof via Google’s newly released Nearby API. Maybe by leveraging individual developer’s UX and integration, nearby (file sharing) in Android will fix the problem of awareness of Beam.
No Affordance = No Existence
So why hasn’t nearby file sharing taken off? It’s simple: the idea of transferring files nearby digitally and locally (vs. email/messaging) is a new concept with no prior mental model. There is an additional burden of bringing user awareness through its affordance, which creates a larger UX challenge.
But, slowly, this is changing. Slowly, users are being informed of this capability. What amazing affordance and intuitive design has revealed this wonderful technology? A block of instruction text.
One could easily dismiss this block of text as bad UX: A wall of text (3 sentences) that forces user to read to do (who reads?! Besides you reading this right now, of course). But then, think about how powerful and meaningful this wall of text has become.
Consider how many times you or your friends used Android Beam. My personal count: 0. In fact, count how many of your friends know about it at all!
Now consider Apple’s AirDrop. It’s true that the number of times I have used it I can still count with my hands, but that is still more than zero. In fact, several times, it was initiated by my less technology conscious friends.
People use AirDrop, because they know about it. The wall of text introduces information about a new mental model. It presents an opportunity for users to learn a powerful new feature. In doing so, they probably actually feel (and are) smarter! They now have insider knowledge, and have gained a new capability.
Affordance requires accessibility.
Moreover, affordance is increased by providing users with information when they need it. You increase the likelihood of learning and therefore usage when users learn information in context and are immediately interested in/can be using it.
AirDrop and Beam are both tools for sharing. When users click on the share icon on iOS, they are immediately presented with AirDrop, its explanation, and how to use it.
In contrast, there is no mention of Android Beam file sharing when you press share except in the list of all share options (here below the visible screen. Who wants to use something unfamiliar?).
Actually, Beam does have a block of text devoted to explaining itself. It is found burried within Android’s settings page. Wat.
Although AirDrop and Beam have similar functions, and were announced around the same time, I have only seen AirDrop being used in the real world. Even though Beam has theoretically better affordance (tapping phone vs. going through a menu system), it has terrible real life affordance because it is NOT visible.
Affordance requires visibility.
To Affordances or Not To Affordances
That being said, you don’t need to always shout to make your point. Sometimes, subtlety too can be intriguing and lead users to use. Ev Williams of Blogger, Twitter, and Medium talks about how adding friction makes an experience more rewarding.
This is even more relevant as we enter interactive UX where forms can change depending on situations. A cup will either always have or never have a handle. An app can reveal or hide affordances as necessary. Should we always have good affordances?
I’ll let the reader decide for themselves whether the things mentioned below are designed friction or lack of affordances.
Affordances are not just about presenting actions, but also about presenting information that leads to action. Notifications are affordances that present an action that a user already knows, based on the probable value of doing that action. E.g. notification badges/jewels invite users to press something; they are affordances that show up to invite as necessary.
That being said, one has to know the pointed action. Without that priori, it becomes a black box reeking of “???.” Is this something you want your design to exude? Affordance is the signifier and function is the signified — you must take them into account together for a complete message.
Take for example Snapchat. It starts off great: immediately presenting you with an opportunity to shoot a photo with the affordance of similarity to the camera app (circle at the center bottom) when you launch the app.
Unfortunately, the classical affordance disappears almost as fast as snaps do. Snapchat attempts to seem like a well thought out UX by trusting users’ intellect (I mean they provide little help (or none…)). This could create the positive friction Ev talks about, but could end up potentially alienating users by making them feel incapable because they do not understand.
What does the 1 and 4 mean in this screen? On the other hand, it is an interactive app and you can find out by clicking. This is Snapchat’s modus operandi: assume users know everything intuitively.
Forcing Users to Play and Think, Instead of See and Read
I mean what are all these symbols (circle in a squares, squares, filled in squares, arrows, filled in arrows, smiley faces)?
Although the app may seem undecipherable at a glance, tapping on the app gives you a clue into what you can do. Tapping on a name hints at chatting since when you tap on a person, it bounces to the right revealing a messaging icon. Additionally, below the person’s name, it reveals instruction and read status.
But these are not the classical visible affordance. It creates a barrier of entry by requiring users to act first, before affordances appear, which may or may not be a positive experience.
What are these three interlocked circles? or that filled circle in the top right?
For Snapchat, these complexity and friction are maybe part of their strategy to stay and win the younger crowd… Your parents will never figure this one out!
In fact, I once heard that Evan Spiegel, CEO of Snapchat, believes that the fact that the app has little instruction is part of the charm and community aspect: it forces you to learn the app through your friends.
Consider this video by The Verge about Snapchat’s secret functions — are they really supposed to be secrets, or do they just lack affordances and thus become insider knowledge?
Affordance requires understanding
It is of course important to acknowledge how well Snapchat is designed: making you want to click everything which will in turn reveal information. It’s one way to make interesting UX, but how much affordance does it provide? What type of things should rely on this?
Smart users will also immediately realize that Snapchat icons have two states — filled and unfilled. It is clear that one probably means read, and the other unread. However, as with any binary state system, there’s a possibility for confusion between on and off state.
You would think it is clear what filled and unfilled would mean, but that is not necessarily true. It depends on the context.
If you imagine a To-Do list, an unfilled icon would suggest that the task is not completed and action must be taken. On the other hand, if the context was an email list, an unfilled icon would suggest that it has been opened and thus no action needs to be taken!
I guess one can imagine that Snapchat is closer to an email list, but I have had friends guessed that filled means the snap has been opened, since it is like “marking as read”.
Don’t just think about what you think makes sense for what you are designing for, but consider things of similar nature to decide on how an affordance should be.
For example, for Snapchat, if you think about other messaging platforms, they demonstrate read status as either: bold/normal text font, and/or full/less opacity. I bet as you read those visual states, you can quickly, unquestionably decide, which one represents what.
Affordance requires following old mental models.
Technology is always evolving and changing, and we need to be generous with affordances as we enter the wild west where no prior mental model exists. We need to make sure affordances are accessible, visible, understandable, and follow old mental models.
At the same time, sometimes, less affordance may be useful in targeting a specific or limiting audience.
As with all things, creating affordances is all about balance. You do not want to shout, nor do you want to whisper. You want to inform.
Cover photo by David Mao