Пока готовлю для вас статью про процесс авторизации, я решил пройтись по рынку и посмотреть, как в паре сотен приложений реализованы блоки согласия с политикой конфиденциальности и прочими документами.
Структура статьи
Хоть статья и небольшая, для облегчения восприятия я разбил её на несколько смысловых блоков:
- Видимость блока с согласием
- Текст согласия
- Ссылки на документы
- Чекбоксы и их отсутствие
- Согласие на маркетинговые коммуникации
- Полный текст документов
Видимость блока с согласием
3 гайдлайна
Виден только при регистрации
Ряд крупных игроков отображают блок с согласием не при каждой авторизации, а лишь при первичной регистрации. И юридически, и с позиций здравого смысла это оправдано.
Пример ✅ Ozon
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_9B130FB4ABB4-1_1.jpeg)
Визуально вторичен
Текст согласия с политиками — точно не первый по важности элемент при авторизации пользователя. Поэтому он не должен визуально кричать и слишком сильно выделяться.
Пример ✅ 12STOREEZ
![](https://awdee.ru/wp-content/uploads/2024/02/12_STOREEZ.png)
Виден по умолчанию
Лучше разместить блок так, чтобы он не перекрывался экранной клавиатурой сразу же при переходе к экрану ввода номера и изначально был виден пользователем.
Пример ✅ Wildberries
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_AEBDE090BDE1-1_1.jpeg)
Текст согласия
13 гайдлайнов
Минимален по объёму
Чем меньше текста в блоке с согласием на обработку данных, тем более визуально вторичным он будет — и тем ниже шансы, что он станет отвлекающим фактором.
Пример ❌ МегаМаркет
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_513C443BCB92-1_1.jpeg)
Не привязан к тексту кнопки
Лучше не привязывать текст согласия к тексту кнопки целевого действия. Иначе есть риск, что текст кнопки в будущем обновят, а про текст согласия забудут.
Пример ❌ Kalina Malina
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_D28E54B5E9D0-1_1.jpeg)
Не привязан к гендеру
Если у вас не чисто мужская или женская аудитория, лучше сделать текст гендерно-нейтральным: например, «я соглашаюсь» вместо «я согласен».
Пример ✅ Stockmann
![](https://awdee.ru/wp-content/uploads/2024/02/Stockmann_1.png)
Без неопределенного рода
Однако в попытке сделать текст гендерно-нейтральным лучше не использовать неопределенный род: «я ознакомился (-ась)». Есть и более удачные альтернативы.
Пример ❌ Мой SPAR
![](https://awdee.ru/wp-content/uploads/2024/02/SPAR_1.png)
Привязан к процессу
Текст согласия должен соответствовать текущему процессу, в котором находится пользователь: если я зарегистрирован и выполняю вход, зачем говорить мне про регистрацию?
Пример ❌ Буше
![](https://awdee.ru/wp-content/uploads/2024/02/1.png)
Привязан к контексту
Также блок должен учитывать, где именно пользователь с ним знакомится: если я сейчас нахожусь в приложении, говорить про условия использования сайта не совсем релевантно.
Пример ❌ Дром База
![](https://awdee.ru/wp-content/uploads/2024/02/1-1.png)
Части текста согласованы
Базовый момент: убедитесь, что слова в тексте согласия с политиками согласованы друг с другом. Как показывает практика, даже лидеры рынка не всегда идеальны.
Пример ❌ Wildberries
![](https://awdee.ru/wp-content/uploads/2024/02/Wildberries_1.png)
Без пунктуационных ошибок
Замечал этот момент неоднократно, поэтому также добавлю: деепричастные обороты в тексте согласия с политиками обособляются запятыми.
Пример ❌ Достаевский
![](https://awdee.ru/wp-content/uploads/2024/02/1-2.png)
Без орфографических ошибок
Вычитывайте тексты в интерфейсах прежде, чем отправлять в production. Не допускайте базовых ошибок.
Пример ❌ Cozy Home
![](https://awdee.ru/wp-content/uploads/2024/02/COZY_HOME_1.png)
Без указания юридического лица
Чтобы текст согласия не был слишком массивным, название юридического лица в нём можно упразднить — большинство участников рынка же как-то справляются и без него.
Пример ❌ Технопарк
![](https://awdee.ru/wp-content/uploads/2024/02/1-3.png)
Полная локализация
Если вы работаете на различных рынках, не забывайте при локализации переводить все части текста согласия. Иначе он может вызвать недоумение.
Пример ❌ SHEIN
![](https://awdee.ru/wp-content/uploads/2024/02/SHEIN_1.png)
Общепринятые формулировки
Также при локализации контента приложения, чтобы не вызывать лишних вопросов, стоит уточнять общепринятые названия документов, с которыми соглашается клиент.
Пример ❌ Lichi
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_9A95E3DC3A10-1_1.jpeg)
Без символов обязательности
Звездочки, которыми помечаются обязательные поля, более уместны в относительно больших формах. В том, чтобы помечать ими согласие с политиками, нет особой нужды.
Пример ❌ Леонардо
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_C0BE291F6016-1_1.jpeg)
Ссылки на документы
5 гайдлайнов
Без дублирования ссылок
Чтобы блок не занимал слишком много места, гораздо лучше будет внедрить ссылки на политики в текст согласия, а не выносить их в качестве отдельных текстовых блоков.
Пример ❌ Цех85
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_1700B5292159-1_1.jpeg)
Ссылки выделяются в тексте
Если вы ссылаетесь на документы с политиками в тексте согласия, лучше выделить ссылки на фоне остального текста, чтобы клиент понимал, что на них можно нажать.
Пример ❌ Снежная Королева
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_E34B86C8BEDA-1_1.jpeg)
Умеренное выделение ссылок
При этом, так как сам блок согласия вторичен, лучше если ссылки не будут визуально «кричать». Например, их можно выполнить в том же цвете, но другом тоне.
Пример ✅ SimpleWine
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_4E694F3A4C38-1_1.jpeg)
Подчёркивание ссылок необязательно
В отличие от веба, в приложениях ссылки подчёркивать необязательно. Это также позволит визуально разгрузить интерфейс.
Пример ✅ Бетховен
![](https://awdee.ru/wp-content/uploads/2024/02/1-4.png)
Единая ссылка на документы
Вместо того, чтобы прописывать длинные названия всех документов, с которыми соглашается клиент, некоторые используют единую короткую ссылку, разгружая интерфейс.
Пример ✅ Додо Пицца
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_E5C209B24F8E-1_1.jpeg)
Чекбоксы и их отсутствие
5 гайдлайнов
Без чекбоксов
Наиболее элегантное решение — просто подписать рядом с кнопкой действия, что «продолжая, вы соглашаетесь с …» без добавления чекбоксов, чтобы не размывать фокус внимания.
Пример ✅ СберМаркет
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_26EF227A55E8-1_1.jpeg)
Чекбокс активен по умолчанию
Несмотря на требование, чтобы по умолчанию галочка не была нажата, во многих компаниях можно встретить обратное: согласие просто совмещают с тапом по кнопке авторизации.
Пример ✅ FlowWow
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_B0009C0E6438-1_1.jpeg)
Кликабелен не только чекбокс
Если и чекбоксы нажимать обязательно, эту задачу можно облегчить, сделав кликабельным не маленький чекбокс или тумблер, а более широкую область блока с согласием.
Пример ❌ Ekonika
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_2C7B4299DC16-1_1.jpeg)
Понятно, что действие не требуется
В некоторых случаях чекбоксы или аналогичным элементы реализуют в таком виде, что непонятно, нажаты они или нет. Так лучше не делать.
Пример ❌ Cozy Home
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_5BC3E022CACE-1_1.jpeg)
Единое согласие со всеми документами
Также по возможности согласие с разными документами лучше объединить в единый блок, чтобы не вынуждать клиента соглашаться с каждым из них по отдельности.
Пример ❌ Fitness Formula
![](https://awdee.ru/wp-content/uploads/2024/02/Fitness_Formula_1.png)
Согласие на маркетинговые коммуникации
3 гайдлайна
Без единого согласия с рассылками
Однако не стоит объединять согласие с политиками и согласие на получение рассылок, не оставляя возможности отказаться от них. Это нечестно по отношению к клиенту.
Пример ❌ Sunlight
![](https://awdee.ru/wp-content/uploads/2024/02/SUNLIGHT_1.png)
Рассылки не активированы по умолчанию
На контрасте с согласием с политиками, более user-friendly будет дать клиенту возможность самому активировать чекбокс согласия с рассылками, не делая это за него.
Пример ❌ Дикси
![](https://awdee.ru/wp-content/uploads/2024/02/1-5.png)
Шеринг данных пользователя?
Встречаются кейсы, когда клиента просят делиться данными не только с сервисом, но и с его партнерами. Как считаете, какие плюсы и минусы у такого подхода?
Пример ● Почта России
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_2C0AF6657EC1-1_1.jpeg)
Полный текст документов
6 гайдлайнов
Текст в контуре приложения
Также по возможности лучше не уводить клиента в браузер за контур приложения, и отображать его в рамках отдельного экрана или встроенного web view.
Пример ✅ PetShop
![](https://awdee.ru/wp-content/uploads/2024/02/Untitled-ezgifcom-vi.gif)
Оптимизирован под mobile
Базовый момент: текст соглашения с политиками должен быть оптимизирован под просмотр с мобильных устройств и не должен сильно мельчить.
Пример ❌ Быстроном
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_9B5AA3A7BF0F-1_1.jpeg)
В полноэканном формате
Полный текст условий и политики конфиденциальности лучше разместить в полноэкранном формате. А всплывающие окна лучше оставить для десктопов.
Пример ❌ Четыре Лапы
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_CEF471584AAF-1_1.jpeg)
Вписывается в экран
Спроектируйте экран c документом так, чтобы на смартфоне не требовалось прокручивать страницу в стороны для ознакомления с текстом.
Пример ❌ Novex
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_31CE8271C74C-1_1.jpeg)
Структурирован и форматирован
Если уж клиент и решит ознакомиться с соглашением, не превращайте его чтение в ад, отображая его в виде длинной простыни текста: структурируйте и форматируйте его.
Пример ✅ СпортМастер
![](https://awdee.ru/wp-content/uploads/2024/02/IMG_70F633472264-1_1.jpeg)
Возврат к тому же экрану
Ознакомившись с политикой, клиент должен возвращаться на тот экран, с которого он изначально перешёл. В примере возврат идёт не на экран авторизации, а на главную.
Пример ❌ Sela
![](https://awdee.ru/wp-content/uploads/2024/02/Untitled-ezgifcom-re.gif)
To be continued…
Согласие с политиками — хоть и небольшой, но часто встречаемый элемент в процессе авторизации пользователей в e-commerce приложениях.
И хорошо, если он будет спроектирован по всем канонам: будет предоставлять доступ к информации, но не будет слишком навязчивым и не будет усложнять процесс авторизации.
Надеюсь, эта статья поможет вам не наступить на грабли, на которые кто-то уже наступил, и почерпнуть хорошие идеи для улучшения интерфейса.
Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если не хотите их пропускать. На связи.
Обсуждение
Похожее
Анимация в мобильных приложениях
Two perspectives on the designer who Steve Jobs could not hire
Выжимка из 200+ консультаций для дизайнеров