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/

Materialise your Angular App

As much as I love Angular, I also recognize that there are a few things that could make your Angular App look even more stunning without much effort! So, let’s go ahead and change your life in about 5 minutes by getting productive with Material Design using Angular Material in your Angular CLI app.

So, What Exactly is Angular Material?

Angular Material Design is a design language for web and mobile apps which was developed by Google in 2014. Material Design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with and also you’ll get a well-organized format along with the flexibility to express your brand and style. For an example of Material Design, check out Airbnb, Gmail, and Houzz. These apps make the best use of Material Design to fit its many features into the limited mobile device. Going through the official Material design documentation is quite an experience. I recommend taking a look at the docs, but I will summarize it here.

Setup the Environment for Angular

To work with Angular, you will need Node.js and Angular CLI (Command Line Interface) installed in your development environment. Proceeding further, you can use the following command to set up a new Angular project.

ng new angular-material-app

Step 1: Install Angular Material and Cdk

Head over to your terminal, navigate inside your created Angular front-end application and then run the following commands to install Angular Material 6 and Angular 6 CDK.

npm install --save @angular/material @angular/cdk

Step 2: Install Angular Animations

In order to add enable support for animations in your Angular 6 front-end application, head back to your terminal and run the following command to install the Angular animations module and import the BrowserAnimationsModule and add it to the list of imports.

npm install --save @angular/animations

Step 3: Angular Material Theme

Angular Material comes prepackaged with several pre-built theme CSS files. To configure the basic theme, open the src/styles.css file and import any one of the available themes in Material Themes.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Step 4: Angular Material Gesture

Some components like Slide Toggle, Slider, and Tooltip rely on a library called HammerJS to capture touch gestures. So, you will need to install HammerJS and import it into our application.

npm install --save hammerjs

Step 5: Angular Material Icons (Optional)

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html. For more information on using Material Icons, check out the Material icons guide.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

And yeah, Now you are good to go!

Note:  You can create an app-material module file for importing the angular material components and export them wherever necessary! Let’s write clean code and be a Better programmer!

What Will You Build with Angular Material?

After setting up the project structure and some dependencies, you will be able to start developing apps. You could try out some examples with the built-in components that are provided in Material docs. In this blog, to know about Angular material implementation, we will be implementing it with some small examples that play a major role in any webpage! The idea of this blog is to show how cool and easy it is to use Angular Material.

Example 1: Layout

The most widely used layout is cards. The most basic card needs only an <mat-card> element with some content. However, Angular Material provides a number of preset sections that you can use inside of an <mat-card>. For now, just copy the following code into your HTML file and you could witness a card display!

<mat-card> Simple Card</mat-card>

Example 2: Navigation

Next comes the navigation part of a webpage. <mat-menu> is a floating panel containing the list of options. By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive as follows.

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
 <mat-menu #menu="matMenu">
   <button mat-menu-item>Item 1</button>
   <button mat-menu-item>Item 2</button>
 </mat-menu>

Example 3: Progress Bar

    “Boredom, according to psychologists, is merely lack of stimulation,the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation?”

~ Alice Kotlyarenko

Yeah! The UI progress bar will make you enjoy the wait! Angular Material made it easy to display a progress bar with customizable modes.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

Conclusion

I hope this blog has helped you understand how to use the power of Material Design in your app for a top-notch UI. For more information about Material Design in Angular 6, check out the official docs which contain ready-to-use templates. It’s a great place to learn about Angular. Thus Angular Material components create a beautiful application without investing too much time thinking about styles. Awesome, right?

Reference:

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.