Cookie Banner UI Kit: Design Consent and Disclaimers Users Can Trust

The word ‘privacy’ has increasingly become a hot-button issue in our web-dominated lives. Now, more than ever, we have all the information we could ever want right at our fingertips, on any device. Many of the experiences that provide this information require us to surrender some form of data through the use of cookies. Often, websites collect this information without the user being fully aware.

In the wake of last year’s discussions around data privacy surrounding Facebook, and the implementation of the European Union’s General Data Protection Regulation (GDPR), mobile-app development agency Impekable has created a very timely UI kit for Adobe XD, containing all sorts of modals that can be used to help inform users about how their data will be collected.

The Cookie Banner UI Kit comes out just in time for World Interaction Design Day, which takes place on September 24 and is centered around the very important theme of ‘Trust and Responsibility.’

This UI kit makes it a cinch for designers to easily incorporate relevant privacy-warning modals into their interfaces. The kit includes numerous modals for both desktop and mobile uses cases, giving designers many choices for their projects.

A rendering of a design workflow for incorporating cookie banners and modals into desktop and mobile interfaces.

Here’s how designers can jump right into this kit:

  1. Download the Cookie Banner UI Kit for Adobe XD. If you don’t have XD installed, you can download Adobe XD for free.
  2. Open the UI kit using Adobe XD.
  3. Paste your desktop or mobile website designs directly into the artboard behind the cookie banner components. Alternatively, you can also copy and paste the cookie banners directly on top of your designs.
  4. Adjust fonts, colors, and any content to your liking.
  5. Experiment with the elements in the UI kit to see which combinations work best for your project.

The importance of creating a UI kit with modals for privacy warnings

Privacy is a timely topic in design that’s not going away any time soon. Impekable’s senior manager of UX and design, Yvonne Ko, talked to us about the motivation for making this kit in the first place.

“Due to the recent debates regarding data privacy, there have been important laws introduced, like GDPR in 2018, that regulate the way businesses handle the data privacy of users,” she explained.

Though GDPR came into effect only last year (it was technically adopted in 2016), it has already changed the way we interact with websites in one, crucial manner: your privacy surrounding cookies.

The Cookie Banner UI kit gives designers a range of privacy dialogs--from headers and footers to full-fledged modals and walls

“Now, websites must ask for your consent before using your cookies,” she said. “This comes in the form of clicking an ‘Accept’ button or checking a box.” This impacts more than just websites in the European Union; any website that could be accessed by users in the EU needs to pay attention to GDPR.

The Cookie Banner UI kit gives designers a range of privacy dialogs–from headers and footers to full-fledged modals and walls–from which to choose for their projects.

Websites now have to be more straightforward than ever with users about their private data, especially as far as cookies are concerned. Where this really counts for designers is the need to communicate this new transparency to site visitors in such a way that their UX doesn’t miss a beat. That’s where Impekable’s design decisions come into the picture.

Getting the UX for modals exactly right

Ensuring that the UX is smooth depends on getting the specific use cases right, when it comes to modal and non-modal dialogs.

“For cookie banners with a single CTA, we favor non-modal popups so the user can refer back to the content they were originally digesting. We switch over to modals when the user has to take crucial, focused actions and no longer needs to refer to the content behind the modal,” she said.

Depending on the need for consent and control designers must consider whether modal popups are more appropriate than non-disruptive banners.

Beyond this consideration, UX sensibilities are based on a fine sense of balance.

“Everyone has a right to consent to the use of their data and information. However, when users visit a website, they are likely visiting for a primary purpose, such as obtaining more information, making a purchase, or simply visiting for fun. Consenting to their data is secondary,” Yvonne stated.

“It is important to maintain a balance of catching the user’s attention without feeling disruptive, while still giving them an opportunity to complete their primary task. If the user’s original task is dependent on giving consent to his/her data, then it might be suitable to use a modal to draw greater attention.”

The key takeaway, when it comes to modal design, is really to understand the specific use cases. Then it’s up to designers to balance the need to catch a user’s attention without being disruptive.

Applying the theme of ‘trust and responsibility’ to modal design

The Cookie Banner UI kit helps designers see what sorts of dialogs are appropriate for specific use cases across mobile and desktop UIs. It also raises awareness about an important principle that designers need to promote.

“The theme of this year’s World Interaction Design Day is trust and responsibility. As designers, we have a responsibility to our users to build and maintain their trust regarding the use of their personal information,” she said.

World Interaction Design Day takes place on September 24, and is hosted in numerous cities across the globe. These are events highlighting design, designers, and their resulting impact in our communities. As we look forward to its approach, be sure to download the Cookie Banner UI Kit, so you can design for greater privacy and trust.