Join David Hogue for an in-depth discussion in this video How people respond to motion, part of Interaction Design Fundamentals.
One of the most effective ways to attract someone's attention is with motion. Movement captures our attention very effectively, and can be used to quickly direct the eye's gaze to a specific location. Our brains are wired to detect change. Think about the number of times that a small movement in your peripheral vision caused you to reflexively turn and look. Nearly all organisms have this sensitivity to motion, because it's advantageous to pay attention to things that move in our environment. Is that predator coming to eat me? We can use motion when designing interfaces to do three things: motion can direct attention. When we want people to pay attention to something, we can use movements, such as rotating or shaking, pulsing, or zooming in and out.
Even color or brightness that fades in or out can draw the eye to that part of the screen, where there is important information. Motion can be important when hiding and revealing information. When we want to communicate what information currently in view is being hidden, but is still readily available, we can use sliding or zooming motion to show where the information may be found when it is needed again. Hide and show functionality typically uses the same type of motion, but in opposite directions.
Information may collapse upward when hidden, and expand downward when revealed. Motion can make connections or associations. When we want to show that information is related, grouped, or being moved to a new place or category, we can use motion to show that information moved from one place to another. Drag and drop is a form of movement performed by the person. If we want to change the location of something like a photo, we can drag it into a new position or album. We can also use sliding, zoom, and fade transitions to show where a piece of information has been moved, and with what it's now associated.
Unfortunately, movement can also lead to distraction. Ads with animation or video are probably the most common example of motion causing distraction. Most of us have had the experience of trying to read an article online, and having our gaze reflexively redirected by ads elsewhere on the screen, even when we're trying very hard to maintain our focus and attention. If we are distracted often enough, we become inefficient, and possibly frustrated. We may even abandon what we are doing.
Banner ad creators may like this technique to draw attention, but from the perspective of the person viewing the screen or page, this is often an unwanted distraction. Use motion carefully, because it's easy to distract and detract from the experience rather than attract, focus, and enhance. One of the reasons why motion can be effective to direct attention is because the movement occurs all on the same visible screen. We never lose view of the current information. Items on the screen simply move to a new location, or move out of view to a new place.
The persistent context of the screen makes it easier to understand what the motion communicates. However, when information changes or moves between subsequent views of the same page or screen, we may not notice it. In other words, if we don't see the movement, or see the change happen, we don't notice it. This is called change blindness, and it happens when we see two successive views of the same screen, with a slight pause and a blank screen between them, which is common on the Web when we have a full page refresh.
In this example, we see two versions of the same screen, with a brief pause and blank screen between them, and it's very difficult to notice what changes. Many Web sites have this problem when they refresh a page and change a small part of the content. The first view of the page and the second view of the page are separated by a brief pause, and a blank browser canvas. If the second view of the page doesn't obviously highlight the changed information for us, we must spend more time and effort reviewing the updated page, and comparing the new version to our memory of the previous version to try and identify what's changed.
We may not even notice the difference, yet we've expanded a large cognitive effort. If we can avoid a full screen refresh with a blank pause between the views, then any changes to the content will be much easier to detect. This is a strength of rich Internet applications that update only the content on the screen that needs to be changed. When everything else remains the same, the information or objects that change will draw attention, the same way motion attracts attention.
If we must refresh the entire screen, and risk showing a blank pause between the views, then we need to add an extra cues to the design to ensure that people will notice that change. Use a different color, or other visual indicators, such as sticky tool tips, or overlays, to highlight what has changed, and use a timed fade to remove these cues and indicators after a few seconds, so that they don't distract the person as they continue to interact. Finally, we can't talk about motion without mentioning video.
Video has become an important part of the experiences on the Web, as we watch more news, television, movies, and user generated video on our connected devices. Video on a page or screen attracts our attention like any other motion, but it also conveys a tremendous amount of information, and it's often the most important content on the page. Delivering video involves both design and technology considerations. On the design side, we need to include usable media player controls, and avoid autoplay as much as possible, because people like to have an internal locus of control, and want to be in charge of their media experience.
Although motion and video may present a few additional design and technology challenges, they are important types of information, and we can design usable, effective, and pleasing experiences by applying the same design principles and best practices that apply to any type of content.
- Understanding the origins of interaction design
- Understanding gestalt principles
- Designing with grids
- Understanding design patterns
- Exploring how people respond to motion and color
- Communicating through labels and icons
- Framing for content and decision making
- Understanding mental models
- Avoiding cognitive overload
- Defining behavior for interaction design
- Designing for clicks and taps
- Understanding the feedback cycle
- Professional resources