«Сделайте красиво» — так звучит типичное ТЗ на дизайн. Но красота — понятие субъективное. А вот конверсия измеряется в цифрах. Хороший UX/UI — это не про вкусовщину. Это про то, насколько легко пользователю достичь цели на вашем сайте.
UX и UI: в чём разница
UX (User Experience) — опыт пользователя. Насколько удобно пользоваться сайтом. Логичная ли структура. Понятно ли, куда нажимать. Быстро ли можно найти нужное.
UI (User Interface) — внешний вид интерфейса. Цвета, шрифты, кнопки, отступы. То, как всё это выглядит визуально.
UX — это архитектура дома. UI — это отделка и мебель. Можно сделать красивую отделку в неудобной планировке. Жить будет некомфортно.
Как плохой UX убивает продажи
Случай из практики: интернет-магазин мебели
Клиент пришёл с проблемой: трафик есть, заявок нет. Смотрим сайт:
- Каталог на 5 уровней вложенности
- Фильтры не работают на мобильных
- Кнопка «Купить» серая на сером фоне
- Корзина в неожиданном месте
Пользователь буквально не мог купить, даже если хотел.
После редизайна конверсия выросла в 3 раза. Не потому что стало «красивее». Потому что стало понятнее.
Принципы UX, которые работают
1. Правило трёх кликов
Пользователь должен достичь любой цели максимум за 3 клика. Хочет найти товар — 3 клика. Оставить заявку — 3 клика. Найти контакты — 3 клика.
Каждый дополнительный клик — это потерянные пользователи.
2. F-образное сканирование
Люди читают веб-страницы по F-образной траектории: сначала верхнюю строку, потом спускаются вниз по левому краю, иногда смотрят вправо.
Важную информацию размещайте в этих зонах. Кнопку действия — на пути взгляда.
3. Закон Хика
Чем больше вариантов выбора, тем сложнее принять решение. Если на странице 20 кнопок — пользователь запутается и уйдёт.
Один экран — одна главная цель. Остальное — вторичное.
4. Визуальная иерархия
Глаз должен сразу понимать, что главное, что второстепенное. Это достигается через:
- Размер (большое = важное)
- Цвет (яркое = важное)
- Расположение (выше = важнее)
- Контраст (выделяется = важное)
5. Консистентность
Одинаковые элементы должны выглядеть и работать одинаково. Если кнопка «Купить» красная на одной странице, она должна быть красной везде.
Типичные ошибки UI
Слишком много цветов
Используйте 2-3 основных цвета. Не превращайте сайт в радугу.
Мелкий шрифт
Минимум 16px для основного текста. На мобильных — 18px. Ваши клиенты не должны щуриться.
Нет воздуха
Отступы между элементами важны. Сайт, где всё прилеплено друг к другу, выглядит дёшево и читается тяжело.
Неконтрастные кнопки
CTA-кнопка должна выделяться. Серая кнопка на сером фоне — преступление против конверсии.
Кастомные элементы
Не изобретайте велосипед. Чекбокс должен выглядеть как чекбокс. Ссылка — как ссылка. Пользователи привыкли к определённым паттернам.
Как мы работаем над UX/UI
- Исследование — изучаем аудиторию, конкурентов, бизнес-цели
- Прототипирование — создаём схему структуры и навигации
- UI-дизайн — разрабатываем визуальный стиль
- Тестирование — проверяем на реальных пользователях
- Итерации — дорабатываем по результатам тестов
Экономить на дизайне — значит экономить на конверсии. А это прямые убытки.
