Animations have a long lived history. The theory begins back from the cave era when man drew creatures with multiple limbs. Historians suggest that it was their way of showing natural movement of limbs. But today the significance of animation is not restricted to just some random cartoon or image moving. It is more than just a novelty of the web designers.
Animation today is ranging from full screen moving images to small hover effects. Its trendy and fun and more than anything else it is a way to improve user experience.
Improves user experience? Yes - When things on your website are going to take time, let the users know.
#WHY we need animations?
Before getting into the intricacies of how to use animations, let find out WHY we need animations? What causes low performance of a page load. For this we need to drill down to 3 basic parameters -
- Network time : It represents the time users waits, while data is transmitted between their computer and website. You can’t really control this parameter since some users are on slower connections than others, but what you can do is, reduce number of bytes required to load a page; fewer bytes means less network time.
The 5 main contributors to network time are bytes of cookies, HTML, CSS, JavaScript, and images.
- Generation time : It represents the time it takes from when the web server receives a request from the user to the time it sends back a response. This metric defines the efficiency of the code and web server, caching, database, and network hardware.
Reducing generation time is totally under your control and is accomplished through cleaner, faster code and constantly improving the back-end architectures.
- Render time : It represents the time the user’s web browser needs to process a response from your website and display the resultant page. Again, controlling this parameter is not really under your control because of the performance and behavior of the various browsers.
But what you could possibly do is - the less you send back to the user, the faster the browser can display results, so minimizing bytes of HTML, CSS, JavaScript, and images also helps with render time. Another simple way to reduce render time is to execute as little JavaScript as possible before showing the page to the user.
Relation between load time and conversion
1 second increase in load-time can equal a 7% loss in conversion.
So now we DO understand the necessity to distract users when the loading time is unavoidable. Animations hide the load time by visually occupying the user’s attention.
#Animate like a pro, BRO!
The only thing animations are NOT supposed to do is - Make users feel that yes, you ARE waiting! Just imagine, you are getting late for office and somebody hangs a clock right at your face! Now that’s exactly what progress indicators such as these circular and linear indicators do-
(Circular and linear progress indicators that make users feel- they ARE waiting)
Let in that case, check the best animation practices in the webdesign domain -
#Animations for SHORT wait duration; Interface transitions
To provide visual continuity in short wait situations, you can animate changes between different view hierarchies in your user interface. These animations give users feedback on their actions and help them learn how your app works.
The biggest inspiration for this category is Google! They smartly veil the loading time behind animating interface. As soon as we search a query on Google, the loading bar on the top, starts filling from the left towards the right -> The page loads in from the side -> the content fades in smoothly onto the page.
These transitions give the feeling that something is happening as a response to your action, while you are waiting. These are “Interface transitions” to say it in short.
The UI of an activity often changes in response to user input and other events. For example, an activity that contains a calendar where users can select the date, can hide the calendar when the user selects it and show the date and time selected in a single bar.
(image source)
In this slow motion video, you can easily figure out how interface transitions are used to visually distract the user that loading is in progress. The best part is user does not have to keep glaring at the loading/progress indicator.
#Animations for LONG wait duration; Skeleton screen
Skeleton screen is the bare-bone rendering of the web/app page without the dynamic elements in it. It gives a feeling to the user that the page loading is in progress while it wouldn’t have really started!
You can’t always reduce the loading time on the webpage. But since waiting is not a positive aspect of the web /app design, you could cheat the user a bit..! - Make the wait “FEEL” shorter for users. By giving some indication of what is going on and giving visual stimulus the user feels immediately more comfortable and less likely to leave. It is better than the ever-rotating loading symbol because it actually feels like the content is almost there.
How to execute this - All you need to do is, store the skeleton screen locally as it never changes and then start filling the dynamic elements into the skeleton slowly.
(image source)
#Loading a webpage in pieces
In 2009, Facebook made it’s site twice as fast. There were a lot of technologies that contributed to this but the biggest secret weapon was - “BigPipe” . The idea was to decompose web pages into small chunks called pagelets, and pipeline them through several execution stages inside web servers and browsers.
BigPipe is a fundamental redesign of the existing web serving process but the good news is that, it does not require changing existing web browsers or servers. It is implemented entirely in PHP and JavaScript.
BigPipe enables several pagelets to be executed simultaneously in different stages. Checkout this screenshot of Facebook to have a clearer understanding of the technology.
If you watch your own Facebook homepage load up, you will see this section-wise loading effect in action.
- The timeline loads over its skeleton layout, immediately followed by the right-hand ‘Trending’ and advertisement column.
- Then the left hand menus pops up.
- The chat column pops up on the right at the end.
This gives you an idea of the progress of loading.
#Wrapping up
47% of people expect a web page to load in two seconds or less. Clearly, engaging your users on your website is critical—not just to give them a good experience, but to keep your bottom-line profits high. Hope these ways would help you get your animations right.
Have any other loading sequence optimization tips to share? If so, leave them in the comments section below. We would love to hear them!