UX/UI-дизайн, который продаёт: иерархия, формы и проверка гипотез

Как интерфейс влияет на заявки в B2B: как люди сканируют экран, визуальная иерархия, страница, снимающая сомнения, формы и призывы к действию, A/B-тесты с расчётом выборки и чек-лист UX-аудита.

Интерфейс продаёт не красотой, а тем, насколько быстро человек понимает, что ему предлагают, верит в это и находит следующий шаг. В B2B у этого есть цена: сайт или личный кабинет компании работает как первый менеджер, с которым говорит покупатель, и ошибки этого «менеджера» не видны в CRM — просто не приходят заявки. Посетитель не пишет, что не нашёл кнопку или испугался формы на двенадцать полей. Он закрывает вкладку. В статье — рабочие механики UX/UI-дизайна, которые влияют на конверсию: как человек просматривает экран, как выстроить визуальную иерархию, как страница снимает сомнения, как спроектировать форму и призыв к действию, как проверять гипотезы и не обмануться результатами A/B-теста. В конце — чек-лист для аудита интерфейса перед запуском или редизайном. Что значит «интерфейс, который продаёт» Короткий ответ: интерфейс, который сокращает путь от интереса к решению. Для этого он решает три задачи. Понимание. За первые секунды ясно, что это за компания или продукт, для кого и какую задачу решает. Доверие. На странице есть доказательства: кейсы, процесс работы, люди, условия. Не обещания, а проверяемые факты. Действие. Следующий шаг очевиден, а его цена для пользователя минимальна: мало полей, понятно, что будет после отправки. Отсюда главное правило: дизайн оценивается не по вкусу заказчика и не по наградам, а по тому, как посетители проходят путь до целевого действия. Всё остальное — средства. Как человек просматривает экран Сканирование вместо чтения Пользователи в интернете в основном не читают, а сканируют. Nielsen Norman Group описала F-образный паттерн по результатам айтрекинга в 2006 году и подтвердила его в повторном исследовании 2017 года на десктопе и мобильных устройствах. Важная деталь, которую часто упускают: сама NN/g подчёркивает, что F-паттерн — признак плохо оформленного текста, а не схема, под которую нужно проектировать. Люди читают «буквой F», когда им не за что зацепиться взглядом. Практический вывод обратный популярному: не «ставьте CTA в горячие зоны буквы F», а дайте взгляду опоры. Информативные подзаголовки, первые слова абзацев с главным смыслом, короткие списки, выделение ключевых терминов. Тогда пользователь находит нужное, даже не читая текст целиком. Закон Фиттса Время, за которое человек попадает указателем или пальцем в цель, растёт с расстоянием до неё и уменьшается с её размером; зависимость логарифмическая. Для интерфейса это значит: главная кнопка должна быть достаточно крупной и находиться рядом с местом, где пользователь принимает решение, — под описанием тарифа, после блока с кейсами, в конце формы. Кнопка «Оставить заявку», до которой нужно тянуться через весь экран, проигрывает кнопке рядом с аргументом. Когнитивная нагрузка и закон Хика Теория когнитивной нагрузки Джона Свеллера (1988) исходит из того, что рабочая память ограничена. Часто цитируемое «7±2» — из статьи Джорджа Миллера 1956 года; более поздние работы, например Нельсона Коуэна, оценивают объём рабочей памяти скромнее — около четырёх смысловых блоков. Точная цифра для дизайна не важна, важен вывод: каждый лишний элемент конкурирует за внимание с целевым действием. Закон Хика дополняет картину: время выбора растёт с числом равнозначных вариантов. Три одинаково яркие кнопки «Скачать презентацию», «Позвонить», «Написать» заставляют думать там, где человек должен действовать. Один главный призыв на экране и второстепенные — визуально тише. Визуальная иерархия: что важно, а что второстепенно Иерархия — система подсказок, которая показывает, в каком порядке смотреть на экран. Без неё взгляд блуждает, решение откладывается. Размер и типографика Разница между уровнями заголовков должна быть заметной, иначе структура не считывается. Для основного текста на сайте разумный минимум — 16 пикселей, длина строки — примерно 60–75 знаков, межстрочный интервал около 1,5. Точные размеры задаёт типографическая шкала дизайн-системы, а не отдельные решения на каждой странице. Цвет и контраст Акцентный цвет работает, пока он редкий. Если фирменный цвет получают и кнопки, и иконки, и подложки, и ссылки, кнопка «Запросить предложение» перестаёт выделяться. Правило: акцент — для целевых действий и ключевых состояний, остальное — нейтральные цвета. Контраст текста — не ниже требований WCAG уровня AA: 4,5:1 для обычного текста и 3:1 для крупного. Это вопрос не только доступности, но и читаемости на ярком солнце и дешёвом мониторе; подробнее — в статье о доступности веб-приложений . Пространство и группировка Отступы — инструмент структуры. Элементы, стоящие ближе друг к другу, воспринимаются как связанные (принцип близости из гештальт-психологии). Подпись, оторванная от поля, или цена, отодвинутая от названия тарифа, заставляют пользователя гадать. Расстояние между смысловыми блоками должно быть заметно больше, чем внутри блока. Страница, которая снимает сомнения У покупателя B2B-услуги в голове одни и те же вопросы, и хорошая страница отвечает на них в том порядке, в котором они возникают. Что это и подходит ли мне? Первый экран: конкретная формулировка задачи, которую вы решаете, для кого, и главный призыв к действию. Не «инновационные решения для бизнеса», а понятное описание результата. Почему вам можно верить? Кейсы с описанием задачи и результата, отраслевой опыт, команда, клиенты — если есть разрешение их называть. Как это будет происходить? Процесс в нескольких шагах: что происходит после заявки, какие этапы, кто участвует. Неопределённость — одна из главных причин отложить решение. Сколько стоит и от чего зависит? Хотя бы ориентир и факторы цены. Полное отсутствие информации о бюджете отсекает тех, кто не готов звонить ради первой прикидки. А если…? Ответы на типичные возражения: сроки, гарантии, права на код, поддержка. Что сделать сейчас? Финальный призыв с минимальным трением. Это не жёсткий шаблон. Если продукт нужно показать, прежде чем объяснять, демонстрация поднимается выше. Вопрос о том, хватит ли одной такой страницы или нужен сайт с разделами, разобран в статье «Лендинг или многостраничный сайт» . Социальное доказательство без обмана Цифры в кейсах работают лучше общих слов, но только если они проверяемы и описан контекст: какая была задача, что сделали, за какой период получен результат. Абстрактное «увеличили конверсию на 300%» без подробностей у опытного покупателя вызывает обратную реакцию. Отзывы с именем, должностью и компанией весят больше анонимных. Формы: последний барьер перед заявкой Сколько полей нужно Столько, сколько нужно для первого контакта, и ни одним больше. Каждое поле — это вопрос «зачем им это?» и повод отложить заполнение. Для первой заявки обычно достаточно имени, способа связи и одного поля с кратким описанием задачи. Бюджет, сроки, размер компании и подробный бриф уточняются в разговоре. Если квалификация лидов важна, лучше сделать поле необязательным или разбить форму на шаги, чем отпугнуть всех. Универсального «каждое поле снижает конверсию на N%» не существует: эффект зависит от аудитории, мотивации и того, насколько понятно, зачем спрашивают. Поэтому решение о полях — кандидат для проверки на своих данных. Подписи и подсказки Placeholder — серый текст внутри поля — исчезает при вводе, и человек забывает, что именно заполняет. Подпись всегда над полем, а placeholder — только как пример формата. Обязательные поля помечаются явно, а для телефона и email используются правильные типы полей, чтобы на смартфоне открывалась нужная клавиатура. Проверка ввода Сообщать об ошибке после нажатия «Отправить» — поздно. В исследовании Люка Вроблевски и компании Etre, опубликованном в A List Apart в 2009 году, форма с проверкой полей по ходу заполнения показала на 22% больше успешных заполнений, на 22% меньше ошибок и на 42% меньшее время заполнения по сравнению с базовым вариантом. Выборка была небольшой — 22 участника, — но направление подтверждено практикой: проверять поле после того, как пользователь его покинул, а не на каждое нажатие клавиши. Текст ошибки объясняет, что не так и как исправить: не «Неверный email», а «Проверьте адрес: в нём должен быть символ @». Ошибка обозначается не только цветом, но и текстом. label for="email" Рабочий email /label input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-hint email-error" p id="email-hint" Пришлём ответ в течение рабочего дня /p p id="email-error" role="alert" hidden Проверьте адрес: в нём должен быть символ @ /p Что происходит после отправки Очистить форму и показать «Спасибо» — мало. Пользователь должен понять, что заявка дошла, кто и когда свяжется и что можно сделать сейчас: посмотреть кейсы, скачать презентацию, записаться на звонок в календаре. Этот экран — продолжение диалога, а не его конец. Отдельная деталь для B2B: заявка с сайта должна попадать в CRM и связываться с рекламным источником, иначе оценить дизайн по деньгам не получится — об этом статья о сквозной аналитике . Призыв к действию и микрокопирайтинг Текст на кнопке — это обещание того, что произойдёт после нажатия. «Отправить» ничего не обещает. «Получить оценку проекта», «Записаться на демо», «Скачать пример отчёта» объясняют ценность и снижают тревогу. Рядом с кнопкой уместна короткая подсказка, снимающая главное опасение: «Без обязательств», «Ответим за один рабочий день», «Не передаём данные третьим лицам». Микротексты интерфейса — подписи, пустые состояния, сообщения об ошибках и подтверждения — часто пишут разработчики в последний день. Их стоит проектировать вместе с макетами: они влияют на поведение не меньше цвета кнопок. Скорость и мобильные устройства Медленный интерфейс выглядит сломанным, как бы хорошо он ни был нарисован. По данным Think with Google, при росте времени загрузки мобильной страницы с одной до трёх секунд вероятность отказа увеличивается на 32%, с одной до пяти — на 90%. Дизайн влияет на скорость напрямую: тяжёлые фоновые видео, несколько начертаний нестандартных шрифтов и анимации на первом экране закладываются в макет, а не появляются при разработке. Технические приёмы ускорения разобраны в статье о производительности веб-приложений . Мобильный интерфейс — отдельная дисциплина: приоритизация контента, размеры сенсорных целей, зоны досягаемости. Этому посвящён материал о Mobile-First Design , здесь только одно правило: главный призыв к действию и контакты должны быть доступны на смартфоне без поиска. Как проверять гипотезы: исследования и A/B-тесты Сначала понять, где теряются люди Дизайн без данных — набор мнений. Начинать стоит с измерений: воронка в системе аналитики (от входа на страницу до отправки формы), карты кликов и записи сессий, например в Яндекс Метрике с Вебвизором. Затем — несколько юзабилити-сессий, в которых человек из целевой аудитории выполняет задачу, а команда молча наблюдает. Пять-шесть таких сессий обычно показывают грубые проблемы, которые команда перестала замечать. Что тестировать в первую очередь формулировку ценностного предложения на первом экране; текст и расположение главного призыва к действию; состав и число полей формы; место и формат доказательств: кейсы, отзывы, цифры; подачу цены: ориентир, калькулятор или «по запросу». Размер выборки: почему тесты длятся дольше, чем хочется Самая частая ошибка — остановить тест при первом красивом результате. Решение принимается при заранее рассчитанном размере выборки, а не когда график «уже понятен». Пример расчёта: если текущая конверсия 2% и нужно надёжно заметить рост до 2,4% (относительное улучшение на 20%) при уровне значимости 5% и мощности 80%, двусторонний тест требует около 21 тысячи посетителей на каждый вариант. При 5 тысячах посетителей в месяц на страницу, разделённых поровну, это больше восьми месяцев. Отсюда практические выводы для B2B-сайтов с небольшим трафиком: тестировать крупные изменения, которые могут дать заметный эффект, а не оттенок кнопки; выбирать метрику ближе к трафику, например клики по призыву, но проверять, что она связана с заявками; при малом трафике опираться на качественные исследования и последовательные улучшения вместо A/B-тестов; тест длится полные