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)

ViewCompat.setElevation(View, int)

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

Stolen off the internets. https://www.google.com/design/spec/what-is-material/elevation-shadows.html

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.

Facebook. Like you didn’t know

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…

Motion

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.

https://github.com/saulmm/Android-Material-Examples Go there

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.