{"id":4948,"date":"2021-06-04T17:20:39","date_gmt":"2021-06-04T15:20:39","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=4948"},"modified":"2021-07-29T11:12:01","modified_gmt":"2021-07-29T09:12:01","slug":"animation-guidelines-ux-ui","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/animation-guidelines-ux-ui\/","title":{"rendered":"5 Animation Guidelines for UX and UI Designers"},"content":{"rendered":"

Animation is great, but it shouldn\u2019t be treated purely as decoration. Like everything in UX and UI design<\/a>, it\u2019s essential to think about the overall user experience (and how animation may enhance or hinder it). In this post, we\u2019ll outline five golden rules for using animation in your UI designs.<\/p>\n

So what are our key animation guidelines?<\/p>\n

    \n
  1. Ensure it adds value to the user experience<\/a><\/li>\n
  2. Let users feel like they are in control<\/a><\/li>\n
  3. Use it sparingly<\/a><\/li>\n
  4. Leverage it for purposeful distraction<\/a><\/li>\n
  5. Keep the interface natural<\/a><\/li>\n
  6. Key takeaways and further reading<\/a><\/li>\n<\/ol>\n

    Let\u2019s take a look at these in more detail.<\/p>\n

    1. Ensure it adds value to the user experience<\/h2>\n

    If there is a single takeaway you should try to remember from this post, it\u2019s that animation of any kind should always improve the user experience and never detract from it. It should be relevant, functional, and add a little extra depth to the UI. Here are some examples of how you can use animation to improve the UX:<\/p>\n

    Transitioning from one screen to another<\/h3>\n

    Such animations are especially common in mobile applications. Because the screen is so small, people often experience multiple steps of a user journey on separate pages to minimize scrolling fatigue.<\/p>\n

    Say you\u2019re booking a hotel room. The first screen might show a calendar with dates; the second would offer room options; the third may ask for your credit card information. You might not even think about the transition between the screens, but UI designers sure do!<\/p>\n

    A popular transition method is having the screen \u201cfollow\u201d a user\u2019s swipe action, so they feel like they are physically moving from one page to another. It\u2019s a tactic to mimic direct manipulation in an environment where it would be physically impossible, given current technological limitations. Without this transition animation, the change in screens could feel abrupt and disconnected from the user experience.<\/p>\n

    State changes<\/h3>\n

    Another useful way to deploy animation to help users feel like they are physically engaging with digital content is by designing state changes. Tapping a button is a simple example of this. Whether the user is tapping with a finger, clicking a mouse, or pressing a key on a keyboard, watching a seemingly reciprocal act on screen (like a button changing color or appearing to depress) helps this action seem like a more visceral experience.<\/p>\n

    Introducing new elements<\/h3>\n

    The introduction of new elements on a digital screen can be jarring\u2014animation helps smooth out this experience. For example, having a chatbot slide out from the bottom corner is a lot less distracting and stressful for users than simply having it appear out of nowhere. The whole point is to make the experience seem seamless, not to shock users when random components appear out of nowhere!<\/p>\n

    Never let it detract from the UX<\/h3>\n

    While it is imperative for an animation to add value to a user experience, it is equally critical that it does not diminish the experience in any way. That means paring down the total animations to what is absolutely necessary, even if you\u2019ve spent hours creating works of art! Ruthlessly ask yourself (and others) if each one is essential; if the answer is no, remove it.<\/p>\n

    Animation designers need to strike a delicate balance between enhancing and detracting from the user experience, which is not always easy to achieve.<\/p>\n

    \"A<\/p>\n

    2. Let users feel like they are in control<\/h2>\n

    We\u2019ve already established that animation in UI can help users feel like they are more involved in a digital experience. One way to boost that feeling is by empowering them to control some of the animation themselves. Allowing viewers to pause an animation video or minimize a chatbot to limit distractions is vital to ensuring a top-notch user experience.<\/p>\n

    There\u2019s nothing more annoying than an intrusive animation that you cannot<\/em> get rid of! With so many options for purchasing goods and services online, today\u2019s consumers will not hesitate to jump ship from your site to a competitor\u2019s after experiencing poor UI, so take heed.<\/p>\n

    3. Use it sparingly<\/h2>\n

    This guideline aligns nicely with the golden rule of ensuring your animations add value to the UX. At its core, an animation is a distraction. It is meant to draw attention; therefore, if you cram your digital content full of whizzy moving parts, your visitors may experience cognitive overload. Confused by what they should focus their attention on, they may miss the point of your site entirely and leave empty-handed. Don\u2019t fall into this trap!<\/p>\n

    4. Leverage animation for purposeful distraction<\/h2>\n

    In today\u2019s digital environment, people expect instant<\/em> results. Long gone are the days of dial-up modems when a web page would load excruciatingly slowly, pixel by painful pixel. Now a delay of a few seconds can cost you precious conversions<\/a>. People can no longer stand to be bored, whipping out their phones and scrolling through social media feeds in situations where no other immediate distraction is at hand.<\/p>\n

    So what happens when your app or website needs a little time to process behind-the-scenes operations? Add a purposefully distracting animation! These handy inserts will keep your audience engaged while they wait for results and act as \u201cproof\u201d that there is work going on behind the scenes. Some businesses opt to use these \u201cloading animations<\/a>\u201d to boost their product\u2019s credibility even if they have no need for them\u2014and use them as an additional branding opportunity.<\/p>\n

    \"A<\/p>\n

    5. Keep the interface natural<\/h2>\n

    Any animation you add to your digital content should be smooth and seamless. Whether it\u2019s a video, direct manipulation where users can move elements around a screen, an anchor link that gently brings you to a particular section of a page, or any other animation, don\u2019t rush things<\/em>! Jerky, quick movements are the antithesis of an effortless user experience. You don\u2019t want to surprise people or make them anxious.<\/p>\n

    That being said, you don\u2019t want your website or app to drag or seem challenging to use. Conduct user research and testing to identify the optimal timing for your animations.<\/p>\n

    Key takeaways and further reading<\/h2>\n

    While there is undoubtedly more to UI animation than what can fit in a short blog post, this article should give you a foundational understanding of how to use your animations to improve the user experience!<\/p>\n

    Great animated UI is the result of focusing on the user. The instant you veer away from optimizing for their best experience, you risk diminishing it at the expense of your own goals. If you’re keen to get started with animation, check out these free animation libraries<\/a>, and read through these useful guides:<\/p>\n