Users are tired of this. Inline status indication, in contrast, lets you show as much of the
interface as possible by blocking out only the specific subsections whose content has yet
to load. This is not only more nuanced, but also gives the user more content to fix her eyes
on while she twiddles her thumbs waiting for the page to fully load.
The takeaway here is simple: the more you give users to engage with, the longer it’ll
take for them to get bored.
Leverage primal instincts
The human brain has a region dedicated to visual processing. We’re programmed to
respond to sudden movements whether we want to or not. So, if an important action is
occurring on the page that requires the user’s immediate attention, consider leveraging
movement to flag her attention. A common way to alert the user is to “bounce” an element
by repeatedly translating it up and down. This implementation sits in contrast to animating
the element’s color, which doesn’t exploit primal instincts; we’re not programmed to
instinctively interpret color changes as worthy of our immediate attention. (However,
consider how through repeated exposure in some countries, people are trained to interpret
red as “stop” and green as “go”, which are examples of socially reinforced meaning.
When designing motion, take this phenomenon into consideration as well.)
Diving a bit deeper into psychology, the user interprets movement toward her as an
urgent notice that requires action, whereas she interprets movement away from her as
getting out of her way and, consequently, not requiring action.
Make interactions visceral
Big, squishy buttons with rich color gradients make the user want to click. Elements like
these reward clicking with a satisfying sense of pressure exertion and color explosion. The
lesson here is one of incentivization: the more intriguing it is to click a button, the more a
user will do it. Leverage this phenomenon for important calls to action that you want the
user to engage with, such as buttons for registering a new account or checking out of a
shopping cart.
Reflect gravitas
If the user has taken an action with irreversible consequences, reinforce that notion by
using motion design that feels equally important. For example, the animation associated
with clicking a Delete button should feel more significant than the animation associated
with hovering over a standard navigation dropdown. While the latter may entail a simple
color change, the former might consist of a sudden jump in size and a thickening of the
element’s border. By divvying up motion design along a gradient of severity, you’ll help
the user intuitively grasp the hierarchy of the available actions. This technique, along with
the others detailed in this chapter, serves the goal of increasing user understanding and
confidence.