A simple UI trick to increase your dwell time by 37%


Dwell time is one of the most important user behavior metrics you must measure and improve for a better search engine rankings, and most importantly, user experience.

For those of you who don't know, dwell time basically measures how long visitors stay on your page before bouncing back to previous Google search result.


So why does it matter?

Although it isn't officially confirmed by Google(obviously!), dwell time is one of few reliable ways for Google to understand how important and engaging your website content is.

Imagine this scenario; Someone does a quick search for "best SEO strategies" on Google, lands on a website in the SERP, she finds the content dull, and goes back to search results after taking a quick look for 30 seconds. She then, clicks on another search result, finds the content interesting and likes it enough to spend the next 5 minutes engaging with the content.

In this scenario, which page do you think signals Google, that it has the highest relevance and most engaging content?

So, then, how to increase dwell time?

Obviously, overall look, and design of your website are as important as the actual content. Maybe even more. So, just by doing a few smart changes in your UI, you can harvest low hanging fruits.

During our redesigning process at Seotify, we have implemented a quick Javascript function on our pricing page, that animates the header background by basically blending bunch of predefined colors together. Because, why not.. I thought it'd look cool. Here, check out the page here (opens in a new tab).

We later discovered that, while dwell-time on other pages stayed pretty much the same, average time people spent on our pricing page jumped to 110 seconds from 82 seconds, which is quite a win considering it took us only 15 minutes to implement the animation.

Seotify pricing

It is, I guess one of those oddly satisfying things that you cannot look away once you see. So, visitors stay on page 30 seconds longer just to watch the colors beautifully change and blend in together. There's even a Reddit sub named r/oddlysatisfying with 2.5 million! subscribers, devoted to this phenomena.

How can I implement the same gradient animation?

There's a pretty simple, and easy to implement Javascript library on Github that lets you do pretty much the same thing.

Unlock link with a social share.

Implementing it on your pages is simple, once you download the library, include it right before the "body" close tag of your page.

Once the library is included, you can execute the script and pass your variables such as colors and direction like this;

 var granimInstance = new Granim({ element: '#canvas-basic', direction: 'left-right', isPausedWhenNotInView: true, states : { "default-state": { gradients: [ ['#ff9966', '#ff5e62'], ['#00F260', '#0575E6'], ['#e1eec3', '#f05053'] ] } } }); 

Just to make sure it covers the whole parent element, also include this in one of your CSS files;

 #canvas-basic { position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; } 

If you've successfully made it so far, you can call the function by simple adding this canvas anywhere you want the animation to appear.

 <canvas id="canvas-basic"></canvas> 

Have a question, or anything you want to add? Let me know in the comments :)