Цвет, динамика, внимание к пальцам. Как визуальный дизайн интернет-магазина влияет на продажи

Что покупатель видит первым. Психология внимания и визуальная иерархия

Несколько лет назад дизайнеры ориентировались на так называемые паттерны чтения: F-паттерн для текстовых страниц, Z-паттерн для лендингов.

Сегодня эти модели не отменили, но логика поменялась: сначала покупатель должен увидеть главный офер — что это за продукт и какую пользу он приносит. Затем — подтверждение надежности (отзывы, рейтинг, гарантии). И только после этого — кнопку покупки. Если эта цепочка нарушена, пользователь теряется.

Еще один рабочий прием — направлять взгляд пользователя с помощью фотографий. Если в карточке товара есть модель, лучше, чтобы она смотрела не в камеру, а на сам товар или кнопку покупки. Люди интуитивно переводят взгляд вслед за персонажем. По такому же принципу работают стрелки и линии — они помогают быстрее заметить нужный элемент.

Почему пустое пространство продает лучше баннеров

Визуальный шум — это когда на экране одновременно борются за внимание баннеры, всплывашки, яркие кнопки, значки скидок и анимации. Каждый такой элемент забирает часть когнитивного ресурса пользователя. Мозгу приходится фильтровать лишнее, чтобы найти нужное, — и на каком-то этапе он просто устает.

Психологи называют это усталостью от выбора. Классический пример — эксперимент психолога Шины Айенгар с джемом: на стенде с 24 сортами покупали только 4% посетителей, а на стенде с 6 сортами — 30%. Разница на порядок, и объяснение простое: слишком много вариантов парализует.

Обратный визуальному шуму эффект дает свободное пространство. Оно разделяет контент на смысловые блоки, направляет взгляд и снижает ощущение перегруза. Пустое место — не потерянное: оно выделяет важное и ускоряет восприятие.

Что убирать из карточки товара в первую очередь:

• второстепенные баннеры и промо-плашки, не относящиеся к товару;

• дублирующие кнопки («В корзину» рядом с «Купить в 1 клик» и «Оформить заказ» — избыточно);

• всплывающие окна на первом экране;

• анимации, которые не подсказывают действие, а просто «оживляют» интерфейс.

Кнопки и цвет: что повышает конверсию

Долгое время в дизайне действовало простое правило: кнопка должна максимально контрастировать с фоном. Сегодня оно работает не всегда. Резкий цвет, выпадающий из стилистики сайта, читается как реклама и вызывает недоверие.

По словам экспертов «Сбер2B онлайн-продажи», решающее значение имеет не сам цвет, а как элемент смотрится вместе с другими деталями.

С плашками скидок принцип аналогичный. Красные и оранжевые бейджи все еще работают, но только если скидка настоящая. Пометка –5% в кричащем красном воспринимается как обман: реальная выгода мизерная, а давление на глаза максимальное. Для символических скидок современные магазины используют спокойные оттенки, а красный оставляют для действительно крупных распродаж.

Что проверить на своем сайте:

• хорошо ли кнопка выделяется на фоне остальных элементов страницы;

• читается ли текст на кнопке — контраст между шрифтом и фоном кнопки;

• не выглядит ли кнопка как рекламный баннер, который пользователи привыкли игнорировать.

Видео в карточке товара: от чего зависит конверсия

Покупатели на маркетплейсах и в приложениях хотят увидеть продукт в действии, а не только на статичных фотографиях. Страницы с видео конвертируют лучше, чем страницы только с фотографиями. Но широкий разброс в росте конверсии (от 25% до 80%) зависит от категории товара:

• Сложные, дорогие или новые продукты (электроника, бытовая техника, мебель, дизайнерская одежда) получают максимальный прирост конверсии — вплоть до 80%. Покупателю важно увидеть габариты, текстуру материалов, эргономику и реальную работу устройства.

• Простые товары (книги, канцелярские принадлежности, базовые аксессуары) показывают более скромный прирост конверсии — на уровне 10–30%. Для их оценки покупателю обычно достаточно качественных фото и текстового описания.

Есть и обратная сторона: плохо снятый ролик на дорогом товаре работает хуже, чем его отсутствие.

Что должно быть в видео карточки товара:

• продукт в реальном использовании, а не рекламная заставка с логотипом;

• обзор со всех сторон, если это физический товар;

• длительность до 30–90 секунд — этого хватает, чтобы показать главное;

• субтитры: значительная часть трафика смотрит без звука;

• вес файла, при котором страница грузится меньше 2 секунд (каждая дополнительная секунда загрузки снижает конверсию на 7%).

Интерактивные форматы (короткие видео с возможностью покупки в один клик) снижают показатель отказов и повышают показатель удержания клиентов на сайте в среднем в 2,5–3 раза по сравнению со статичными страницами.

Специфика мобильного UX в e-commerce

Поскольку более 70–80% трафика в сфере e-commerce сегодня приходится на мобильные устройства, все правила визуального дизайна должны адаптироваться под экраны смартфонов.

Ключевые принципы мобильной адаптации:

• Зона досягаемости большого пальца. Кнопка «В корзину» и выбор параметров товара — в нижней или средней части экрана, куда удобно дотянуться большим пальцем.

• Оптимизация анимации. Тяжелые анимационные эффекты замедляют загрузку страниц на мобильных устройствах, особенно при нестабильном интернет-соединении. На смартфонах применяют только самые легкие, аппаратные микроанимации.

• Вертикальный формат медиафайлов. Фото и видео — в вертикальном формате (4:5 или 9:16), чтобы занимать весь экран без поворота телефона.

• Упрощение форм. Полей в формах — минимум. Кнопки — крупные, с отступом 8–10 пикселей между ними, чтобы пользователь не промахивался.

Отличия путей покупателя в B2B и B2C

Путь пользователя в оптовых и розничных продажах строится на разных психологических моделях. Из-за этого требования к интерфейсу сайтов существенно различаются.

Данные по B2B-продуктам важно учитывать, так как глобальный рынок B2B e-commerce стабильно растет в среднем на 14,5% за последние 4 года. А более 90% B2B-компаний полностью перешли на цифровые модели продаж с использованием личных кабинетов, где интерфейс спроектирован под повторные оптовые закупки, выгрузку документов, а не под эмоциональное вовлечение.

Часто один сайт обслуживает и корпоративных, и розничных покупателей. В таком случае интерфейс адаптируется под роль после авторизации.

Границы доверия: манипуляции в дизайне и правовые последствия

Дизайн должен помогать человеку разобраться в свойствах товара, а не вынуждать его совершить импульсивное действие. Если интерфейс честно выделяет нужную информацию и помогает сравнить цены — это качественный пользовательский опыт. Если же дизайн вводит в заблуждение — речь идет о манипуляциях.

К типичным манипуляциям относятся фальшивые таймеры обратного отсчета, искусственно созданный дефицит (сообщения «этот товар сейчас смотрят еще 15 человек») или незаметное добавление платных услуг в корзину.

В долгосрочной перспективе такие уловки снижают показатель LTV (совокупную прибыль с одного клиента за все время работы с ним). Современные покупатели легко распознают манипулятивные схемы, испытывают раздражение и уходят к более прозрачным конкурентам.

Кроме потери лояльности, манипуляции в дизайне несут серьезные юридические риски.

Главный принцип остается неизменным: хороший дизайн помогает человеку принять решение, а не вынуждает покупать. Чем понятнее и честнее выглядит интерфейс, тем выше доверие — и тем больше вероятность, что покупатель вернется снова.