The shake animation is reminiscent of the OSX login error shake from a few years back, and echos the physical gesture of someone shaking their head. Error ShakesĪdding animation as a layer of feedback for errors can be very effective, like the error animation used for Stripe Checkout. Animation can be a very effective way of conveying feedback in both simple and complex flows. Using animation for feedbackĭesigning good feedback in interfaces can be challenging, especially when you’re designing a product that involves complex tasks. A new message is likely important (in the case of this dashboard, it’s probably about a transaction or payment), but it may not be the most important thing to you at the moment you visited the dashboard.
This fits well with the type of notification it is. This ringing bell animation only repeats a couple of times, and then it stops - just enough to let you know it’s there, but not so much that it will constantly distract you from the task at hand. This is a pattern we see in other apps’ message notifications as well, and Stripe’s is a particularly nicely executed one. If you have messages, the message bell will play a “ringing” animation next to a message count number when you have messages available: An attention-getting animation from Stripe. Stripe uses animation for a similar purpose in their dashboard area. It’s a large amount of motion relative to the visual space designed to attract your attention. But here, when it’s paired with something important to you - not losing your work - it fits. Used in another place, that amount of animation might be considered over the top. The animation itself is quite big and attention-grabbing in the UI. So if you’re working on a file and you haven’t done anything to save it, CodePen reminds you with a shaking-pulsing save button animation: CodePen’s reminder animation. But working in the browser means that if you don’t save your work, you could easily lose it. CodePen is an online tool where you can write and publish code-based experiments in the browser. A shake to remind you to saveĪ great example of this is the CodePen save button animation. We can use the attention-grabbing power of motion to help users avoid things like change blindness or otherwise being distracted from the task at hand. However, if we change that pairing and use animation to draw attention to something that is important to our users, we have a winning combination. This combination of using animation’s power to grab your attention paired with something that wasn’t important to you is a big part of what makes things like banner ads feel annoying. It’s very unlikely you would go to a site to see the ads, but by adding animation to these banners, the chances of their drawing your attention to where the banners are increases. This quality of motion is exploited well in things like animated banner ads. When something moves, especially if it’s a big movement, it’s very hard for us not to look at it.
Of all our design tools, you could say animation is the one that most often talks with its outside voice. Let’s start with using animation to direct attention. They aren’t the only ways, but they are three of the most impactful ways animation can have a user experience (UX)-focused purpose in your digital interfaces. If you’re new to motion design, be sure to check out my 6 principles for designing animation. In this article, we’ll look at three ways animation can do this.
The best UI animations have both purpose and style - they have been purposefully placed in the interface for a user-centered reason, and they have been executed well visually. Interface animation can be so much more than just decoration or delight when it’s used purposefully to enhance the overall user experience. Animation is often regarded as just decoration or a nice-to-have-added bit of delight in user interface (UI) design, but that’s really selling it short.
0 kommentar(er)
