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