Animations on Scroll – Made Easy!

Have you ever wanted to rapidly increase the usability of your site or the application? It’s going to be an undoubted yes because that’s what every developer dreams of making it – right? There are various ways that we can experiment with our sites, some work better than others and some require more time to get working! Even if you’ve found the user experience challenging, you can make it better, and I’ll show you how!

Anything that doesn’t jump off the page as interesting, exciting, funny, or relevant is liable to get slashed user experience. Most people will at least have a glance throughout the page just by scrolling since they’re not intended to read the entire page content at first. So, scrolls are one of the perfect places to grab the attention of the users and to enhance the usability of them. If you make scrolling, an exciting and an addictive one, you can boost the user’s experience while being able to brand your site and keep them engaged!

Let’s jump right into the ways in which we can implement the animations on scrolling. Animation on Scroll (AOS) is a perfect library that makes animations really easy and fascinating while scrolling the page. I recommend taking a look at the AOS official docs which has ready to use templates with several use cases. So the idea of this blog is to cover the initial setup for implementing the scroll animations in your project which is not explained in their doc.

I’ve listed the initial setup for Angular, Vue.js and React projects since they’re the most popular amongst the biggest front end frameworks. Let’s get them done one by one. But in general, we need to add AOS to our dependencies.

Run npm install aos --save

Either run npm i or add the CDN sources for CSS and JS in your index.html file.

CSS: <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS: <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Next comes the initialization part of AOS. A piece of common information on initialization of AOS is, we always need to import and init them in the app or any other parent level component of which we need to do animations. This is due to the fact that AOS has observers in it, so whenever a new element appears in DOM, it is supposed to animate them properly.

  1. Initialize AOS in Angular

    We need to initialize the AOS in your app.component.ts as follows,
    a. Import the AOS library in your component
import * as AOS from 'aos';

b. We need to initialize the AOS library during the initialization of your component. So let’s initialize AOS on the ngOnInit lifecycle hook.

AOS.init();
  1.   Initialize AOS in Vue.js

a. Import the AOS library in main.js file.

import * as AOS from 'aos';
import 'aos/dist/aos.css';

b. We need to initialize the AOS library during the creation of your component. So let’s initialize AOS on the Created() lifecycle hook. Add the following snippet in the new Vue portion of the main.js file.

new Vue({
   created () {
       AOS.init()
   },   
   router,
   store: Store,
   render: h => h(App)
}).$mount('#app');
  1. Initialize AOS in React

The steps are apparent now so let’s just have a glance at the following code snippet to understand the flow in React.

import AOS from 'aos';
import 'aos/dist/aos.css';
.
.
.
 componentDidMount(){
   AOS.init({
     duration : 2000
   })
 }

Initialization is now complete! Try adding data-aos=”fade-up” to any of your HTML element and admire the animations on scrolling. Refer the AOS docs for more customized scroll animations.

Reference

  1. https://michalsnik.github.io/aos/

The Art of Chunking!!

How to make sense of any mess? 

Chunking makes content easier to comprehend and remember. It helps to understand the relationship between content elements and information hierarchy. By grouping each piece into a large whole, you can improve the amount of information you can remember. Chunking is one way to your product to stand out from the other competitors.

For example, a chunked phone number (+61–955–345–1234) is easier to remember (and scan) than a long string of un-chunked digits (9553451234).

Why chunking is important in UX?

Chunking Content in UX: Why chunking is important in UX?

Chunking is a concept that originates from the field of cognitive psychology. UX professionals can break their text and multimedia content into smaller chunks to help users process, understand, and easily remember within a quick span.

Presenting content in chunks makes scanning easier for the user and can improve their ability to comprehend and remember it. In practice, chunking is about creating meaningful, visually distinct content units that make sense in the context of the larger whole.

 

Key info is chunked to give clarity about the company.

Simply chunking your text isn’t enough — you also need to support scanning by making it easy to quickly identify the main points of the chunks. Some of the most commonly used methods of chunking text content are:

  1. Headings and subheadings that clearly contrast with the rest of the text (bolder, larger, etc.)
  2. Highlighted keywords (bold, italic, etc.)
  3. Bulleted or numbered lists
  4. A short summary paragraph for longer sections of text, such as articles
  5. Short paragraphs, with white space to separate them
  6. Short text lines of text (around 50–75 characters)
  7. Clear visual hierarchies with related items grouped together
  8. Distinct groupings in strings of letters or numbers such as passwords, license keys, credit card or account numbers, phone numbers, and dates (for example, 14487324534 vs 1 (448) 732 4534)

 

The contents are chunked with an illustration to give clear visual hierarchy!

The Mythical Number Seven:

Magical number seven,’ made famous by cognitive psychologist George Miller. In 1956, Miller found that most people can remember about 7 chunks of information in their short-term memory. People could remember 7 individual letters, or 28 letters if they were grouped into 7 four-letter words in a meaningful way. Designers often misunderstand the concept of Mythical Number Seven.

It doesn’t mean to give the things not more than seven to the user. Even they can still find easy to use with more than seven things at the given time.

 

Chunked infographics draw attention to the passed value here.

For UX professional, the real takeaway from Miller’s is that people with short-term memory are limited. So, if you want the people to remember more information just group them into Chunks.

Source: https://www.nngroup.com/articles/chunking/

Conclusion:

Presenting content in chunks makes scanning easier for the users and can improve their ability to comprehend and remember it.