

{"id":1418,"date":"2016-04-01T12:15:56","date_gmt":"2016-04-01T09:15:56","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=1418"},"modified":"2023-08-17T13:54:17","modified_gmt":"2023-08-17T13:54:17","slug":"animated-interactions-motion-on-purpose","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/","title":{"rendered":"Animated Interactions. Motion on Purpose"},"content":{"rendered":"<p><span style=\"color: #333333;\">Motion is the powerful way to liven up design solutions. In our previous articles, we have already shared some ideas on the significant potential of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/interface-animation-the-force-of-motion\/\">animation in interface design<\/a>, when it is used wisely and purposefully. The topic is definitely broad and comprehensive so here we will continue the thoughts provided by us earlier with a further step to explore interface animation in more details.<\/span><\/p>\n<p><span style=\"color: #333333;\">This time we will be concentrated on some purposes that can make the designer think about animated interface elements as the sort of a design solution improving interaction and providing the positive user experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9151\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubikstudio-motion-designer.jpg\" alt=\"tubikstudio motion designer\" width=\"640\" height=\"640\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubikstudio-motion-designer.jpg 640w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubikstudio-motion-designer-150x150.jpg 150w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubikstudio-motion-designer-300x300.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose is a key<\/span><\/h2>\n<p><span style=\"color: #333333;\">As we mentioned <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/interface-animation-the-force-of-motion\/\">in our previous article<\/a>, today interface animation is a great way to retain users as it makes their user experience pleasant and enables solving their problems faster. However, a designer should deeply analyze its potential for increasing usability, utility, and desirability of the product before making a decision to apply any sort of motion design. Animation should be used thoughtfully and always have a clear purpose. Advantages and usefulness of its application in the interaction process have to be obvious and outweighing possible disadvantages. The animation should become the icing on the cake, not a fly in the ointment. The purpose is a key that opens the door to efficient design solutions.<\/span><\/p>\n<p><span style=\"color: #333333;\">Therefore, the first thing to decide on is the purpose why animation could be applicable in the interface. Here is the list of possible purposes.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Showing that the process is progressing<\/span><\/h2>\n<p><span style=\"color: #333333;\">One of the important and essential positive features of interface animation is communication with the user. Animated interface details are able to instantly inform the user about the processes he or she is involved in. Therefore, one of the aims of motion design in UI is to inform the user about the stage of progress.<\/span><\/p>\n<p><span style=\"color: #333333;\">As we mentioned in the post devoted to <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\" target=\"_blank\" rel=\"noopener noreferrer\">animated microinteractions<\/a>, this is probably one of the most widely-used types of interface animation. It lets the user instantly understand that the process is going on and even show what stage of the process is actual now. The biggest advantage of this animated interaction is providing assurance for the users, making them calm and confident in the process of using the product. A confident and happy user in the vast majority of cases means positive user experience and provides the good ground for <a href=\"https:\/\/blog.tubikstudio.com\/7-factors-that-influence-webpage-conversion-rates\/\">high conversion rates<\/a>. <\/span><\/p>\n<p><span style=\"color: #333333;\">Certainly, it is not the magic wand, and usability of this trick should be supported with all the other thought-out design elements. However, this particular kind of animated interactions really needs to be considered in terms of creating an efficient user interface informing the user quickly.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8751\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/preloader-animation-tubik-studio.gif\" alt=\"preloader animation tubik-studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Preloader<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8150\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/11\/tubik-studio-pull-refresh-animation.gif\" alt=\"tubikstudio pull refresh animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Pull To Refresh\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7660\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-motion-design.gif\" alt=\"tubik studio motion design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Timeline App\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Showing that the action is done<\/span><\/h2>\n<p><span style=\"color: #333333;\">One more popular purpose of user interface animation is somehow the next step of the interaction. It doesn&#8217;t show the process, it shows it&#8217;s finalization. Again, it&#8217;s one more way to inform the user which means that the importance of such interaction is high. At every step of interaction with the product, a user needs to understand clearly and quickly if the action was done and the system responded to it. No wonder, the usability of the product design really suffers if this sort of feedback is not provided as fast and obviously as possible. Various sorts of animated elements from simple ticks to complicated animated <a href=\"https:\/\/blog.tubikstudio.com\/mascot-magic-personifying-your-brand\/\">mascots<\/a> or <a href=\"https:\/\/blog.tubikstudio.com\/illustration-in-ui-art-in-action\/\">illustrations<\/a> can serve this need. <\/span><\/p>\n<p><span style=\"color: #333333;\">Nevertheless, the matter of simplicity for this sort of animation is also the point to consider. Complex animation can overload the page or screen or take too much time for such a simple operation, so it should be properly analyzed. On the other hand, original animation can become both informing and attractive, it can entertain the user which is also an important feature for some applications and websites. Knowledge about the <a href=\"https:\/\/blog.tubikstudio.com\/business-oriented-design-know-your-target\/\">target audience<\/a> and its potential preferences is extremely helpful here.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8748\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/switch-animation-tubik-studio.gif\" alt=\"switch animation tubik studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Switch Control Animation\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7736\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/03\/hamburger-button-tubik-studio.gif\" alt=\"hamburger button tubik studio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\">Hamburger button<\/a>\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Grouping the data<\/span><\/h2>\n<p><span style=\"color: #333333;\">One more potential aim is providing groups of any kind for a big base of typical data. Animation, in this case, can liven up the process, especially in terms of a transition from one group to the other. There can be cards with personal data, separated conversations and chats, data about items and products, information about transport, and tons of other options. Motion added wisely here creates the illusion of physical contact with the data cards or groups and can provide a good reason for feeling this experience as positive.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9580\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/ui-concept-animation-design-1-1.gif\" alt=\"ui concept animation design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>UI Animation Concept\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8756\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/tubikstudio-blog-app-ui-animation.gif\" alt=\"tubikstudio blog app ui animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Blog App<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7668\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubik-studio-motion-design-ui.gif\" alt=\"tubik studio motion design ui\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Green Spy Animation\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8755\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/station-menu-interactions.gif\" alt=\"station menu interactions\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Boat Station App\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Drawing attention to specific elements<\/span><\/h2>\n<p><span style=\"color: #333333;\">This sort of animation is used to highlight something important that users can possibly miss while shouldn&#8217;t. Being animated, the element of the layout gets much higher chances to be noticed even if it&#8217;s quite small. However, this sort of animation should be used carefully, otherwise, it can distract the user&#8217;s attention instead of concentrating it. If this type of animation is applied, preferably only one element of the layout should be animated in terms of one interaction in order to achieve the highest attention ratio.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9664\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/product-card-ui-animation-tubik-studio-1-1.gif\" alt=\"product card ui animation tubikstudio\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Product Card Animation\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Providing a prompt to the user<\/span><\/h2>\n<p><span style=\"color: #333333;\">This sort of animation is actually very close to the previous as its initial general aim is to draw attention to the particular element by means of motion. In this case, the trick is used to give users a clue what sort of interaction can be accomplished in places where this interaction is not obvious for everyone. Small unobtrusive interface animation provides instant communication with the user and shows the necessary direction to move one, simplifying the process of dealing with the interface. This kind is really helpful in terms of providing <a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\">intuitive navigation<\/a> and therefore usability, crucial for positive user experience.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9665\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tracking-app-design.gif\" alt=\"tracking app design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>UI Animation for <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-tracking-app\/\">Tracking App<\/a><\/em><\/span><\/p>\n<h2><span style=\"color: #333333;\">Purpose: Supporting general style and branding<\/span><\/h2>\n<p><span style=\"color: #333333;\">One of the cases, when a slight animation is applicable, is adding some motion to the elements of branding which are used in the layout to support brand awareness. In one of our articles, we have mentioned that the strategy of consistent using elements of <a href=\"https:\/\/blog.tubikstudio.com\/faq-design-role-of-branding-in-ui-design\/\">branding in the interface<\/a>, especially applied directly in the process of interaction with a product, can be an effective method significantly strengthening brand image. Animation can enhance this effect, draw attention to specific branding elements, and increase general recognizability of the brand.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8633\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/01\/saily-animation-by-tubik-studio-loading.gif\" alt=\"saily app animation tubikstudio design case study\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Animation for<a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-saily-app-designing-ui\/\"> Saily.App<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Keeping consistency of transitions<\/span><\/h2>\n<p><span style=\"color: #333333;\">This sort of animation is mostly used in web design frequently in the process of scrolling the page. The effect of well-know and widely-used parallax or other sorts of animated transition has not only the aim of entertaining and creating immediate WOW-effect as it often seems. The deeper function of such a technique is creating a feeling of consistency that makes transitions smoother and more natural. Thus it can create a positive feeling in the process of interaction and if necessary keep elements requiring more attention always in view. Nevertheless, the effect of style and aesthetic pleasure which can be raised by this sort of animation, also shouldn&#8217;t be underestimated as it is a good way to attract attention and tickle user&#8217;s curiosity.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8842\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubik-studio-web-ui-design.gif\" alt=\"tubik studio web ui design\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Birds of Paradise Encyclopedia\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7835\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/05\/tubik_studio___museu.gif\" alt=\"tubikstudio museu landing page\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Museu\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">Purpose: Shock and awe<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Perhaps, you remember the episode of \u201cHitch\u201d comedy where the guy wishing to attract the girl he loved was instructed that the first step to this is to \u201cShock and awe!\u201d Somehow, it is one of the techniques to work out in design also because users actually start an interaction with the product at the moment they notice it and get curious to try. Sometimes, animation can become the feature instantly grabbing their attention and giving a positive feeling of engagement from the very start. Even a simple splash screen with interesting animation can serve this purpose. Again, this sort of motion design on the screens or web-pages can provoke many debates as the one with the least practical value. However, practice shows that practical issues are not the only thing people want to get from the products they choose. Aesthetic pleasure, entertainment, gamification and challenges, fun and cuteness, style, and amazement can also be strong features in favor of your particular product among the others on the market.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8651\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/04\/tubik-landing-page-scroll-animation.gif\" alt=\"tubik landing page scroll animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a href=\"https:\/\/blog.tubikstudio.com\/soft-landing-10-design-concepts-of-landing-pages\/\">Landing Page Animation<\/a>\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8761\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/10\/calendar-app-animation-tubik.gif\" alt=\"calendar app animation tubik\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Calendar App Animation\u00a0<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">So, the conclusion here is simple: any animation which is applied in the interface should have a clear purpose enhancing general user experience. In the vast majority of cases, UI designer and motion designers try to find design solutions in which animated elements will satisfy multiple options increasing usability and desirability of the interface.<\/span><\/p>\n<h2><span style=\"color: #333333;\">Recommended Articles<\/span><\/h2>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/interface-animation-the-force-of-motion\/\">Interface Animation. The Force of Motion<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-microinteraction-for-macroresult\/\">UI Animation: Microinteraction for\u00a0Macroresult<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/animated-interactions-motion-on-purpose\/\">Animated Interactions. Motion on Purpose<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-animation-eye-pleasing-problem-solving\/\">UI Animation: Eye-Pleasing, Problem-Solving<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/ui-in-action-15-animated-design-concepts-of-mobile-ui\/\">UI in Action. 15 Animated Design Concepts of Mobile UI<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-upper-app-coding-ui-animation\/\">Case Study: Upper App. Coding UI Animation<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/creative-motion-12-concepts-of-interface-animation\/\">Creative Motion: 12 Concepts of Interface Animation<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/dont-stay-still-why-brand-needs-an-animated-logo\/\">Don\u2019t Stay Still. Why Brand Needs an Animated Logo<\/a><\/span><\/p>\n<p><span style=\"color: #333333;\"><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/motion-for-mobile-creative-concepts-of-ui-animation\/\">Motion for Mobile. 20 Creative Concepts of UI Animation<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.<\/p>\n","protected":false},"author":3,"featured_media":8766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,7,9],"tags":[336,365,437,16,447,20,457,47,463,100,465,138,467,147,468,151,479,212,482,233,489,256,491,258,502,319,515,331,533],"coauthors":[],"class_list":["post-1418","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animation","category-processes_and_tools","category-ui_ux","tag-motion-design","tag-product-design","tag-tips","tag-animation","tag-tubik-studio","tag-app-design","tag-ui","tag-branding","tag-ui-design-article","tag-design","tag-ui-design-examples","tag-design-process","tag-ui-design-practices","tag-design-studio","tag-ui-design-process","tag-design-tips","tag-usability","tag-graphic-design","tag-user-experience","tag-human-computer-interaction","tag-user-experience-examples","tag-interaction-design","tag-user-interface","tag-interface-animation","tag-ux","tag-mobile-app","tag-uxui","tag-mobile-ui","tag-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animated Interactions. Motion on Purpose<\/title>\n<meta name=\"description\" content=\"The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Interactions. Motion on Purpose\" \/>\n<meta property=\"og:description\" content=\"The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-01T09:15:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T13:54:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/\",\"name\":\"Animated Interactions. Motion on Purpose\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png\",\"datePublished\":\"2016-04-01T09:15:56+00:00\",\"dateModified\":\"2023-08-17T13:54:17+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png\",\"width\":800,\"height\":600,\"caption\":\"tubikstudio ui animation\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Interactions. Motion on Purpose\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Interactions. Motion on Purpose","description":"The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/","og_locale":"en_US","og_type":"article","og_title":"Animated Interactions. Motion on Purpose","og_description":"The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.","og_url":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2016-04-01T09:15:56+00:00","article_modified_time":"2023-08-17T13:54:17+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png","type":"image\/png"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/","url":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/","name":"Animated Interactions. Motion on Purpose","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png","datePublished":"2016-04-01T09:15:56+00:00","dateModified":"2023-08-17T13:54:17+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article by Tubik Studio considering the most popular and essential purposes of using UI animation which improves interaction in UI and enhances user experience.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2018\/04\/tubikstudio-ui-animation.png","width":800,"height":600,"caption":"tubikstudio ui animation"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/animated-interactions-motion-on-purpose\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Animated Interactions. Motion on Purpose"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=1418"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1418\/revisions"}],"predecessor-version":[{"id":14747,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/1418\/revisions\/14747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8766"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=1418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=1418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=1418"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=1418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}