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

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

От автора

Цель данного руководства – дать Вам пошаговую разжеванную инструкцию по тому, каким должен быть продающий интернет-магазин с точки зрения юзабилити.

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

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

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

Что вы найдёте в руководстве?

  • 43 листа концентрированного и легко усвояемого контента БЕЗ воды
  • готовые шаблоны на внедрение
  • ТЗ для дизайнера и технических специалистов
  • подробный разбор и реальные прототипы продающих страниц интернет-магазина:
  • Главная страница
  • Каталог товаров
  • Карточка товара
  • Корзина и Оформление заказа
  • Thank you page
  • Страница результатов поиска
  • Страница сравнения товаров

Общие элементы на всех страницах

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

Общие технические моменты:

  • белый фон, светлые тона
  • шрифт БЕЗ засечек, черный
  • ссылки синие (или другого цвета под стиль сайта) с подчеркиванием, при
  • наведении подчеркивание снимается)
  • размер шрифта 12+
  • ширина макета 1000px.

Шапка (верхняя часть сайта)

Основной элемент – «прибитая» к верхней границе браузера панель сайта. Делается для того, чтобы вся необходимая потенциальному клиенту информацию была всегда в поле зрения – контактные данные, корзина, поисковая строка и т.д.

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

  • логотип + слоган (ссылкой на главную страницу сайта)
  • поисковая строка (четко заметная)
  • избранные (отложенные, примерочная) товары
  • просмотренные товары
  • товары в сравнении
  • призыв к звонку + сам телефон + обратный звонок (ссылка)
  • блок корзины (в обоих состояниях — пустая корзина и с товаром)
  • верхнее меню каталогаПовышение прибыльности коммерческих сайтов
  • логотип (ссылкой на главную страницу сайта) + дескриптор (в нем четко
  • описываете, чем вы занимаетесь, что продаете)
  • поисковая строка (четко заметная)
  • избранные (отложенные, примерочная) товары (товары, которые посетитель
  • отложил в свой список покупок в каталоге на сайте. При нажатии на эту
  • ссылку, откроется отдельная страница сайта с этими товарами.)
  • просмотренные товары (товары, которые посетитель просмотрел, гуляя по
  • каталогу сайта При нажатии на эту ссылку, откроется отдельная страница
  • сайта с этими товарами.)
  • товары в сравнении (товары, которые посетитель добавил в сравнение в
  • каталоге на сайте При нажатии на эту ссылку, откроется отдельная страница
  • сайта с этими товарами.)
  • призыв к звонку + сам телефон + обратный звонок, при нажатии на ссылку
  • всплывет поп-ап со следующим содержимым:
    • h1 (заголовок поп-апа)
    • одно обязательное поле — "Телефон"
    • кнопка "Жду звонка" (при нажатии на который информация с формы
    • отправляется оператору интернет-магазина).

02

  • верхнее меню каталога (ссылки на товарные разделы Вашего сайта)

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

Футер (самая нижняя часть сайта)

7 ключевых страниц интернет-магазинаБлоки ссылок (в зависимости от сайта – ссылки на страницы могут как добавляться, так и убавляться)

  • ссылки на группы в соц.сетях (vkontakte, facebook (организация признана экстремистской, деятельность на территории РФ запрещена), twitter, pinterest)

Левый сайдбар (левая колонка сайта, левый столбец)

Фильтр по товарам сайта (на основании параметров товаров, участвующих в фильтрации. Эти параметры выбираются, исходя из того, что может помочь пользователям выбрать товар).

Блок товара (отображение товара в каталоге)

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

  • название товара (ссылкой на страницу карточки товара)
  • фото товара (ссылкой на страницу карточки товара)
  • наличие товара (статус наличия товара. Должен быть реальным. Не должно быть ситуации, что отображается «В наличии», а в реальности товара нет. Это сильно бьет по репутации магазина.)
  • цена (если нет акции, то цена одна; если есть скидка на товар, то старая цена — зачеркнутая, мельче, бледная; новая цена — яркая, крупная; выгода в рублях)
  • ссылка сравнить (при нажатии на нее товар добавляется в список сравнения. Текст "сравнить" заменяется на "показать")
  • кнопка «В корзину» (при нажатии на которую товар добавляется в корзину)

Главная

Цель:

Уговорить посетителя не уходить Важно! Должна подходить всем сегментам Вашей ЦА.

Должна отвечать на вопросы посетителей:

  • Туда ли я попал?
  • Достойна ли страница доверия?
  • Чем занимается эта компания?
  • Предлагает ли сайт то, чего я хочу?
  • Достаточно ли интересна страница, чтобы провести здесь больше времени?
  • Что я могу сделать?
  • Хм, интересно. А как узнать больше?
  • Как связаться с компанией?

Ключевые принципы дизайна:

  • Добейтесь доверия
  • Соответствуйте ожиданиям
  • Создайте убедительный рекламный текст
  • Призыв к действию должен быть ясным
  • Кнопки должны быть большими и понятными

(Выдержки из конспекта книги «Проектирование прибыльных веб-сайтов (Web-design for ROI

  • h1 (заголовок сайта)
  • Блоки товаров (с эмблемами «Хит продаж» и прокруткой товаров в блоках влево-вправо). Друг под другом:

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

  • Блок текста на пару абзацев

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

Каталог

Задача:

Помочь посетителю сделать след.шаг в процессе выбора товара

Цели:

  • Красиво и привлекательно показывать товары
  • Содержать достаточно информации о каждом товаре, чтобы посетители
  • могли отличить их друг от друга
  • Предоставлять возможность сортировать и фильтровать товары по важным
  • для посетителей критериям
  • Четко указывать посетителю на дальнейшие действия

KPI:

  • Процент переходов
  • Процент добавлений в корзину

Что можно увидеть на эффективной странице категории?

  • Предметы или группы предметов, связанные между собой по какому-то признаку
  • Общую информацию о каждом предмете
  • Фильтры, сортировки

Должна отвечать на вопросы посетителей:

  • Соответствует ли это моим ожиданиям? Ту ли категорию я выбрал?
  • Как отсортированы эти товары? По цене? По цвету? По какому-то другому критерию?
  • Могу ли я поменять их порядок? Как?
  • Есть ли в этой категории еще товары? Где они?
  • Минуту назад мне на глаза попалось что-то, что мне понравилось. Как к этому вернуться?
  • Здесь слишком много товаров. Как сузить выборку?
  • Ой, теперь слишком мало. Как вернуться назад?
  • Вот то, что я хочу купить. Как сделать это прямо сейчас?

Что должно быть:

  • хлебные крошки
  • h1 (название каталога)
  • 1 абзац краткого описания раздела
  • ссылки на подразделы с количеством товара в них

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

  • сортировка по цене, популярности 
  • товары (сперва с шильдиками Хиты продаж, потом Новинки, потом обычные) 
  • под ними ссылка крупно "Еще 30 товаров" (при нажатии подгружаются еще 30 товаров)

Карточка товара

Цели:

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

KPI:

  • Добавления в корзину
  • Успешное совершение второстепенной конверсии (если не купили, то,
  • например, Скачали аналитический отчет)

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

Должна отвечать на вопросы посетителей:

Первые вопросы

  • Тот ли это товар, который я ожидал увидеть?
  • Как он выглядит?

Вопросы о товаре

  • Каковы основные характеристики и преимущества товара?
  • Как посмотреть на него поближе?
  • Что он делает и как работает?
  • Есть ли какие-то другие варианты товара (например, другой цвет) и как
  • их выбрать?
  • Можно ли купить этот товар?
  • Что говорят о нем люди?

Вопросы о цене

  • Сколько он стоит?
  • Есть ли на него скидка?
  • Если на странице не указана цена, можно ли получить
  • предварительный расчет?

Дополнительные вопросы

  • Есть ли к этому товару аксессуары?
  • Какие другие товары с ним сочетаются?
  • Какие есть варианты доставки/возможности обмена или возврата?

Что дальше?

  • Как купить товар или начать процесс покупки?
  • Что делать, если я не хочу покупать его прямо сейчас?
  • Что делать, если у меня есть еще какие-то вопросы?

Сила отзывов

  • Рейтинг покупателей
  • Количество "скачиваний"
  • Количество просмотров
  • Отзывы покупателей

Что должно быть:

  • хлебные крошки
  • убираем левый сайдбар (расширяем за его счет контентную область)
  • слева крупное фото товара
  • при наведении мышки на основное фото — справа у нас увеличивается фрагмент фото
  • под основным фото товара доп.фотографии со скроллингом влево-вправо
  • справа от фото h1 (название товара)
  • под заголовком якорные ссылки по странице
  • наличие товара
  • цена (оба варианта — когда одна цена и есть старая/новая/выгода)
  • доставка (когда доставят и сколько стоит)
  • оплата (какими способами возможна)
  • гарантия магазина или/и значок яндекс.маркета со звездами рейтинга
  • закажите по телефону (призыв к действию + номер телефона + обратный звонок)
  • сохранить товар в избранное
  • крупная кнопка "В корзину" + "Купить за 1 клик"

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

  • при нажатии на кнопку "В корзину" всплывает поп-ап, где есть:
    • подтверждение добавления в корзину
    • фото товара
    • название товара
    • количество и цена товара
    • ссылка "Продолжить покупки", при клике на которую мы возвращаемся
    • к карточке товара
    • кнопка-ссылка "Оформить заказ", при клике на которую мы переходим
    • в корзину

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

  • при нажатии на "Купить за 1 клик" всплывает форма, где есть:
    • обязательное поле "Телефон"
    • кнопка "Купить", при клике на которую мы оформляем заказ

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

  • комплект "Покупайте в комплекте и экономьте" (комплект – комплексное решение проблемы потенциального клиента)

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

  • описание, характеристики, отзывы

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

  • блок сопутствующих товаров (С этим товаром покупают)

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

Корзина

KPI:

  • Коэффициент конверсии. Доля посетителей, переходящих к след.этапу.
  • Показатель отказов. Доля посетителей, не переходящих к след.этапу.

Вопросы посетителей:

Первые вопросы

  • С чего мне начать? Как оформить заказ?
  • Необходима ли регистрация? Я просто хочу что-то купить?
  • Какой у меня пароль? Я не помню, чтобы что-то покупал раньше!
  • Я все еще в том же магазине? Почему страница выглядит иначе?
  • Сколько времени это займет?

Вопросы о процессе

  • Что такое "Платежный адрес"?
  • Во сколько мне обойдется доставка?
  • А что если я захочу вернуть или обменять товар?
  • Безопасно ли совершать здесь платеж?
  • Почему у меня просят ввести именно эту информацию?
  • Я не хочу заполнять форму оформления заказа в Интернете. Нет ли
  • другого способа оплатить товар?
  • Мне не удается заполнить форму. Может ли мне кто-то помочь?

Вопросы об оплате

  • Какие способы оплаты вы предлагаете?
  • Что такое код CVV?
  • Что произойдет, когда я нажму на кнопку "Оплатить"?

Вопросы после заполнения

  • Пришлют ли мне чек?
  • Когда я получу свою покупку?

Этапы:

  • Просмотр содержимого корзины
  • Ввод информации о получателе, платежного адреса и адреса доставки
  • Ввод информации об оплате
  • Подтверждение заказа

Рекомендации по дизайну процесса оплаты:

  • Оформляйте кнопки согласно их функции
  • Ясно обозначайте этапы процесса
  • Не заставлять регистрироваться
  • Уменьшайте количество этапов или сделайте их проще
  • Все этапы на одной странице
  • Покажите посетителям, что их информация в безопасности и тайне
  • Дайте информацию о правилах доставки и возврата товаров

Что должно быть:

  • в шапке просто логотип + слоган
  • левый сайдбар — блок УТП (Почему выбирают нас?)
  • правый сайдбар блок контактов (призыв позвонить, номер телефона крупно и обратный звонок). Когда прокручиваем страницу ниже — он прибивается к верхней границе браузера и остается всегда в зоне видимости.

Центральная область

  • "3 простых шага, не больше 2 минут Вашего времени" и далее таблица
  • добавленных в корзину товаров
  • состав заказа

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

  • далее блок Оформление заказа (подзаголовок) и 3 шага
  • Шаг 1. Кому доставить (пояснение к полям формы НАД полями)

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

  • Шаг 2. Как доставить

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

  • Шаг 3. Как оплатить

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

  • Итого с учетом доставки и расписываем
    • крупная кнопка "Оформить заказ"

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

Thank you page

Страница, которая показывается пользователю после оформления заказа.

Что должно быть:

  • в шапке просто логотип + слоган
  • левого сайдбара нет
  • правый сайдбар блок контактов (призыв позвонить, номер телефона крупно и обратный звонок). Когда прокручиваем страницу ниже — он прибивается к верхней границе браузера и остается всегда в зоне видимости.

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

  • благодарность за заказ
  • информация по заказу
    • номер заказа
    • дата доставки
    • адрес доставки
    • получатель
    • email
    • телефон
    • Доставка
    • Способ оплаты
    • содержимое заказа (товары, цена, количество, итоговая сумма с учетом доставки)

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

  • далее блоки на выбор (что кому актуально)
    • блок "Вступите в наши группы"

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

  • блок "оформите подписку на рассылку"

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

  • блок опроса

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

Страница результатов поиска

Что должно быть:

  • хлебные крошки
  • h1 (Те, кто искал «ЗАПРОС», также интересовались:)
  • строка с сортировкой (как в каталоге)
  • слева в сайдбаре фильтр по параметром товаров в результатах поиска
  • блоки товаров как в каталоге
  • когда вбиваем что-то в поисковую строку — появляются выпадающие подсказки (в примере это фото товара, название товара, цена товара)

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

Страница сравнения товаров

Что должно быть:

  • хлебные крошки
  • h1
  • блок сравнения товаров с прокруткой влево/вправо
  • переключатель на показ параметров: все параметры/только различающиеся
  • кнопка "В корзину"

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

В заключение…

Поздравляю Вас! Вы только что узнали и, скорее всего, внедрили (если нет – то не медлите, конкуренты не дремлют) продающие «фишки» на свой интернет-магазин, которых нет у 90% Ваших конкурентов!

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

Поделитесь своими успехами со мной на почту mail@ecommerceschool.ru

Shopolog: Полную pdf. версию (с макетами всех станиц) можно скачать по ссылке — http://www.seoschool.ru/7-prototipov

За скачивание просят email, но думаю за такой полезный материал не жалко.

Автор: Всеволод Козлов, ecommerceschool.ru

Читайте также

5 июня 2022 / Комментарии

Исследование маркетплейсов по качеству поиска товаров

В рамках исследования оценивалась удовлетворенность пользователей результатами поисковой выдачи на трех популярных площадках — Wildberries, Ozon и Яндекс.Маркет.

далее →

15 декабря 2021 / Комментарии

SEO и дизайн: продвижение интернет-магазина через оформление

Поговорим о связи дизайна с продвижением, оптимизации как части процесса разработки и факторах ранжирования сайтов поисковыми системами. Ну, и разберем некоторые распространенные ошибки.

далее →

13 марта 2019 / Комментарии

Анализ юзабилити топ-20 российских нишевых интернет-магазинов

В своем исследовании Константин Елистратов, основатель студии iarga.ru разобрал крупные нишевые интернет-магазины и их работу с юзабилити: закономерности, ошибки, интересные решения.

далее →

15 января 2019 / Комментарии

3 этапа создания дизайна интернет-магазина для малого бизнеса

Маркетплейс Satom.ru делится своим опытом по созданию дизайна для интернет-магазинов.

далее →

21 февраля 2018 / Комментарии

8 способов, когда дизайнеры могут обмануть вас и как этого избежать

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

далее →