Улучшение дизайна сайта - не красота, а управление вниманием

Клиенты часто просят "сделать красиво". Я всегда задаю встречный вопрос, а что должен сделать посетитель? Дизайн - это не искусство. Это навигатор для глаз. Он должен вести к целевому действию, а не просто радовать эстетикой.

    Моё правило -  хороший дизайн тот, который пользователь не замечает. Он просто идёт по странице и делает то, что вы запланировали: читает оффер, нажимает кнопку, оставляет заявку. Всё остальное - украшательство.
  

Моя методика - "Принцип визуальной иерархии за 3 шага"

Шаг 1. Один главный объект на первом экране

Когда пользователь попадает на сайт, его мозг за 0.05 секунды решает: остаться или уйти. Если на первом экране - слайдер, три кнопки, бегущая строка и всплывающий чат, мозг перегружается и выбирает "уйти". Я делаю так - один сильный заголовок, одна ключевая кнопка, один визуальный акцент.

Шаг 2. Цветовой акцент только на целевом действии

Заметили, что на этом сайте все ссылки и акценты - золотистого цвета (#9A6D2A)? А кнопка "Начать улучшение" - чёрная? Это осознанный выбор. Цвет акцента - для внимания. Чёрная кнопка - для действия. Они не конкурируют. Посетитель не путается куда нажимать.

Шаг 3. Воздух - это элемент дизайна, а не пустота

Самый частый грех, который я вижу "у нас много важного, давайте всё поместим на первый экран". В итоге - каша. Я разделяю блоки воздухом. Пустота даёт глазу передохнуть и выделяет то, что действительно важно. Не бойтесь пустого пространства. Бойтесь перегруза.

5 дизайн-решений, которые крадут конверсию

Слайдер на первом экране. Пользователь видит слайд №1, а оффер - на слайде №3. Он просто не долистает до нужного блока.
Текст поверх пёстрой фотографии. Глаз не может сфокусироваться, а текст становится абсолютно нечитаемым.
Кнопки сливаются с фоном. Если кнопка "Заказать" бежевая на белом фоне - её не видно. Она всегда должна контрастировать.
Мелкий шрифт. На мобильном устройстве всё, что меньше 16px, требует использования zoom'а. Пользователь не будет напрягаться - он уйдёт.
Иконки без подписей. Три полоски, звёздочка, шестерёнка - люди не читают мысли. Всегда подписывайте иконки текстом.

Реальный пример

Сайт производственной компании. Дизайн был "солидный", а именно серый фон, много текста, мелкие фото продукции. Я пересобрал главную страницу:

Вынес на первый экран три цифры - сколько лет на рынке, количество выполненных заказов, приблизительный срок поставки.
Добавил видео реального производства на фон - вместо стоковой фотографии.
Заменил серый фон на белый, а кнопку сделал контрастной - синей.

Итоговый результат - конверсия с главной страницы выросла на 40% за первый месяц. Дизайн не стал "красивее" в художественном смысле. Он стал понятнее.

Хотите узнать, какие элементы дизайна вашего сайта работают против вас?

Отправьте адрес сайта - я покажу главные ошибки и исправлю их.

Отправить сайт на диагностику