{"id":1917,"date":"2018-06-12T12:17:48","date_gmt":"2018-06-12T12:17:48","guid":{"rendered":"https:\/\/www.moveoapps.com\/blog\/?p=1917"},"modified":"2018-06-12T12:17:48","modified_gmt":"2018-06-12T12:17:48","slug":"app-loading-animations","status":"publish","type":"post","link":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/","title":{"rendered":"Keep Your Users Happy While They Wait With App Loading Animations"},"content":{"rendered":"<p>Instead of the annoying loading wheel that seems to go on forever, if you saw something like Santa\u2019s little elves loading up tiny gifts in a sleigh, you\u2019d be happy to wait.<\/p>\n<p>The most important job an app must do is to go up and running in a moment. <a href=\"http:\/\/rewrite.ca.com\/us\/articles\/application-economy\/research-study-software-the-new-battleground.html\" target=\"_blank\" rel=\"noopener\">Studies have shown<\/a>\u00a0that 50% of app users find load time a major source of annoyance, and 25% would simply leave an app due to high load times.<\/p>\n<p><a href=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Santa\u2019s-little-elves-loading-up-tiny-gifts.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1923 aligncenter\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Santa\u2019s-little-elves-loading-up-tiny-gifts.gif\" alt=\"Santa\u2019s little elves loading up tiny gifts\" width=\"800\" height=\"600\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/dribbble.com\/shots\/1356913-Loading-Christmas-Gifts\" target=\"_blank\" rel=\"noopener\">Image source\u00a0<\/a><\/p>\n<p>But even if you have done everything you can to make your app load fast, you can\u2019t always count on the connectivity to be on your side. From low bandwidth operators to people using your app in the subway or an elevator, there are a dozen <a href=\"https:\/\/www.moveoapps.com\/blog\/reasons-your-mobile-app-is-slow\/\">reasons why your app could load slow<\/a>. And as unfair as it is, you would be at the receiving end of the frustration, even for no fault of yours.<\/p>\n<p>What you can do to mitigate this problem is to make your app feel like it\u2019s loading faster. Using clever (or cute, or both) animations to keep the users engaged can help keep the frustration in check and buys you some time. You know you\u2019ve felt it too &#8211; that quick moment of delight when you are greeted by not just a spinning wheel or loading dots, but a live, moving, breathing page that holds the promise of a great experience. From loading screens to onboarding, interacting with the app and completing a transaction, animations can buoy up your UX at every stage. But especially at the splash screen, animation can ease the user in and make them feel comfortable waiting. This happens when they are distracted by the animation to really notice how long they have been waiting and also, feel like the experience has already begun.<\/p>\n<p>So here\u2019s a primer on best practices to use animation on your loading screen and why it is great for your business<\/p>\n<h2>1. First \u2013 Capture Them<\/h2>\n<p>When the users download your app and use it for the first time, they aren\u2019t particularly sure of what you do and how good you are. They have no attachment to your app, aren\u2019t particularly attached to it and have little incentive to stick to it if it takes too long to load.<\/p>\n<p>Yet, they have come this far, which means you\u2019ve got your foot in the door. It\u2019s now time to hit off with a good first impression. An awesome splash screen with an intriguing animation for app loading will do the trick.<\/p>\n<h2>2. Indicate Progress<\/h2>\n<p>Are we there yet? If you\u2019re a parent, you know how chokingly annoying that question can be. But if you remember being a child, you also understand just how absolutely critical it is to the child asking.<\/p>\n<p><a href=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/trippy-looping-gif-animations-to-distract-and-delight.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1924 aligncenter\" src=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/trippy-looping-gif-animations-to-distract-and-delight.gif\" alt=\"trippy looping gif animations to distract and delight\" width=\"800\" height=\"600\" \/><\/a><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/boingboing.net\/2015\/10\/18\/loadingicon-trippy-looping-gi.html\" target=\"_blank\" rel=\"noopener\">Image source\u00a0<\/a><\/p>\n<p>With digital patience plummeting faster than a snow cone melts in the sun, your users are no less than anxious kids demanding immediacy. They need to know how far off they are and how long it will take to get there. So keeping them in the dark only adds to the anxiety. Having a progress indicator helps a great deal in soothing the fraying nerves and reassuring the user that it\u2019s only a second more to go.<\/p>\n<p>So try to design your animations such that they have a progress indicator inbuilt, or add a matching progress bar under the animation, to reassure the user and keep them engaged while you get them their goodies. I love this one called Trippy Loop<\/p>\n<h2>3. Theme Your Animations with the App<\/h2>\n<p>Here\u2019s a good one. Some apps design their loading animations in tune with the overall theme of their apps. Like a bouncing ball for the No Halftime fantasy sports app, a moving bus for a travel app or a rocket speeding through space for\u2026well, <a href=\"https:\/\/dribbble.com\/shots\/1829577-Animated-loader-for-Secret-Project\" target=\"_blank\" rel=\"noopener\">Anton Drokov\u2019s Secret Project<\/a>.<\/p>\n<p>Creating an animation that is themed to your app does a great job of branding, because even if the user remembers little else about your app, she will always remember the animation if it managed to make an impression.<\/p>\n<h2>4. Make It Suitable For Repetitive Usage<\/h2>\n<p>Do remember here, that the animation, while unique, should also be one that can be viewed hundreds of times without getting the users bored, because that would defeat the whole purpose. The app loading animation that you design will be the first thing users see every time they launch the app. If an animation is too attention grabbing and media rich, it may look appealing the first few times, but could get boring, or even intrusive and annoying after a while. Instead, stick to something simplistic, basic and worthy of a hundred or thousand views. Appeal to an emotion in your target users \u2013 a childhood memory, a dream destination, anything that is simple yet intriguing and delightful.<\/p>\n<h2>Conclusion<\/h2>\n<p>If app experiences are about delighting users, animation is easily a game changer. With witty, clever, cute or ingenious animations, you can add life to your app and delight your users every time. Especially at the loading screen, animations hold a special power. They can be the difference between a user willing to wait five seconds, and a user ready to abandon you by the end of the third. So use the power of animation wisely. Don\u2019t skip them, but also don\u2019t overdo them. The above tips and examples should give you enough ideas and inspiration to jump up and add some life to your next app project. Do share with us what you came up with, or hit us up for a brainstorming session if you have a question, happy designing!<br \/>\n<script src=\"\/\/newsharecounts.s3-us-west-2.amazonaws.com\/nsc.js\" type=\"text\/javascript\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Instead of the annoying loading wheel that seems to go on forever, if you saw something like Santa\u2019s little elves loading up tiny gifts in a sleigh, you\u2019d be happy to wait. The most important job an app must do is to go up and running in a moment. Studies have shown\u00a0that 50% of app &hellip; <a href=\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Keep Your Users Happy While They Wait With App Loading Animations<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":1930,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1917","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Keep Users Happy While They Wait With App Loading Animations<\/title>\n<meta name=\"description\" content=\"Instead of the annoying loading wheel that seems to go on forever suppose you saw santa\u2019s little elves loading up tiny gifts in a sleigh as app loading animation, you\u2019d be happy to wait\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Keep Users Happy While They Wait With App Loading Animations\" \/>\n<meta property=\"og:description\" content=\"Instead of the annoying loading wheel that seems to go on forever suppose you saw santa\u2019s little elves loading up tiny gifts in a sleigh as app loading animation, you\u2019d be happy to wait\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Moveo Apps\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-12T12:17:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1294\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Hiral Atha\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiral Atha\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/\",\"name\":\"How To Keep Users Happy While They Wait With App Loading Animations\",\"isPartOf\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif\",\"datePublished\":\"2018-06-12T12:17:48+00:00\",\"author\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/4a857393407cf203bde5d43e8b11b340\"},\"description\":\"Instead of the annoying loading wheel that seems to go on forever suppose you saw santa\u2019s little elves loading up tiny gifts in a sleigh as app loading animation, you\u2019d be happy to wait\",\"breadcrumb\":{\"@id\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#primaryimage\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif\",\"contentUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif\",\"width\":2560,\"height\":1294,\"caption\":\"Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.moveoapps.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Keep Your Users Happy While They Wait With App Loading Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#website\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/\",\"name\":\"Moveo Apps\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.moveoapps.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/4a857393407cf203bde5d43e8b11b340\",\"name\":\"Hiral Atha\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2019\/08\/Large-Photo-copy-96x96.png\",\"contentUrl\":\"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2019\/08\/Large-Photo-copy-96x96.png\",\"caption\":\"Hiral Atha\"},\"description\":\"Hiral Atha is the Founder and CEO of Moveoapps. With a decade of proficiency in building digital platforms that drive innovation and user engagement, Hiral has helped businesses outshine competitors and captivate audiences. Armed with a deep understanding of market dynamics and emerging trends, Hiral has implemented strategic initiatives that have positioned businesses as market leaders, capitalizing on emerging opportunities.\",\"sameAs\":[\"http:\/\/www.moveoapps.com\/\",\"https:\/\/www.linkedin.com\/in\/hiral-atha-0a110b25\/\"],\"url\":\"https:\/\/www.moveoapps.com\/blog\/author\/hiral-atha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Keep Users Happy While They Wait With App Loading Animations","description":"Instead of the annoying loading wheel that seems to go on forever suppose you saw santa\u2019s little elves loading up tiny gifts in a sleigh as app loading animation, you\u2019d be happy to wait","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:\/\/www.moveoapps.com\/blog\/app-loading-animations\/","og_locale":"en_US","og_type":"article","og_title":"How To Keep Users Happy While They Wait With App Loading Animations","og_description":"Instead of the annoying loading wheel that seems to go on forever suppose you saw santa\u2019s little elves loading up tiny gifts in a sleigh as app loading animation, you\u2019d be happy to wait","og_url":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/","og_site_name":"Moveo Apps","article_published_time":"2018-06-12T12:17:48+00:00","og_image":[{"width":2560,"height":1294,"url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif","type":"image\/gif"}],"author":"Hiral Atha","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hiral Atha","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/","url":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/","name":"How To Keep Users Happy While They Wait With App Loading Animations","isPartOf":{"@id":"https:\/\/www.moveoapps.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif","datePublished":"2018-06-12T12:17:48+00:00","author":{"@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/4a857393407cf203bde5d43e8b11b340"},"description":"Instead of the annoying loading wheel that seems to go on forever suppose you saw santa\u2019s little elves loading up tiny gifts in a sleigh as app loading animation, you\u2019d be happy to wait","breadcrumb":{"@id":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#primaryimage","url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif","contentUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2018\/06\/Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations-1.gif","width":2560,"height":1294,"caption":"Keep-Your-Users-Happy-While-they-Wait-with-App-Loading-Animations"},{"@type":"BreadcrumbList","@id":"https:\/\/www.moveoapps.com\/blog\/app-loading-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.moveoapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Keep Your Users Happy While They Wait With App Loading Animations"}]},{"@type":"WebSite","@id":"https:\/\/www.moveoapps.com\/blog\/#website","url":"https:\/\/www.moveoapps.com\/blog\/","name":"Moveo Apps","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.moveoapps.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/4a857393407cf203bde5d43e8b11b340","name":"Hiral Atha","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.moveoapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2019\/08\/Large-Photo-copy-96x96.png","contentUrl":"https:\/\/www.moveoapps.com\/blog\/wp-content\/uploads\/2019\/08\/Large-Photo-copy-96x96.png","caption":"Hiral Atha"},"description":"Hiral Atha is the Founder and CEO of Moveoapps. With a decade of proficiency in building digital platforms that drive innovation and user engagement, Hiral has helped businesses outshine competitors and captivate audiences. Armed with a deep understanding of market dynamics and emerging trends, Hiral has implemented strategic initiatives that have positioned businesses as market leaders, capitalizing on emerging opportunities.","sameAs":["http:\/\/www.moveoapps.com\/","https:\/\/www.linkedin.com\/in\/hiral-atha-0a110b25\/"],"url":"https:\/\/www.moveoapps.com\/blog\/author\/hiral-atha\/"}]}},"_links":{"self":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1917","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/comments?post=1917"}],"version-history":[{"count":10,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1917\/revisions"}],"predecessor-version":[{"id":1933,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/posts\/1917\/revisions\/1933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media\/1930"}],"wp:attachment":[{"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/media?parent=1917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/categories?post=1917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.moveoapps.com\/blog\/wp-json\/wp\/v2\/tags?post=1917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}