Дизайн интернет-магазина — скользкая тема
Поговорим о дизайне интернет-магазина. В дизайне, воспитании детей и политике разбирается каждый :)
Программист скажет, что важно не «напаривать» и не быть назойливыми.
— Эти ужасные всплывающие окна, чаты! Я бы ни за что тут не купил.
Сеошник попросит упомянуть слова «купить» и «Москва» побольше раз и разместить сео-текст над товарами. Потому что простыня текста за 3$ более важна для поисковой системы, чем фотографии и тексты товара.
Сотрудник рекламного агентства будет долго рассказывать о теории цветов и убедит владельца проекта, что красный — это немодно и цвет опасности. А вот синий — это цвет спокойствия и процветания. Нужен ребрендинг :)
Чем отличается опытный заказчик от начинающего интернет-торговца?
Начинающий послушает одного специалиста. И в лучшем случае ему поверит. И всё сделает с перекосом на 1 сторону. В худшем — доверится своему вкусу и через год переделает всё заново. Но до этого он вынесет мозг дизайнеру «что-то у вас главная скучная», «поиграйтесь со шрифтами» и «мне не нравится логотип, давайте ещё поищем».
Дизайнер сдаст главную страницу и перейдёт к внутренним. К этому моменту он будет выжатым лимоном. Заказчик расслабляется, теперь у него есть «какбы идеальный исполнитель» — не спорит, слушается заказчика во всём.
И тут он начнёт отрисовывать страницу товара. Хотя, это самая главная страница в интернет-магазине. Опытный интернет-торговец начинает с дизайна страницы товара.
Почему страница товара — главная?
Решение о покупке принимается на карточке товара (кроме очень знакомых товаров, типа продуктов или канцтоваров, где из названия и цены и так всё понятно). Не все покупатели попадут на главную страницу. Кто-то прийдёт на каталог, а кто-то сразу на карточку товара. Что можно сказать точно — все покупатели пройдут через карточку товара.
Основные блоки хорошей карточки товара
- Название
- Фото/видео
- Цена
- В корзину
- Наличие
- Отзывы
- Описание
- Характеристики и выгоды
- Доставка/оплата/гарантия/УТП
- Телефон/чат
- Акция на товар
- Комплекты
- Блямбы
Фото-линза
Используйте фото-линзу как альтернативу увеличение фото в новом окне или в лайтбоксе.
Каких проблем ждать при реализации? Фото-линза увеличивает картинку в 2-3 раза. Поэтому важно использовать изображения только высокого качества. Поставщик не всегда даёт качественные фото. Или даёт, но не в тех ракурсах. Сделайте фото товаров самостоятельно. Не стоит фотографировать все продукты. Хватит и 20% самых продаваемых товаров.
Чтобы добавить фото-линзу на сайт, используйте специальный скрипт.
Цена, экономия, скидка
Покажите пользователю, почему выгодно покупать именно у вас.
Для сравнения возьмите цену из другого магазина, где такой же товар стоит дороже. Перечеркните её. И добавьте свою — более низкую цену. Пропишите, сколько в процентах и деньгах Клиент экономит. Это работает, если цены действительно ниже чем рекомендованные или в оффлайн-магазинах.
Тестируйте разные варианты блоков, чтобы выбрать наиболее эффективный.
В корзину или купить?
Тут можно подумать, а какая разница? Мы тестировали кнопки «Купить» и «В корзину» в нескольких проектах. Измеряли конверсию и средний чек. Разница есть.
«В корзину» лучше работает для магазинов, которые предполагают несколько товаров в чеке. Например, магазин одежды, бытовой химии.
Если у вас магазин электроники — пользователь, скорее всего, купит 1 товар. Для таких сайтов лучше работает «Купить».
Хотите протестировать кнопку? Используйте Visual Website Optimizer. Или пробуйте свое решение для a/b тестов, потому что, по нашему опыту, ВВО не всегда корректно считает :(
Что однозначно работает? Если кнопка оформлена не в цветах сайта. Если сайт зелёный — добавьте красную кнопку. Синий сайт — кнопка оранжевая. Выделяйте кнопку, чтобы привлекать внимание пользователей.
Дополнительное полезное действие
Есть люди, готовые купить прямо сейчас. Есть и другая категория пользователей. Они хотят рассмотреть, подумать. Предложите им альтернативное действие:
- добавить в закладки;
- в избранное;
- отложить товар;
- лайкнуть товар, чтобы сохранить его.
Это действие, которое не требует так много обязательств. Поэтому пользователь охотней оставит свои контакты.
Что делать с новым контактом?
- Догоняйте пользователя с помощью ремаркетинга.
- Отправляйте триггер заброшенная корзина. Читайте подробнее о заброшенной корзине.
- Напишите e-mail, что товар заканчивается или на него действует скидка.
- Через 30 дней напишите, что заканчивается срок действия корзины. Если пользователь не купит, мы очистим сохранённый список.
Эти действия склоняют пользователя к покупке. И вместо простого посетителя сайта вы получаете нового Клиента.
«Есть в наличии» или «Есть на складе»
Чтобы выбрать более эффективный вариант для вашего проекта, используйте A/B тесты. Как и с кнопкой «Купить» или «В корзину».
Что ещё увеличивает эффективность такого блока? Напишите, сколько товаров осталось в наличии. И добавить дату обновления информации. Важно добавлять правдивую информацию. И формировать правильные ожидания у Клиентов.
Например, пользователь видит, что на складе осталось только 3 товара. Информация свежая. Обновили сегодня. Хочешь получить товар? Поспеши оформить заказ.
Характеристики и выгоды
Когда в карточке товара есть его характеристика — это уже хорошо. Но ещё лучше — перевести характеристику в выгоду. Автоматизируйте блок выгоды, чтобы не писать текст для каждого товара.
Как это сделать?
- Выделите самые частые характеристики товаров на сайте.
- Пропишите для каждой характеристики выгоду.
- Настройте автоматическую генерацию выгоды в описание товара.
Например, одна из возможных характеристик товара — «кружевное белье». Мы 1 раз написали текст выгоды для «кружевного белья»:
«Изюминка Вашего облика — кружево. Сейчас оно обрело «второе дыхание». Кружево — это воплощение шика и благородства, изысканности и нежности. Готовы ловить завистливые взгляды? Подберите одежду с кружевом.»
Если в карточке товара появляется характеристика «кружевное белье», сайт автоматически генерирует описание. В нём — наш стандартный текст с выгодой.
Доставка, оплата, гарантия и преимущества
Условия доставки, оплаты, гарантии и преимущества — это то, что влияет на решения пользователя покупать. Отвечайте на эти вопросы на странице товара.
Создайте единый привлекательный блок с УТП (уникальное торговое предложение). Вы сразу показываете свои преимущества. И отвечаете на страхи покупателя. .
Добавьте блок с УТП на другие страницы сайта — на главную, в корзину. Читайте, как размещение блока с УТП увеличивает конверсию на 25,5%.
Персонализация
Как использовать персонализацию в карточке товара?
Транслируйте разные объявления в будние дни и по выходным. Пример блока на сайте, который появляется только в воскресенье:
Персонализируйте сайт для разных регионов:
- С какого источника пришёл пользователь?
- Это первая или вторая покупка?
- Сейчас день или ночь?
Смотрите также другие примеры персонализации на сайте.
С персонализацией карточка товара становится более личной. Снимает нагрузку с колл-центра и менеджеров по продажам.
Акции
Вы объявили акцию. Добавили информацию о ней на главную страницу. Супер! Добавьте информацию и на карточку акционного товара.
Суперцена, подарок, таймер, ограничения. Добавляйте акцию и ждите покупателей.
Комплекты
Продаёте телефон? Предложите Клиенту чехол. Продаёте кожаные ботинки? Предложите крем по уходу за кожаной обувью и силиконовые стельки.
Комплекты увеличивают средний чек. И соответственно — вашу прибыль.
Блямбы
Блямбы — это символы, которые дают дополнительно представление о магазине. Яркие, привлекающие внимание. Они транслируют выгоду потребителя. Блямбы могут быть кликабельными или нет.
Ещё в 1990 году компании Nielsen Norman Group провела исследование. Выяснили, что только 16% интернет-пользователей вчитываются в тексты. Остальные — просто сканируют сайт. Смотрят заголовки, выделенные слова, графические символы. Поэтому используйте яркие блямбы вместо текстов о преимуществах компании.
Иллюзия выбора
Чтобы повысить вероятность покупки — предложите Клиенту выбор. Создайте 2 варианта товаров. Один из них — явно привлекательней. Люди начнут охотнее делать заказ. Подробней о психологических механизмах иллюзии выбора читайте в книге «Предсказуемая иррациональность».
Выводы
- Начинайте создавать сайт не с главной, а с карточки товара.
- Проверьте на странице товара наличие основных блоков по списку.
- Тестируйте, тестируйте и еще раз тестируйте.