5 UX Tricks You Must Know in 2022
Tags: webdev, ux, ui, webdesign
Published: 2022-01-09 06:15:11

Do you have what it takes to be an **outstanding UX Developer** in 2022? _Add these tricks to your arsenal_ and witness your **Development skills** break _new grounds that you didn't know even existed_!

![let the party begin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ck6sa4gk88chjl05lxui.gif)

# Three Click Rule

What is the **Three Click Rule** you ask? A _quick Google Search_ will reveal:

> The three-click rule or three click rule is an unofficial web design rule concerning the design of website navigation. It suggests that a user of a website should be able to find any information with no more than three mouse clicks.

_Er... Why is this relevant?_ The decline in _attention span_ of the people lately has led to the origin of the **Three Click Rule**. A **click** is an interaction that results in the _highest cognitive load_, because the _click works only in a small surface area_. 

An alternative to _reduce the taxation_ on the brain, you can use **gesture inputs** like **swipes**, **pinch** or **double taps** (eg: **Instagram** & **LinkedIn**). The _general rule of thumb_ is, for **double taps**, _the surface area should be large_, else you fall in the same trap as the **click** issue.

![swipe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/516lxs3n4e492hcsd26f.gif)

# Appropriate use of White Space

This is _one of the most crucial pillars_ of **Modern UX**. As you can see here, the one with **more spaced-out content** _looks way professional_.

![no space](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwvq1i7kgzpnu8lhyd6e.png)

![spaced](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj0utgn31529kuywhymr.png)

As you gain more experience designing **UX**, you slowly _develop an eye for it_ by default. It is also crucial to maintain **consistent spacing** (the _padding/margin_ in the left & right sides should be equal, same is the case for the _padding/margin_ in the top & bottom)

You also need to maintain _adequate spacing across sections_, a **highly spaced out section** should be followed by a **section with low spacing**:

![section spacing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naajbklktvk4iyel4mm7.jpg)

To avoid **lopsided spacing**, one _hack_ is to use **alternate positioning**:

![alternate positioning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hfv685fj9ldfe0ugte4.PNG)

# Scroll Interaction

The use of **Scroll Interactions** such as **Scroll Storytelling**, **Parallax**, and more are on a _constant rise_ and can lead to truly _immersive websites_. Even the [Mac Pro](https://www.apple.com/in/mac-pro/) uses **Scroll Interaction** on the _product page_!

These **immersive scrolling experiences** are generally implemented using a technique known as **Scroll Hijacking**, where _the scroll behavior is altered as per the requirement of the developer_. Even though it has _enormous upsides_, it comes with a _major catch_: if not implemented properly, it can lead to **severe accessibility issues**.

![scroll storytelling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9qv6qyzna5leufzap6k.gif)

# Masonry Grid

![masonry grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52r7hiuehkku0xn9rdu0.jpg)

**Masonry Grid** had been around for a long time but saw a _rapid increase in popularity_ after the introduction of **Windows 8**. It involves a _grid of elements with different sizes_ and **provides a fresh feel** over _traditional grid items_.

Unlike _most other items in this list_, this one is possibly the **easiest to implement** as it only requires **CSS** knowledge.

{% codepen https://codepen.io/andybarefoot/pen/QMeZda %}

# Cursor Interactions

**Cursor Interactions** is the perfect way to keep a _user engaged in your website_ in this age of _dwindling attention spans_. You have a _buffet of options_ to choose from ranging from **Custom Cursors**:

![cursor interactions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq96zkwge7l9qczq84lq.gif)

to **highly dynamic cursor interactions**

{% codepen https://codepen.io/ruppysuppy/pen/GRrbyXa %}

**NOTE**: The target audience for the **Cursor Interactions** are the **desktop users**, so if your **audience demographic** is mainly the **phone users**, _you could opt out of using these interactions_.

# Wrapping Up

In this article, we went through some **cool UX tricks** that you can _use in your applications to give them a modern feel_. Hope this helps you in your journey!

**Fun Fact**: This was my **50th article**, I have been writing _consistently for the past 50 weeks_! When I started I had _a lot of doubt about who will read the articles_, now I have a _lot of people supporting me_. **Thanks a lot to everyone who had been on this journey with me!**

**Happy Developing!**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

3. **Would you like to collaborate on our site?**
   As mentioned in the _previous question_, I am in a time crunch, so I would have to pass on such opportunities.