7 ключевых страниц интернет-магазина с чек-листами

От автора
Цель данного руководства – дать Вам пошаговую разжеванную инструкцию по тому, каким должен быть продающий интернет-магазин с точки зрения юзабилити.
На даннай момент у Вас огромное преимущество перед Вашими конкурентами. 90% из них не используют упомянутых в данном руководстве приемов, благодаря чему, внедрив описанное ниже, Вы сможете обойти их на раз-два!
Чтобы получить результат, а не просто пролистать и забросить на полку, я рекомендую Вам по ходу изучения материала – сразу же ставить задачи на внедрение своему техническому специалисту.
Я буду благодарен Вам, если Вы поделитесь со мной своей историей успеха, случившейся с Вами после внедрения приемов из этого руководства, т.к. я постарался сделать его максимально подробным и наглядным.
Что вы найдёте в руководстве?
- 43 листа концентрированного и легко усвояемого контента БЕЗ воды
- готовые шаблоны на внедрение
- ТЗ для дизайнера и технических специалистов
- подробный разбор и реальные прототипы продающих страниц интернет-магазина:
- Главная страница
- Каталог товаров
- Карточка товара
- Корзина и Оформление заказа
- Thank you page
- Страница результатов поиска
- Страница сравнения товаров
Общие элементы на всех страницах
Здесь я привожу общие требования и элементы страниц продающего интернет-магазина. Эти данные являются обобщением практического опыта и наработок по увеличению продаж во многих интернет-магазинах.
Общие технические моменты:
- белый фон, светлые тона
- шрифт БЕЗ засечек, черный
- ссылки синие (или другого цвета под стиль сайта) с подчеркиванием, при
- наведении подчеркивание снимается)
- размер шрифта 12+
- ширина макета 1000px.
Шапка (верхняя часть сайта)
Основной элемент – «прибитая» к верхней границе браузера панель сайта. Делается для того, чтобы вся необходимая потенциальному клиенту информацию была всегда в поле зрения – контактные данные, корзина, поисковая строка и т.д.
- логотип + слоган (ссылкой на главную страницу сайта)
- поисковая строка (четко заметная)
- избранные (отложенные, примерочная) товары
- просмотренные товары
- товары в сравнении
- призыв к звонку + сам телефон + обратный звонок (ссылка)
- блок корзины (в обоих состояниях — пустая корзина и с товаром)
- верхнее меню каталогаПовышение прибыльности коммерческих сайтов
- логотип (ссылкой на главную страницу сайта) + дескриптор (в нем четко
- описываете, чем вы занимаетесь, что продаете)
- поисковая строка (четко заметная)
- избранные (отложенные, примерочная) товары (товары, которые посетитель
- отложил в свой список покупок в каталоге на сайте. При нажатии на эту
- ссылку, откроется отдельная страница сайта с этими товарами.)
- просмотренные товары (товары, которые посетитель просмотрел, гуляя по
- каталогу сайта При нажатии на эту ссылку, откроется отдельная страница
- сайта с этими товарами.)
- товары в сравнении (товары, которые посетитель добавил в сравнение в
- каталоге на сайте При нажатии на эту ссылку, откроется отдельная страница
- сайта с этими товарами.)
- призыв к звонку + сам телефон + обратный звонок, при нажатии на ссылку
- всплывет поп-ап со следующим содержимым:
- h1 (заголовок поп-апа)
- одно обязательное поле — "Телефон"
- кнопка "Жду звонка" (при нажатии на который информация с формы
- отправляется оператору интернет-магазина).
- верхнее меню каталога (ссылки на товарные разделы Вашего сайта)
Футер (самая нижняя часть сайта)
- блоки соц.сетей (для простоты вступления в Ваши сообщества + Social Proof – социальное доказательство, в том случае, когда у Вас много участников в сообществах.
- Виджет VK можно получить тут: http://vk.com/developers.php?p=Groups
- Виджет Facebook (организация признана экстремистской, деятельность на территории РФ запрещена) можно получить тут: https://developers.facebook (организация признана экстремистской, деятельность на территории РФ запрещена).com/docs/plugins/like-box-for-pages/
- блоки ссылок на служебные страницы (страницы общего характера о компании, покупателям и помощь при выборе товара – здесь).
Блоки ссылок (в зависимости от сайта – ссылки на страницы могут как добавляться, так и убавляться)
- ссылки на группы в соц.сетях (vkontakte, facebook (организация признана экстремистской, деятельность на территории РФ запрещена), twitter, pinterest)
Левый сайдбар (левая колонка сайта, левый столбец)
Фильтр по товарам сайта (на основании параметров товаров, участвующих в фильтрации. Эти параметры выбираются, исходя из того, что может помочь пользователям выбрать товар).
Блок товара (отображение товара в каталоге)
- название товара (ссылкой на страницу карточки товара)
- фото товара (ссылкой на страницу карточки товара)
- наличие товара (статус наличия товара. Должен быть реальным. Не должно быть ситуации, что отображается «В наличии», а в реальности товара нет. Это сильно бьет по репутации магазина.)
- цена (если нет акции, то цена одна; если есть скидка на товар, то старая цена — зачеркнутая, мельче, бледная; новая цена — яркая, крупная; выгода в рублях)
- ссылка сравнить (при нажатии на нее товар добавляется в список сравнения. Текст "сравнить" заменяется на "показать")
- кнопка «В корзину» (при нажатии на которую товар добавляется в корзину)
Главная
Цель:
Уговорить посетителя не уходить Важно! Должна подходить всем сегментам Вашей ЦА.
Должна отвечать на вопросы посетителей:
- Туда ли я попал?
- Достойна ли страница доверия?
- Чем занимается эта компания?
- Предлагает ли сайт то, чего я хочу?
- Достаточно ли интересна страница, чтобы провести здесь больше времени?
- Что я могу сделать?
- Хм, интересно. А как узнать больше?
- Как связаться с компанией?
Ключевые принципы дизайна:
- Добейтесь доверия
- Соответствуйте ожиданиям
- Создайте убедительный рекламный текст
- Призыв к действию должен быть ясным
- Кнопки должны быть большими и понятными
(Выдержки из конспекта книги «Проектирование прибыльных веб-сайтов (Web-design for ROI)»
- h1 (заголовок сайта)
- Блоки товаров (с эмблемами «Хит продаж» и прокруткой товаров в блоках влево-вправо). Друг под другом:
- Блок текста на пару абзацев
Каталог
Задача:
Помочь посетителю сделать след.шаг в процессе выбора товара
Цели:
- Красиво и привлекательно показывать товары
- Содержать достаточно информации о каждом товаре, чтобы посетители
- могли отличить их друг от друга
- Предоставлять возможность сортировать и фильтровать товары по важным
- для посетителей критериям
- Четко указывать посетителю на дальнейшие действия
KPI:
- Процент переходов
- Процент добавлений в корзину
Что можно увидеть на эффективной странице категории?
- Предметы или группы предметов, связанные между собой по какому-то признаку
- Общую информацию о каждом предмете
- Фильтры, сортировки
Должна отвечать на вопросы посетителей:
- Соответствует ли это моим ожиданиям? Ту ли категорию я выбрал?
- Как отсортированы эти товары? По цене? По цвету? По какому-то другому критерию?
- Могу ли я поменять их порядок? Как?
- Есть ли в этой категории еще товары? Где они?
- Минуту назад мне на глаза попалось что-то, что мне понравилось. Как к этому вернуться?
- Здесь слишком много товаров. Как сузить выборку?
- Ой, теперь слишком мало. Как вернуться назад?
- Вот то, что я хочу купить. Как сделать это прямо сейчас?
Что должно быть:
- хлебные крошки
- h1 (название каталога)
- 1 абзац краткого описания раздела
- ссылки на подразделы с количеством товара в них
- сортировка по цене, популярности
- товары (сперва с шильдиками Хиты продаж, потом Новинки, потом обычные)
- под ними ссылка крупно "Еще 30 товаров" (при нажатии подгружаются еще 30 товаров)
Карточка товара
Цели:
- Помочь посетителям подробнее узнать о предложении
- Ответить на любые вопросы, которые могут возникнуть у посетителей
- Подчеркнуть особенности Вашего предложения по сравнению с конкурентами
- Предложить альтернативные методы совершения покупки — например по телефону
KPI:
- Добавления в корзину
- Успешное совершение второстепенной конверсии (если не купили, то,
- например, Скачали аналитический отчет)
При продаже услуг показывайте процесс или результат: Например, в случае продажи услуг дантистов – показывайте улыбки довольных пациентов.
Должна отвечать на вопросы посетителей:
Первые вопросы
- Тот ли это товар, который я ожидал увидеть?
- Как он выглядит?
Вопросы о товаре
- Каковы основные характеристики и преимущества товара?
- Как посмотреть на него поближе?
- Что он делает и как работает?
- Есть ли какие-то другие варианты товара (например, другой цвет) и как
- их выбрать?
- Можно ли купить этот товар?
- Что говорят о нем люди?
Вопросы о цене
- Сколько он стоит?
- Есть ли на него скидка?
- Если на странице не указана цена, можно ли получить
- предварительный расчет?
Дополнительные вопросы
- Есть ли к этому товару аксессуары?
- Какие другие товары с ним сочетаются?
- Какие есть варианты доставки/возможности обмена или возврата?
Что дальше?
- Как купить товар или начать процесс покупки?
- Что делать, если я не хочу покупать его прямо сейчас?
- Что делать, если у меня есть еще какие-то вопросы?
Сила отзывов
- Рейтинг покупателей
- Количество "скачиваний"
- Количество просмотров
- Отзывы покупателей
Что должно быть:
- хлебные крошки
- убираем левый сайдбар (расширяем за его счет контентную область)
- слева крупное фото товара
- при наведении мышки на основное фото — справа у нас увеличивается фрагмент фото
- под основным фото товара доп.фотографии со скроллингом влево-вправо
- справа от фото h1 (название товара)
- под заголовком якорные ссылки по странице
- наличие товара
- цена (оба варианта — когда одна цена и есть старая/новая/выгода)
- доставка (когда доставят и сколько стоит)
- оплата (какими способами возможна)
- гарантия магазина или/и значок яндекс.маркета со звездами рейтинга
- закажите по телефону (призыв к действию + номер телефона + обратный звонок)
- сохранить товар в избранное
- крупная кнопка "В корзину" + "Купить за 1 клик"
- при нажатии на кнопку "В корзину" всплывает поп-ап, где есть:
- подтверждение добавления в корзину
- фото товара
- название товара
- количество и цена товара
- ссылка "Продолжить покупки", при клике на которую мы возвращаемся
- к карточке товара
- кнопка-ссылка "Оформить заказ", при клике на которую мы переходим
- в корзину
- при нажатии на "Купить за 1 клик" всплывает форма, где есть:
- обязательное поле "Телефон"
- кнопка "Купить", при клике на которую мы оформляем заказ
- комплект "Покупайте в комплекте и экономьте" (комплект – комплексное решение проблемы потенциального клиента)
- описание, характеристики, отзывы
- блок сопутствующих товаров (С этим товаром покупают)
Корзина
KPI:
- Коэффициент конверсии. Доля посетителей, переходящих к след.этапу.
- Показатель отказов. Доля посетителей, не переходящих к след.этапу.
Вопросы посетителей:
Первые вопросы
- С чего мне начать? Как оформить заказ?
- Необходима ли регистрация? Я просто хочу что-то купить?
- Какой у меня пароль? Я не помню, чтобы что-то покупал раньше!
- Я все еще в том же магазине? Почему страница выглядит иначе?
- Сколько времени это займет?
Вопросы о процессе
- Что такое "Платежный адрес"?
- Во сколько мне обойдется доставка?
- А что если я захочу вернуть или обменять товар?
- Безопасно ли совершать здесь платеж?
- Почему у меня просят ввести именно эту информацию?
- Я не хочу заполнять форму оформления заказа в Интернете. Нет ли
- другого способа оплатить товар?
- Мне не удается заполнить форму. Может ли мне кто-то помочь?
Вопросы об оплате
- Какие способы оплаты вы предлагаете?
- Что такое код CVV?
- Что произойдет, когда я нажму на кнопку "Оплатить"?
Вопросы после заполнения
- Пришлют ли мне чек?
- Когда я получу свою покупку?
Этапы:
- Просмотр содержимого корзины
- Ввод информации о получателе, платежного адреса и адреса доставки
- Ввод информации об оплате
- Подтверждение заказа
Рекомендации по дизайну процесса оплаты:
- Оформляйте кнопки согласно их функции
- Ясно обозначайте этапы процесса
- Не заставлять регистрироваться
- Уменьшайте количество этапов или сделайте их проще
- Все этапы на одной странице
- Покажите посетителям, что их информация в безопасности и тайне
- Дайте информацию о правилах доставки и возврата товаров
Что должно быть:
- в шапке просто логотип + слоган
- левый сайдбар — блок УТП (Почему выбирают нас?)
- правый сайдбар блок контактов (призыв позвонить, номер телефона крупно и обратный звонок). Когда прокручиваем страницу ниже — он прибивается к верхней границе браузера и остается всегда в зоне видимости.
Центральная область
- "3 простых шага, не больше 2 минут Вашего времени" и далее таблица
- добавленных в корзину товаров
- состав заказа
- далее блок Оформление заказа (подзаголовок) и 3 шага
- Шаг 1. Кому доставить (пояснение к полям формы НАД полями)
- Шаг 2. Как доставить
- Шаг 3. Как оплатить
- Итого с учетом доставки и расписываем
- крупная кнопка "Оформить заказ"
Thank you page
Страница, которая показывается пользователю после оформления заказа.
Что должно быть:
- в шапке просто логотип + слоган
- левого сайдбара нет
- правый сайдбар блок контактов (призыв позвонить, номер телефона крупно и обратный звонок). Когда прокручиваем страницу ниже — он прибивается к верхней границе браузера и остается всегда в зоне видимости.
- благодарность за заказ
- информация по заказу
- номер заказа
- дата доставки
- адрес доставки
- получатель
- телефон
- Доставка
- Способ оплаты
- содержимое заказа (товары, цена, количество, итоговая сумма с учетом доставки)
- далее блоки на выбор (что кому актуально)
- блок "Вступите в наши группы"
- блок "оформите подписку на рассылку"
- блок опроса
Страница результатов поиска
Что должно быть:
- хлебные крошки
- h1 (Те, кто искал «ЗАПРОС», также интересовались:)
- строка с сортировкой (как в каталоге)
- слева в сайдбаре фильтр по параметром товаров в результатах поиска
- блоки товаров как в каталоге
- когда вбиваем что-то в поисковую строку — появляются выпадающие подсказки (в примере это фото товара, название товара, цена товара)
Страница сравнения товаров
Что должно быть:
- хлебные крошки
- h1
- блок сравнения товаров с прокруткой влево/вправо
- переключатель на показ параметров: все параметры/только различающиеся
- кнопка "В корзину"
В заключение…
Поздравляю Вас! Вы только что узнали и, скорее всего, внедрили (если нет – то не медлите, конкуренты не дремлют) продающие «фишки» на свой интернет-магазин, которых нет у 90% Ваших конкурентов!
Пока они поймут, почему Вы обошли их, Вы будете уже далеко! Надеюсь, что Вы применили бОльшую часть рекомендаций, а, может, и все из данного руководства и получили результаты.
Поделитесь своими успехами со мной на почту mail@ecommerceschool.ru
Shopolog: Полную pdf. версию (с макетами всех станиц) можно скачать по ссылке — http://www.seoschool.ru/7-prototipov
За скачивание просят email, но думаю за такой полезный материал не жалко.
Автор: Всеволод Козлов, ecommerceschool.ru