What is a Website Cookie & How to Design Better Cookie Popups
on 16 August 2022, by Bogdan, in Blog, Cloud, Guides
by Bogdan
In this post, we’ll cover what a website cookie is and how to design better cookie popups.
Although a majority of users tend to have a negative connotation toward website cookies, more websites are adopting them. Over 41% of websites on the internet today use cookies. This is because cookies provide website owners with an opportunity to offer their site visitors a personalized and more convenient experience. Web cookies are invaluable to site owners, whether you build your website via code-free solutions or have it coded from scratch.
Because site visitors natively have a negative nuance towards the cookie popup, you have to be careful about how you design it. And in this post, we'll show you how to design better cookie popups.
We’ll cover in this article:
What is a website cookie and why is it important?
Web cookies or HTTP cookies are small pieces of data from a specific website stored on the users' computers while browsing a website. They have a unique ID and can be used to identify a user’s device, as a result. More than one cookie can be stored on a user's device during a single session. As a site owner or admin, web cookies are useful in the following:
- Help to offer a personalized experience to users.
- Cookies can be used to remember users' login details and other personal information. Consequently, they can close the website and open it again without having to log in again. For example, social media accounts (Facebook, Twitter, etc.)
example of Cookie Notification popup by Clint Kadera on Dribbble
- Sending targetted advertisements
- Cookies help in tracking a user’s browsing activity to serve them targeted ads for goods or services. For example, let’s say you have a domain registration website using cookies. Users who accept your cookies will start getting your sponsored/promoted ads on their social media accounts.
- Session management
- For e-commerce websites, web cookies can help to manage client sessions in the following way. The contents of a customer’s shopping cart are stored on a server instead of the cookie on the client. With cookies, you can keep track of the specific user who has been assigned a particular shopping cart. To do this, the server sends a cookie to the client with a unique session identifier. Each time a user makes a request, that session identifier will be sent back to the server every time the user visits a new page on the website, which lets the server know which shopping cart to display to the user.
- Track the number of visitors your site gets
- Web cookies allow website owners to track the exact number of unique visitors they’re getting since each cookie has its unique ID. Suppose a user visits a website more than once, cookies will enable you to count this as a single unique viewer.
Types of website cookies
Different types of cookies are classified based on their functions.
- Session cookies - Retain user activity information as long as they are on the website, helping websites recognize users. They’re deleted once the browser is closed.
- Permanent/Persistent cookies - Remain active after the browser has been closed. Can be used to save users’ information such as passwords, or addresses so that they don’t have to re-enter each time they want access
- First-Party cookies - These are installed on the user’s device by the domain of the website they’re visiting. They help websites to deliver a personalized experience to users.
- Third-party cookies - These are installed by 3rd-parties (i.e not of the domain of the website users are visiting) usually advertisers who want to ensure that their advertisements are reaching the right audience.
- Flash cookies - some users create this type of cookies to be permanently stored on users' devices.
- Zombie cookies - These are a type of flash cookies that become re-activated after a user has deleted them.
example of Cookie Notification popup by Ben Paterson on Dribbble
Users' negative nuances toward website cookies are mainly due to third-party cookies. This is because they can be used to track them without their consent, and this is subject to legal action under data privacy.
Tips to Design Better Cookie Popups
Cookies, just like other popups can be somewhat tricky to design. This is also because the cookie consent falls under the General Data Protection Regulation (GDPR), which requires you to seek client consent before allowing your servers to send cookies to their devices. The good news is that you can follow some general guidelines to ensure your popups are compliant with the legal system and that they don’t hamper your users’ experience.
Below are some considerations to take into account to design better cookie popups
- Present alternative CTA buttons clearly
Having the ‘Accept All’ button only on your cookie popup notification is unacceptable, no pun intended! This compels your users to a single option, especially if the notification covers a significant portion of their screens. Customers who are concerned with data privacy will likely abandon your website to search for alternative sources.
In addition to the 'Accept all' button, you must also present the 'Manage your cookie preferences’ and or 'Reject All' if the cookies are not essential for your customers to use your website. Also, you should provide the following information:
- Make it clear that your site uses cookies.
- Inform them what the cookies are doing and why.
This is so that users know exactly what they're consenting to.
2. Determine proper placement on the page
Unless there's no other option, you should ensure that your cookie popup is not hindering any content on your page. So this leaves us with the header, footer, or a simple popup in the corner.
It wouldn't be ideal to place your cookie popup on your header because it could obstruct the nav menu, causing your users to have trouble navigating through your site. At the same time having it cover the footer would block out your contact information or otherwise constrict the content on your pages to which your users are exposed to. The best way to do this would be to have just a popup on the side. This way it is least intrusive.
3. Make it mobile-friendly
It is crucial to pay a lot of attention to your cookie consent notification's mobile responsiveness. This is because a head or footer can easily cover the majority of a mobile phone’s screen. And even if you place your cookie notification as a simple popup on the side of a desktop, it could appear very large on a mobile device if you don’t make it mobile-friendly. When you design this popup, ensure to use relative sizing units such as em, rem, and percentage(%), instead of pixels (px).
4. Match its design with that of the rest of your website
Your cookie popup needs to complement your website. Therefore, its design, including typography and color schemes need to be synonymous with the rest of your website. However, you need to do this in a way that the popup doesn’t disappear into the background. One way to do this would be to use a slightly lighter version of your site’s color schemes.
Because users are very cautious of third-party cookies, having a cookie popup that has been designed differently from the rest of your site can lead them to believe that it is from a third-party source. They will likely reject the cookies, this is daunting if your site’s functionality is heavily dependent on these cookies.
5. Use color blocks if your site has background images
Background images can hinder the readability of your cookie consent notification, especially if they are of a similar color scheme, for example, light grey and white. Using color blocks will make the popup a lot easier to read. It doesn’t have a completely solid color, you can reduce the opacity by 20% so that you don’t block out the background image completely. Ensure the color block also matches the rest of your page. For example, if your color scheme is white, jumping to a green color block would not be appropriate. It can be grey or white. In the example above, the site uses the black color block because the site has an overall dark theme.
Content management systems make it a lot easier to build whole websites and page sections such as the cookie popup code-free. However, for complex options where you want to customize the cookie notifications, you would need to install third-party apps. For example for WordPress, you’ll have to install plugins such as Cookie Notice and Cookie Bot to customize your site’s cookie popup notification. Additional plugins come with slowing your site down and compatibility issues in some cases. This makes designing cookie popups complicated and you will likely not end up implementing the best practices for designing these notifications.
You can avoid all this and design bold but captivating cookie popups using the Brizy Popup builder. And in the next section, we’ll show you how.
Design Better Cookie Popups with Brizy Popup Builder
Brizy Popup Builder is a renowned solution for easily creating on-click popups or those with triggers and conditions. With Brizy’s best-in-class Popup builder, you can design stylish cookie popups and decide when and where they will appear on your website. You get full control over how you customize your cookie popup without having to install 3rd-party solutions. The Brizy Cloud platform contains everything you need, including hosting and subdomains, absolutely free.
You can create your own custom popup from scratch or import a template and customize to your liking. With relative units at your disposal, you can generate mobile-friendly cookie popups, so that you don’t inconvenience mobile phone users.
You can also choose where to display your popup. Here’s a few examples of using Popups with creative twists:
That’s not all, you’ll work on your popup live and get visual feedback in real time as to how it will look. With the Brizy Popup builder, you can also:
- Link anything - This allows you to link any container or element on the page.
- Have external popups - Suppose you have websites on other platforms such as Squarspace or Wix, you can build your Popups on Brizy and export them to these platforms.
You can also invite members to help you to design your cookie popups and manage their access.
This is just an overview of what the Brizy popup builder brings to the table. Now let’s go through a step-by-step process of how you can design your cookie popups
How to create an effective cookie popup for your site with Brizy Popup
With Brizy, you can build popups for sites
- already made with Brizy, with the internal Popups tool (see video tutorial)
- external popups for your existing site that is NOT developed with Brizy.
Below, we'll go through the 2nd use case, the external Popups functionality which enables anyone to create a notifications popup and embed it in any existing site.
Step 1: Create a Brizy Cloud account
First, go to the Brizy Cloud website: https://www.brizy.io/cloud and sign up for an account. Click the Get Started button then Get Started for free.
Provide your credentials on the next page to complete your sign-up. You’ll also need to verify your account from the email address you provide.
Step 2: Create a new project
Once signed in, click on the create a new project button.
Select the popup alert option in the middle. Next, hover on your project and click on Edit Popup and you’ll be taken to the Brizy editor page.
Step 3: Customize your popup
Click on the plus(+) button in the middle to start building your popup, you will be directed to the blocks page. If you had selected the Pro version during set up, you will have access to 50+ popup templates from which you can select and start customizing.
Cookie popup templates are under notifications. If you selected the free plan, click on the create your own button.
Cookie popup templates are under notifications. If you selected the free plan, click on the create your own button.
Step 4: Save your cookie popup
When you’re done customizing, your popup, click on Save draft. Then click on the button on the options button on the bottom left and select Go to dashboard.
Your cookie popup will be saved on your Brizy Cloud dashboard. You will be able to export this popup to external websites by copying the code and pasting it on the footer tag of your external website.
So that’s it on designing better cookie popups using the Brizy Popup Builder.
Conclusion
Cookie popups are invaluable to websites today that aim to provide a personalized experience to site visitors. Intrusive and poorly designed popups can cause site visitors to abandon a website. Because cookie popups are delicate to design, content management systems, often require external apps to enable users to customize these notifications. This is not the case with Brizy Cloud which has a built-in popup builder to enable you to design impactful cookie consent notifications effortlessly. You can also import your cookie popups to external websites after building them.
Start building better websites today!
Article by Bogdan
Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io
RESOURCES
Choose Roadmap for
You will be redirected to our external roadmap boards on Trello
