1. Web Design
  2. UX

Designing for User Habits and Routines

Scroll to top
Read Time: 12 min

For the last couple of years I’ve been paying close attention to my own habits, looking at my routines to find out what makes me more productive and happier. After deliberately adopting one habit I’d then move onto the next one. Playing with my own routines I’ve decided to allocate some time and write a book.

After doing some research, I’ve become very curious as to how habit building theories are applied in designing digital interfaces. In the age of social media and affordable smart devices, people are prone to suffering from digital addiction.

According to SocialTimes, 18% of social media users can’t bear to be disconnected for a few hours.

“18% of social media users can’t go a few hours without checking Facebook." - SocialTimes (Dec. 30, 2014)

In this article, I’d like to dig deeper into the habit building process and how it can be applied when creating interfaces that engage and change people’s behaviour.

What are Habits?

Illustration from Catriona Cornett’s article How Habits Can Impact User Behavior

In The Power of Habit: Why We Do What We Do in Life and Business, Charles Duhigg explains the process of habit creation. At the core of every habit is a simple neurological loop that comprises three parts:

  • Cue: A cue is “a trigger that tells your brain to go into automatic mode and which habit to use.” Triggers can include places, times of day, emotions, and more.
  • Routine: In response to the cue, you perform an action. It can be a physical action like drinking coffee, or a cerebral one like Googling a question.
  • Reward: This is the benefit you get from completing the routine. It’s the part that tells your brain that the action is worth repeating over again. The reward can be anything, a feeling of joy, a boost of energy, a question answered.

Nir Eyal’s HOOK Model

A habit is a routine of behavior that is repeated regularly and tends to occur unconsciously. According to Nir Eyal, author of Hooked: How to Build Habit-Forming Products

“Habits are impulses to do behaviors with little to no conscious thought.”

The HOOK model, below, is a simple graphic by Nir Eyal explaining four parts: Trigger, Action, Reward, and Investment. After researching habits and behavior changes, Nir analyzed many huge companies like Facebook, LinkedIn, Pinterest, Instagram (to name just a few) which have changed the habits of millions all around the world.

A Trigger or as Charles Duhigg calls it, a cue, causes individual to take an action. Triggers can be internal or external. Think of strong emotions like loneliness, boredom, stress, uncertainty, that are internal triggers and ads, friend recommendations, messages, weather that are external triggers.

An Action or routine is what the trigger causes a person to do afterward. Actions on the web can be scrolling, refreshing, tapping, playing, listening, liking and so on.

A Reward is simply something a person is craving for. This can take the form of recognition, acceptance, joy, competition, material and information rewards.

The Investment is what users are prepared to do in order to get more rewards, Nir Eyal, introduced this habit loop addition after seeing how repeated rewards add up, like LinkedIn connections, that make you easily invest more time in using the platform. Investments are for future benefits, such as money, personal data, effort, time, social capital.

Investments lead to other triggers and the cycle repeats, leaving users hooked. Think of all social networks: they have “following”, commenting and liking functions for a reason.

The HOOK is an experience designed to connect the user’s problem to your solution. Image by Nir Eyal.
LinkedIn HOOK breakdown. Image by Nir Eyal.

The reason why LinkedIn has over 340 million users is that LinkedIn is superb at executing a hook which makes connecting with other professionals more rewarding after each connection. Everyone wants to build an influential network so people keep connecting.

Building and Changing Habits

Why would you want to build or change the habits of your users? Nir emphasizes some of the main reasons why you should think of doing so:

  • Habits increase customer lifetime value
  • Habits provide greater pricing flexibility
  • Habits supercharge growth. “Hooked” users don’t churn
  • Habits improve a business’s defensibility. It’s hard to get someone to stop using a product that they use without thinking.

How Are Digital Habits Formed?

Habits are formed by social pressure, peer pressure and culture. I grew up with digital technology and for me Twitter is as simple and normal as a TV or microwave is for my mom.

Culture and surroundings are also very important. There’s a trend of not being able to live in the moment, you feel a need to text, snap, capture, record and share every single thing. It’s becoming a big issue, especially for the younger generation, the Fear Of Missing Out or FOMO is a huge factor accelerating the formation of digital habits.

Research published on Wikipedia, states that habit formation is the process by which a behaviour, through regular repetition, becomes automatic or habitual. This process of habit formation can be slow. In 2010, Phillippa Lally found the average time for participants to reach the asymptote of automaticity was 66 days with a range of 18–254 days.

Instagram That Thing

When users use your website, app, or software they will start developing habits automatically. If the habit loop is simple enough, they will be repeatedly craving for a reward your product offers. Think of how quickly Instagram hooks people and becomes a “Instagram that thing” habit.

Users, after using your product numerous times, usually learn the path to the goal they are looking to achieve. Whether it’s to order a book, upload a photo or post a message they will do it much faster than at the very beginning when they were just familiarising with the environment. Take texting as an example; people tap with one finger on their smartphones for the first time, but given some time their texting speed increases exponentially, not even requiring them to looking at the screen. That’s the power of habit.

Simplify Cues

Make sure to work on simplifying and keeping consistent cues or triggers to activate the urge for the reward. Many websites place their login form in a prominent place. Things like saved login credentials help users to get the routine and eventually to the reward faster.

How to Identify Your Users’ Habits

The identification process starts with observing culture, defining your target audience, breaking it down into segments and looking for habits that can be replicated or replaced.

Think of the internet. Dr. David Greenfield, a pioneer in the field of virtual addiction and founder of the Center for Internet and Technology Addiction in Connecticut, believes that texting is simply a subset of the larger Internet addiction disorder.

“Everyone feels like they lose track of time and space when they use the Internet,” 

Greenfield says. 

“That means that it’s psychoactive—in other words, it’s a digital drug.” 

That’s the experience you want to achieve with your product or service.

Once you identify the habits of your potential users, break them down by using the afore mentioned HOOK model and see what you can apply to your own product or service. Notifications and that wait time of a new like or comment excite people; analyze why and how you can replicate that.

However, don’t try to guess what your users are doing on your website. Conduct usability tests and work with existing users to find out how they interact with your product or service. Come up with some hypothesis and use click tracking, screen recording tools to write down what your users do and after you start seeing patterns in their behaviour, validate your hypothesis or look for new ones.

There are tools that can help you conduct usability, accessibility and contextual observation research results.

Crazy Egg

Visualize where your visitors click through Crazy Egg’s heat map and scroll map reports. Get an understanding of how your visitors engage with your website.


Hotjar is a new and easy way to truly understand your web and mobile site visitors. Identify your hottest opportunities for improvement using this all-in-one analytics and feedback tool.

Heat Maps for SumoMe

Heat Maps shows you exactly where people are clicking on your site. With this information, you can then improve your pages to show your visitors what they want to see.


UserTesting is a user research platform that gives you access to a large panel of users. Get videos of users while they perform specified tasks on your website or app, so you can see and hear where they get confused and frustrated.


Another great way to validate your speculations is to use data and analytics. Many analytic software providers will allow you to break down the browse paths and most common ways users use your website. Make sure you pay close attention to returning users and the ones who spend the most consistent time: they might be the ones hooked the most, you want to analyze these users and replicate them.

Google Analytics

Google Analytics is one of the best free tools that any website owner can use to track and analyze data about web traffic.


Woopra offers real-time analytics tracking, whereas Google Analytics can take hours to update. It shows you live visitor stats, including where they live, what pages they are on now, where they’ve been on your site and their web browser.


Kissmetrics allows you to track the movements of individual visitors throughout your website. You can see how behaviors change over time, identify patterns and see the most typical and recent referrers, among other stats.


Mixpanel is an analytics platform for the mobile and web, supporting businesses to study consumer behavior.

How Redesigns can Ruin Your Product

People tend to use your product or service based on habits, even a slight change can have a huge impact on users that will get them lost and frustrated with no logical reason (because habits are subconscious).

If content is moved, deleted, or modified in any way, it can be disorienting and frustrating for users who expect to find the content (the reward) based on their previous behaviors.

In my case, I redesigned Despreneur a couple of months ago, keeping just the main structure and changing every single detail on the website. Unfortunately, after the redesign bounce rate (which represents the percentage of visitors who enter the site and then leave “bounce” rather than continuing on to view other pages within the same site) raised nearly ten times. If I had only known then about the HOOK model and habits on the web, I’d have done it differently!

Despreneur’s bounce rate jumped nearly 10 times.

Preventing a Redesign Ruining Your Product

This is very simple: carry out small, iterative changes that do not scare your users. Run small A/B tests to find out what works best for particular parts of your design, whilst at the same time training your users to new routines but not overwhelming them too much.

Some of the following tools will help you to slowly redesign your website and keep your users happy and most important hooked.

WP Experiments

WP Experiments is a powerful WordPress plugin for making unlimited tests with your content. Easily change button texts, paragraphs, titles, or anything else on your website and see how your audience reacts.

Visual Website Optimizer

Visual Website Optimizer lets you run A/B, multivariate and split URL tests using a simple visual editor and provides insightful analytics.

Title Experiments Free

This free WordPress plugin allows you run split (A/B) tests of multiple titles for a post and discover which gets more page views.

Nelio AB Testing

Free WordPress plugin for running A/B experiments on your website. It helps you define, manage, and keep track of A/B-testing experiments.

Playing With Colors

Another crucial thing you want to get right is colors. Play with contrast to trigger your actions and increase the conversion rate. Without users taking first step you lose an opportunity to form habits within your potential customer.

A study by Piotr Koczorowski of proves that using contrast instead of switching colors will increase your conversion rate much more. You can certainly use color contrast in your web designs to influence people’s choices and form certain habits as they will unconsciously have a priority of clicking one thing over other based on visual hierarchy, as contrast will make it look more important.

A drastic majority of clicks (almost 75%) was directed towards the contrasting orange CTA.

Make sure that the background colors are natural and neutral. Johs Byers from Studiopress speaks of a method to create a hierarchy of 3 colors on your website: background, base, and accent colors. Background and base are meant to support the accent color, which is contrastiing to the rest.

Next time you’re browsing a gallery of sites look for the background, base, and accent colors.
  • Background Color: This color is used the most and sets the general tone and feel of the site.
  • Base Color: This color is used to break up the background and is typically the baritone, the middle child, neither boring nor flashy but the glue that holds it all together.
  • Accent Color: This color is used the least but gives the site its personality. Unless you’re using a monochromatic color scheme, your accent color will have a stark contrast to both your background and your base color.


Designing better products and services is not that easy, especially when you need users to build new habits and keep them coming back for more. In this article, I’ve touched on a lot of topics, from habits to social interaction, psychology, human behaviour, testing and color theory.

I hope this article will help you to better understand how to design for behavior change. I’m always up for new ideas and conversations, tweet me at @tomaslau.

Sources and Further Reading:

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.