Traditional animation for the web – including animated slides and headlines or parallax features – focuses on adding visual interest and flare, not on enhancing the user experience. Adding “zing” has its place but as users have become more savvy and digital devices more sophisticated, users have become hungry for a better overall experience. Taking the traditional a step further, partnering animations with thoughtful user interface (UI) elements can improve website UX, by doing things like offering cues and directing the eyes.
Interface objects are either static (like photos or copy) or in motion (animations). When motion is involved, this invites the user to participate in the experience, effectively increasing website usability. Human eyes simply can’t resist objects in motion!
From the technical UX perspective, there are 4 key ways that motion supports usability:
The great examples below illustrate some of the critical principles of UX in motion.
As the user directly manipulates the floating button, the designer communicates to the user – via motion – how the objects are linked, and the relationship between them. The floating action button allows the user to share his or her profile, and gives them five ways to do it in real time. This provides the user with visual cues for how the content should be shared – supporting usability by expectation.
This is an excellent example of the transformation principle, where an animation that grabs the user’s attention and draws them to the desired outcome. Transformation is a critical principle of UX in motion because it really stands out (think animated progress bars or flashing check marks to help guide users down the path). In this example, users clearly see what will happen next (continuity!).
When value based interface objects (text or numerals) load with no value change, it’s a missed opportunity. Motion can help distinguish dynamic values – such as time, income, game scores or business metrics – from single, static numbers. In this example, the countdown timer does a great job of reflecting a dynamic reality.
Here, the bidding feature overlays the main content, creating a visual hierarchy while allowing users to maintain their sense of place. Overlay is a technique that allows designers to communicate relationship between “z-axis” positioned layers, helping users understand where they are oriented in space. Logical relationships, like the one created here, support usability.
The animations in this banking app spin a clear visual narrative of the process, keeping the user both engaged and on task. Seeing this animation, the user will be able to complete the task quickly and efficiently. It also gives a sense of confidence about how the steps will unfold.
Ready to take your website to the next level? Our interactive designers are waiting to deliver UI elements that wow your users.