This is the fifth day of my participation in the First Challenge 2022.
- Best Practices for Cookie Notifications
- Ravidu Perera
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: jaredliw
- Proofread by Z zhaojin and CarlosChenN
Cookies are short strings used primarily for authentication to establish a user session. In recent years, cookies have also been used to track user information, such as browser Settings and preferences, to improve a website’s user experience.
Under the General Data Protection Regulation (GDPR), all websites are required to inform users about the content of the data they track in their cookies.
This article explores some best practices for cookie notifications to minimize their impact on the user experience (UX) and user interface (UI).
Do Cookie notifications break the user experience?
While it’s important to inform users about the data that cookies track, the user experience can suffer if it’s not done correctly.
Here are some scenarios in which cookie notifications hinder the user experience.
1. Abrupt cookie notification on the mobile terminal
Example of an obtrusive cookie notification on mobile:
Notifications like the one shown above block out most of the screen real estate, preventing the user from accessing the content on the page. Such notifications will affect the availability of the site.
2. Cookie notifications with dummy options
Cookie notification with no reject option:
As shown above, cookie notifications without an appropriate description of cookie usage, change preferences, or reject options will mislead users and ultimately force them to accept all cookies.
Forcing the user to accept the terms of the cookie notification:
Best practices for building cookie notifications
Let’s look at some best practices for cookie notification!
1. Place notifications correctly
Cookie notifications are usually placed at the top, bottom, or corner of a page. This keeps the main content of the site from being blocked by notifications.
Cookie notification placed in the corner of the page:
The best practice is to place notifications at the bottom of the page; This way, the main content is still displayed as expected, and notifications don’t appear as obtrusive on the page.
Recommended cookie notification placement:
Regardless of the location of the notification, it is important to ensure that it takes up minimal space.
Cookie notifications can also be displayed in a modal view. However, this takes the user’s attention away from the content; We should use this approach carefully. Unfortunately, pop-ups are still the strategy used today by most sites that require cookie consent.
A cookie notification that takes up too much unnecessary space:
(Photo: awin.com)
2. Mobile adaptation
When browsing the web on mobile devices, even a header or footer can take up most of the page space.
Therefore, we need to ensure that notifications are responsive and take up minimal screen space on mobile devices.
Notification size comparison on mobile:
The example above shows that cookie notifications (Figure 2), which take up less space on the mobile end, are more comfortable and less obtrusive.
3. Correct and descriptive buttons
Provide users with a short description of cookie usage and the option to allow/deny/change Settings.
A descriptive cookie notification:
Cookie notification with custom options and descriptive buttons:
4. Provide flexible and customized functions
Giving users the option to customize their cookie preferences gives them more control over the data the site tracks.
These features include:
- Change cookie preference Settings;
- Enable users to enable non-essential cookies to improve the user experience;
- An overview of the functionality of the different cookie categories, along with instructions for recommended categories.
Cookie notification with custom options:
In cookie Settings, grouping options is very important; It helps users quickly identify and select the desired group rather than manually selecting/deselecting each suboption.
Cookies are easy to delete, but deleting them can make some websites difficult to navigate. In addition, without cookies, users would have to re-enter their data every time they visited the site. Different browsers store cookies in different places.
Example of grouping cookies:
Adding a short description to each cookie category helps the user determine which category to choose for a better user experience.
Provide description information for each cookie category to better guide users:
5. By default, unnecessary cookies are disabled
Enable the necessary cookies to run the site by default, and allow the user to choose to enable other non-necessary cookies in the Settings.
StackExchange disables non-essential cookies by default:
Note: If the site only collects anonymous data and does not violate GDPR, you may choose not to display cookie notifications.
Most cookies are only used for persistent state. Cookies keep you logged in to a website. This means you’ll be logged in every time you visit the site, saving you the time and effort of re-entering your password. Your account will be logged out if you delete your cookie.
Some websites may also use third-party cookies; These cookies do not violate your privacy and disabling them may cause problems with the website.
6. Improve cookie notification performance
Some sites use third-party management cookie scripts or services to manage cookie notifications.
By asynchronously loading cookie scripts, we can ensure that these scripts do not block page loading.
Asynchronously loading third-party scripts:
<script src="https://mycookies.com/add-new-script.js" async>
Copy the codeHowever, asynchronous loading can cause the page to flicker; This is because the page changes shortly after the original site loads.
Tools such as CookieScript scanning can help improve cookie performance by viewing cookie usage.
Cookie report on my Medium page:
conclusion
Cookies play an important role in keeping web sites dynamic. Therefore, websites should inform users about the storage of personal data on websites and obtain their consent through cookie notifications.
It is the developer’s responsibility to present these necessary notifications in a user-friendly way, minimizing their impact on the UI and UX.
Hopefully, the best practices discussed in this article will help you build cookie notification with UI and UX in mind.
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.