Как стать автором
Обновить

Как приготовить хорошие cookies: 57 гайдлайнов

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров1.8K

Технология cookies позволяет персонализировать сайт и сделать его более удобным для клиента. Но он должен дать своё согласие на их использование. Казалось бы: что сложного в том, чтобы спроектировать сообщение о согласии с cookies? Но, как и всегда, есть много нюансов и подводных камней, а статья содержит множество примеров того, как делать не стоит.

Это один из 20+ чек-листов по UX/UI в e-commerce. Все они будут доступны в моем профиле на Habr. Статья без спойлеров, с примерами, открытыми по умолчанию, доступна по этой ссылке.

Подпишитесь на выход новых статей в Telegram и делитесь этим материалом с коллегами.

Структура статьи

Чтобы облегчить восприятие, статью я разбил на смысловые блоки. Внутри каждого из блоков — подробный чек-лист:

1. Размещение сообщения

Присутствует в интерфейсе

Если вы отслеживаете поведение пользователей, хорошей практикой будет оповестить их об этом. Половина интернет-магазинов из Data Insight Топ-100 с этим согласны.

Leroy Merlin✅
Leroy Merlin

Привычно расположено

Как и в случае со многими другими элементами, по cookies уже сложились паттерны размещения: чаще всего мы ожидаем увидеть их в нижней части экрана.

СпортМастер✅
СпортМастер

Фиксировано при скролле

Чаще всего сообщения об использовании cookies фиксируются и доступны при любом скролле страницы — пока мы их не закроем.

✅

Ничем не перекрывается

Убедитесь, что всплывающие блоки и фиксированные элементы не конкурируют и не перекрывают друг друга. В примере об этом моменте не позаботились.

Elyts❌
Elyts

Размещение в футере?

Паттерн, которому я не могу дать однозначную оценку: разместить cookies в футере. Сообщение не отвлекает клиента, но, с другой стороны, он его и не видит.

Мегафон?
Мегафон
?

2. Формат сообщения

Небольшое

Сообщение об использовании сайтом cookies — точно не элемент первостепенной важности для клиента. Поэтому не стоит занимать им пол-экрана.

Ozon✅
Ozon

Без пустых областей

Нет смыла оставлять в сообщении с согласием большое пустое пространство, которое никак не используется. Уж лучше просто сократить его размер.

Lamoda❌
Lamoda

Не блокирует интерфейс

Не заставляйте клиента соглашаться на использование cookies слишком агрессивно, блокируя весь остальной интерфейс. Ничего, кроме негатива, это не вызовет.

❌

Выделяется на фоне страницы

Согласие с cookies — отдельное сообщение и по-хорошему оно не должно сливаться с остальными элементами интерфейса и фоном страницы.

Ситилинк❌
Ситилинк

Консистентно между страницами

Как и в случае с другими элементами в рамках дизайн-системы, нет смысла плодить разные форматы согласия на двух смежных страницах сайта.

❌

В стиле сайта

Как ни крути, согласие с cookies — составная часть сайта. Поэтому хорошо, если оно будет перекликаться по стилю исполнения с другими элементами интерфейса.

Ozon✅
Ozon

Содержит иллюстрацию

Конечно же, о cookies можно рассказать сухо и официально. Но приятно видеть, когда кто-то заморочился и вдохнул в них чуть больше жизни, добавив иллюстрацию.

Детский Мир✅
Детский Мир

Иллюстрация в хорошем качестве

Если уж вы решили добавить иллюстрацию, позаботьтесь о том, чтобы она была загружена в приемлемом качестве, не размывалась и не пикселила.

Redmond❌
Redmond

Корректно свёрстано

Базовый момент: убедитесь в том, что блок корректно свёрстан и на экранах с разным разрешением его элементы не прилипают и не наезжают друг на друга.

Zarina❌
Zarina

3. Текст согласия

Краткий

Не стоит размещать в согласии на использование cookies полотно текста, которое лишь вызовет отторжение. Чем более кратким будет текст, тем лучше.

SuperStep❌
SuperStep

На языке клиента

По возможности не пишите текст согласия сухим юридическим языком, сделайте его простым и дружелюбным. Ведь согласие — всё же часть основного интерфейса.

МТС✅
МТС

Текст не мельчит

Понятно, что ценности для клиента в этом тексте мало, но не стоит делать его слишком уж мелким — таким, что его становится трудно прочитать.

Pazolini❌
Pazolini

Текст легкочитаемый

Выполните текст согласия в легкочитаемом шрифте и контрастном по отношению к фону цвете, чтобы избежать проблем с восприятием.

Globus❌
Globus

Текст без ошибок

Базовый, гигиенический момент: в тексте согласия — впрочем как и во всех остальных текстах на сайте — не должно быть ошибок. Вычитывайте тексты перед публикацией.

Кораблик❌
Кораблик

Причины использования

В тексте можно не просто сказать о том, что вы используете cookies, но и пояснить, для чего именно вы это делаете.

ЗдравСити✅
ЗдравСити

Фокус на клиенте

При этом можно подсветить, как использование cookies отражается на клиенте, как оно обогащает его опыт взаимодействия с сайтом.

Беккер✅
Беккер

Без объяснения значения cookies

Объяснять, что такое cookies, и вдаваться в подробности лучше на отдельной странице. Делать это в рамках согласия будет излишне.

Henderson❌
Henderson

Без указания юридического лица

Указывать название юридического лица также не стоит — это излишне. Особенно если оно не совпадает с названием бренда. Это лишь вызовет ненужные вопросы.

Lacoste❌
Lacoste

Пояснение по отключению cookies

Также достаточно честная, хотя и необязательная, практика для клиента — пояснить, где можно отключить cookies, если уж он решил не делиться данными.

BrandShop✅
BrandShop

4. Ссылка на описание работы

Содержится в сообщении

Разместите в сообщении ссылку на страницу с описанием работы cookies, чтобы у клиента была возможность узнать больше об обработке персональных данных.

СберМаркет✅
СберМаркет

Выделяется на фоне текста

Ссылка должна выделяться на фоне остального текста сообщения, чтобы клиент не гадал, можно на неё нажать или нет.

Акушерство❌
Акушерство

Вызывает интерес

Это нестандартный момент, но если у вас есть хорошо оформленная страница с описанием ценности cookies, текст согласия может побуждать узнать об этом больше.

СберМаркет✅
СберМаркет

Ведёт на целевую страницу

Если вы предлагаете узнать о cookies подробнее, клиент ожидает что-то о них узнать. Логично? Но в этом примере на целевой странице о cookies вообще ни слова.

❌

5. Страница с описанием

Доступна на сайте

Будьте прозрачны для своих клиентов: расскажите о сборе cookies более подробно на отдельной странице.

Incanto❌
Incanto

Открывается в новой вкладке

Открывайте страницу с описанием cookies в новой вкладке, чтобы клиент по ошибке не ушёл с сайта полностью, попытавшись её закрыть.

❌

Мобильная оптимизация

Учитывая, что клиент может ознакомиться с описанием работы с cookies с любого устройства, убедитесь, что контент оптимизирован под чтение со смартфона.

М.Видео❌
М.Видео

Контент структурирован

Конечно, контент по работе с cookies можно представить в виде унылой «простыни» текста, но некоторые подходят к этому вопросу с умом, разбивая текст на блоки.

Lamoda✅
Lamoda

Содержит описание cookies

Утолите интерес любознательных клиентов и подсветите в рамках страницы, что именно cookies из себя представляют.

МТС✅
МТС

Описывает причину сбора cookies

Также на странице можно более детально описать, для чего вы собираете cookies, почему это важно и как их использование отразится на самом клиенте.

Elyts✅
Elyts

Подсвечивает типы cookies

Хорошей практикой будет рассказать о каждом из типов используемых cookies, а также подсветить, как каждый из них влияет на опыт клиента.

Детский Мир✅
Детский Мир

Объясняет процесс отказа

Классно, когда вы открыты перед клиентами и не прячете описание процесса отказа от cookies. Мало кто в результате откажется, а вот плюс к карме таким ходом заработаете.

Shopping Live✅
Shopping Live

Содержит инструкции по настройке

Повысить градус ориентации на клиента ещё сильнее можно, не просто рассказав ему, что cookies можно управлять, но и дав ссылки на инструкции по тому, как это делать.

еАптека✅
еАптека

Без призывов уйти

Если клиент не хочет, чтобы его cookies обрабатывались, лучше предложить ему изменить настройки в браузере. Но предлагать уйти в таком случае с сайта — это уже перебор.

Ситилинк❌
Ситилинк

На понятном языке

Чтобы улучшить восприятие контента, вместо официальных текстов, подготовленных юристами, лучше сделать описание на человеческом языке, простыми словами.

ВкусВилл✅
ВкусВилл

Не содержит ошибок

Понятно, что мало клиентов посетят этот раздел. Но, как и со всеми текстами на сайте, будьте добры, вычитывайте описание работы с cookies, не допускайте ошибок.

Перекрёсток Впрок❌
Перекрёсток Впрок

Шрифт легко читается

Если вы приводите длинный документ, по возможности выполните его в легкочитаемом шрифте. Не заставляйте клиента напрягать зрение.

СберМаркет❌
СберМаркет

6. Кнопка согласия

Добавлена в сообщение

Если ваше согласие не исчезает само и требует от клиента действия, сделайте его более интуитивным — добавьте в сообщение кнопку.

М.Видео✅
М.Видео

Не слишком мелкая

Сделайте кнопку согласия на использование cookies достаточно большой, чтобы по ней легко было кликнуть и не промахнуться.

Baon❌
Baon

Не слишком большая

При этом, выполняя требования предыдущего пункта, главное — не перестараться и не сделать её слишком большой. Во всём важно знать меру.

Befree❌
Befree

Контрастна по отношению к фону

Сделайте кнопку достаточно контрастной по отношению к фону, чтобы клиент мог сразу её заметить и закрыть сообщение. Кнопка должна выглядеть активной.

No One❌
No One

Содержит аффорданс

Иными словами, выглядит, как кнопка. Это упростит её восприятие и позволит без каких-либо затруднений закрыть сообщение.

RalfRinger❌
RalfRinger

Реагирует на наведение

Сделайте кнопку интерактивной, чтобы она реагировала на наведение курсора, тем самым делая интерфейс более отзывчивым.

✅

Текст гендерно-нейтральный

Если вы не знаете пол клиента, лучше сделать текст кнопки гендерно-нейтральным. Предлагать женщине нажать на кнопку «Я согласен» — неидеальное исполнение.

Аптека.ру❌
Аптека.ру

Без вариаций гендера

Еще более неказисто упаковывать согласие так, будто клиент ещё не определился с тем, кто он. Ну ведь есть же альтернативы: «Ок», «Понятно», «Принять» и т.д.

Hoff❌
Hoff

7. Кнопки прочих действий

Если согласие — просмотр сайта

Если в качестве согласия выступает дальнейший просмотр сайта, кнопки согласия может не быть в принципе. Вместо неё в сообщении можно разместить крестик.

Буквоед✅
Буквоед

Отказ от cookies

Помимо кнопки согласия, также можно встретить и кнопку отказа от cookies. Но как минимум в российском e-commerce такая практика очень редкая.

Ригла?
Ригла
?

Настройка cookies

Более элегантное решение — дать клиенту самому выбрать типы cookies. Из-за особенностей регулирования чаще встречается на Западе, чем у нас.

FlowWow✅
FlowWow

8. Закрытие сообщения

При нажатии на кнопку согласия

Базовый момент: если клиент соглашается с условиями, сообщение должно исчезать с экрана.

✅

При нажатии на крестик?

Некоторые также снабжают сообщение кнопкой закрытия. Но если согласие — продолжение просмотра сайта, такая кнопка может быть дублирующей и излишней.

Ригла?
Ригла
?

При переходе к описанию

Если в ваше сообщение можно лишь закрыть, и клиент перешёл по ссылке, чтобы узнать больше о cookies, его можно скрывать — ведь клиент уже его заметил.

❌

Автоматическое скрытие

Некоторые компании не утруждают клиента нажимать на кнопку для закрытия сообщения: спустя некоторое время оно исчезает само.

✅

Отсчёт до скрытия сообщения

Если сообщение исчезает автоматически, progress bar помогает лучше управлять ожиданиями клиента относительно того, когда это произойдет.

✅

To be continued…

Несмотря на кажущуюся простоту, согласие с cookies скрывает в себе много нюансов, а свобода в его проектировании порождает кучу ошибок.

Надеюсь, этот материал помог вам прокачать насмотренность, а кому-то из вас — ещё и поправить недочёты, сделав согласие с cookies лучше.

Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если хотите их не пропускать. На связи.

Теги:
Хабы:
Всего голосов 7: ↑3 и ↓4+1
Комментарии3

Публикации

Истории

Работа

Веб дизайнер
27 вакансий

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
AdIndex City Conference 2024
Дата26 июня
Время09:30
Место
Москва
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область