Blog

When it comes to design decisions on websites and how they affect the User Experience (UX), it’s important to recognize intent. Countdowns can serve many different purposes. Sometimes, a countdown begins after adding event tickets to your cart, acting as a courtesy to hold your seats until you check out. Other times, we see countdowns for when certain products are being released or launched.

How Countdown Timers Lead to Conversions

No matter the intention behind a countdown, they tap into the visitor’s psyche, influencing them to possess or experience something before it's no longer available. Psychologically, this is known as the Scarcity Principle.

Countdown timers create a sense of urgency, a limited-time offer can often motivate a conversion.

When a user sees a countdown, they feel an urge to act quickly or miss out on the sale or product. Decision-making isn’t as sharp when a user needs to act quickly, leading to instinctive conversions rather than going through a traditional consumer funnel.

Different types of countdowns have varying levels of effectiveness depending on their context, implementation, and intent.

Courtesy Countdowns

These countdowns give the user time to decide if they are going to convert or make a purchase. We see these timers when we add a very popular product to our shopping cart. When the timer hits 0:00, the item is then removed from the cart so other shoppers can buy it. We also see these courtesy timers for events, movies, or concerts. The venue wants to be respectful and give you time to go through the checkout process, holding your seats for you, but only for a certain amount of time. Eventually, it is only fair to other users to remove your cart so someone else can purchase your seats.

While this is courteous to other shoppers and even to the original buyer, these timers do pose some UX hurdles to be wary of. You want the timers to be long enough that the user doesn’t feel stressed or rushed, but not too long, to be courteous to other potential customers.

Launch Countdowns

These countdowns can be very exciting for the user base. We usually see these when a new product is coming out, like a new technoloogy or a video game. While it’s exciting for the user base, experiencing virtual launches can be a major pain if the website is not suited to handle a lot of traffic. The closer the timer gets to 0, the more traffic your website receives. If ill-prepared, the website could crash, experience incredibly slow load times, and be filled with errors, causing users to become very frustrated, especially if the product sells out despite a user being there on time.

Launches can have an exciting appeal, adding a fun and memorable experience for users, but it still creates a stressful enviroment.

Sale Banner Countdowns

These countdowns typically display how long a sale is happening as a banner at the top of the site. E-commerce sites use them for seasonal sales, and often these timers can have a large duration. They are pretty effective and can linger in visitors' minds and since the sales usually last a long time they are not as stress inducing on the users.

Urgency Countdowns

These countdowns, to me, are the most egregious when it comes to the user experience. They are more of an artificial countdown with a fairly short starting point, typically one hour, but they trigger for every visitor. For example, if your timer to get the sale hits 0, you can simply open the website again from an incognito window and gain another hour with the same exact countdown. Sometimes, they use language saying that you are a lucky randomly chosen user, despite every visitor getting the same countdown and message. The intent behind these countdowns is to prompt a quick and hasty sale. While these countdowns can be effective, they add an unnecessary sense of urgency to the users, and that stress and urgency can leave a negative impact on your user base.

Countdowns ultimately boil down to intent. If you are using a countdown for a deal on a product that is always going to be the same price (even after the countdown), then the intent here is malicious and taking advantage of the user. However, if your intent is to genuinely inform the user and offer a good deal with ample time then that is more acceptable.

How to Improve your Countdowns

Provide a reasonable duration - You could experiment and test out different durations to find a nice balance between conversions and urgency.

Make your Countdown Real and Relevant - If the countdown is all artificial and comes off as a gimmick, this can really hurt your brand's image. It’s important to create a real offer that a user will actually value.

Use a clear CTA - It’s important to make the action that you want the users to take clear and simple and easy to follow.

Whether used as a courtesy to hold items in a cart, to build excitement for product launches, or to signal limited-time sales, countdowns should be approached with care to avoid causing unnecessary stress or frustration for users. By providing reasonable durations, ensuring relevance, and using clear calls to action, countdowns can be effective while limiting the stress your userbase experiences.

It’s hard to balance User Experience (UX) design, marketing, and sales. Many companies that offer products or services use popups to generate leads and sales. While this satisfies marketing and sales, popups can be very frustrating for the end user and sometimes lead to a negative experience, they can even cause users to bounce away from your website completely. Understanding the various types of popups and their levels of intrusiveness can help you decide which popup is best for your brand if you absolutely must use one.

Entry Popups

Entry popups can be very annoying, especially when they’re the first thing you see when visiting a site. They interrupt the user’s browsing experience, distract them, and can be overwhelming.

If you must use Entry Popups on your website, it’s generally suggested to show entry popups only after a certain amount of time, once the user is a bit settled in, or after they’ve scrolled down the page a certain distance. Here are ways entry popups can be bad for UX:

• Negative first impression
• Longer load times
• Increased cognitive load

Exit Popups

An exit-intent popup is an overlay that appears as soon as a website visitor shows an intention to leave a page. When their cursor moves out of the browser’s main viewport, it triggers the exit-intent popup. These act as one last attempt to get the visitor to convert, make a purchase, or schedule a call.

They can be effective, and you don’t need to worry as much about bounce rates since the user is already leaving the website. Here are ways that exit popups can be bad for UX:

• False positives in detection
• Triggered by browser controls

Lightbox Popups

Lightbox popups usually take up the whole screen with a transparent or blurry background. These popups typically force the user to interact in some way, like having to pay to read the content.

Sometimes, lightbox popups promote deals, provide information about new product launches, or announce events like webinars. Here are ways that lightbox popups can be bad for UX:

• Full-screen obstruction
• Accessibility issues
• Forced interaction
• Difficulty in closing
• Longer load times

Gamified Popups

A Gamified popup is designed to encourage visitor interaction by incorporating a fun game element. You often encounter these on websites offering products. The most common one I see is a spinning wheel where you can win a coupon or free shipping. It’s a clever method to excite visitors, and if the deal is enticing enough, it can drive many conversions.

While I’m not a fan of popups in general, I quite like these when done well. Here are ways that Gamified Popups can detract from UX:

• Distracting
• Accessibility issues
• Can appear unprofessional
• Longer load times

Best Practices

If you need to use one of these types of popups on your website, there are a few best practices to follow to make the negative experience of popups less insufferable.

Make it Worth It – If your popup doesn’t offer something genuinely exciting or a good deal, maybe you shouldn’t use a popup at all. Remember, a popup interrupts your users flow, so if you’re going to show them something, it’s worth making sure it’s something they will actually care about.

Keep the CTA Simple and Specific – When it comes to UX, simplicity is king. Ensure your popup is direct and not too crowded or clunky.

Design it Well – Make sure the colors of the popups have contrast, the text is legible, and the CTA is easily clickable. Another important design element is ensuring the popup is easy to close. Far too often, the “X” in a popup is too small and hard to get rid of.

Test on Mobile Devices – Mobile makes up over 60% of all web traffic. If your popup looks bad on a phone or doesn’t work, you are losing out on sales and conversions. It’s crucial that the popup looks great and functions well on both mobile and desktop visits.

Limit the Popups – Your website should really only have one popup. If you start to abuse this and use too many popups, it can seriously disrupt your users’ experience and likely cause visitors to leave.

Technology changes, and sometimes these changes can affect your website, especially if your website relies heavily on certain dependencies like APIs, Content Management Systems (CMS), PHP, or plugins.

So what do you do when a big change happens?

Plan for the Change

Often, software changes aren’t serious for your website and can be routine, until things break. Whenever you see an announcement or news about a software change, inform your developer so you can prepare for any issues before they happen.

Assess the Impact of the Change

You can learn a lot by reading the documentation for the software change. For example, a changelog may offer vital information for you or your developer. In some cases, you may be able to work out the necessary steps before updating your software, but if you are unsure, contact your developer.

Create a Staging Environment for Testing

Never implement large software updates without testing. Using a staging environment allows you to test your website without any risks.

A staging environment is a separate space to investigate and fix any issues that arise.

Developers fixing issues on the staging site should document their process. Documentation can serve as a reference for future software changes and help future developers that may gain access to the website. Document anything you feel is important.

Prepare for the Launch

Preparation for implementing software changes can vary, but here are some tips to follow:

Update the software during a time when your user activity is low. This helps avoid disrupting your user base during peak hours. Also, ensure you or your team have enough time to implement the changes.

After making the software changes live, retest everything in the live environment in case there were issues not caught during staging, sometimes there could be edge case issues that were impossible to replicate in a staging environment.

Embrace the Change

While it can be frustrating when a software change breaks areas of your website, most updates add helpful features and improve security. Keeping your software up to date is crucial for maintaining a healthy, fast, safe, and user-friendly website.

Monitor the Performance

Once the software has been changed or updated, monitor your website. Ideally, everything continues to work as it should, or even better than before. Monitor your website for speed, reliability, and user satisfaction.

Be prepared for some support shakeout in case any issues arise, your users may find bugs that you missed in testing.

Measuring your website’s performance is crucial for ensuring it attracts visitors. Google Analytics data can help you determine what is or isn’t working effectively.

There are two ways to set up Google Analytics 4 (GA4): the traditional and most common setup method is through a GA4 tracking code, and the other method is by using Google Tag Manager. You can find a tutorial on setting up Google Analytics using Google Tag Manager in 2024 here. In this guide, we’ll focus on setting up GA4 in the traditional way, using a tracking code.

The first step is to create a GA4 property and data stream. In the bottom left corner of analytics.google.com, you’ll find a gear icon that takes you to the admin page. Click on the blue plus icon and then select “Property” from the dropdown menu.

Note: If you’ve never used Google Analytics before, visit analytics.google.com and follow the steps to create your first property.

Next, give your property a name. Many people choose the name of their company, brand, or website. Then, select your property’s main time zone and currency. Click “Next” to proceed.

You’ll be asked to select your business objectives. We recommend choosing “Get Baseline Reports” as other options may alter the data interface. Baseline reports offer simplicity and a wide range of data sets.

Click “Create” to continue.

Now, you need to configure your first data stream. Google Analytics can track data from three main sources: Web, Android App, or iOS Apps. For this tutorial, we’ll select Web.

Enter your website’s URL (e.g., https://www.example.com). Note that HTTPS is already selected. Give this data stream a name, such as your company’s brand or website name, unless you plan to have multiple data streams in your property. You’ll also be asked if you want to use Enhanced Measurement, which predicts events on your site to improve data accuracy. For example, Enhanced Measurement might create unique events for specific forms on your website. We recommend leaving Enhanced Measurement on, but you can toggle it off if needed.

Once your Property is set up, you’ll need to add your analytics tracking code to your website’s codebase. To locate your code, click the gear icon in the bottom left corner, navigate to “Data collection and modification,” and select Data Streams. Find your property, scroll down to “Google Tag,” and then click on “View Tag Instructions.”

If you’re using a CMS such as WordPress or Wix, you can choose your platform and follow the specific instructions for those CMS platforms. Alternatively, you can manually install your analytics code. You’ll find code that looks like this: <!-- Google tag (gtag.js) -->. Copy the entire code box and paste it into the code of every page of your website, immediately after the <head> element. Avoid adding more than one Google tag to each page.

Following these steps ensures that your website is properly configured to collect and analyze data using Google Analytics. By implementing these measures, you can make informed decisions to optimize your website and enhance the user experience for your visitors.

If you are a digital marketer or a data analyst, and you want to implement marketing and analytics tracking codes much faster, then Google Tag Manager is what you need.

What is Google Tag Manager?

Imagine you’re working for a company or an agency that helps different businesses, all of which have websites. It’s vital to gauge how well these websites are doing. One of the top tools for this job is Google Analytics. While Google Analytics is relatively easy to install on any website, it has limits. Custom data tracking to get around those limits is much more complicated. Before, this task required a developer to create the data tracking tags for your site. The only issue is that developers might not be as savvy with analytics tools as you are. Manually setting up tracking codes with a developer takes a while, involving a lot of back-and-forth. Plus, many developers have other priorities, and analytics might not be their top concern most of the time.

This is where Google Tag Manager can be very useful.

Google Tag Manager lets us take control of tracking codes on your own. Here’s a simple breakdown of how it works: you’ve got your website, your developer sets up Google Tag Manager, and then, you handle your tracking codes and all future analytics setup inside Google Tag Manager without the hassle of talking to a developer, ultimately saving everyone time.

What are the benefits to Google Tag Manager?

Organization

With Google Tag Manager all of the tracking codes are in one place. It’s much easier to find, manage, pause, or change your tracking tags.

Flexibility

Google Tag Manager makes you less dependent on developers. You can create very complex tracking codes without having to rely on your team.

Speed

Again, without having to rely on a developer, makes it so you can create data tracking tags at a significantly faster pace.

Community

Google Tag Manager has a massive community of users and experts. This means there are bound to be numerous tutorials and resources at your disposal to create complex tracking tags for your goals.

Getting Started with Google Tag Manager

To get started, visit tagmanager.google.com. If you have never used Google Tag Manager before, you will see a screen for creating an account; otherwise, you will land on a dashboard. In the account creation funnel, there are two main components: the account section and the container section.

The Account field is just the name of your business.

Below that, you have your containers. Containers are like buckets for storing your tracking codes. You could have separate containers for multiple platforms, such as websites, mobile apps, and servers. For this tutorial, we will be focusing on web tracking.

Once this is finished, you will see your container. Open that container, and you will see a dashboard. On the left side, there are many important sections that you will be interacting with frequently. There are Tags, Triggers, Variables, and Folders. So, every time you need to create a new tag, you will go to Tags, then click New and follow the process. You can also organize your tags, triggers, and variables into folders. This is helpful for staying organized if you will be creating many different tracking tags using Google Tag Manager.

In the top menu, there are multiple sections. Workspace is where you will spend the most time, and Versions is where you will be able to see a full history of changes you’ve made to the site’s codebase while using Google Tag Manager. This is helpful if something goes wrong; you can always undo changes by going back to old versions.

Creating your First Tag

Before creating a tag, it is important that you create a Google Analytics 4 account. If you do not already have one, you can create one at analytics.google.com.

In your Google Analytics 4 account, go to Admin → Data collection and modification → Data Streams. Here, you will find your website. Click on your website data stream to access more stream details. On this page, there is a unique ID number called “Measurement ID.” The code will start with a “G” and contain several numbers and/or letters, for example, “G-1XXX993XXX.” You will need to copy this Measurement ID for your first Google Tag in Google Tag Manager.

Now that you’ve found and copied your Measurement ID from Google Analytics 4, return to Google Tag Manager. Click on Tags, then New, followed by Tag Configuration. Click on Google Analytics, and select Google Tag. This is where you will paste the Measurement ID from Google Analytics. After pasting this, click on Triggering below, then select Initialization All Pages. You might find older guides suggesting to click All Pages, which should also work fine. However, the current recommendation is to click Initialization. Once these steps are complete, in the top left corner, you will need to name the tag; I suggest “GA4 Configuration,” then click Save.

You have now created your first tag in Google Tag Manager!

Testing your Tags

When you make new changes in your container, do not click submit right away. First, you need to ensure that your changes are working on your website.

For this example, we are checking if Google Analytics 4 is working on the site properly. Click on Preview in the top right corner, then enter or paste the URL of the page where you want to test your changes, and click Connect. Once you see that the tag assistant has connected, and you are now on the page that you entered, go back to the tag assistant tab, and click Container Loaded on the left side. You should see in the Tags Fired section that the GA4 tag you created has successfully fired.

You can also check if the tags you set up on Google Tag Manager are working on GA4. Go to your Google Analytics property, then Admin, and scroll down until you see Debug View. Here, you will see your events. If you do not see any events right away, give it a minute; sometimes, newer analytics properties take a bit more time for the debug view to begin working.

There is also a preview mode that opens on Google Tag Manager. On the left side, you will see a stream of Google Tag Manager events. These are not Google Analytics events; they are all related only to Google Tag Manager. All interactions while testing should appear in this left sidebar. You can click on these items to see more information about the tags. These tag details can help you troubleshoot any issues if the tag is not firing. If the tag is successfully firing, you will see green check marks under “Firing Triggers.”

Publishing your Tags

Now that your first tag is created, you must publish the tag. To publish your tags, there is a Submit button in the top right corner of Google Tag Manager. After clicking submit, it is good practice to write a version name and a version description. For this example, it can be something like “GA4 Setup.” If you do not provide these details for your tags, a year from now, it will be difficult for you to find what changes were made when looking at your workspace versions.

Once you’ve written a name and description, click publish, and the container is now updated to version 2. You can always find a history of your versions and changes under the Versions tab in the top menu.

If, for some reason, you made a mistake or an error, you can always roll back to previous versions in the container. You can do this by clicking on the three dots on the previous version, then click Publish, and click Publish a second time.

What can I use Google Tag Manager for?

There are so many things you can track in more detail using Google Tag Manager. One of my favorite things to track is clicks on specific buttons on a website. Google Tag Manager can also track much more, like form submissions, video interactions, file downloads, outbound and internal link clicks, custom JavaScript events, scroll tracking, and social media interactions.

Summary

This general process should be repeated every time you use Google Tag Manager. First, you create tags, triggers, and variables for the data you want to track. Then, you use preview mode and debug view to make sure the triggers and tags are working properly. Once everything is working properly, you submit your new version to the container after all of your data will begin collecting and eventually appear within your Google Analytics account.