Our introduction to microinteractions from our book "Microinteractions: Designing with Details" by Dan Staffer, illustrates the large-scale importance that such small details can make in a design. Here, I've extracted three primary quotes to discuss.
Microinteractions force designers to work simply, to focus on details. They challenge designers to see how lightweight they can design, to reduce complexity and streamline features that could otherwise be burdensome. (p. 8)
This exemplification of a microinteraction within Microsoft word, illustrates how a minuscule change to an interface can ease the usability of a certain task. In the above example, a user is formatting text that is rotated. Thus, the relevant styling controls are changed to match the new rotation of the text.
The designers chose to make this small change because it can be quite frustrated and confusing to identify the correct control in this situation. Similarly, the controls for the iPhone camera app, (and now virtually all camera apps today) rotate the controls icons when you rotate your phone to take a shot.
The MetroCard Vending Machine introduces the first principle of triggers: make the trigger something the target users will recognize as a trigger in context. (p. 25)
In the above example, the author discusses when NYC made the shift to MetroCard. The above kiosks were installed and a moving hand signified users to press the start button. However, users could touch anywhere on the screen as well to start, but the pointer to the button is a clearer start point.
This is somewhat similar to how, when scrolling on a volume bar on an iPhone for example, users can drag or tap the slider even if their finger moves away from the original trigger. This thus makes it easier to drag without users have to have their fingers on a tiny select few pixels.
"The button you use to start a process (making toast, for example) could indicate how long it is until the toast is ready." (p. 28)
In this above example, the author illustrates in Google Chrome, how the microinteraction is embedded in the actual device. For example, most toasters show how long until the toast is ready via a screen or dial. So too, the Chrome icon shows how long until a downloaded item finishes. This is done automatically, not requiring any additional input.
