💃Motion
Why motion?
Let's talk about the power of thoughtful motion design. When done right, it can transform customer experiences into something smooth, engaging, and downright delightful. It's like adding a touch of magic that makes everything click. On the flip side, if we ignore motion or throw it in without a game plan, we risk creating experiences that feel jarring or confusing. In some cases, it could even cause discomfort for certain users.
Now, you'll find that our base components Moon Design & GT’s design system already come with some built-in moves. They've got their own rhythm, so to speak. But here's where it gets exciting - the motion guidance we're diving into takes a broader view. Think of it as our playbook for everything else, from go-to transition patterns to those special, custom animations. It's all about taking our in-product motion to the next level, creating a unified feel across the board. This framework is designed to scale, so whether we're working on something small or dreaming big, we've got the tools to make it move just right.
Terminology
We often mix and throw around terms when it comes to motion in design. Let's clarify some words so we’re speaking the same language in terms of outcomes:
Animation
What we can refer to as “motion graphics” which is quite literally moving images. Typically we refer to animation as the act of creating a graphical asset that is in motion (animated GIF, video, other format.)
Transitions
A process of moving (type of movement/change) from one state to another. For example, we often apply transitions when creating an animation. Think translation, rotation, color changes, and scale/size changes.
Micro-interactions
At their core, micro-interactions are like a conversation between the user and the system. They're made up of two parts: a trigger and a feedback.
The trigger is what kicks things off. It could be something the user does, like tapping a button or swiping a screen. Or it might be the system itself changing state, like when a download completes.
Then comes the feedback - the system's way of saying "I hear you" or "Something's happened." This response is laser-focused on that specific trigger. It's not about grand gestures, but rather small, context-specific changes in the interface. Most often, we're talking visual cues here - a subtle change that catches the eye just enough to convey the message.
These little interactions might seem insignificant on their own, but they're the building blocks of a smooth, intuitive user experience. They provide those satisfying moments of "aha!" that make using an interface feel natural and responsive.
Principles
Meaningful
Every bit of motion should have a reason for being there. It's like having a conversation - you want each word to count. When we add motion, it should guide users, highlight important information, or reinforce your brand's personality. Think of it as the helpful friend who gently points you in the right direction or draws your attention to something you might have missed.
Predictable
Predictable motion creates a sense of familiarity and comfort. It's like walking into your favorite coffee shop - you know where everything is, and it just feels right. When users interact with your interface, the motion should feel natural and expected. This doesn't mean boring, though! It's about creating a consistent language of motion that users can learn and anticipate, making their journey through your product smooth and intuitive.
Subtle
Less is often more when it comes to motion, and that's where subtle comes in. It's about adding just enough movement to be helpful without stealing the show. Think of it as the perfect background music in a restaurant - it enhances the atmosphere without drowning out conversation. Subtle animations can improve usability and add delight without being distracting or slowing things down.
Accessibility Considerations:
At CoinGecko we want to make motion accessible for everyone. It's a crucial aspect of design that we sometimes overlook, but it's so important.
Motion sensitivity is a real issue. It can be short-term or long-lasting, and it affects people in different ways. For some people, certain types of motion can trigger serious physical reactions - we're talking seizures, migraines, feeling queasy, or dizzy. It can also mess with concentration and cognitive function. That's why we've got these motion guidelines. They're here to help us dial back problematic motion and, honestly, they often end up making things better for all users. Now, let's break it down into some basic accessibility rules.
No flashing
First up, we need to be careful with flashing. It's not just annoying - for people with photosensitivity, it can actually trigger seizures. So, we want to steer clear of flashy animations. Instead of abrupt changes, we use smooth transitions. And when stuff is loading? We use placeholders to keep things steady
Rethink auto- movements
Next, let's talk about things that move on their own. Sure, some movement is necessary - think maps, loading bars, or transitions when you click something. But if it's not essential, we shouldn't have things moving or looping for more than five seconds without giving users a way to pause, stop, or hide it. Auto-scrolling carousels or videos that play on their own? Not a great idea. We want to put users in the driver's seat when it comes to motion.
Reduced motion ready
Lastly, we need to think about folks who prefer less motion. Some people set their devices to reduce motion, and we need to respect that. For big movements like screen transitions, we can use a simple, quick fade instead. And those fancy animated illustrations? We should have static versions ready to go. By following these guidelines, we're not just ticking boxes - we're creating experiences that are more comfortable and enjoyable for everyone.
Last updated