{"id":600,"date":"2017-06-12T15:09:22","date_gmt":"2017-06-12T15:09:22","guid":{"rendered":"https:\/\/blog.siteuptime.com\/?p=600"},"modified":"2017-06-12T15:09:22","modified_gmt":"2017-06-12T15:09:22","slug":"how-to-merge-animation-with-ux-workflow","status":"publish","type":"post","link":"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/","title":{"rendered":"How to Merge Animation With UX Workflow"},"content":{"rendered":"<p>The goal of any business is to make the customer experience as seamless as possible. Understanding <a href=\"https:\/\/www.forbes.com\/sites\/alanhall\/2012\/06\/14\/to-succeed-as-an-entrepreneur-know-your-customer\/\">the customer&#8217;s wants and needs<\/a> is necessary to create this seamless experience.<\/p>\n<p>Did you know that incorporating animation can help the user experience? When do you know the right time to use animation in your UX workflow?<\/p>\n<p>We&#8217;re here to help. Read on to learn how to integrate animation to improve your workflow.<\/p>\n<h2>What are some of the benefits of animation?<\/h2>\n<p>You may be wondering how the <a href=\"http:\/\/smallbusiness.chron.com\/use-animation-marketing-39011.html\">use of animation<\/a> can help users have a better experience. The first key is to understand what the user needs help with understanding. Any type of animation that you incorporate should be valuable to your customer.<\/p>\n<h3>Here are some ways that animation functions:<\/h3>\n<ul>\n<li>Clarify information for the user<\/li>\n<li>Direct the customer to the appropriate place<\/li>\n<li>Easily help the user navigate through a system<\/li>\n<li>Communicate the brand&#8217;s message<\/li>\n<\/ul>\n<p>In order to better incorporate animation, you&#8217;ll need to know exactly what issues the users are facing. You&#8217;ll need to do some research to clarify the most important user needs. For this, you have to speak directly with users through interviews and tests.<\/p>\n<h3>Ask questions such as:<\/h3>\n<ul>\n<li>Are you having trouble focusing on the platform?<\/li>\n<li>Do you understand what the data is telling you?<\/li>\n<li>Do you know what to do next?<\/li>\n<li>Are you aware of the most important pieces?<\/li>\n<li>Do you like to use this tool?<\/li>\n<\/ul>\n<p>You may also need to use a <a href=\"https:\/\/www.funnelmaker.com\/crm.html\">CRM system<\/a> that will provide you a better understanding of the customer.<\/p>\n<h2>Integrate Motion Design into UX\u00a0Workflow<\/h2>\n<p>Now that you&#8217;ve done a bit of research and understand how animation can help, you need to learn how to place animation into your UX workflow.<\/p>\n<h3>Align<\/h3>\n<p>You already know what your users need in your design. So now you need to make sure that you&#8217;re incorporating them in a way that will be useful for the user.<\/p>\n<p>Think of how it will help the customer as you go through your design workflow.<\/p>\n<h3>Design<\/h3>\n<p>Whether you&#8217;re using a storyboard or a sketch pad, you&#8217;ll need to start designing your animation. You can then share this information with your team to get feedback.<\/p>\n<h3>Prototype<\/h3>\n<p>Before your final product, you and your team members will want to see how the animation will play out in real time. Creating a prototype allows you to showcase your ideas before you spend the time and money on the final product.<\/p>\n<p>There are a few approaches to your prototype. The one you decide on depends on the type of animation and your time schedule. Either you can use a fully coded prototype or a simple prototype that won&#8217;t take much time or effort.<\/p>\n<h3>Test<\/h3>\n<p>While your prototype is important, you&#8217;ll also need to make sure that your users, the ones who will actually be using the design, will be satisfied.<\/p>\n<p>Choose a group of testers who will be aligned with your target audience. You&#8217;ll then conduct a test run through and have the users provide feedback. This feedback will be used to adjust in areas that users don&#8217;t find valuable.<\/p>\n<h2>Conclusion<\/h2>\n<p>Understanding a customer&#8217;s needs is imperative when you&#8217;re adding animation to UX design workflow. It requires a lot of research and testing in order to get everything right.<\/p>\n<p>While it may be a process, providing your customers with the best possible experience is the most important result.<\/p>\n<p>How have you incorporated animation into UX design? Let us know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Motion design plays a powerful role in helping users reach our UX goals. Click here to learn how to integrate animation to improve your UX workflow.<\/p>\n","protected":false},"author":5,"featured_media":601,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Merge Animation With UX Workflow | SiteUptime Blog<\/title>\n<meta name=\"description\" content=\"Motion design plays a powerful role in helping users reach our UX goals. Click here to learn how to integrate animation to improve your UX workflow.\" \/>\n<meta name=\"robots\" content=\"index, nofollow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Merge Animation With UX Workflow | SiteUptime Blog\" \/>\n<meta property=\"og:description\" content=\"Motion design plays a powerful role in helping users reach our UX goals. Click here to learn how to integrate animation to improve your UX workflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteUptime Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-12T15:09:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.siteuptime.com\/blog\/wp-content\/uploads\/2017\/06\/motion-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1949\" \/>\n\t<meta property=\"og:image:height\" content=\"975\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Site Uptime Tips, Tricks, and Hacks\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#organization\",\"name\":\"Site Uptime\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/wp-content\/uploads\/2016\/11\/logo.png\",\"width\":268,\"height\":67,\"caption\":\"Site Uptime\"},\"image\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#website\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/\",\"name\":\"SiteUptime Blog\",\"description\":\"Website Monitoring\",\"publisher\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.siteuptime.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/wp-content\/uploads\/2017\/06\/motion-design.jpg\",\"width\":1949,\"height\":975,\"caption\":\"motion design\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#webpage\",\"url\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/\",\"name\":\"How to Merge Animation With UX Workflow | SiteUptime Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#primaryimage\"},\"datePublished\":\"2017-06-12T15:09:22+00:00\",\"dateModified\":\"2017-06-12T15:09:22+00:00\",\"description\":\"Motion design plays a powerful role in helping users reach our UX goals. Click here to learn how to integrate animation to improve your UX workflow.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#\/schema\/person\/0c5da25d1e73b52a001cde949f064a84\"},\"headline\":\"How to Merge Animation With UX Workflow\",\"datePublished\":\"2017-06-12T15:09:22+00:00\",\"dateModified\":\"2017-06-12T15:09:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.siteuptime.com\/blog\/2017\/06\/12\/how-to-merge-animation-with-ux-workflow\/#primaryimage\"},\"articleSection\":\"Website Tips and Tricks\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#\/schema\/person\/0c5da25d1e73b52a001cde949f064a84\",\"name\":\"Site Uptime Tips, Tricks, and Hacks\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.siteuptime.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a9225861cfb200610ac9071a40b5dc27?s=96&d=mm&r=g\",\"caption\":\"Site Uptime Tips, Tricks, and Hacks\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts\/600"}],"collection":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":2,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/posts\/600\/revisions\/603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/media\/601"}],"wp:attachment":[{"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.siteuptime.com\/blog\/wp-json\/wp\/v2\/tags?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}