May 15 — Corrections following the text
In the first part of this article series we introduced the concept of Visibility as a UX principle of design. In practical terms, Visibility in mobile design can be achieved by focusing the users attention towards core actions by making them clear and legible. This principle of Visibility also extends to cluttered interfaces. Having too many actions on a single interface can effectively hide the actions you are trying to get the user to accomplish. Sticking to a small number of core actions per page will go far in your UX design.
Next up is Affordance. While much more complicated (at least to me*) than many of the principles, apps that implement Affordance properly have a much more natural look and feel to them. If you wondered why some apps seem magically simple, it’s because they implement Affordance effectively
Affordance is the principal that your design should give obvious clues on what can be accomplished without explicitly indicating it. Buttons that look like they are physical buttons allow the user to understand their meaning without having to guess at their functions. In industrial design, affordances usually reflect some physical capabilities. For instance looking at Lego pieces for the first time you can naturally see how the pieces fit together without consulting the manual (hopefully). While this natural mapping seems intuitive for physical objects, Affordances in mobile design become slightly more complicated. Mobile devices are constrained to a 2D digital touch screen and don’t have much physical space to work with. Even at that, the same principles need to apply. Buttons should look and feel like physical buttons, date pickers should look like a calendar and the layout of components should have an intuitive feel to them.
Let’s see how this applies with an Android time slider;
In both these examples, the component functions as expected. A user can change the time but in the left design the “natural” look of the circular face give the familiar interaction of a physical clock(1). The simple change on the design reduces the cognitive load for the user and makes the interaction much more natural. That is what we are after in our designs
Google’s Material Design team makes some great steps in this area. I‘ll be honest when I was first introduced to the concepts behind Material design I tossed the ideas into the “feel good artsy terms that marketers love but developers don’t actually use” category. But in terms of Affordance they start to make sense. The idea that digital space should reflect physical paper and material lend really well into more “natural” Affordances and interfaces. It’s almost like they thought of this when they were building it.
People evolved to interact with physical items in a spatial world, so if you want to get the most out of your design consider how you would implement it in a physical space and translate that into mobile.
The first thing about physical space is that it has height and depth (usually I don’t go out much so I’m not sure). To take advantage of this you can “layer” your interface hiding details beneath other features. Android provides a simple way to implement “layers” through the use of elevation. Either directly within the xml (API 21+)
<ImageView … android:elevation=”8dp” />
or using the ViewCompat libraries (my preferred way)
This allows you to separate layers and isolate content. This is important because it creates the illusion physical space and makes it much easier to create components with where the user understands the function. But how do you decide what to elevate and separate? Well that’s complicated, but since we are trying to do the minimum, try separating controls from content.
Separate layers of content and control by adding elevation. Controls elevated off the page give a good indication they are actionable
The Floating Action Button was designed for this purpose. Elevated from the content it provides a perfect way to isolate controls. But it doesn’t only have to work for controls.
Cards are essentially content and controls all together, and automatically give the impression that they are clickable. [Tip: Don’t make the mistake of not making cards clickable. That will confuse the user]
Using cards and elevated buttons will go a long way in your design. Just implementing those will help your users out significantly.
Bare with me here, one more quick concept to cover…
A second noticeable feature of IRL is that it tends to move around. That motion can indicate function and therefore, Affordance. In industrial design motion is difficult to achieve but in mobile we have the luxury of moving components around on a screen as much as we want. Motion, or Animation, is a great method of indicating to the user what the function of a specific item is without having to explicitly tell them.
But tackling Animation within Android is a big and daunting project (for this article at least, we will address animation in future parts). While the animation framework in Android is getting better, it is still plagued by performance and complicated legacy issues. Thankfully, taking the lazy way out we can indicate to your users the functions of actions (Affordance) through the use of View Transitions.
Transitioning layers or components between scenes is the easiest way to show to the user that common components such as action buttons carry over from one state to the next. The obvious movement of the components gives an indication to the user about their functions. If you transition an action component (like a FAB) from one page to the next you don’t have to indicate it’s new function. The user will already know what to do. Same applies with content. A state transition on content means that the user can intuitively understand where the content is coming from and going to. Remember the layers from the previous section? They make great targets for view transitions. Making those layers transition between state is a natural and expected change for the user.
- Affordance is magic. Make it less magic by making your controls similar to their physical counter parts, like calendars and clocks.
- Isolate controls and content using view elevations.
- Cards are great way to display actionable content, just make sure they are clickable
- Make liberal use of transitions to show the state of content and actions have changed
- Don’t animate components between layers. Too confusing.
/u/VitoCassisi makes a great point about what I have been calling Affordance but Norman refers to as a signifier.
Like I mentioned Affordance principle was complicated for me to wrap my head around in a practical sense. For this article I’ll keep the Affordance name and principle however if you are ever invited to a dinner party and the topic comes up..you should probably refer to it as a Signifier. That should win over almost anyone at a dinner party.
- I guess you could consider the right design like a digital alarm clock. But digital alarm clocks were a poor design decision made when displays were limited on the characters they could display.