Проектируем согласие на обработку данных в e-commerce приложении

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

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

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

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

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

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 приложениях.

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

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

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