Using animation in your code can help bridge the gap between software and human nature by adding the dimension of time to your applications, enhancing the user experience (UX). For example, imagine a very long web page with several menu items, or anchors, along the top that direct users to different sections of the page. When the user clicks on the third anchor, for example, he will be swiftly taken to the corresponding section below. Technically, the task of “when user clicks anchor, take user to relevant section” has been completed, but that sudden jump to another section of the page can be disorienting.
Embedding an animated transition into the page can remedy that, so that when the user clicks on that anchor, the animation briefly and subtly shows the way to the new location. In this way, the animation helps to explain user interface (UI) changes to the user. It shows how he got to this new location, and in so doing strengthens the user’s orientation and prevents confusion. Used properly, animation can enrich functionality, increase engagement, and improve app usage.
Animation is part of your development
Unfortunately, when most developers think of animation in the context of UX, they probably see it as an aesthetic element, or something fun, and not as a significant component of the user's journey. This misunderstanding comes from developers' focus on functionality in the context of completing tasks.
Static pages are a thing of the past, so animation is critical. Everyone involved in development should understand this.
- Developers should see animation as an integral part of writing code, not an add-on or ancillary element.
- Product managers should have strong opinions about how animation can help drive user engagement and satisfaction.
- Upper management should be delighted to see more users, higher levels of engagement, and an increase in the number of transactions that are driven by a rich user UX.
It’s not about making your app cool. It’s about providing your users with the experience they expect.
Emotional design underlies animation
In the book The Design of Everyday Things, Donald Norman writes about Emotional Design theory, which splits design into three levels: the visceral, the behavioral, and the reflective.
- The visceral level is about the initial sensory reaction (or “gut”) when the user is exposed to the product. It drives rapid decision-making.
- The behavioral level is about how users interact with the product and how design blends into human behavior.
- The reflective level is about the impression the product leaves with people after they’ve used it.
How should you think about this in the context of web design and animation? At the visceral level, you should consider how such things as colors, design elements, and the brand interact using animation. User satisfaction on the visceral level creates positive emotions, and animation can help to improve user satisfaction. The behavioral level is all about how the product works and how you use it, and animation can significantly affect that. The reflective level deals with how people connect to a product, knowing that humans create an attachment to humanized objects. Animation can help turn your product into something more human by adding the dimensions of time and movement, which our brain perceives as natural.
The good news is that in today’s web environment, integrating animation into your UI is pretty straightforward because the languages used for web development, such as JavaScript, include built-in animation capabilities, from the simplest GIFs to more complex elements.
The 5 roles of animation
Animation and transitions are most effective — and most welcome — when they serve a clear purpose. When considering the roles animation might play in designing your UI, think about the following five factors:
- Focus: Use animation to direct attention where you want the user to go.
- Feedback: Notify users of the results of their actions. An example is the animation in the Chrome browser that displays a newly created tab when he chooses to open an item in a new tab, but keeps the user in the existing tab.
- Affordance: You want to provide clues to the user as to how to use a UI element, or the kinds of actions they can and cannot take with that element. For example, think about the the Flipboard app where, when you click the bottom of a page, the whole page jumps up to reveal the content beneath.
- Orientation: Part of what design is about is helping users maintain engagement with the UI by ensuring that they keep their bearings. This helps to explain how information flows from one state to another, and provides continuity and a story. For example, you might want to create elements that go with users from page to page, as a sort of guiding light through the UI.
- Fun or delight: Although animation is serious business, it is important to keep users engaged through some lightheartedness. Well-designed animation can win over the user and tell the tale of the brand.
How good is your animation?
Judicious use of animation can be a good thing, but be careful not to overdo it. Too much animation or excessive transitions can destroy a perfectly good user experience, annoy the user, and cause distraction. Animation should serve as a clue and help the user understand the before, during, and after of the action. It's most effective when it blends into the overall UI, and should serve at least one of the purposes detailed above. Finally, animation should feel intuitive and behave naturally. To do that, it needs to obey the laws of nature, so that users can intuitively relate to it.
Given the dramatic effect that good animation can have on UX, every developer should make animation and transitions an integral part of their web application’s UX. Developers can do this by giving animation the proper priority and time when programming, so it can drive engagement, delight, and, ultimately, the desired results.
Keep learning
Take a deep dive into the state of quality with TechBeacon's Guide. Plus: Download the free World Quality Report 2022-23.
Put performance engineering into practice with these top 10 performance engineering techniques that work.
Find to tools you need with TechBeacon's Buyer's Guide for Selecting Software Test Automation Tools.
Discover best practices for reducing software defects with TechBeacon's Guide.
- Take your testing career to the next level. TechBeacon's Careers Topic Center provides expert advice to prepare you for your next move.
