Дизайн Интернет-магазина

Точки зрения на дизайн интернет-магазина существуют разные, и сильно зависят от того, какого специалиста вы спрашиваете:

• Программист скажет, что важно не «напаривать» и не быть назойливыми. «Эти ужасные всплывающие окна, чаты! Я бы ни за что тут не купил».
• SEO-специалист попросит упомянуть чаще слова «купить» и «Москва» и разместить SEO-текст над товарами. Потому что простыня текста после заголовка более важна для поисковой системы, чем фотографии и тексты товара.
• Сотрудник рекламного агентства будет долго рассказывать о теории цветов и убедит владельца проекта, что красный — это немодно и цвет опасности. А вот синий — это цвет спокойствия и процветания. Нужен ребрендинг.

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

И тут он начнёт отрисовывать страницу товара. Хотя это самая главная страница в интернет-магазине.

Опытный интернет-торговец начинает с дизайна страницы товара.

Почему страница товара — главная

Решение о покупке принимается на карточке товара (кроме очень знакомых товаров, типа продуктов или канцтоваров, где из названия и цены и так всё понятно). Кроме того, не все покупатели попадут на главную страницу. Кто-то придёт на каталог, а кто-то сразу на карточку товара. Что можно сказать точно — все покупатели пройдут через карточку товара.

Основные блоки хорошей карточки товара

• Название.
• Фото, видео.
• Цена.
• В корзину.
• Наличие.
• Отзывы.
• Описание.
• Характеристики и выгоды.
• Доставка, оплата, гарантия, УТП.
• Телефон/чат.
• Акция на товар.
• Комплекты.
• Блямбы.

Так по ним и пойдем.

Фотолинза

Используйте фотолинзу как альтернативу увеличение фото в новом окне или в лайтбоксе.

Каких проблем ждать при реализации? Фотолинза увеличивает картинку в 2-3 раза. Поэтому важно использовать изображения только высокого качества. Поставщик не всегда даёт качественные фото. Или даёт, но не в тех ракурсах. Сделайте фото товаров самостоятельно. Не стоит фотографировать все продукты. Хватит и 20% самых продаваемых товаров.

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

Цена, экономия, скидка

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

«В корзину» или «Купить»

Тут можно подумать, а какая разница? Мы тестировали кнопки «Купить» и «В корзину» в нескольких проектах. Измеряли конверсию и средний чек. Разница есть.

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

Если у вас магазин электроники — пользователь, скорее всего, купит 1 товар. Для таких сайтов лучше работает «Купить».

Хотите протестировать кнопку? Используйте Visual Website Optimizer. Или пробуйте свое решение для A/B-тестов, потому что, по нашему опыту, VWO не всегда корректно считает.

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

Дополнительное полезное действие

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

• добавить в закладки;
• в избранное;
• отложить товар;
• лайкнуть товар, чтобы сохранить его.

Это действие, которое не требует так много обязательств. Поэтому пользователь охотней оставит свои контакты.

Что делать с новым контактом

• Догоняйте пользователя с помощью ремаркетинга.
• Отправляйте триггер «Заброшенная корзина».
• Напишите email, что товар заканчивается или на него действует скидка.
• Через 30 дней напишите, что заканчивается срок действия корзины. Если пользователь не купит, мы очистим сохранённый список.

Эти действия склоняют пользователя к покупке. И вместо простого посетителя сайта вы получаете нового клиента.

«Есть в наличии» или «Есть на складе»

Чтобы выбрать более эффективный вариант для вашего проекта, используйте A/B-тесты. Как и с кнопкой «Купить» или «В корзину». Что ещё увеличивает эффективность такого блока? Напишите, сколько товаров осталось в наличии. И добавить дату обновления информации. Важно добавлять правдивую информацию. И формировать правильные ожидания у клиентов. Например, пользователь видит, что на складе осталось только три товара. Информация свежая. Обновили сегодня. Хочешь получить товар? Поспеши оформить заказ.

Характеристики и выгоды

Когда в карточке товара есть его характеристика — это уже хорошо. Но ещё лучше — перевести характеристику в выгоду. Автоматизируйте блок выгоды, чтобы не писать текст для каждого товара. Как это сделать?

1. Выделите самые частые характеристики товаров на сайте.
2. Пропишите для каждой характеристики выгоду.
3. Настройте автоматическую генерацию выгоды в описание товара.

Например, одна из возможных характеристик товара — «кружевное белье». Мы один раз написали текст выгоды для «кружевного белья»:

«Изюминка Вашего облика — кружево. Сейчас оно обрело «второе дыхание». Кружево — это воплощение шика и благородства, изысканности и нежности. Готовы ловить завистливые взгляды? Подберите одежду с кружевом».

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

Доставка, оплата, гарантия и преимущества

Условия доставки, оплаты, гарантии и преимущества — это то, что влияет на решения пользователя покупать. Отвечайте на эти вопросы на странице товара. Создайте единый привлекательный блок с УТП (уникальное торговое предложение). Вы сразу показываете свои преимущества. И отвечаете на страхи покупателя. Добавьте блок с УТП на другие страницы сайта — на главную, в корзину. Обычно размещение блока с УТП увеличивает конверсию на 25,5%.

Персонализация

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

Персонализируйте сайт для разных регионов.
С какого источника пришёл пользователь?
Это первая или вторая покупка?
Сейчас день или ночь?

С персонализацией карточка товара становится более личной. Снимает нагрузку с колл-центра и менеджеров по продажам.

Акции

Вы объявили акцию. Добавили информацию о ней на главную страницу. Супер. Добавьте информацию и на карточку акционного товара.

Суперцена, подарок, таймер, ограничения. Добавляйте акцию и ждите покупателей.

Комплекты

Продаёте телефон? Предложите клиенту чехол. Продаёте кожаные ботинки? Предложите крем по уходу за кожаной обувью и силиконовые стельки. Комплекты увеличивают средний чек. И соответственно — вашу прибыль.

Блямбы

Блямбы — это символы, которые дают дополнительно представление о магазине. Яркие, привлекающие внимание. Они транслируют выгоду потребителя. Блямбы могут быть кликабельными или нет.

Ещё в 1990 году компании Nielsen Norman Group провела исследование. Выяснили, что только 16% интернет-пользователей вчитываются в тексты. Остальные — просто сканируют сайт. Смотрят заголовки, выделенные слова, графические символы. Поэтому используйте яркие блямбы вместо текстов о преимуществах компании.

Иллюзия выбора

Чтобы повысить вероятность покупки — предложите клиенту выбор. Создайте два варианта товаров. Один из них — явно привлекательней. Люди начнут охотнее делать заказ. Подробней о психологических механизмах иллюзии выбора читайте в книге «Предсказуемая иррациональность».

Выводы

Начинайте создавать сайт не с главной, а с карточки товара.
Проверьте на странице товара наличие основных блоков по списку.
Тестируйте, тестируйте и еще раз тестируйте.

Полное выступление по ссылке.