Introduction
Movement is all around us – from the rustling of leaves in the wind, to the flow of traffic on busy streets, to the gestures we make during conversations. Movement captivates us with its inherent beauty and capacity to express meaning.
As designers, being attentive to movement allows us to create more engaging, meaningful experiences. Understanding the aesthetics and semantics of movement gives us tools to elicit powerful emotional responses from users. Research shows that dynamic, flowing interfaces feel more “alive” and are preferred over static designs.
In this article, we’ll explore the psychology and art behind movement, and how we can apply these insights in UX and interaction design. We’ll cover:
- The aesthetics of movement and what makes motion captivating
- Gesture design and how movement conveys meaning
- Principles for designing graceful, intuitive animations
- Best practices for delighting users with well-timed, responsive motion
Embracing movement in design allows us to create interfaces that don’t just facilitate tasks, but bring joy and sensory pleasure. By thoughtfully choreographing interactive motions, we can transform digital experiences into fluid ballets that users will find irresistible.
The Allure of Motion
Humans are wired to notice and find meaning in movement. As infants, motion helps us make sense of the world – we track objects that catch our attention and mimic gestures we see. This draw to movement persists throughout our lives.
Visual cues that suggest liveliness and dynamism instinctively attract our interest. We anthropomorphize objects that move with natural physics, imbuing them with character and intentionality. Consider how we interact with pets, chatbots, or virtual assistants – their responsiveness makes them seem more “real”.
Motion also creates anticipation and heightens engagement. Like a dancing flame, flowing water, or rustling leaves, movement promises that something is about to happen. This generate curiosity and pulls us into the experience.
For designers, leveraging these psychological responses allows us to direct users’ attention, communicate state changes, and bring inert screens to life. Purposeful motion guides focus, provides feedback, and adds delight.
Attributes of Compelling Motion
While all movement attracts interest, certain attributes make some motions especially mesmerizing:
Natural physics – Objects that move realistically rivet our attention, as we automatically track and predict their path. Mimicking real-world physics lends digital elements a sense of tangibility.
Gracefulness – Flowing, fluid movements are more elegant and organic than abrupt, robotic ones. Graceful motion feels intrinsically pleasant and elegant.
Rhythm – Dynamic visuals with a discernible tempo, cadence, or pattern are pleasing and hypnotic to watch. Rhythmic motion hooks our attention.
Narrative – Motion that implies a logical sequence of events sparks our interest in its “story”. We anthropomorphize objects into characters when their movements seem purposeful.
Reactive – Things that respond dynamically to user input or system events seem more “alive”. Real-time motion creates a two-way connection.
Designing movement that exhibits these traits results in captivating, lifelike motion that delights users on a subconscious level.
Principles for Graceful Animations
Animations breathe life into interfaces by facilitating transitions, revealing/hiding elements, and providing dynamic feedback. But poorly executed animations can feel disruptive, distracting, and annoying.
To craft graceful, intuitive animations, keep these principles in mind:
Reinforce relationships – Use motion to clarify how screen elements are connected, such as sliding panels out of a nav menu. Animations should complement the information architecture.
Focus attention – Subtly direct the user’s gaze towards important areas, like enlarging a clicked icon or dimming inactive elements. Don’t overdo motions that interrupt flow.
Respond in real time – Instantaneous response to user input increases the sense of direct manipulation. Even minor lags feel disjointed.
Adhere to style – Animations should align with brand style – bouncy, elastic motions for playful brands and elegant fading for sophisticated ones.
Obey physics – Unless serving a specific function, objects should move how they would in the real world – being “dragged” with a touch, bouncing after a collision.
Utilize transitions – Elements appearing/disappearing abruptly are jarring. Use fades, blurs, and sliding transitions to smoothly remove distractions.
Provide continuity – Maintain visual connections and orientation cues when views change, through techniques like shared transition elements and morphing.
Be consistent – Reuse common animated effects throughout the experience so interactions are predictable.
Keep it subtle – Avoid overly exaggerated flourishes and distractions. Well-timed, restrained motion adds delight without disruption.
Support usability – Most importantly, ensure animations enhance usability instead of impeding it. Never sacrifice clarity for showmanship.
Masterfully combining motion, spatial relationships, and visual flow creates seamless, intuitive animations that move gracefully.
Gesture Design for Natural Interactions
Gestures – physical movements of the body – are our most innate form of non-verbal communication. Expanding interfaces beyond taps and swipes to incorporate natural, human-like gestures allows for more instinctive interactions.
Mapping recognizable gestures to appropriate commands is key for intuitive control:
- Swiping across a screen to view a carousel makes sense – it mimics physically spinning an object.
- Pulling a rubber band on a map feels like stretching the viewport to expose more area.
- Pinching fingers to zoom out of a photo aligns with manipulating an object’s actual size.
- Waving hello to a motion sensor acknowledges its presence like one would a person.
However, some seemingly natural gestures can cause usability issues:
- Vertical swiping on mobile often accidentally triggers the app switcher.
- Double tapping is an easy mistake for novice users.
- Large, sweeping gestures may feel tiring when repeated.
To design effortless gesture interactions:
- Consider context – Select gestures that match the goal, content, and usage environment. Pinching works for photos, not menus.
- Limit required precision – Avoid gestures that demand complex coordination or pinpoint accuracy.
- Provide clear hints – Use subtle animation cues to indicate available gestures.
- Make actions reversible – Allow easy undoing of unintended gestures.
- Remember differences in ability – Test for fatigue, accessibility issues, and learning curves.
With thoughtfully chosen and implemented gestures, interfaces can feel more responsive, natural, and fun. But poorly matched or demanding gestures quickly lead to frustration.
Kinetic Interfaces: Designing for Aliveness
In contrast to static screens, kinetic interfaces incorporate subtle animations, physics, and dynamically generated visuals to create a sense of “aliveness”. By embracing variability, randomness, and flow, they feel vibrantly organic.
Consider these qualities of effective kinetic designs:
- Adaptability – Elements reshuffle, resize, or reform based on context. Menus transform for vertical vs landscape orientation.
- Generativity – Randomness and procedural generation create one-of-a-kind visuals, like unique profile/cover photos.
- Emergence – Complex patterns, behaviors, and motions arise from many independent elements interacting, like flocking birds.
- Changeability – The state continually evolves – pulsing notifications, live-updating charts, passing clouds.
- Physics – Objects follow properties like gravity, momentum, collision, acceleration for lifelike behavior.
- Fluidity – Visuals flow, diffuse, ripple, and slide dynamically like liquids.
By embracing qualities of living things like growth, multiplicity, and flux, kinetic interfaces feel vibrant, organic, and experiential. Users enjoy playing with and exploring them.
Case Study: Living Posters – An art project created posters embedded with tiny vibrating motors that caused the images to shimmer and sway, mimicking the qualities of life. Viewers described being utterly captivated.
Pairing Motion with Sound
Though visuals dominate digital interfaces, audio adds a powerful temporal dimension for conveying information and experience. Sound amplifies the emotional impact of animations when paired intelligently:
- Reinforce – Match audio cues to actions, like a bouncing “boing” sound effect on a bouncing icon. Sound and motion should “duet”.
- Expand meaning – Audio adds dimensionality, like a wind chime sound indicating a new notification is breezy and light.
- Pace experience – Sounds guide the participant through transitions from one state to another. Solemn music sets the mood.
- Increase realism – Ambient sounds, physics, and spatially-located effects immerse users, like swiping a deck of cards.
- Provide feedback – Audible confirmation of taps, swipes, and other input gives assurance. Click sounds inform.
- Enhance accessibility – Sounds make animations and interactions perceivable for those with visual impairments.
However, too many discordant sounds risk cognitive overload and confusion. Temper effects to enhance, not distract from, the central focus. Well-composed soundtracks harmonize with animated visuals to create holistic sensory experiences.
Designing Joyful Microinteractions
Microinteractions are brief contextual animations in response to user input – a pulsing notification dot, favorite button turning red, slide-out navigation expanding. Though small and ephemeral, they have an outsized impact on perception of an interface.
Microinteractions present opportunities to delight users by:
- Rewarding – Make mundane tasks feel more satisfying with sparkles on checklist completion or virtual confetti on profile updates.
- Amusing – Inject humor and surprise with fun, context-specific reactions like animated stickers.
- Reassuring – Confirm actions through clear audio-visual feedback like an animated green check mark.
- Humanizing – Imbue soul into interactions with the interface through friendly responses and life-like physics.
- Transitioning – Smoothly guide focus between views and states with illustrative animations.
- Teaching – Clarify relationships and results from actions through playful object morphing and motions.
To craft excellent microinteractions:
- Align with brand – Maintain a consistent personality and aesthetic style, like material design’s grounded physicality.
- Consider context – Reactions should match the emotion of the moment – somber warnings if deleting an account vs celebratory fireworks when winning a game.
- Time carefully – Display quickly and don’t distract from primary content. But allow users to savor special moments.
- Animate subtly – Elements should behave in logical, not overly exaggerated ways. Physics create naturalism.
- Listen to sound cues – Pair key moments with soft chimes, swishes and tones for polish.
- Iterate and improve – Pay attention to reactions during usability testing. Enhance effects people delight in.
Small touches of surprise, appreciation, and celebration scattered throughout experiences accumulate into meaningful positive sentiments, forming emotional connections between users and interfaces.
Conclusion
Movement captivates and connects us by tapping into our deepest instincts – to infer the actions of others, immerse ourselves in the moment, and seek beauty in the world around us. By infusing dynamism into digital experiences, we transform sterile screens into spaces that feel alive.
As designers seeking to craft compelling user experiences, we must hone our abilities to carefully direct motion, sculpt reactive soundscapes, and choreograph interactions to tell our users a dynamic, sensory story. Honoring the aesthetics and meanings hidden within movement allows us to create interfaces with beauty, grace, and humanity.
Frequently Asked Questions (FAQ)
Q: What are some examples of great kinetic interface designs?
A: Some stellar examples of kinetic motion in interfaces include the animated planet-switching in the ZEE5 video app, the playful physics of Clear’s to-do app, and the flowing particle backgrounds in Apple’s Motion software.
Q: How can I improve at designing and prototyping realistic, natural-looking animations?
A: Some tips for honing animation skills include closely observing the physical world, learning animation principles like easing and timing, using motion designer tools like Principle and Framer, and incorporating motion into early prototypes to iterate.
Q: What considerations should be made when designing for accessibility?
A: When incorporating motion, ensure animations can be paused, disabled, or reduced. Avoid transitions that could trigger vestibular issues. Provide visual alternatives for audio cues and vice versa. Allow shortcuts to bypass animated sequences.
Q: How can you tell if an animation or microinteraction is executed well?
A: Signs of excellent animation/microinteraction design include aligning with brand style, enhancing usability, receiving positive user feedback, exhibiting intuitive natural physics, and feeling surprisingly delightful at moments. Lackluster examples may confuse, distract or fail to integrate.
Q: How can designers gain stakeholder support for designing more ambitiously with animation and motion?
A: Strategies like presenting research on benefits, calculating ROI, mocking up prototypes to demonstrate effectiveness, emphasizing competitive advantages, and incorporating motion subtly at first before expanding complexity can help gain stakeholder buy-in.
Q: Are there any tools you recommend for easily creating animations and prototypes?
A: Some excellent animation prototyping tools are Principle, Framer, Origami Studio, Invision Studio, Adobe XD, ProtoPie, and Apple’s Keynote. Many of these integrate easily with design tools like Sketch and Figma as well.
Q: What topics might you explore more deeply in a follow-up article?
A: Future articles could dive deeper into specific animation techniques like parallax, scroll-based animations, interactions powered by ARKit, designing animated illustrations, building more inclusive interfaces with motion, or choosing ideal animation software.
