{"id":1870,"date":"2019-09-27T15:00:31","date_gmt":"2019-09-27T13:00:31","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=1870"},"modified":"2020-08-02T01:19:23","modified_gmt":"2020-08-01T23:19:23","slug":"functional-animation-in-ux","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/functional-animation-in-ux\/","title":{"rendered":"The Importance of Functional Animation in UX"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]The importance of animation and motion in user experience is something that can no longer be denied. Animation has come a long way since it made its first baby steps. It used to be all about fun. Animation was used to make someone laugh, smile or simply wonder. It was merely meant to delight and entertain.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In the 21sth century, however, animation has become a tool in service of functionality<\/strong>. It has a very distinct purpose and its role is not to be neglected. In short, animation is the beating heart of user interface<\/strong>. As such, it is an essential factor of the overall user experience.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]These days, animation is everywhere. WordPress themes with scroll animations<\/a> are particularly popular, as are those with sliders, hover effects and other types of animations. Everyone wants a website that \u201cmoves\u201d.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]So let\u2019s take a look at why animation matters so much and how you can use it to improve the user experience on your website.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Amadeo <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Amadeo Theme<\/a>[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Why Does Animation Matter?<\/h2>\n

[\/vc_column_text][vc_column_text]We may not be fully aware of it, as it is one of those things we often perceive on a not entirely conscious level, but us humans \u2013 we simply love animation. There is something in that weird mix of imagery and motion that continues to surprise us even though we know how it\u2019s made.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This, however, makes animation sound like a magic show. We simultaneously want and don\u2019t want to know \u201chow they do it.\u201d But, it\u2019s more than just that. When it comes to UX, in order to really delight us, animation has to perform a function<\/strong>. For example, it can show us when a process is completed or it can let us know we\u2019re doing something right. And that\u2019s what we call functional animation<\/em>.[\/vc_column_text][vc_empty_space height=”72px”][vc_column_text]<\/p>\n

Functional Animation<\/h3>\n

[\/vc_column_text][vc_column_text]It\u2019s clear that animation comes in many forms and with many purposes. Animation created for entertainment is one thing, but what we\u2019re talking about here is animation that has a particular UX purpose. It serves a very specific function, so we\u2019ll call it functional animation<\/em>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]This kind of animation is subtle, unobtrusive, doesn\u2019t take up all of the focus to itself, and has a clear purpose. Or better \u2013 several purposes, as animation is often multi-functional.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In web design, functional animation helps the visitor understand the intrinsic rules of the page<\/strong>. It promotes page navigation and helps users perform simple little tasks like getting from one location to the other or completing a process, such as filling in a form.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Animation is not essential to a website. A site can very well exist without it. As we said earlier, good UX animation is so organic and subtle, we often don\u2019t even register it with our conscious mind. But we would definitely notice if it was not there.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Imagine something as \u201cbasic\u201d as a preloader (the animated icon that you see on the screen while a page is loading). These days, most websites have it. Now, imagine if they didn\u2019t. Whenever it took a web page longer to load, you\u2019d think it had crashed or that your connection was lost. The preloader is a subtle and immensely efficient way of saying that everything is okay, the content is loading and it will be handed to you in a few second.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Common Types of Web Animations<\/h2>\n

[\/vc_column_text][vc_column_text]There are plenty of animation types that can be used to improve user experience and make websites more dynamic and engaging. Some types of animations are particularly common and popular, and you have probably seen them thousands of times yourself, but perhaps until now you haven\u2019t really paid attention:[\/vc_column_text][vc_empty_space height=”72px”][vc_column_text]<\/p>\n

Loading<\/h3>\n

[\/vc_column_text][vc_column_text]More often than not, when we load a page, there will be an animation of some sort, usually a lightly animated icon that spins or performs a similarly simple and repetitive motion \u2013 like the preloader we mentioned.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Gretna <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Gretna Green Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Progress<\/h3>\n

[\/vc_column_text][vc_column_text]Similarly to loading animations, animations that indicate the progress of an action (which may also include loading) serve to inform the user how far from completion they are. This is important since, without such information, the user might think something is wrong with the website.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Cevian <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Cevian Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Action Complete<\/h3>\n

[\/vc_column_text][vc_column_text]Pushing a button, opening or closing a menu, uploading a file, submitting a form\u2026these are all actions that require a quick visual hint informing the user the action has been completed successfully. This is important because these interactions take place in a virtual, not a physical world, and we can\u2019t rely on our senses to understand if they\u2019ve been successful or not.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Tonda <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Tonda Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Navigation<\/h3>\n

[\/vc_column_text][vc_column_text]Navigational animations help the users find their way around the website and learn what\u2019s what and where it\u2019s located. They tell us what\u2019s clickable and what\u2019s not, what requires scrolling, and so on. For instance, animation on hover gives a clue about what lies beneath and improves the user\u2019s understanding of the interface hierarchy. [\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Xtrail <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Xtrail Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Transitions<\/h3>\n

[\/vc_column_text][vc_column_text]Transitions promote user engagement and make your website stand out for originality and creativity. One common example of the use of animated transitions in web design would be a page or a slide that turns like a page in a book.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Aarhus <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Aarhus Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Scroll<\/h3>\n

[\/vc_column_text][vc_column_text]Alongside clicking, scrolling is the most commonly performed user interaction with a website. In most cases, an animated scroll is a better solution than a \u201cplain\u201d one, because it mimics our natural interactions with the world. It also creates an illusion of depth and more space than there actually is.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Esben <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Esben Theme<\/a>[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

User Experience \u2013 A (Useful) Definition<\/h2>\n

[\/vc_column_text][vc_column_text]Before we go deeper into the role of animation for user experience, let\u2019s first try to define user experience (UX).[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]As you suspect, there are as many definitions of UX as there are UX professionals.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The International Organization for Standardisation (ISO)<\/a>, unsurprisingly, offers a highly precise definition. According to them, user experience means \u201ca person\u2019s perceptions and responses resulting from the use and\/or anticipated use of a product, system or service.\u201d[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The Daily Egg blog<\/a> offers a neat interpretation of this rather dry and incomprehensible definition, adding that UX \u201cincludes all the emotions users might feel as they interact with the product, service, or system, as well as their perceptions, responses (both physical and psychological), and behaviors.\u201d<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]And this should serve as a good starting point for understanding what UX means, especially in terms of web design.[\/vc_column_text][vc_empty_space height=”81px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”50px”][vc_widget_sidebar sidebar_id=”creative-banner”][vc_empty_space height=”28px”][vc_separator color=”custom” accent_color=”#f0f0f0″][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

The Role of Animation in UX<\/h2>\n

[\/vc_column_text][vc_column_text]While animation is generally always welcome, overdoing it is not a good thing. The key is to find a balance and to allow the animation to perform its function \u2013 to play out its role. It is when it serves a clear, simple purpose, that animation is most welcome in web design.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]What exactly are the roles that animation performs?[\/vc_column_text][vc_empty_space height=”72px”][vc_column_text]<\/p>\n

Directing Focus<\/h3>\n

[\/vc_column_text][vc_column_text]One of the best ways to use animation to improve UX is to have it point to where you want your user\u2019s attention to be<\/strong>. This is particularly true for pages that have loads of content. It may take a while for the user to sort out the hierarchy of relevance on such a page. This can be frustrating, and these days, even a second or two of hesitation and uncertainty can cause the user to bounce.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, if you have several high-quality, important images that you want to display and where you want all your visitors\u2019 attention to be, it\u2019s better to slide them than just slap them on the page. Sliding creates dynamicity and dynamicity draws attention. Your visitor will be gazing at the images no matter how much other content there is around them.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Agava <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Agava Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Assisting in Orientation<\/h3>\n

[\/vc_column_text][vc_column_text]Similarly to the problem of focus, content-saturated websites can often be difficult to navigate. If the user interface is not enough to point the visitors in appropriate directions, we have to resort to other elements to serve as road signs. Animation is one such element, and a highly efficient one, too.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The main job animation has in terms of site orientation is not so much to aid navigation (getting from one part of the site or page to another) but to shed a light on the website\u2019s hidden architecture<\/strong>. Understanding what lies beneath (or above) helps the user gain confidence and reduces cognitive load. User experience is, therefore, significantly enhanced.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]For example, imagine a very long page with a lot of vertically arranged content. With a page like that, you have anchors near the beginning (at least we hope you do!) that, when clicked, take the user to the associated content. If you use animation to take the user all the way down to where the anchor points, he or she will have an impression of actually traveling the distance and will understand where that particular content is located within the page structure. If you just bluntly display the content without \u201ctraveling,\u201d it will probably feel too abstract and perhaps a bit confusing.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Attika <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Attika Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Providing Feedback<\/h3>\n

[\/vc_column_text][vc_column_text]In UX, animation can be used to tell the user if his or her interaction with the interface was successful or not<\/strong>. Think of hitting the wrong button. Unless it\u2019s clear that it\u2019s not the right button, the user will just keep clicking on it, assuming it\u2019s a glitch or a bug with the website.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The same goes for successful interactions. A good example of this is a button that transforms into a check sign upon completion, letting the user know everything went well.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The signals animation sends should be as clear and universal as possible. A nod is always a \u201cyes,\u201d a shake is always a \u201cno.\u201d The message is conveyed swiftly and efficiently. The user is satisfied with the experience and moves on with ease and confidence.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Buzzy <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Buzzy Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Maintaining Interest<\/h3>\n

[\/vc_column_text][vc_column_text]Web users are a spoiled bunch. They need to be kept entertained, and they need things to be served to them fast. As ISPs keep introducing better and faster connections, bounce rates are getting higher too. To prevent users from bouncing off your site, you have to keep them interested. Animation helps with that, too.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]One example of using animation to keep users from getting frustrated and annoyed is the use of preloaders<\/strong>, which we discussed earlier. However, these are getting kind of stale, too. Everyone uses cute or funny or smart preloaders these days, and in many cases they only remind the users of the fact they\u2019re waiting, which they already know.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Loading sequences are often a better solution<\/strong>. They are not hard to design and they can offer something completely new and fresh to your page\u2019s UX. It can be a nicely designed progress bar or a skeleton screen that gradually fills up as the page loads. If your brand identity allows it, it can even be a funny cartoonish standalone animation that keeps the user entertained for the few seconds he or she has to wait.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Wilmer <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Wilm\u00ebr Theme<\/a>[\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Entertaining<\/h3>\n

[\/vc_column_text][vc_column_text]This brings us back to the dimension of delight we spoke about earlier. A well-designed, honest animation can quickly find a way into your users\u2019 hearts and win them over for your brand<\/strong>. Playing the emotional card is something that animation does as well as any other design form, sometimes even better. And it does a wonderful storytelling job. If your animation manages to induce a smile, however lighthearted it may be, you\u2019ve won a bunch of points in the UX and user satisfaction department.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Mintus <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”8px”][vc_column_text]Mintus Theme<\/a>[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Big Animation No-No\u2019s<\/h2>\n

[\/vc_column_text][vc_column_text]We\u2019ve sung the praises of animation for good UX so much, you might think you can\u2019t go wrong with it. But actually, you can. There are some common mistakes that UX designers sometimes make with animations, resulting in user experience that becomes poorer instead of richer.[\/vc_column_text][vc_empty_space height=”23px”]