Как приготовить хорошие cookies
Проектируем сообщение с согласием и страницу с описанием технологии
57
гайдлайнов
Технология cookies позволяет персонализировать сайт и сделать его более удобным для клиента. Но он должен дать свое согласие на их использование.
Казалось бы: что сложного в том, чтобы спроектировать сообщение о согласии с cookies? Но, как и всегда, есть много нюансов и подводных камней, а статья полна примерами того, как делать не стоит.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Казалось бы: что сложного в том, чтобы спроектировать сообщение о согласии с cookies? Но, как и всегда, есть много нюансов и подводных камней, а статья полна примерами того, как делать не стоит.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки. Внутри каждого из блоков – более детальный чек-лист:
1. Размещение сообщения
5 гайдлайнов
Присутствует в интерфейсе
Если вы отслеживаете поведение пользователей, хорошей практикой будет оповестить их об этом. Половина интернет-магазинов из Data Insight Топ-100 с этим согласны.
Пример • Leroy Merlin
Привычно расположено
Как и в случае со многими другими элементами, по cookies уже сложились паттерны размещения: чаще всего мы ожидаем их увидеть в нижней части экрана.
Пример • Спортмастер
Фиксировано при скролле
Чаще всего сообщения об использовании cookies фиксируются и доступны при любом скролле страницы – пока мы их не закроем.
Пример • СберМаркет
Ничем не перекрывается
Убедитесь, что всплывающие блоки и фиксированные элементы не конкурируют и не перекрывают друг друга. В примере об этом моменте не позаботились.
Пример • Elyts
Размещение в футере?
Паттерн, которому я не могу дать однозначную оценку: разместить cookies в футере. Сообщение не отвлекает клиента, но, с другой стороны, он его и не видит.
Пример • Мегафон
2. Формат сообщения
9 гайдлайнов
Небольшое
Сообщение об использовании сайтом cookies – это точно не элемент первостепенной важности для клиента. Поэтому не стоит занимать им пол-экрана.
Пример • Ozon
Без пустых областей
Нет смыла оставлять в сообщении с согласием большое пустое пространство, которое никак не используется. Уж лучше просто сократить его размер.
Пример • Lamoda
Не блокирует интерфейс
Не заставляйте клиента соглашаться на использование cookies слишком агрессивно, блокируя весь остальной интерфейс. Ничего, кроме негатива, это не вызовет.
Пример • Etam
Выделяется на фоне страницы
Согласие с cookies – отдельное сообщение и по-хорошему оно не должно сливаться с остальными элементами интерфейса и фоном страницы.
Пример • Ситилинк
Консистентно между страницами
Как и в случае с другими элементами в рамках дизайн-системы, нет смысла плодить разные форматы согласия на двух смежных страницах сайта.
Пример • Самокат
В стиле сайта
Как ни крути, согласие с cookies – это составная часть сайта. Поэтому хорошо, если оно будет перекликаться по стилю исполнения с другими элементами интерфейса.
Пример • Ozon
Содержит иллюстрацию
Конечно же, о cookies можно рассказать сухо и официально. Но приятно видеть, когда кто-то заморочился и вдохнул в них чуть больше жизни, добавив иллюстрацию.
Пример • Детский мир
Иллюстрация в хорошем качестве
Если уж вы решили добавить иллюстрацию, позаботьтесь о том, чтобы она была загружена в приемлемом качестве, не размывалась и не пикселила.
Пример • Redmond
Корректно сверстано
Базовый момент: убедитесь в том, что блок корректно сверстан и на экранах с разным разрешением его элементы не прилипают и не наезжают друг на друга.
Пример • Zarina
3. Текст согласия
10 гайдлайнов
Краткий
Не стоит размещать в согласии на использование cookies полотно текста, которое лишь вызовет отторжение. Чем более кратким будет текст, тем лучше.
Пример • SuperStep
На языке клиента
По возможности не пишите текст согласия сухим юридическим языком, сделайте его простым и дружелюбным. Ведь согласие – это все же часть основного интерфейса.
Пример • МТС
Текст не мельчит
Понятно, что ценности для клиента в этом тексте мало, но не стоит делать его слишком уж мелким – таким, что его становится трудно прочитать.
Пример • Pazolini
Текст легкочитаемый
Выполните текст согласия в легкочитаемом шрифте и контрастном по отношению к фону цвете, чтобы избежать проблем с восприятием.
Пример • Globus
Текст без ошибок
Базовый, гигиенический момент: в тексте согласия – впрочем как и во всех остальных текстах на сайте – не должно быть ошибок. Вычитывайте тексты перед публикацией.
Пример • Кораблик
Причины использования
В тексте можно не просто сказать о том, что вы используете cookies, но и пояснить, для чего именно вы это делаете.
Пример • Здравсити
Фокус на клиенте
При этом можно подсветить, как использование cookies отражается на клиенте, как оно обогащает его опыт взаимодействия с сайтом.
Пример • Беккер
Без объяснения значения cookies
Объяснять, что такое cookies, и вдаваться в подробности лучше на отдельной странице. Делать это в рамках согласия будет излишне.
Пример • Henderson
Без указания юридического лица
Указывать название юридического лица также не стоит – это излишне. Особенно если оно не совпадает с названием бренда, это может лишь вызвать ненужные вопросы.
Пример • Lacoste
Пояснение по отключению cookies
Также достаточно честная для клиента, хотя и необязательная практика – это пояснить, где можно отключить cookies, если уж он решил не делиться данными.
Пример • Brand Shop
4. Ссылка на описание работы
4 гайдлайна
Содержится в сообщении
Разместите в сообщении ссылку на страницу с описанием работы cookies, чтобы у клиента была возможность узнать больше об обработке персональных данных.
Пример • СберМаркет
Выделяется на фоне текста
Ссылка должна выделяться на фоне остального текста сообщения, чтобы клиент не гадал, можно на нее нажать или нет.
Пример • Акушерство
Вызывает интерес
Это нестандартный момент, но если у вас есть хорошо оформленная страница с описанием ценности cookies, текст согласия может побуждать узнать об этом больше.
Пример • СберМаркет
Ведет на целевую страницу
Если вы предлагаете узнать о cookies подробнее, клиент ожидает что-то о них узнать. Логично? Но в этом примере на целевой странице о cookies вообще ни слова.
Пример • Самокат
5. Страница с описанием
13 гайдлайнов
Доступна на сайте
Будьте прозрачны для своих клиентов: расскажите о сборе cookies более подробно на отдельной странице.
Пример • Incanto
Открывается в новой вкладке
Открывайте страницу с описанием cookies в новой вкладке, чтобы клиент по ошибке не ушел с сайта полностью, попытавшись ее закрыть.
Пример • Акушерство
Мобильная оптимизация
Учитывая, что клиент может ознакомиться с описанием работы с cookies с любого устройства, убедитесь, что контент оптимизирован под чтение со смартфона.
Пример • М.Видео
Пример • М.Видео
Контент структурирован
Конечно, контент по работе с cookies можно представить в виде унылой «простыни» текста, но некоторые подходят к этому вопросу с умом, разбивая текст на блоки.
Пример • Lamoda
Содержит описание cookies
Утолите интерес любознательных клиентов и подсветите в рамках страницы, что именно cookies из себя представляют.
Пример • МТС
Описывает причину сбора cookies
Также на странице более детально можно описать, для чего вы собираете cookies, почему это важно и как их использование отразится на самом клиенте.
Пример • Elyts
Подсвечивает типы cookies
Хорошей практикой будет рассказать о каждом из типов используемых cookies, а также подсветить, как каждый из них влияет на опыт клиента.
Пример • Детский мир
Объясняет процесс отказа
Классно, когда вы открыты перед клиентами и не прячете описание процесса отказа от cookies. Мало кто в результате откажется, а вот плюс к карме таким ходом заработаете.
Пример • Shopping live
Содержит инструкции по настройке
Повысить градус ориентации на клиента еще сильнее можно, не просто рассказав ему, что cookies можно управлять, но и дав ссылки на инструкции по тому, как это делать.
Пример • еАптека
Без призывов уйти
Если клиент не хочет, чтобы его cookies обрабатывались, лучше предложить ему изменить настройки в браузере. Но предлагать уйти в таком случае с сайта – это уже перебор.
Пример • Ситилинк
На понятном языке
Чтобы улучшить восприятие контента, вместо официальных текстов, подготовленных юристами, лучше сделать описание на человеческом языке, простыми словами.
Пример • ВкусВилл
Не содержит ошибок
Понятно, что мало клиентов посетят этот раздел. Но, как и со всеми текстами на сайте, будьте добры, вычитывайте описание работы с cookies, не допускайте ошибок.
Пример • Впрок
Шрифт легко читается
Если вы приводите длинный документ, по возможности выполните его в легкочитаемом шрифте. Не заставляйте клиента напрягать зрение.
Пример • СберМаркет
6. Кнопка согласия
8 гайдлайнов
Добавлена в сообщение
Если ваше согласие не исчезает само и требует от клиента действия, сделайте его более интуитивным – добавьте в сообщение кнопку.
Пример • М.Видео
Не слишком мелкая
Сделайте кнопку согласия на использование cookies достаточно большой, чтобы по ней легко было кликнуть и не промахнуться.
Пример • Baon
Не слишком большая
При этом, выполняя требования предыдущего пункта, главное – не перестараться и не сделать ее слишком большой. Во всем важно знать меру.
Пример • Befree
Контрастна по отношению к фону
Сделайте кнопку достаточно контрастной по отношению к фону, чтобы клиент легче мог ее заметить и закрыть сообщение. Кнопка должна выглядеть активной.
Пример • No One
Содержит аффорданс
Иными словами, выглядит, как кнопка. Это упростит ее восприятие и позволит без каких-либо затруднений закрыть сообщение.
Пример • Ralf Ringer
Реагирует на наведение
Сделайте кнопку интерактивной, чтобы она реагировала на наведение курсора, тем самым делая интерфейс более отзывчивым.
Пример • Ozon
Текст гендерно-нейтральный
Если вы не знаете пол клиента, лучше сделать текст кнопки гендерно-нейтральным. Предлагать женщине нажать на кнопку «Я согласен» – неидеальное исполнение.
Пример • Аптека.ру
Без вариаций гендера
Еще более неказисто упаковывать согласие так, будто клиент еще не определился с тем, кто он. Ну ведь есть же альтернативы: «Ок», «Понятно», «Принять» и т.д.
Пример • Hoff
7. Кнопки прочих действий
3 гайдлайна
Если согласие – просмотр сайта
Если в качестве согласия выступает дальнейший просмотр сайта, кнопки согласия может не быть в принципе. Вместо нее в сообщении можно разместить крестик.
Пример • буквоед
Отказ от cookies
Помимо кнопки согласия, также можно встретить и кнопку отказа от cookies. Но как минимум в российском e-commerce такая практика очень редкая.
Пример • Ригла
Настройка cookies
Более элегантное решение – дать клиенту самому выбрать типы cookies. Из-за особенностей регулирования чаще встречается на Западе, чем у нас.
Пример • Flowwow
8. Закрытие сообщения
5 гайдлайнов
При нажатии на кнопку согласия
Базовый момент: если клиент соглашается с условиями, сообщение должно исчезать с экрана.
Пример • СберМаркет
При нажатии на крестик?
Некоторые также снабжают сообщение кнопкой закрытия. Но если согласие – это продолжение просмотра сайта, такая кнопка может быть дублирующей и излишней.
Пример • Ригла
При переходе к описанию
Если в ваше сообщение можно лишь закрыть, и клиент перешел по ссылке, чтобы узнать больше о cookies, его можно скрывать – ведь клиент уже его заметил.
Пример • Lamoda
Автоматическое скрытие
Некоторые компании не утруждают клиента нажимать на кнопку для закрытия сообщения: спустя некоторое время оно исчезает само.
Пример • Самокат
Отсчет до скрытия сообщения
Если сообщение исчезает автоматически, progress bar помогает лучше управлять ожиданиями клиента относительно того, когда это произойдет.
Пример • ВкусВилл
To be continued...
Несмотря на свою кажущуюся простоту, согласие с cookies скрывает в себе много нюансов, а свобода в его проектировании порождает кучу ошибок.
Надеюсь, этот материал помог вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав согласие с cookies лучше.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Надеюсь, этот материал помог вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав согласие с cookies лучше.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce