Как приготовить хорошие cookies
Проектируем сообщение с согласием и страницу с описанием технологии
57
гайдлайнов
Технология cookies позволяет персонализировать сайт и сделать его более удобным для клиента. Но он должен дать свое согласие на их использование.
Казалось бы: что сложного в том, чтобы спроектировать сообщение о согласии с cookies? Но, как и всегда, есть много нюансов и подводных камней, а статья полна примерами того, как делать не стоит.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Казалось бы: что сложного в том, чтобы спроектировать сообщение о согласии с cookies? Но, как и всегда, есть много нюансов и подводных камней, а статья полна примерами того, как делать не стоит.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки. Внутри каждого из блоков – подробный чек-лист:
1. Размещение сообщения
Присутствует в интерфейсе
Если вы отслеживаете поведение пользователей, хорошей практикой будет оповестить их об этом. Половина интернет-магазинов из Data Insight Топ-100 с этим согласны.
Привычно расположено
Как и в случае со многими другими элементами, по cookies уже сложились паттерны размещения: чаще всего мы ожидаем их увидеть в нижней части экрана.
Фиксировано при скролле
Чаще всего сообщения об использовании cookies фиксируются и доступны при любом скролле страницы – пока мы их не закроем.
Ничем не перекрывается
Убедитесь, что всплывающие блоки и фиксированные элементы не конкурируют и не перекрывают друг друга. В примере об этом моменте не позаботились.
Размещение в футере?
Паттерн, которому я не могу дать однозначную оценку: разместить cookies в футере. Сообщение не отвлекает клиента, но, с другой стороны, он его и не видит.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
2. Формат сообщения
Небольшое
Сообщение об использовании сайтом cookies – это точно не элемент первостепенной важности для клиента. Поэтому не стоит занимать им пол-экрана.
Без пустых областей
Нет смыла оставлять в сообщении с согласием большое пустое пространство, которое никак не используется. Уж лучше просто сократить его размер.
Не блокирует интерфейс
Не заставляйте клиента соглашаться на использование cookies слишком агрессивно, блокируя весь остальной интерфейс. Ничего, кроме негатива, это не вызовет.
Выделяется на фоне страницы
Согласие с cookies – отдельное сообщение и по-хорошему оно не должно сливаться с остальными элементами интерфейса и фоном страницы.
Консистентно между страницами
Как и в случае с другими элементами в рамках дизайн-системы, нет смысла плодить разные форматы согласия на двух смежных страницах сайта.
В стиле сайта
Как ни крути, согласие с cookies – это составная часть сайта. Поэтому хорошо, если оно будет перекликаться по стилю исполнения с другими элементами интерфейса.
Содержит иллюстрацию
Конечно же, о cookies можно рассказать сухо и официально. Но приятно видеть, когда кто-то заморочился и вдохнул в них чуть больше жизни, добавив иллюстрацию.
Иллюстрация в хорошем качестве
Если уж вы решили добавить иллюстрацию, позаботьтесь о том, чтобы она была загружена в приемлемом качестве, не размывалась и не пикселила.
Корректно сверстано
Базовый момент: убедитесь в том, что блок корректно сверстан и на экранах с разным разрешением его элементы не прилипают и не наезжают друг на друга.
3. Текст согласия
Краткий
Не стоит размещать в согласии на использование cookies полотно текста, которое лишь вызовет отторжение. Чем более кратким будет текст, тем лучше.
На языке клиента
По возможности не пишите текст согласия сухим юридическим языком, сделайте его простым и дружелюбным. Ведь согласие – это все же часть основного интерфейса.
Текст не мельчит
Понятно, что ценности для клиента в этом тексте мало, но не стоит делать его слишком уж мелким – таким, что его становится трудно прочитать.
Текст легкочитаемый
Выполните текст согласия в легкочитаемом шрифте и контрастном по отношению к фону цвете, чтобы избежать проблем с восприятием.
Текст без ошибок
Базовый, гигиенический момент: в тексте согласия – впрочем как и во всех остальных текстах на сайте – не должно быть ошибок. Вычитывайте тексты перед публикацией.
Причины использования
В тексте можно не просто сказать о том, что вы используете cookies, но и пояснить, для чего именно вы это делаете.
Фокус на клиенте
При этом можно подсветить, как использование cookies отражается на клиенте, как оно обогащает его опыт взаимодействия с сайтом.
Без объяснения значения cookies
Объяснять, что такое cookies, и вдаваться в подробности лучше на отдельной странице. Делать это в рамках согласия будет излишне.
Без указания юридического лица
Указывать название юридического лица также не стоит – это излишне. Особенно если оно не совпадает с названием бренда, это может лишь вызвать ненужные вопросы.
Пояснение по отключению cookies
Также достаточно честная для клиента, хотя и необязательная практика – это пояснить, где можно отключить cookies, если уж он решил не делиться данными.
4. Ссылка на описание работы
Содержится в сообщении
Разместите в сообщении ссылку на страницу с описанием работы cookies, чтобы у клиента была возможность узнать больше об обработке персональных данных.
Выделяется на фоне текста
Ссылка должна выделяться на фоне остального текста сообщения, чтобы клиент не гадал, можно на нее нажать или нет.
Вызывает интерес
Это нестандартный момент, но если у вас есть хорошо оформленная страница с описанием ценности cookies, текст согласия может побуждать узнать об этом больше.
Ведет на целевую страницу
Если вы предлагаете узнать о cookies подробнее, клиент ожидает что-то о них узнать. Логично? Но в этом примере на целевой странице о cookies вообще ни слова.
5. Страница с описанием
Доступна на сайте
Будьте прозрачны для своих клиентов: расскажите о сборе cookies более подробно на отдельной странице.
Открывается в новой вкладке
Открывайте страницу с описанием cookies в новой вкладке, чтобы клиент по ошибке не ушел с сайта полностью, попытавшись ее закрыть.
Мобильная оптимизация
Учитывая, что клиент может ознакомиться с описанием работы с cookies с любого устройства, убедитесь, что контент оптимизирован под чтение со смартфона.
Контент структурирован
Конечно, контент по работе с cookies можно представить в виде унылой «простыни» текста, но некоторые подходят к этому вопросу с умом, разбивая текст на блоки.
Содержит описание cookies
Утолите интерес любознательных клиентов и подсветите в рамках страницы, что именно cookies из себя представляют.
Описывает причину сбора cookies
Также на странице более детально можно описать, для чего вы собираете cookies, почему это важно и как их использование отразится на самом клиенте.
Подсвечивает типы cookies
Хорошей практикой будет рассказать о каждом из типов используемых cookies, а также подсветить, как каждый из них влияет на опыт клиента.
Объясняет процесс отказа
Классно, когда вы открыты перед клиентами и не прячете описание процесса отказа от cookies. Мало кто в результате откажется, а вот плюс к карме таким ходом заработаете.
Содержит инструкции по настройке
Повысить градус ориентации на клиента еще сильнее можно, не просто рассказав ему, что cookies можно управлять, но и дав ссылки на инструкции по тому, как это делать.
Без призывов уйти
Если клиент не хочет, чтобы его cookies обрабатывались, лучше предложить ему изменить настройки в браузере. Но предлагать уйти в таком случае с сайта – это уже перебор.
На понятном языке
Чтобы улучшить восприятие контента, вместо официальных текстов, подготовленных юристами, лучше сделать описание на человеческом языке, простыми словами.
Не содержит ошибок
Понятно, что мало клиентов посетят этот раздел. Но, как и со всеми текстами на сайте, будьте добры, вычитывайте описание работы с cookies, не допускайте ошибок.
Шрифт легко читается
Если вы приводите длинный документ, по возможности выполните его в легкочитаемом шрифте. Не заставляйте клиента напрягать зрение.
6. Кнопка согласия
Добавлена в сообщение
Если ваше согласие не исчезает само и требует от клиента действия, сделайте его более интуитивным – добавьте в сообщение кнопку.
Не слишком мелкая
Сделайте кнопку согласия на использование cookies достаточно большой, чтобы по ней легко было кликнуть и не промахнуться.
Не слишком большая
При этом, выполняя требования предыдущего пункта, главное – не перестараться и не сделать ее слишком большой. Во всем важно знать меру.
Контрастна по отношению к фону
Сделайте кнопку достаточно контрастной по отношению к фону, чтобы клиент легче мог ее заметить и закрыть сообщение. Кнопка должна выглядеть активной.
Содержит аффорданс
Иными словами, выглядит, как кнопка. Это упростит ее восприятие и позволит без каких-либо затруднений закрыть сообщение.
Реагирует на наведение
Сделайте кнопку интерактивной, чтобы она реагировала на наведение курсора, тем самым делая интерфейс более отзывчивым.
Текст гендерно-нейтральный
Если вы не знаете пол клиента, лучше сделать текст кнопки гендерно-нейтральным. Предлагать женщине нажать на кнопку «Я согласен» – неидеальное исполнение.
Без вариаций гендера
Еще более неказисто упаковывать согласие так, будто клиент еще не определился с тем, кто он. Ну ведь есть же альтернативы: «Ок», «Понятно», «Принять» и т.д.
7. Кнопки прочих действий
Если согласие – просмотр сайта
Если в качестве согласия выступает дальнейший просмотр сайта, кнопки согласия может не быть в принципе. Вместо нее в сообщении можно разместить крестик.
Отказ от cookies
Помимо кнопки согласия, также можно встретить и кнопку отказа от cookies. Но как минимум в российском e-commerce такая практика очень редкая.
Настройка cookies
Более элегантное решение – дать клиенту самому выбрать типы cookies. Из-за особенностей регулирования чаще встречается на Западе, чем у нас.
8. Закрытие сообщения
При нажатии на кнопку согласия
Базовый момент: если клиент соглашается с условиями, сообщение должно исчезать с экрана.
При нажатии на крестик?
Некоторые также снабжают сообщение кнопкой закрытия. Но если согласие – это продолжение просмотра сайта, такая кнопка может быть дублирующей и излишней.
При переходе к описанию
Если в ваше сообщение можно лишь закрыть, и клиент перешел по ссылке, чтобы узнать больше о cookies, его можно скрывать – ведь клиент уже его заметил.
Автоматическое скрытие
Некоторые компании не утруждают клиента нажимать на кнопку для закрытия сообщения: спустя некоторое время оно исчезает само.
Отсчет до скрытия сообщения
Если сообщение исчезает автоматически, progress bar помогает лучше управлять ожиданиями клиента относительно того, когда это произойдет.
To be continued...
Несмотря на свою кажущуюся простоту, согласие с cookies скрывает в себе много нюансов, а свобода в его проектировании порождает кучу ошибок.
Надеюсь, этот материал помог вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав согласие с cookies лучше.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Надеюсь, этот материал помог вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав согласие с cookies лучше.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce