Интерфейс не убеждает и не заставляет — он снижает или повышает стоимость решения. Каждый элемент либо помогает человеку понять, что происходит и что будет дальше, либо добавляет сомнение. Ниже — приёмы, которыми мы пользуемся при проектировании, и, что важнее, границы их применимости: большинство «психологических правил» из статей ломается на реальных задачах.
Цвет: важный сигнал, но не единственный
Цвет быстрее текста притягивает внимание и задаёт настроение: красный уместен для ошибок и необратимых действий, зелёный — для подтверждений. Но вешать смысл на один только цвет нельзя, и вот почему.
- Часть аудитории не различает отдельные оттенки: красная и зелёная строки в таблице для этих людей выглядят одинаково.
- На дешёвом мониторе, на солнце и в ночном режиме оттенки меняются до неузнаваемости.
- Печать и снимок экрана в переписке лишают цвет смысла полностью.
Поэтому статус всегда дублируется формой: значком, подписью, положением в списке. Отдельно проверяем контраст текста к фону по требованиям доступности — для обычного текста нужно не меньше 4,5:1, для крупного 3:1. Светло-серые подписи на белом фоне, которые так любят в макетах, этот порог не проходят.
Культурные значения цвета помним, но не переоцениваем: внутри одного рынка на решение сильнее влияют привычные шаблоны отрасли, чем символика оттенка.
Расположение и пределы паттернов сканирования
Люди не читают страницу целиком, а просматривают её по краям блоков — отсюда известные схемы движения взгляда по форме буквы F или Z. Схемы полезны как напоминание: важное не прячут в середину длинного абзаца и не уводят вправо вниз.
Но у них есть границы. Схема F описывает поведение на странице со сплошным текстом, а не на карточке товара, где взгляд идёт по картинке и цене. Схема Z описывает простые макеты с малым числом элементов. На мобильном экране ширина не оставляет места для горизонтального сканирования, и порядок становится линейным.
Практичнее держаться простых правил: одно главное действие в блоке, ответ на вопрос страницы в первом экране, повтор призыва на длинных страницах, а порядок блоков совпадает с порядком вопросов клиента — что это, кому подходит, сколько стоит, что дальше.
Стоимость выбора и число вариантов
Чем больше равнозначных вариантов, тем дольше решение и выше вероятность, что человек отложит его совсем. Это не повод оставлять один тариф — это повод помогать сравнивать.
- Три-четыре тарифа с ясным различием работают лучше семи с похожими наборами.
- В большом каталоге сокращают не товары, а число вариантов за один шаг: фильтры, подборки, раздел с популярным.
- Различие описывается словами клиента: «для одного сайта», «для сети магазинов», а не «пакет расширенный».
- Рекомендованный вариант помечают, но остальные оставляют одинаково доступными.
Тот же принцип в формах. Каждое лишнее поле — отдельное решение, а поля, назначение которых непонятно, часто становятся причиной ухода. Мы просим обосновать каждое поле: кто и когда будет пользоваться этими данными.
Тексты: кнопки, ошибки, подписи
Формулировка меняет поведение сильнее, чем оттенок кнопки. Работают три правила.
- Кнопка называет результат, а не действие браузера: «Получить расчёт» вместо «Отправить», «Записаться на приём» вместо «ОК».
- Рядом с кнопкой сказано, что произойдёт дальше: перезвоним в рабочее время, письмо придёт на указанный адрес, деньги пока не списываются. Это снимает главную причину сомнения — непредсказуемость следующего шага.
- Ошибка объясняет, что исправить: «Телефон должен содержать 10 цифр» вместо «Некорректное значение».
Тон подбирается под контекст. Банковский сервис и служба доставки еды говорят по-разному, но в обоих случаях неуместны шутки на экране оплаты и в сообщении о сбое.
Приёмы и то, как их портят
| Приём | Что он даёт | Где его ломают |
|---|---|---|
| Цветовой акцент на главном действии | Взгляд находит следующий шаг за секунду | Пять акцентных кнопок в одном экране |
| Социальное подтверждение | Снимает сомнение через чужой опыт | Выдуманные отзывы и счётчики «сейчас смотрят» |
| Ограничение по времени | Помогает решиться на реальной акции | Таймер, который перезапускается при обновлении страницы |
| Значение по умолчанию | Экономит время на типовом сценарии | Заранее отмеченная подписка и лишние услуги в корзине |
| Пошаговая форма | Разбивает сложную задачу на понятные части | Шагов больше, чем полей, и нет возможности вернуться |
| Подсказка о следующем шаге | Убирает неопределённость перед отправкой | Обещание перезвонить за пять минут, которое не выполняется |
Честность вместо тёмных паттернов
Приёмы из таблицы легко превращаются в манипуляцию: предустановленная подписка, скрытые условия мелким шрифтом, кнопка отказа, спрятанная в подвале, сложная отмена при простом оформлении. В короткой перспективе такие решения дают всплеск заявок, дальше начинаются проблемы.
- Растёт число возвратов, отмен и обращений в поддержку — то есть расходы.
- Портится репутация: об этом пишут в отзывах и в социальных сетях, и убрать такие тексты нельзя.
- Появляются юридические риски: навязанные дополнительные услуги, неявное согласие на обработку персональных данных и скрытые условия оплаты нарушают требования законодательства.
Рабочий признак: если приём перестаёт работать, когда о нём рассказать вслух, его не ставят. Согласие даётся отдельным непредустановленным действием, цена показывается целиком, отказаться должно быть так же просто, как согласиться.
Проверка вместо споров о вкусах
Большинство разногласий о цвете кнопки и порядке блоков решаются не аргументами, а наблюдением. Порядок, которого мы держимся:
- формулируем гипотезу конкретно: что меняем, на какое поведение рассчитываем, как поймём результат;
- показываем интерфейс пяти-восьми людям из целевой аудитории и просим выполнить задачу вслух — так находится основная часть затруднений;
- смотрим записи сессий и путь по воронке: где останавливаются, куда возвращаются, что заполняют дважды;
- меняем по одному значимому элементу за раз, иначе непонятно, что сработало;
- оставляем изменение на срок, сопоставимый с циклом принятия решения в вашей нише, и только потом делаем вывод.
Отдельно предупреждаем про перенос чужих решений. Приём, который сработал у крупного маркетплейса, опирается на их трафик, узнаваемость и привычки аудитории. На сайте услуг с десятком обращений в неделю тот же приём может не дать ничего.
Если интерфейс вызывает вопросы, а спор идёт на уровне вкусов, помогает внешний взгляд и разбор сценариев. Мы занимаемся проектированием интерфейсов: начинаем с задач пользователя, а не с макета, и проверяем решения до того, как их придётся переделывать после запуска.
Мы начинаем с задач пользователя, а не с макета: UX/UI-проектирование помогает не переделывать интерфейс после запуска.
