Select Page

Author

Using Heat Maps to Improve Your Website’s UX in 2022

For a second, imagine a hypothetical situation. You are helping your friend move out of a maze. He can see you but can’t hear you. Now, what will you do? Ofcourse, You will try to give him signs towards the end. Right?

There is a somewhat similar case with heatmaps and UX. Heatmaps help you identify UX obstacles that keep your friends (visitors) away from performing their end goals on your website. They offer precise customer-centric data, with which you can boost your website UX and convert visitors into leads.

In this article, you will learn:

  • What are heatmaps?
  • What are the most common types of heatmaps?
  • How to boost your website UX using heatmaps?

Let’s jump right in.

What are Heatmaps?

Have you ever played a video game? If yes, then you must have seen an image like this:

What are Heatmaps

This is a heatmap. Heatmaps are the visual representations of information about an area. The information and area vary depending on the goal of the heatmap.

In our case, the area is the website, and the information is – where users interact more, less, and none. It visualizes the data, which indicates how the site users interact on a page. To do this, it uses a simple color code: red for hot areas – areas that attract the reader’s interest, and blue for cold areas – neglected areas.

Simply put, the heatmaps of your website help you understand the course of your users on your web pages. They allow you to see:

  • Where they click
  • How far they scroll your pages
  • What they are looking at
  • What they ignore

Different types of heatmaps serve these different purposes.

FUN FACT: Parisian urban planning engineers were the first to use heatmaps. They used different colours to mark city maps to make statistical data clearer and more understandable.

What Are The Types of Heatmaps?

There are essentially three types of heatmaps. They are:

  • Click tracking heatmaps
  • Scroll maps
  • Mouse tracking heatmaps

Let’s study all three in detail, after which we are going to learn how heatmaps can be used to improve UX. Let’s start with the types first:

Click Heatmaps

Click maps or click tracking heatmaps are the most commonly used heat maps. Click map is used to record the information about – ‘where your visitors have You don’t know, but your webpage may have a lackluster copy, a not-so-good image, or any other issue. clicked after reaching your landing page.’ Here’s an illustration that helps you understand the Click heat map more easily and better.

Click heatmaps

In the above image, you can see red spots on various areas. This is because the map uses different colours to display the clicking pattern. The red spots are the areas where the visitors have clicked the most. And as the number of clicks goes down, the colour of the spots becomes lighter.

It helps website owners determine whether their visitors are clicking on the areas they want them to or not. The number of clicks should be highest only on the CTA buttons of your landing page. If that’s not the case, you need to make your call to action buttons more attractive, easily accessible, and engaging enough for the visitors to click on them.

Scroll Maps

Like Click heat maps record the visitors’ clicks, Scroll maps record the scrolling behavior of the visitors.

This heat map tracks and shows how far users scroll your page and where they leave scrolling. It divides the web page into folds for better understanding. A fold is how much a webpage appears at once on the visitor’s screen (without scrolling below). Therefore, the scrolling heat map is widely used for long web pages with a lot of content.

The information it provides is very helpful. It helps you to check:

  • Where did your visitors lose interest, and why?
  • Whether users are missing your CTA because they’re positioned too low?
  • Do you need to change the position of CTA?

Moreover, this scroll map helps to see if a web page’s length supports user experience or not. Here’s a good example of a scroll map:

Scroll Maps

The primary role of a scroll map is to figure out the areas of your page where users are abandoning the reading process. Using the information derived from this heat map, you can determine why the visitors are only scrolling through a certain point of your page and then perform AB testing to verify those reasons.

You don’t know if your webpage has a lacklustre copy, any image, or any other issue that’s turning your visitors off. But using scroll maps, you can figure out those issues and resolve them as soon as possible. As a result, it will increase your user engagement rate and thus your web sites’ UX.

Mouse Tracking Heat Maps

Mouse tracking or Mouse maps are the third most common type of heat maps. As the name indicates, the mouse heatmap shows the mouse movement of the visitors after landing on your webpage.

It reveals some interesting points on the way users read and navigate your webpage. However, there is one slight drawback with this heat map. You cannot completely rely on mouse movements. It’s not always like where the visitors are moving their cursor is where they are actually looking at.

So, just because if a visitor’s cursor stays on heading for 3 to 4 minutes, it does not mean they were reading it. Therefore, questions arise on the reliability of the mouse map data.

Google’s Doctor Anne did a research on the accuracy of this heat map. And here’s what she found:

  • Only 6% of the total visitors showed a direct correlation between their eye movement and mouse movement. This means 94% of visitors did not correlate.
  • 10% of visitors hovered over a specific page element while reading the rest of the content on that webpage.
  • 19% of the visitors showed a horizontal correlation between their eye moment and mouse movement.

Here’s how a mouse map looks like:

Mouse Tracking Heat Maps

Now, as you are familiar with the primary types of heatmaps, it’s time to share what you have been waiting for:

How to Use Heatmaps to Improve UX?

Heatmaps clearly tell a lot about your visitors’ movements on your websites. But how can you use the heat map’s data to boost your website’s UX? Below we have explained a few expert ways to serve this purpose:

Perform A/B Website Design Testing With Heatmaps

Using heat maps, you can understand your design’s usability. This helps you know which version of your web design will work best for your website. Heatmaps also give you insights into sub-optimal screens in your web design. For example, it tells:

  • Whether visitors are scrolling upwards or downwards,
  • They are reaching to call to action button or not;
  • Which area of your webpage they are spending most of their time on.

Depending on the movement patterns of their cursors, you will learn whether visitors are spending more time with real engagement or out of confusion. Using all this data, you can create multiple designs and do this:

  • First, perform AB testing of your designs using heatmaps.
  • After that, pick the one that performs the best and continue optimizing it.

Performing AB testing using heat maps lets you see whether the visitors navigate straight to what they are looking for or if they get off-track. Even a single-second response delay in your design can dramatically impact the UX and cause a 7% reduction in conversions.

Learn Which CTA Button Gets Most Clicks

The performance of your call-to-action buttons is a crucial aspect of improving UX. Heatmaps help you evaluate it. With heatmaps, you can check which CTAs are getting clicks and which are ignored. Once you are aware of this data, you can adjust the CTAs accordingly to improve their performance. For example, if a CTA is being ignored by your visitors, you can try placing it in the most-clicked areas. That’s how you can improve the UX fast and efficiently.

Heatmap Highlights Items in Your Website That Creates Friction

88% of people do not return to a website if they have a bad user experience.

Have you ever visited a tough-to-navigate and confusing website? If yes, then you are already aware of the struggles of internet users. Do you want to offer the same inconvenience to your visitors?

Thankfully, using a heatmap, you can determine the spots in your website where visitors are facing troubles. Once you discover such areas, you can work on them to improve your UX. This way, you can use heat maps efficiently to offer your visitors clear navigation.

Use Heatmaps With UX Tools

Heatmap data is unquestionably amazing and gives plenty of insights. However, there’s a way to get more out of it – combine your heatmap with other UX design tools. Below are the best three duos:

Traditional Analytics + Heatmaps

Traditional analytics tools such as Google Analytics will provide you with plenty of quantitative data points. For example, bounce rates, traffic sources, and page views. However, these data points alone are not enough to improve your UX. When you combine Google Analytics with heatmap-provided insights, you’ll discover where your webpage is lacking and the solution to it.

Got a webpage with a good amount of traffic but a low conversion rate? Use a heatmap and Google analytics to figure out what’s making visitors leave. A combination of these amazing tools will help you improve your UX in a better way. Some examples are:

Session Replay + Heatmaps

Session replay is an amazing tool that lets you view your visitors’ activities. It shows all the actions of a visitor across multiple pages. Instead of guessing about scrolling and clicking, you use the combination of both these tools. They will help you find what your users are actually looking for. According to which you can make changes in your web pages, enhancing the UX.

On-page Feedback + Heat Maps

Numerical or quantitative data is highly important to make decisions about the UX. However, many people make the mistake of overlooking the value of this information. Try combining on-page feedback with heatmaps to get more detailed insights. Here’s what you need to do:

First, use a heatmap to determine the issues in your web page designs. Then to be sure about your chances, ask your visitors for UX feedback on each webpage.

According to BrightLocal, 72% of customers are more likely to write a review if a business asks for it.

Feedbacks will help you learn all things your visitors find missing on your page. You will know if the areas you wanted to update deserve changes or not. Once you know that, you can work on making the desired changes to make navigation easy. And if they are successfully reaching the right place without navigation, it means your navigation is efficient, and so does your UX.

However, remember that website feedback does not need to be distracting to the visitors. A non-intrusive, simple, and decent one-line question pole is all that’s required to kick-start your UX improvement.

That’s it. You are all set to leverage the power of heatmaps to give the best possible UX to your web guests. If you need any help, feel free to

DISCUSS YOUR QUERY WITH US

7 Most Useful UI & UX Trends For 2022

Do you know if you invest 1$ in UX, you get 9,900% ROI?

UI and UX are key concepts in digital marketing, but they are still unclear to many. And even those who know these concepts are unaware of the current UI and UX trends favored by internet users.

This post is helpful to all of them. Things we will cover:

  • What is UI Design?
  • What is UX Design?
  • The Difference Between UI and UX Design
  • UI and UX trends 2022
  • Examples to understand how to implement these trends.

Let’s dive in.

What is UI Design?

The term UI Design ( User Interface Design ) refers to the design of a user interface. It is a key element taken into account in the process of creating a website. UI design includes all the graphic and textual elements that allow interaction between the user and the website.

It comprises all interactive and clickable items, such as the site navigation bar, buttons or links, text colors, and styles.
The main purpose of UI design is to offer a fluid and intuitive navigation to the user so that the user’s experience becomes as smooth as possible.

“A good UI is intuitive, easy to understand, and attractive. It encourages Internet users to continue their website navigation and to visit back to the site more often.”

What is UX Design?

UX – User experience relates to the experience of users on a website. It is quite similar to UI but goes further in the process. The user is at the heart of all design strategies. UX ensures that the website design is pleasant and easy to use for the user. Its main motive is to make usage of websites comfortable and satisfying for internet users.

Some of the important elements of the user experience are:

  • Credibility of the website: company’s real identification, genuine reviews, no errors, etc.
  • Website’s appearance and efficiency: consistency in design, placement of elements, etc.
  • Easy to find the information sought: internal search engine, content categories, etc.
  • Ease of use: for example, a smooth ordering process for an online store
  • Responsive Website Design: The ability to adapt to the different gadgets: mobile, tablet, laptop, large screens, etc.

The Difference Between UI and UX Design

Do not confuse UX design and UI design. UX Design takes care of how users feel about a product, UI design focuses on its design.

UI and UX Design Difference

UI Design

To put it simply: UI design = design of the user interface.

UI Design focuses on the aesthetic aspect of the interface. It uses technical skills to shape the visual elements of an app or website when designing them. So, it mainly deals with the graphic environment of a product/service, such as the font, the colors, the typography, the flow of images, the organization of the structure, etc.

Its role is to visually or significantly improve an interface – to make interactions more pleasant.

UX design

UX design relates to the feeling and satisfaction of the end-user in interaction with the website/application. Its goal is to guarantee the user a positive impression throughout their browsing. It helps to understand and anticipate user needs. Also, it helps to create a pleasant interface, intuitive and accessible to your target.

UI Design

UI and UX Trends for 2022

1. Dark Mode

Most people favor websites/applications in dark mode. It is becoming immensely popular. Social networks were the first to offer this mode and make it popular with millions of Internet users. Twitter since 2016, Instagram since 2019, and, more recently, Facebook since 2020.

Operating systems have also given in to the call of dark mode: Windows 10 includes a native dark theme, just like macOS since 2018.

Benefits this mode offers

Energy-Saving:

Your device’s screen is one of the most power-hungry components. Dark mode saves energy savings, especially if you have an OLED screen. This is because dark-colored pixels consume less power than light-colored pixels, about 20% less.

“Google performed tests using YouTube in dark mode and found power savings of between 14% and 60% (depending on screen brightness).”

Enhance Text:

Dark colors enhance bright light colors. So your text in bright light colors becomes more catchy and easier to read. Moreover, dark mode makes it easier to read content in low light. It also produces less blue light than classic mode.

Eye- Friendly:

Dark Mode reduces eye fatigue by simplifying the hierarchy of content and minimizing visual distractions. It, therefore, helps prevent headaches or dry eyes to a certain extent during prolonged use of a screen. This helps reduce the negative impact of screens on the sleep cycle.

Some Dos and Don’ts About Dark Mode

Where should we use it?

For applications/websites focused on entertainment (Netflix, YouTube, Spotify)
On an interface that is used all day long (messaging, intranet)
For a site that needs to bring out an image of luxury.
On websites that need to play on emotions (for example, to bring out a feeling of intrigue and mystery.

Where shouldn’t you use it?

For interfaces heavily loaded with text.
On websites with numerous forms.
For sites with a design that is too complex (set of textures or range of colors).
Websites that have many different types of content displayed at the same time on the screen (text, images, video, tables, etc.).

Key Examples of Dark Mode

Examples of Dark Mode

2. Create Unique Animation illustration

Have you ever clicked a button multiple times, just because you liked the animation it caused? Every three out of five people prefer doing so, including me.
With advancements in technology, designers can now integrate quality animations without worrying about the loading speed of the web pages. That’s why now the UX process includes animated UI graphic creation.

The Benefits of UI Animation Concepts

Makes Interaction Attracting And Fun:

It is often said that a picture is worth a thousand words. If a picture is worth a thousand words, imagine how many words it can be worth when it comes to life – animation. Using animation will allow you to present your brand in a fun way. Moreover, with animation, you can avoid long texts on your interfaces that often bore visitors.

Guides Visitors:

Animations also act as guides during navigation. It facilitates the presentation of your site or your application. They draw visitors’ attention to the next step in the navigation. Or to the various steps to follow.

Highlight Your CTAs:

Animation allows you to highlight your most important CTAs effectively. It is a good way to perfectly highlight the action to be performed. In addition, it ensures that the message you wanted to convey went well.

Provoke Interaction:

Our eyes always turn to light, movement, and sound. If you stare at an almost deserted landscape, the slightest movement will inevitably catch your eye, and you will more easily distinguish it from the rest. That’s how animation guides the user’s gaze to important points on the journey. A highlighted text, an image displayed gradually, will create an offset with the context/background and allow the desired element to be highlighted.

Pro Tip: Here’s a detailed guide on how to use animations.

Some key examples of Animation Integration

Animation Integration 1

Animation Integration

3. Advanced Micro-Interactions

According to Dan Saffer, creator of the term, the definition of a micro-interaction is:

“Small moments during which the user and the interface interact. “.

Microinteractions

A micro-interaction is a creative, short, and simple event integrated into a web or mobile interface to give it a dynamic touch and stimulate user empathy. This feature is used to:

  • Explain to the user the action to be performed.
  • Inform the user about errors that may occur during the interaction.
  • Guide the user in an intuitive way during his interaction with the interface.
  • Attract the user’s attention.
  • Reward the user.
  • Provide an entertaining environment while the customer waits for the system to accomplish a task.

A micro-interaction is integrated into the interface design and has three main characteristics:

  • A trigger such as a hover, a click, a scroll, or even a page display that generates an action;
  • Rules that define what happens, such as zoom, a shade, or appearance;
  • The feedback to inform the user of what is happening or where they are in a process;
  • Loops and modes, like a system, repetition, or cancellation action.

Importance of Microinteractions

The micro-interactions play a critical role in your user interfaces. They stimulate the user’s emotions to personalize their interaction with the interface. These objects entertain the user and bring more life to the UX experience. As a result, micro-interaction helps to enhance the link between the user and the product.

Common Examples of Micro-Interactions

  • Scrollbar
  • Digital alarm
  • Pull-to-refresh animation
  • A loader with a progress indicator
  • Swipe animation
  • An animated Call To Action button
  • Animated emoticons in social networks, etc.
  • Email notification

The best-known example is the thumbs-up of Facebook Messenger:

Facebook Messenger

4. Artificial Intelligence

Harry West, Director of Frog Design, says:

“Artificial intelligence is no longer a technology of the future. It is the present.”

Artificial intelligence is developing more and more in our daily life. For example, we have all been targeted by advertisements on search engines (Bing, Google), in mailboxes (Gmail Outlook), or even on social networks (Instagram, Facebook, Twitter). All because of AI.

Moreover, brands are considering how to further improve customer experience. The AI ​​will be able to automate tasks thanks to predictive analyzes.

For example, chatbots on most websites allow users to get quick answers to their queries. The improvement of these bots will make it possible to advise better, which contributes to UX and also boosts conversions.

Artificial Intelligence

AI Components to focus on in UX

  • Voice Search
  • Chatbots
  • Automation of tasks
  • Personalization
  • Advanced Visual Effects

You can read about these in detail in this UXmatter blog.

5. Scroll-Triggered Animation

In today’s highly competitive market, if you want to grow your business – you need to meet the changing expectations, behaviors, and interests of your audience. Scroll-triggered animation is a popular way to boost website interactions by improving the user’s interests.

Basically, it’s a technique to animate major elements of your website like – graphics, videos, photos, texts – giving them life as the user scrolls down a page. Scroll animations grab the user’s attention more easily – making your website appear more interesting, dynamic, and feel alive.

What Does It Look Like

The scroll-triggered animation has three main categories:

1. Moving The Background And Foreground – Also Known As The “Parallax” Animation:  Parallax animation adds a sense of scale to a website. Combining multiple backgrounds offers an illusion of depth and directional navigation.

2. Animation Of The Elements When Comes Into View:  When an element of a webpage comes into view, they start animating. For example, sliding texts, vibrating text, exploded view, self-filling graphs, etc.

3. The Scroll Triggered Video:  A scroll-triggered video is a better and more visually exciting method than over-animated texts. With it, visitors can control the playback of the video as they scroll through your website.

Why Use it?

  • It makes it easier for you to grab your user’s attention to specific areas of your website. For example, infographics, special offers, call to actions.
  • Scroll-triggered animation also boosts user engagement by offering visitors an active user experience.
  • It also affects the loading time of your web pages. Instead of waiting for the whole webpage to load, the scroll animation enables the loading of only those elements that are needed.
  • Scrolling animations prevent the visitors from getting lost in your website, by making the navigation extremely streamlined.

6. Voice User Interface

Voice user interface VUI is a trend that has been dominating since the starting of 2021. Here are some stats that reflect the popularity of voice interface –

Around 122.7 million Americans will be using the voice search interface till the end of 2021″

Voice user interface guides users and helps them navigate through complex digital products reducing the substantial assistance from other features like screens.

In fact, by the end of 2020, 30% of the total Google searches were projected to be made without screens (using VUI).

The most significant benefit of using VUI is – “it eliminates the need for a graphical user interface, and improves the user experience of your app or website. Let’s discuss more such benefits of the voice user interface trends.

Benefits Of Voice User Interface

  • VUI makes multitasking easier. Users just need to command the request, while doing whatever they want, and it will be processed automatically.
  • The users will feel more engaged with your website as their navigation will be easier. All they need to do is command and that’s it.
  • It also helps you improve the speed recognition skills of your website – it impacts SEO positively.
  • And many more.

7. Glass Morphism

.This trend is based on the effect, which we are sure you will be aware of, “background blur”. It creates a “through the glass” look and feel on the elements of your website. In other words, it makes your elements appear glass-looking translucent by providing them with a well-defined hierarchy.

This trend was introduced in Windows Vista first and then later in iOS7. Moreover, the new macOS update which is also called macOS Big Sur also implemented this style. If you want to get to know about this effect more deeply and practically, you can try out this tool “Glassmorphism Generator ”.

 

Wish To Integrate The Above Trends On Your Website?

“Discuss With Our Experts”

What’s New in Bootstrap 5 Alpha

What’s New in Bootstrap 5 Alpha

What’s New in Bootstrap 5 Alpha 

Bootstrap is a CSS framework that makes responsive web and mobile development fast and easy. Bootstrap provides you with HTML and CSS based templates for forms, typography, tables, buttons, modals, navigation, image carousels and more. In this article, we will explore the latest Bootstrap 5 alpha version.

 

Modified grid system 

The grid system is one of the main attractions of Bootstrap. This system is made more capable in Bootstrap 5 alpha version. It comes with an extra extra large grid (xxl). This version has .g* utilities in the place of .gutter classes. You will also find Vertical spacing classes.

code

Let’s see an example.
As you can see in the image, g-4 is spacing of 20px (1.5rem) from all side. You can also use .gy* and .gx* to give it specifically for horizontal and vertical.
.gy* is for vertical gutter spacing
.gx* is for horizontal gutter spacing
Columns are not position:relative by default anymore. The new grid system has replaced form layout options. Bootstrap 5 alpha container comes with 6 breaking points.
Xs <= 576px
Sm >= 576px
Md >= 768px
Lg >= 992px
Xl >= 1200px
Xxl >= 1440px
The grid system is greatly enhanced.

Column
Column
Column
Column

Updated forms

The Forms Section is a separate section in Bootstrap 5 alpha. All form controls are redesigned and deduped. Form controls are now fully custom. Every radio, checkbox, file, select, range etc come with a custom appearance. You can unify the behaviour and style of form controls across browsers and operating systems.

settings

Customizing docs

 

Many libraries have been created based on Bootstrap. The latest version provides more support to extend Bootstrap, thanks to the new Customization Section. This section comes with more code snippets and content to build on top of source Sass files of Bootstrap. You also get an npm starter project.

 

CSS custom properties

 

Before Bootstrap 5 alpha, a limited set of root variables for fonts and colours had CSS custom properties. In the Bootstrap 5 version, you get them in components and layout options also.

 

No More jQuery

The largest change in the latest version is no jQuery. It is replaced with Vanilla JavaScript.

 

Responsive Font Size

Font size and margin padding are automatically adjusted across device and viewport sizes.
Eg: .class {
Padding : rfs(2rem);
}
It no longer supports Internet Explorer. There are many new icons added to Boostrap 5. However, you will not find any social media icons.

Following are the classes removed and added:
Classes Added:

 

  • row-cols-auto
  • g-*
  • gy-*
  • gx-*

Classes Removed

 

  • Form-row
  • Card-deck
  • Form-inline
  • List line

 

The latest version of Bootstrap 5 brings utilities API:

Angular MVVM architecture
Angular MVC Architecture: Angular App

Angular MVC Architecture: Angular App

MVC Architecture 

Model View Controller or MVC architecture is one of the design patterns used in the development of web applications. The MVC design pattern separates model, view and controller. 

Model 

It supports application data management. Model receives requests from view and instructions from controller and then updates itself accordingly.  

View 

View is a user interface that displays data and also allows the user to modify data. 

Controller 

Controller controls the model-views relationship. It receives user input, performs validations and then modifies data after performing business operations. 

MVVM Architecture 

MVVM is another software design pattern that improves source code readability and maintainability. It divides the code into three sections including: 

  • Model 
  • View 
  • ViewModel 

 

ViewModel 

It exposes data to the view after receiving from Model. 

Let’s talk about both MVC and MVVM approaches.

 

Architecture Blueprint

Angular MVVM architecture

Model

The model part of the MVC architecture consists of the business end of the application. It is a simple data for CRUD applications. You can see the model holding data in the following example:

Example

import { Injectable } from ‘@angular/core’;

import { BehaviorSubject, Observer } from ‘rxjs’;

export class Note {

  id: number;

  title: string;

  text: string;

}

@Injectable({

  providedIn: ‘root’

})

export class NotesService {

  private notes: Note[];

  private nextId = 0;

  private notesSubject = new BehaviorSubject<NoteInfo[]>([]);

  constructor() {

    this.notes = JSON.parse(localStorage.getItem(‘notes’)) || [];

    for (const note of this.notes) {

      if (note.id >= this.nextId) this.nextId = note.id+1;

    }

    this.update();

}

  subscribe(observer: Observer<NoteInfo[]>) {

    this.notesSubject.subscribe(observer);

  }

  addNote(title: string, text: string): Note {

    const note = {id: this.nextId++, title, text};

    this.notes.push(note);

    this.update();

    return note;

  }

}

export class Note{

id:number,

title:string,

text:string
}

The model in this example holds an array of text nodes.

View

The view is created in .html templates and .css files. One of these templates is already mentioned in src/app/app.component.html.


ViewModel/Controller

The ViewModel/Controller is created in the .ts files. Open src/app/app.component.ts

 

How to Install

Open terminal and run the following commands to install Angular CLI and set up your application.

  • npm install -g @angular/cli@7.2.1
  • ng new AppName
  • cd AppName
  • ng serve

AngularCLI

 Inputdecorator The following table shows some of the common Angular commands: 

Creating a component ng generate component component_name
Creating a service ng generate service service_name
Creating a module ng generate module module_name
Creating a directive ng generate directive directive_name

 

Click the link below to learn about all generate commands:
https://angular.io/cli/generate

 

Data Sharing

Data Sharing Between Components

Parent to Child

You can use @Input decorator .[] for parent to child data sharing. This is known as property binding.

Inputdecorator

Child to Parent

You can use @Output decorator for child to parent data sharing.

Data Sharing Between Unrelated Component

Use services to store data and make HTTP calls to retrieve, post, update and delete data.

Lazy Loading in Angular

Take the following steps for lazy loading in angular:

Step 1: Create a Module

Create one more module file with the name Lazy for loading on demand. Use the following command:

ng g module Lazy

Create one component file with the name employee. Use the following command:

ng g component Lazy/employee

Step 2: Add Lazy Loading Module 

  • Open app.routing.ts file
  • Import Routes
  • Import RouterModule from @angular/router

Add the following code snippet in the app-routing.module.ts file.

 

Step 3: Add Routing of Lazy Module Component

  • Open lazy.module.ts file
  • Define components in routes
  • Use RouterModule.forchild with your child routes array

Use the following code snippet for lazy.module.ts file.

ModuleComponent

Step 4: Add Lazy Loading Module

  • Open app.module.ts file
  • Import AppRoutingModule

This is how the code will look like:

LoadingModule

And also add

Import {LazyModule} from ‘./lazy/lazy.module ;

Import:[

BrowserModule,

AppRoutingModule,

LazyModule

]

Android MVP Architecture: Android App

Android MVP Architecture: Android App

When you start learning coding to be a software developer, website developer, Android or iOS developer, your coding journey begins with simple programs for adding or subtracting two numbers, leap year, fibonacci series and then you move onto some small real world applications such as banking application with the three basic operations for balance enquiry, deposit and withdrawal.

Collecting user input, storing the input values in variables, defining methods/functions with proper validations and displaying the output, everything is covered in a single program.

However, desktop apps, web apps and mobile phone apps used by businesses are much more complex. Developing optimized apps easily is not possible without separating different layers of code. You cannot manage it if your code is not modular. It becomes difficult to update the app or add new features. This is the reason why you need an architecture for Android app development.

If you are a beginner, you should start with the MVP architecture.

MVP Architecture


MVP (model-view-presenter) is an architectural pattern that promotes separation of concerns and facilitates unit testing. This architecture has the following three components:

 

  1.  Model (interactor, REST API, database API)
  2. Presenter
  3. View (activity, fragment, view)

 

Model

It is the data store of the app. The model layer includes Shared Preferences, SQLite databases, and repositories for network calls. Model provides the data to be displayed in your app. API calls in the activity class are no longer needed. They are separated in the model and results can be retrieved from there.

 

View

It consists of fragments, activities and other views. The view is what you see on your screen. The data come from the presenter and populated into the views on the screen. 

 

Presenter

The presenter makes API calls, fetches data from files or databases, replaces fragments, fetches data from sharedpreferences, starts new activities and performs other similar tasks. The presenter contains the business logic. 

The following are the features of MVP architecture:

  • Separation of concerns
  • Easier to debug
  • Reusability
  • Unit/integration testing
  • Scalability

Now, let’s see the implementation of MVP architecture with an Android app using Dagger2, RxJava, GreenDao, PlaceHolderView, FastAndroidNetworking and AndroidDebugDatabase.

 

Architecture Blueprint 

ArchitectureBlueprint

Project Structure

ProjectStructure

The app has the following packages:

  • data package contains all the components that access and manipulate data.
  • di package contains classes that provide dependency using Dagger2
  • ui package contains view classes and corresponding presenters
  • service package contains services for the app.
  • utils package contains utility classes.

Classes in the app use key OOP features like inheritance and facilitate code reusability.

 

Library reference resources

Dagger2

https://github.com/MindorksOpenSource/android-dagger2-examplehttps://github.com/MindorksOpenSource/android-dagger2-example

RxJava2

https://github.com/amitshekhariitbhu/RxJava2-Android-Samples

ButterKnife

http://jakewharton.github.io/butterknife/ 

FastAndroidNetworking

https://github.com/amitshekhariitbhu/Fast-Android-Networking 

GreenDao

http://greenrobot.org/greendao/ 

PlaceHolderView

https://github.com/janishar/PlaceHolderView 

Calligraphy

https://github.com/chrisjenx/Calligraphy 

AndroidDebugDatabase

https://github.com/amitshekhariitbhu/Android-Debug-Database 

 

Concept reference resources: 

  1. Introduction to Dagger 2: Part 1
  2. Introduction to Dagger 2: Part 2
  3. Android Dagger2: Critical things to know before you implement
  4. The Best Android Networking Library for Fast and Easy Networking
  5. RxJava + Fast Android Networking
  6. Migrating from RxJava 1.0 to RxJava 2.0 and Learn RxJava by Examples
  7. Android Tinder Swipe View Example
  8. Debugging Android Databases And Shared Preferences In The Easiest Way
  9. RxJava Anatomy: What is RxJava, how RxJava is designed, and how RxJava works.
  10. Powerful Android ORM: greenDAO 3 Tutorial


MVP template
 

When you are following architecture patterns like MVP, MVP clean or MVVM, this involves creation of basic files like API models, View, Presenter, and Android Activity and then boiler plate code. You have to spend 1-2 hours on each screen. You can use an automated template to save time and ease out work.

 

How to Install 

Find and paste the MVPActivity folder under the root directory of android-mvp-architecture app at the below location:

C:\Program Files\Android\Android Studio\plugins\android\lib\templates\activities 

Restart the Android Studio. 

AndroidStudio

How to Use

 

Select the folder in which you want to create the new MVP folder. The following will be created in the new folder: 

  • View class
  • MVpPresenter 
  • Presenter 
  • Activity

 

How to use template