This is my participation 2022 For the first time, the third challenge is 5 God , Check out the activity details ：2022 For the first time, it's a challenge .

• Original address ：Best Practices for Cookie Notifications
• Original author ：Ravidu Perera
• The translation comes from ： Nuggets translation plan
• Permanent link to this article ：github.com/xitu/gold-m…
• translator ：jaredliw
• Checked by ：Z Zhaojin 、CarlosChenN

Cookie Are short strings , It is mainly used for authentication to establish user session . In recent years ,cookie Also used to track user information （ For example, browser settings and preferences ） To improve the user experience of the website .

according to General data protection regulations （GDPR）, All websites must inform users about the website in cookie Data content tracked in .

This article will explore some cookie Best practices to follow when notifying , To minimize their impact on the user experience （UX） And the user interface （UI） Influence .

Cookie Will notification destroy the user experience ？

Although notify the user cookie The data tracked is very important , But if it is not implemented correctly , The user experience will be affected .

Here are cookie Notify some scenarios that hinder the user experience .

1. Abrupt on the mobile end cookie notice

An abrupt... On the mobile end cookie Notification example ：

The above notification will block most of the screen space , This prevents users from accessing the content on the page . Such notifications will affect the availability of the website .

2. In the form of a dummy option cookie notice

There is no reject option cookie notice ：

As shown above , There is no proper cookie Use description 、 There are no changes to preferences or rejection options cookie The notification will mislead the user , And finally force them to accept all cookie.

Forcing users to accept the terms cookie notice ：

structure cookie Best practices for notification

Let's take a look at some cookie Notification of best practices ！

1. Place notifications correctly

Cookie Notifications are usually placed at the top of the page 、 Bottom or corner . In this way, the main content of the website will not be blocked by the notice .

In the corner of the page cookie notice ：

The best practice is to place the notification at the bottom of the page ; thus , The main content can still be displayed as expected , And the notice will not appear so abrupt in the page .

The recommended cookie Notify the placement location ：

Regardless of the location of the notification , It is very important to ensure that it takes up a minimum of space .

Cookie Notification can also be made through a pop-up window （modal view） Exhibition . However , This will take the user's attention away from the content ; We should use this method with caution . It is a pity , Pop up display is still most needed nowadays cookie The strategy adopted by the agreed website .

One that takes up too much unnecessary space cookie notice ：

（ picture source ：awin.com）

2. Mobile adaptation

When browsing web pages on the mobile terminal , Even a header or footer May take up most of the page space .

therefore , We need to ensure that the notification is responsive , And occupy the least screen space on the mobile device .

Comparison of notification sizes on the mobile terminal ：

The above example shows that the mobile terminal takes up less space cookie notice （ chart 2） It can make users feel more comfortable and less abrupt .

3. Correct and descriptive buttons

Provide users with a brief cookie Use description and permission / Refuse / Change the set options .

Descriptive cookie notice ：

With custom options and descriptive buttons cookie notice ：

4. Provide flexible customization functions

Provide user-defined cookie The preferred options allow users to better control the data tracked by the website .

These functions include ：

• change cookie Preference settings ;
• Enables users to enable non essential cookie To enhance the user experience ;
• Different cookie Functional overview of the category , And attach an indication of the recommended category .

With custom options cookie notice ：

stay cookie In the set , It is very important to group options ; It can help users quickly confirm and select the required groups , Instead of manually selecting / Cancel each sub option .

General cookie It can be easily deleted , But deleting them may make some websites difficult to browse . Besides , If not used cookie, Users have to re-enter their data every time they browse the site . Different browsers will cookie Stored in different places .

take cookie Examples of setting up groups ：

For every one cookie Adding short descriptions to categories can help users determine which categories to choose for a better user experience .

For each cookie Categories provide descriptive information to better guide users ：

5. By default, unnecessary cookie

By default, the necessary to run the web site is enabled cookie, It also allows the user to select and enable other unnecessary... In the settings cookie.

StackExchange Unnecessary... Is disabled by default cookie：

notes ： If the website only collects anonymous data and does not violate GDPR, You can choose not to show cookie notice .

Most of cookie For persistent state only .Cookie It allows you to stay logged in to the website . This means that you will be logged in every time you browse the site , It saves time and effort to re-enter the password . Your account will be withdrawn if you delete your cookie.

Some websites may also use third parties cookie; these cookie It won't invade your privacy , Disable these cookie May cause problems with the website .

6. Improve cookie Notification performance

Some websites use third-party management cookie Scripts or services to manage cookie notice .

Through asynchronous loading cookie Script , We can ensure that these scripts do not hinder the loading of the page .

Load third-party scripts asynchronously ：

<script src="https://mycookies.com/add-new-script.js" async>
 Copy code 

However , Asynchronous loading may cause the page to blink ; This is because the page changes again soon after the original website is loaded .

We can use some tools （ Such as CookieScript scanning ） see cookie Usage situation , Help us improve cookie Performance of .

my Medium Page cookie The report ：

summary

Cookie It plays an important role in keeping the website dynamic . therefore , The website should be through cookie Notifications tell users about personal data storage on the site , And get their consent .

It is the developer's responsibility to present these necessary notifications in a good way for the user , Minimize its impact on UI and UX Influence .

Hopefully, the best practices discussed in this article will help you think about UI and UX Better build cookie notifications .

If there are errors in the translation or other areas that need to be improved , Welcome to Nuggets translation plan Revise the translation and PR, You can also get bonus points . At the beginning of the article Permanent link to this article That's what this article is about GitHub Upper MarkDown link .

Nuggets translation plan It is a community that translates high-quality Internet technology articles , The source of the article is Nuggets Share articles in English on . Content coverage Android、iOS、 front end 、 Back end 、 Blockchain 、 product 、 Design 、 Artificial intelligence Other fields , If you want to see more excellent translations, please keep your eyes on Nuggets translation plan 、 Official micro-blog 、 Know about columns .