The 80/20 rule is a design principle that says in essence 80 percent of a system’s effects come from 20 percent of its causes. For an app, this might mean that 80 percent of its benefit comes from 20 percent of the actions that it presents, or 80 percent of the people who use an app are only going to use 20 percent of its functions. Now, the exact percentages are, of course, different. But the basic point is valid.
We are all becoming more comfortable with increasing levels of abstraction. The button, after all, is just a highly abstracted version of a physical, real-world button. All that’s necessary to create a strong connection between the two are the rounding of the corners.
A subtle drop shadow around the slider knob separates it from the track that it is positioned over, and this separation suggests that it can be moved independently. And even that visual cue might not be completely necessary. For most people, simply seeing a filled-in circle over a line is all that is needed to express a sliding affordance.
And sometimes affordance is communicated using animation. Tapping on the Weather app, we see it slide up a little bit. This suggests the possibility that the content areas can be scrolled. And sure enough, they can.
People are more likely to perceive an affordance when it is related to an action that they are more likely to take.
Regardless of the exact technique that you use, your app’s interface must make clear what action possibilities it affords. If not, people won’t know how to properly interact with it. They’ll interact in ways that your app doesn’t support, and they’ll confuse controls for non-interactive objects.
If you see a set of switches on the wall, and you know that one of them controls lights, then it’s reasonable for you to assume that every switch is a light switch. If one of them controls the shade, then it would be better to separate it out from the rest.
Internal consistency is about designing controls to share a similar look and feel, that match each other. Your app’s glyphs should have a consistent visual style. Text in your app should have a limited number of font faces and sizes and colors and so forth. Internal consistency helps to make an app feel cohesive or whole. When everything matches, when everything fits, people are given a deeper sense of a product’s integrity.
We intuitively believe that design choices were deliberate and thoroughly considered. And with very good reason. Being consistent takes self-control and restraint.
Mapping is about designing controls to resemble the objects that they affect. Shades go up, and shades go down. So it makes sense to use a control that mirrors that up and down movement. There is no ambiguity about how to raise or lower the shade. Mapping also relates to how controls are arranged relative to each other. Their order should resemble the configuration of the objects that they affect.
[…] You will often find labels when mapping is unclear. It is a telltale sign. But it is not a particularly good solution. Reading takes time, and it doesn’t help people to memorize the location of controls or how they should interact with them.
Progressive disclosure is your best friend. By keeping things simple for novices, they are less likely to feel intimidated, overwhelmed, or get themselves into trouble, while more experienced users can quickly reveal the options and actions that they require, that they understand, and that they are capable of using.
Progressive disclosure is a technique for managing complexity. The term is used almost exclusively in the context of interaction design. […] Progressive disclosure gradually eases people from the simple to the more complex.
The design principle of proximity […] is about the distance between a control and the object that it affects. The closer a control is to that object, the more we assume there to be a connection between the two.
Symmetrical elements, even if they are not physically connected to each other, are perceived as though they are. So when we see these two facing square brackets [ ], our mind unconsciously integrates them into one coherent object.
The gap instinct divides the world into “us” and “them,” and the generalization instinct makes “us” think of “them” as all the same.
[
[
[