# Десять дизайнерских решений для интернет-магазина, которые измеримо повышают конверсию

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

Ryan Badger - 3 ноября 2024 г. - 7 мин чтения

## Дизайнерские решения, которые реально двигают конверсию

Статьи о дизайне обычно делятся на два лагеря. "Используйте больше белого пространства!" (слишком расплывчато) или "проведите A/B-тест 47 цветов кнопки" (слишком дробно). Ни то ни другое не поможет тому, кто смотрит на свой магазин и не понимает, почему конверсия всего 1,3%.

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

## 1. Визуальная иерархия: самое важное должно выглядеть самым важным

Большинство магазинов придают всему на странице товара одинаковый визуальный вес: основной текст 16px, цена 18px, заголовки 18px. Все элементы конкурируют, никто не выигрывает. У глаза нет точки входа.

Решение: то, на что вы хотите, чтобы нажали, должно быть самым крупным и самым контрастным элементом на странице.

- Название товара: 28-36px
- Цена: 20-24px, жирным, чётко выделена
- Кнопка "В корзину": на всю ширину на мобильном, визуально самый тяжёлый элемент страницы
- Описания, списки характеристик, информация о доставке: 14-16px, потише

Посмотрите на страницу товара с расстояния 2,5 метра (да, буквально откиньтесь назад): видно ли, какое действие главное? Если вся страница выглядит как серая каша, иерархия сломана.

## 2. Пустое место вокруг CTA, а не везде

"Используйте больше белого пространства" выдают за универсальный совет по дизайну. На самом деле важно пустое место вокруг кнопок и ключевых элементов, а не пустота ради пустоты.

- Не менее 40-60px отступа вокруг блока "В корзину"
- Цена в собственном чистом пространстве, не зажатая другим текстом
- У изображений товара есть воздух (а не вплотную к краям без полей)

Всё остальное (отзывы, информацию о доставке, похожие товары) сгруппируйте плотнее. Это второстепенное. Блок с CTA выигрывает тем, что он единственный, у которого есть воздух.

## 3. Единообразная предметная съёмка важнее "лучшей" предметной съёмки

Каталог из 50 товаров, где все фото слегка разные (разные фоны, разное освещение, разный масштаб), выглядит любительски. Каталог, где каждое фото снято под тем же углом, при том же свете, с тем же кадрированием и на том же фоне, выглядит профессионально.

Это проблема объёма, а не качества. У пяти бестселлеров могут быть отполированные главные кадры. Всё остальное нужно снимать одинаково, пусть и чуть менее эффектно. Непоследовательность говорит "маленький ненадёжный магазин" сильнее, чем низкое качество.

Практическое правило:

- Основное фото: белый или однотонный фон, по центру, одинаковое кадрирование по всему каталогу
- Дополнительные фото: товар в жизни / в использовании, единая тональность
- Все фото в одном соотношении сторон и разрешении

## 4. Контраст CTA, а не цвет CTA

"Оранжевые кнопки конвертируют на X% лучше зелёных!" Это проверенное утверждение вы видите постоянно. Само по себе оно бессмысленно. Важен **контраст с окружающей страницей**. Оранжевая кнопка на сайте в оранжевых тонах невидима. Синяя кнопка на том же сайте как маяк.

Выберите цвет, который сильнее всего контрастирует с основной палитрой вашего сайта. Если страница белая + чёрная + бежевая, ваш CTA должен быть единственным цветом, которого больше нигде нет.

Дополнительный момент: избегайте кнопок-призраков (только контур, без заливки) для главных CTA. Они выглядят элегантно, но хуже конвертируют, потому что глаз читает их как "второстепенные". Используйте сплошную заливку для кнопок "В корзину", "Оформить заказ", "Купить сейчас".

## 5. Размер шрифта и длина строки на мобильном

В большинстве мобильных магазинов текст слишком мелкий и слишком широкий. Телефоны показывают текст с более высокой плотностью пикселей: то, что на десктопе 16px, на мобильном кажется мелким.

Нижняя планка мобильной типографики:

- Основной текст: минимум 16-18px
- Длина строки: 40-60 символов
- Межстрочный интервал: 1,4-1,6 от размера шрифта
- Кнопки / зоны нажатия: минимум 44px по высоте (рекомендация Apple по доступности)

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

## 6. Закреплённая кнопка "В корзину" на мобильном

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

Решение: закреплённая кнопка "В корзину", которая плавает внизу мобильного окна, когда исходная кнопка уходит за экран. Одно касание, корзина открывается, не нужно искать прокруткой.

Десктоп: закреплённая кнопка необязательна (окно просмотра больше). Мобильный: обязательна.

## 7. Главное изображение, которое показывает результат, а не товар

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

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

- Уход за кожей: человек пользуется средством, утренний свет, ванная
- Мебель: предмет в настоящей комнате, обжитой
- Одежда: на человеке, в движении, а не на манекене
- Еда/кофе: в процессе приготовления или употребления, а не предметный кадр

Главное изображение с товаром в использовании конвертирует лучше, чем с отдельным товаром, потому что оно делает за покупателя часть работы воображения. Он видит себя пользователем, не напрягая фантазию.

## 8. Единые компоненты по всему магазину

Частая ошибка: на страницах товаров один стиль карточек, на страницах категорий другой, на главной третий. Покупатели чувствуют эту непоследовательность, даже если не могут её назвать. Магазин выглядит надёжно, когда одни и те же компоненты встречаются везде одинаково.

Небольшая дизайн-система интернет-магазина состоит из:

- Одного компонента карточки товара (на главной в подборках, в сетках категорий, в похожих товарах, в результатах поиска)
- Одной системы кнопок (основная, вторичная, третичная; только эти три)
- Одной системы заголовков (H1, H2, H3; применяются последовательно)
- Одной цветовой палитры (максимум 3 цвета бренда плюс серая шкала)
- Одной шкалы шрифтов (максимум 3-4 размера)

Большинство магазинов делают по 15 вариантов каждого элемента, когда хватило бы одного. Меньше вариантов = более профессиональный вид.

## 9. Первый экран это реклама прокрутки

У видимой области при первой загрузке (над линией сгиба) одна задача: заставить посетителя захотеть прокрутить страницу. И всё. Не пытайтесь совершить продажу на первом экране.

Что нужно над линией сгиба:

- Для кого это (одной строкой)
- Что за товар (визуально, одно хорошее изображение)
- Один чёткий CTA ("В корзину" или "В магазин")
- Один успокаивающий сигнал доверия (рейтинг и число отзывов, цитата из прессы или известный клиент)

Что НЕ нужно над линией сгиба:

- Несколько CTA, борющихся за внимание
- Карусель в главном блоке, которая переключается каждые 3 секунды (убийца конверсии; покупатели замирают, когда контент движется)
- Все достоинства товара сразу
- Галереи отзывов

## 10. Уберите карусель с главной страницы

Это связано с предыдущим пунктом, но заслуживает отдельного: карусели в главном блоке главной страницы мертвы. Исследования стабильно показывают, что вращающиеся слайды кликают в 1-3% случаев, и существенное внимание получает только первый слайд. Выберите одно сообщение, которое поставили бы на первый слайд, и сделайте его статичным главным блоком. Остальное выбросьте.

## Что берёт на себя Shoprocket

Тематическая витрина поставляется с шаблонами, которые уже следуют описанной выше визуальной иерархии, контрасту и мобильным паттернам. Если вы используете встроенный виджет на своём сайте, дизайн окружающей страницы остаётся за вами, но:

- **Выезжающая корзина** (а не корзина на отдельной странице) используется по умолчанию
- **Закреплённая мобильная корзина** поддерживается
- **Адаптивные изображения товаров** с автоматической отдачей в WebP и правильным соотношением сторон
- **Конструктор сайтов + 40+ тем**, чтобы вам не пришлось создавать дизайн-систему с нуля
- **Хуки для собственного CSS** позволяют оформить встраиваемый блок под ваш сайт

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Что Shoprocket не контролирует: ваши главные изображения, единообразие вашей съёмки, ваши тексты, вашу цветовую систему. Это вам создавать или портить.

> **Совет:** прямо сейчас откройте свой магазин на телефоне. Возьмите одну страницу товара. Видна ли кнопка "В корзину" без прокрутки? Цена явно второй по размеру элемент? Можно ли прочитать описание, не щурясь? Если хотя бы на один из вопросов ответ "нет", это первое исправление в дизайне.

## Если совсем коротко

- **Иерархия:** самый важный элемент должен выглядеть самым важным. Проверьте тестом с 2,5 метров
- **Пустое место вокруг CTA**, а не везде ради пустоты
- **Единообразие съёмки** важнее качества съёмки. Один стиль на весь каталог
- **Контраст CTA, а не цвет.** Побеждает цвет с наибольшим контрастом относительно палитры страницы
- **Мобильный шрифт: 16px+ для основного текста, 44px+ для зон нажатия**
- **Закреплённая кнопка "В корзину" на мобильном** обязательна
- **Главные изображения показывают результат** (товар в использовании), а не товар на белом
- **Небольшая дизайн-система (3 цвета, 4 размера, 3 варианта кнопок)** выглядит профессиональнее, чем 15 вариантов
- **Первый экран продаёт прокрутку**, а не товар. Одно чёткое сообщение, один CTA
- **Уберите карусель с главной**. Статичный главный блок выигрывает

[Начните бесплатный пробный период](https://app-v3.shoprocket.io/signup), если хотите тематическую витрину с этими приёмами из коробки. 14 дней, без карты.

---

- HTML version: https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion
- Language: Русский (ru)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)