Motion in website design is becoming commonplace. Transformations, transitions, animations, and movements have all been made much easier with today’s coding language. But does that by default mean we should use it? And if so, why? How?
The Sköna interactive team recently attended a web and mobile conference, and several of the talks discussed visual design and development considerations for adding interactivity to UI elements. Not surprisingly, the conversations barely addressed the usability of such animations and what types of motion are most appropriate for different design goals.
Goals around motion for your website seems like a logical place to start, so let’s do that. Animations and interactivity on web pages usually have one of these user experience objectives:
Draw attention to and explain changes on the page: Changes in the state of an element, revealing and hiding of content, or shifts to another area of content are all common purposes of transitional animations.
Develop brand tone and understanding: Elements that fade in, change color, or otherwise move are thought to elicit user emotion, clarifying brand tone, feel and even purpose.
Solidify a modern and up-to-date presence: Use of new technology and techniques in web design is not only an exciting exercise for developers but presumably communicates an updated brand that is current and knowledgeable.
Ensure that animations, motion, movement have goals and purposes that are well defined and aligned. When considering an animation, contemplate the following questions:
User attention: Where would the user’s attention otherwise be focused at the time when the animation occurs?
Goal of the animation: Is it to:
- Attract users’ attention? Is the object to be animated something the user must notice and act on immediately?
- Show continuity in a transition between the states of an object?
- Indicate a relationship between objects that are already in the user’s focus of attention?
Frequency of the animation: How often will one user encounter it during one session?
Mechanics of the animation: Is it:
- Directly caused by a user’s action?
- Indirectly triggered (upon page load, while scrolling, or by some other unrelated activity)?
Only once these questions are answered should an appropriate animation be designed.
Here are some more articles on the subject that we recommend: