current position：Home>Best practices for cookie notification
Best practices for cookie notification
2022-06-24 08:38:14【Nuggets translation program】
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 .
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 ：
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 .
author[Nuggets translation program],Please bring the original link to reprint, thank you.
The sidebar is recommended
- On BOM and DOM (3): DOM node operation - element style modification and DOM content addition, deletion, modification and query
- Embrace cloud native, Tencent releases TCSs container security service!
- Is there any way for FC in react+ts to set the component of function keyword
- How to write the V-model of vue2/3 custom components?
- Error using vuescoll!
- When HTML accesses the parent directory, the file content cannot be displayed normally in the browser after reading
- How to embed tabelau in the front page of react
- Vue component communication data does not update rendering
- It is very convenient to use ECs to build a drawing bed and hexo one click deployment
- How does webstorm set the bootstrap auto prompt
guess what you like
Nginx cross domain understanding, simulation and solution
Front page exercise
How to hide the value in El form item in Vue and set the value of input box to be read-only
Springboot+vue to realize campus second-hand Mall (graduation design I)
Node. JS installation
Summary of 2022 blue team HW elementary interview questions
Screenshot of angular page (scroll bar displays completely)
How to repair garbled code in HTML
- Springboot+vue project tourism information recommendation system [source code open source]
- Ultra wideband pulse positioning scheme, UWB precise positioning technology, wireless indoor positioning application
- Elementui used tabs to step on the pit
- Ant Design Vue - remove the input component border and the border blue shadow effect when getting focus
- Get httponly protected cookies across sub domains through XSS
- Coding specification - Vue project
- Code specification - HTML
- Code writing specification - CSS
- CSS Notes 6
- Quickly set up PgSQL for serverless
- 404405 troubleshooting after Vue uses proxy packaging
- Vue3 TS learning
- What is the charm of python, which is warmly pursued by countless programmers?
- HTML Basics
- CSS Foundation
- CSS (PC side) three methods of traditional page layout
- Inline element, block element, inline block element
- 19、 Lua garbage collection of enterprise rapid development platform spring cloud+spring boot+mybatis+elementui
- Detailed introduction to render props and high-level component hoc in react tutorial
- Introduction to high order components (HOC) in react tutorial
- Front end and back end love and hate -- sequel
- When Vue adds on-demand loading to the UI library and starts the project, an error is reported in babel-preset-es2015
- Select in element uses typescript to define initial data, which has no effect
- Vue video player of Vue player plug-in
- React configuration component path reference @ to represent SRC root path
- Use less and CSS modules in react scaffold Engineering
- Plug in download instructions and introduction of Vue in the web front end, NPM, install, save
- Summary of front-end common interview questions
- Vue hook function
- Monitor page rotation in Vue, and display in full screen on echarts mobile terminal
- Webpack learning notes series 07- how it works
- Webpack learning notes series 06- Packaging Optimization
- Webpack learning notes series 08-hmr hot update
- [Vue] understanding and thinking of new features based on Vue 3