I am ready for a long road flight for work with a week- or months-long projects.

Оценка клиентского опыта

E-commerce

Приложения

Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

Проектируем согласие на обработку данных

35 моментов, которые стоит учитывать

Законодательство заботится о нашей с вами приватности. Поэтому с некоторого момента во время авторизации компании стали спрашивать нашего согласия на сбор и обработку персональных данных.

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

Несмотря на кажущуюся простоту, есть много моментов, которые стоит учитывать при их проектировании – как в области UI, так и в UX, и при написании текстов. Сегодня мы все их разберем. Как всегда, детально, с примерами и антипримерами.

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

Станислав Хрусталёв

Автор hardclient.com

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

Хоть статья и небольшая, для облегчения восприятия я разбил ее на несколько смысловых блоков:

Видимость блока с согласием
Текст согласия
Ссылки на документы
Чекбоксы и их отсутствие
Согласие на маркетинговые коммуникации
Полный текст документов

Видимость блока с согласием

3 гайдлайна

Виден только при регистрации

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

Пример ● Ozon

Визуально вторичен

Текст согласия с политиками – точно не первый элемент по важности при авторизации пользователя. Поэтому он не должен визуально кричать и слишком сильно выделяться.

Пример ● 12STOREEZ

Виден по умолчанию

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

Пример ● Wildberries

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

13 гайдлайнов

Минимален по объему

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

Пример ● МегаМаркет

Не привязан к тексту кнопки

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

Пример ● Kalina Malina

Не привязан к гендеру

Если у вас не чисто мужская или женская аудитория, лучше сделать текст гендерно-нейтральным: например, "я соглашаюсь" вместо "я согласен".

Пример ● Stockmann

Без неопределенного рода

Однако в попытке сделать текст гендерно-нейтральным лучше не использовать неопределенный род: "я ознакомился (-ась)". Есть и более удачные альтернативы.

Пример ● Мой SPAR

Привязан к процессу

Текст согласия должен соответствовать текущему процессу, в котором находится пользователь: если я зарегистрирован и выполняю вход, зачем говорить мне про регистрацию?

Пример ● Буше

Привязан к контексту

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

Пример ● Дром База

Части текста согласованы

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

Пример ● Wildberries

Без пунктуационных ошибок

Заметил этот момент неоднократно, поэтому также добавлю: деепричастные обороты в тексте согласия с политиками обособляются запятыми.

Пример ● Достаевский

Без орфографических ошибок

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

Пример ● Cozy Home

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

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

Пример ● Технопарк

Полная локализация

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

Пример ● SHEIN

Общепринятые формулировки

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

Пример ● Lichi

Без символов обязательности

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

Пример ● Леонардо

Ссылки на документы

5 гайдлайнов

Без дублирования ссылок

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

Пример ● Цех85

Ссылки выделяются в тексте

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

Пример ● Снежная Королева

Умеренное выделение ссылок

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

Пример ● SimpleWine

Подчеркивание ссылок

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

Пример ● Бетховен

Единая ссылка на документы

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

Пример ● Додо Пицца

Чекбоксы и их отсутствие

5 гайдлайнов

Без чекбоксов

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

Пример ● СберМаркет

Чекбокс активен по умолчанию

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

Пример ● FlowWow

Кликабелен не только чекбокс

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

Пример ● Ekonika

Понятно, что действия не требуется

В некоторых случаях чекбоксы или аналогичным элементы выполняют в таком виде, что непонятно, нажаты они или нет. Лучше так не делать.

Пример ● Cozy Home

Единое согласие со всеми документами

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

Пример ● Fitness Formula

Согласие на маркетинговые коммуникации

3 гайдлайна

Без единого согласия с рассылками

Однако не стоит объединять согласие с политиками и согласие на получение рассылок, не оставляя возможности отказаться от них. Это нечестно по отношению к клиенту.

Пример ● Sunlight

Рассылки не активированы по умолчанию

На контрасте с согласием с политиками, более user-friendly будет дать клиенту возможность самому активировать чекбокс согласия с рассылками, не делая это за него.

Пример ● Дикси

Шеринг данных пользователя?

Встречаются кейсы клиента просят делиться данными не только с сервисом, но и с его партнерами. Как считаете, какие плюсы и минусы у такого подхода? Жду в комментах.

Пример ● Почта России

Полный текст документов

6 гайдлайнов

Текст в контуре приложения

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

Пример ● PetShop

Оптимизирован под mobile

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

Пример ● Быстроном

В полноэканном формате

Полный текст условий и политики конфиденциальности лучше разместить в полноэкранном формате. А всплывающие окна лучше оставить для десктопов.

Пример ● Четыре Лапы

Вписывается в экран

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

Пример ● Novex

Структурирован и форматирован

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

Пример ● СпортМастер

Возврат к тому же экрану

Ознакомившись с политикой, клиент должен возвращаться на тот экран, с которого он изначально перешел (в примере возврат идет не на экран авторизации, а на главную).

Пример ● Sela

To be continued...

Согласие с политиками – хоть и небольшой, но часто встречаемый элемент в процессе авторизации пользователей в e-commerce приложениях.

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

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

Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!

Все статьи по e-commerce