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.
How motion supports usability
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:
- Expectation: Minimize the gap between what the user expects and what they experience in terms of how elements behave.
- Continuity: Create seamless user flow. Continuity isn’t necessarily about following a linear path but that the entire experience feels continuous, not jagged or confusing.
- Narrative: Lead the user down an expected, linear path using visual cues. Narrative is at work when animation helps show users where they are on the journey.
- Relationship: Guide user understanding and decision making with spatial, temporal and hierarchical relationships between interface objects.
UX in motion – the principles in real life
The great examples below illustrate some of the critical principles of UX in motion.
VISUAL CUES: Drawing attention to areas of importance to help users interact
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.
TRANSFORMATION: Creating a continuous narrative flow to pull the user along
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!).
VALUE CHANGE: Offering users a sense of dynamic relationship
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.
OVERLAY: Using motion to show spatial relationship in “flatland”
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.
NARRATIVE: Engaging users by telling a visual story
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.
You know the old chestnut about content being king? Yes, relevant content can make a huge difference in attracting and converting those potential customers. But beware of producing content for content’s sake, which simply adds more noise to an already crowded web. If you don’t have a solid business need for content, save your resources for planning – and looking at the context.
Every piece of content you produce must have a reason for being, and must set the stage for further audience interaction with you. Content with context offers prospects the reason to believe that your product or service is what they need. Make them believe and they’ll want to start the dialogue with you, which leads us to conversation.
Marketers overlook this component when developing visually attractive, well-written collateral that lacks a persuasive CTA. What do you want people to do with your content? Does it offer an avenue to interact with someone from your company? Without opening these compelling pathways to engagement, you’re just asking prospects to buy. This may be successful in the short term, but it doesn’t provide additional value. Conversation is stepping stone to conversion!
When a lead converts online, it’s not time to wash your hands of them quite yet. Help quantify and qualify the leads by showing that you offered that lead a positive experience – building brand value that makes them more likely to become a loyal customer.
Recent Comments