time, interactive animations prove to be pretty
useful in keeping the users engaged. They can
be leveraged for usability by giving clues about
what is currently happening with the system
thereby inducing patience in the user.
Makes the interaction more fun!
Elements such as morphing from one form to
another, fading through change of colour, or
interactive motions are thought to delight the
users and seem to make the design “pop.”
Animations, along with sound effects, are
commonly found on sites that are built for
children. Such elements often tend to distract
children; however, because young audiences
are generally less goal-oriented than adults,
these effects annoy them less and are better
tolerated and perceived.
Helps overcome Change Blindness
Change blindness is the tendency of people to
ignore alterations in images, especially when
they are placed in a region far away from their
focus of attention.
The two factors that play a significant role in the
likelihood of change blindness are:
1. Disturbance in our visual perception- this
can occur when a page reloads. Our eyes
quickly seem to jump from one fixation point to
another, or when a screen display shifts as a
device reorients from vertical to the horizontal
presentation. It might lead us to miss out on
some details.
2. Speed: Instant changes in visual appearance
are more likely to be masked by even brief
interruptions.
These factors have commonly occurred in
digital experiences, where visual elements
regularly appear and disappear almost
instantaneously. Other factors like attention to
detail and overall visual clutter also play a role
in change blindness. Generally, any time a new
visual element is introduced to an existing
display, it is at risk of being overlooked.
For example, on the website Vans.com, The Out
of Stock message did not seem to grab
attention because it looked very similar to the
Add to Cart tab, and was placed too far from the
user’s field of attention (on the Size and
Quantity fields). This slight difference in the icon
doesn’t stand out when the rest of the display
stays the same (Fig 1.0).
Fig 1.0. The Out of Stock message did not seem to grab attention
because it looked very similar to the Add to Cart tab, Source: Vans.com
Change blindness is a pervasive problem, and it
is essential that designers be acquainted with
some basics tips and tricks to minimize the
problem. For example, using appropriate
animation speed and strategic element
placement.
Fast animations are more likely to distract
users when they happen outside the user’s field
of view. They are suitable for essential elements
that users must attend to and act upon.
Strategically place important new visual
elements close to the point where the users’
eyes are already focused. Pro tip: Always!
Always consider the rule of thirds. (Fig 2.0
Fig 2.0- Rule of
thirds simply states
that if a wide canvas
is divided in three
equal parts both
vertically and
horizontally, the
resulting grid helps
decide where to
place important
design elements
23