Структура и оформление интернет-магазина: что должно быть на сайте

Создание структуры интернет магазина: схема категорий

Структура интернет магазина состоит из двух частей:

  • SEO структура: категории, товары, информационные страницы, производители, статьи;
  • Техническая (функциональная) структура сайта.

Меня зовут Александр Антипов и эта статья для тех, кто собирается создавать интернет магазин с нуля или переделывать свой текущий сайт. Мы подробно разберем эти 2 составляющие, как основу для созданию удобного, SEO friendly и продающего интернет магазина.

1. SEO структура сайта магазина. Схема категорий и товаров

Разработка любого IT проекта начинается с технического задания (ТЗ). Но в случае с интернет магазином, чтобы поставить правильную задачу разработчику, нужно знать какая будет структура SEO страниц интернет магазина, исходя из чего будет продумываться функционал сайта.

Обычно есть 5 основных типов СЕО страниц в магазине:

  1. Категории товаров
  2. Товары
  3. Информационные страницы
  4. Производители (бренды)
  5. Статьи

Почему в этом списке нет главной страницы магазина? Я напишу в отдельной статье.

1. Категории товаров

Пример: Интернет магазин одежды

На сайте есть мужская, женская и детская одежда. Логично сделать 3 основные категории магазина: Для мужчин, Для женщин, Для детей. Таким образом покупатель определит к какому разделу он относится и быстро найдет нужный товар.

Схема категорий интернет магазина обычно выглядит так

В форме ЧПУ ссылок это будет так: vash-domen.ru/glavnaya-categotiya-1/podcategoriya-1

  • glavnaya-categotiya-1 — это ЧПУ главной категории
  • podcategoriya-1 — ЧПУ подкатегории

Как правильно создать структуру категорий и ЧПУ удобные для пользователя и для успешного SEO продвижения в Google, Yandex, мы разберем в следующей статье.

2. Товар

Страница с описанием товара или как еще говорят — карточка товара. СЕО структура страниц этого типа не требует предварительной проработки, как было с категориями выше, но важно указать в техническом задании, что не должно быть дублей ссылок в интернет магазине (обычно это касается только товаров).

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

Пример: Товар может относится к главной категории 1, главной категории 2, подкатегории 1 (главной категории 1) и к подкатегории 3 (главной категории 2) исходя из чего будет 4 ссылки на один и тот же товар:

vash-domen.ru/glavnaya-categotiya-1/tovar-1
vash-domen.ru/glavnaya-categotiya-2/tovar-1
vash-domen.ru/glavnaya-categotiya-1/podcategoriya-1/tovar-1
vash-domen.ru/glavnaya-categotiya-2/podcategoriya-3/tovar-1

Схематически это будет выглядеть так

Для того чтобы не было дублей ссылок, товару технически нужно присваивать одну главную категорию, а все остальные ссылки по которым можно зайти в товар — дополнительными. Таким образом все ссылки будут рабочими, но для поисковых систем будет выдаваться только одна основная ссылка в файле sitemap.xml.

3. Информационные страницы

Текстовые страницы сайта со статическим контентом называют информационными. Для интернет магазинов обычно это страницы: О магазине, Оплата, Доставка, Гарантия, Возврат, Политика конфиденциальности.

Ссылки таких страниц состоят с доменного имени и ссылки самой страницы.

4. Производители (бренды)

Пример:
vash-domen.ru/manufacturer — страница со списком брендов (производителей)
vash-domen.ru/manufacturer/apple — страница с описанием конкретного бренда (производителя). В данном случае Apple

5. Статьи

Пример:
vash-domen.ru/blog — страница со списком статей
vash-domen.ru/blog/statia-1 — страница самой статьи

Исходя из этого, перед тем как писать разработчику “сделай мне хороший магазин”:
— нужно продумать какие типы SEO страниц вам нужны в интернет магазине;
— составить схему структуры этих страниц: категории, товары, производители, статьи, информационные страницы и т.д. (удобно и очень наглядно это делать в специальной программе, но можно и на листочке нарисовать, главное чтобы понятно)

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

2. Техническая структура сайта интернет магазина

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

Вот перечень функциональных страниц структуры интернет магазина:

Основные страницы (14):

  • Главная страница
  • Каталог товаров (категории товаров)
  • Карточка товара (страница товара)
  • Производители (список)
  • Страница производителя
  • Акции (список акционных товаров)
  • Поиск по сайту
  • Сравнение товаров
  • Корзина
  • Оформление заказа
  • Отзывы о магазине
  • Контакты
  • Блог (список статей)
  • Блог (отдельная статья)

Личный кабинет (8):

  • Вход
  • Регистрация
  • Учетные данные (Имя, Фамилия, Email, Телефон покупателя)
  • Адреса доставки
  • Списки желаний (закладки, избранное)
  • История заказов
  • Возврат товара

Текстовые страницы (1):

  • О нас
  • Доставка и оплата
  • Гарантия
  • Вопросы и ответы
  • Возврат товара
  • Политика конфиденциальности

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

Используя эту информацию можно переходить к составлению технического задания.

Это моя первая статья на Habr, буду благодарен за критику и обратную связь.

Создание интернет магазинов достаточно объемная тема и в одной статье всего не напишешь.

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

Обязательные элементы интернет-магазина

Создание интернет-магазина – непростой процесс, требующий внимания на каждом этапе разработки.

Некоторые зацикливаются на технических моментах – какой домен придумать, какой хостинг выбрать. Но самое сложное начинается на этапе планирования интернет-магазина: как он будет выглядеть, что писать на страницах? И какие страницы вообще должны быть в интернет-магазине? Если вы столкнулись с трудностями или пока просто раздумываете о создании собственного интернет-магазина, то эта статья поможет вам разобраться в основных моментах.

Обязательные страницы

Начнем с главного – с того, каким будет структура интернет-магазина. Страницы, которые обязательно должны быть в вашем интернет-магазине:

  • главная страница;
  • каталог товаров;
  • страницы для определенных категорий или групп товаров;
  • отдельные страницы для каждого товара;
  • корзина и оформление заказа;
  • страница с информацией о доставке, оплате и т.д.;
  • контакты.

Теперь разберем подробнее.

Читайте также:
Производственная гимнастика: виды, комплекс упражнений для офисных работников

Главная страница интернет-магазина должна: а) заинтересовывать (вызывать желание остаться на сайте); б) побуждать к покупке.

Здесь важно максимально сократить путь к покупке, поэтому часть товаров (например, бестселлеры) нужно выводить прямо на главной странице, чтобы пользователь сразу видел, что именно он может купить .

Что еще может быть на главной странице? Красивые баннеры. Помните про побуждающие к покупке лозунги, скидки и другие рекламные инструменты; ставьте заметные кнопки, чтобы пользователь не метался по странице в надежде найти нужный элемент.

Идем дальше. Каталог товаров. Тут все понятно – выставляете свой товар в оптимальном виде. Если товаров много, то встанет вопрос: делать бесконечную прокрутку или делить каталог на страницы? Правильный ответ – и то, и другое. Если такой возможности нет, делайте постраничное деление.

В каталоге обязательно должны быть фильтры и возможность менять сортировку (по стоимости, новинкам и т.д.).

Учеными доказано, что большой выбор может ввести покупателей в фрустрацию (и они в итоге ничего не купят), поэтому ваша задача – максимально сузить их поиск. Для этого можно добавить страницы с отдельными группами товаров. Хотя если у вас ну очень хорошо сделана система фильтров, то от отдельных страниц с группами товаров можно отказаться.

Отдельные страницы для каждого товара – очевидная часть сайта, которая должна быть в любом интернет-магазине. Хотя бывают и исключения: если писать о товарах особо нечего, то может быть достаточно фотографии, указания стоимости и нескольких характеристик (такое встречается на сайтах доставок еды). Но все же больше информации – больше возможности убедить пользователя купить товар. Сделайте несколько качественных фотографий товара вблизи и издалека, укажите его параметры, кратко опишите его свойства и преимущества. Внизу или отдельной вкладкой в каком-нибудь блоке можно добавить отзывы.

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

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

Еще есть пара необязательных, но желательных страниц:

  • страница 404;
  • личный кабинет.

Иногда на сайте что-то может пойти не так – и будет здорово, если вместо стандартной страницы с ошибкой пользователи увидят что-нибудь интересное (и вообще отлично, если там будут ссылки обратно в каталог):

Расширенные профили пользователей – не то, о чем стоит беспокоиться на ранних этапах создания небольшого интернет-магазина. Но все же пользователям (да и вам) будет проще, если у них будет профиль с персональной информацией, историей заказов, списками желаемого и т.д.

Страницы обсудили, о чем еще нужно помнить при разработке интернет-магазина? Обсудим оформление.

Оформление

Каждый уважающий себя интернет-магазин должен иметь узнаваемую « шапку » (верхнюю часть сайта).

Обязательные элементы в ней:

  • логотип;
  • контактные данные (телефон лучше выделить крупно);
  • условия оплаты и доставки;
  • ссылка на корзину;
  • поисковая строка (желательно);
  • ссылка на авторизацию;
  • слоган (под логотипом) для того, чтобы было понятно, что вы продаете;
  • помощь;
  • выбор города/страны (если работаете не в одном регионе);
  • ссылки на основные разделы.

« Подвал » (нижняя часть сайта) тоже необходимо правильно оформить. В нем должны быть:

  • ссылки на соц. сети;
  • контактные данные;
  • правовая информация (о сайте и компании в целом);
  • блоки ссылок на все полезные и служебные статьи.

Иногда ссылки на социальные сети переносят в «шапку», это стоит сделать в том случае, если вы активны в соц. сетях и хотите, чтобы пользователи подписались на ваши аккаунты. Если вы выкладываете одно фото раз в месяц, то ссылки лучше оставить внизу.

Дополнительно

Технологии не стоят на месте – если раньше достаточно было указать телефон или вообще электронную почту, то сейчас пользователи хотят иметь возможность связаться с магазином как можно быстрее и проще, например:

  • через онлайн-чат;
  • заказать обратный звонок;
  • написать в мессенджере: WhatsApp, Viber, Telegram.

Необязательно подключать сразу все, начните с онлайн-чата и присутствия в одном из мессенджеров.

Страница товара

Под конец более подробно остановлюсь на том, что в идеале должно быть на отдельной странице товара:

  • заголовок;
  • крупное фото товара;
  • дополнительные фото, увеличивающиеся при наведении;
  • стоимость (если акция, то прежнюю стоимость тоже написать, зачеркнуть и обозначить в процентах скидку);
  • характеристики товара: размеры, вес, цвет и т.д, чем больше, тем лучше;
  • отдельный текст о товаре, перечисляющий его основные характеристики, способ применения;
  • ссылки на информацию о доставке, оплате, гарантиях;
  • большая кнопка «Добавить в корзину» и дополнительная кнопка «Купить в 1 клик»;
  • добавление в список желаемого/список покупок/избранное;
  • доступность товара: в наличии, под заказ, нет на складе, поступит в ближайшее время и т.д.

Необязательно, но часто производит положительный эффект:

  • видео (если актуально для товара – реклама, пример использования, отзыв);
  • 3D-модель (полезно в магазине обуви, украшений и т.д.);
  • ссылки на похожие товары, на товары, которые можно порекомендовать, и на категории похожих товаров.

Заключение

Работа над интернет-магазином не заканчивается даже после его релиза. Если не получается сделать и добавить сразу все элементы, выделите ключевые для своего интернет-магазина и сконцентрируйтесь на них. Лучше сделать меньше, но качественно, чем много, но плохо. Удачной работы и большой прибыли!

Структура и оформление интернет-магазина. Что обязательно должно быть на сайте вашего интернет-магазина.

Здравствуйте, дорогие читатели! Сегодня, как я и обещал ранее, будем продолжать тему открытия своего интернет-магазина.

Читайте также:
Как оформить портфолио фрилансеру: 3 варианта, их плюсы и минусы

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

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

Содержание

  • Оформление интернет-магазина
  • Структура интернет-магазина (страницы)
  • Шапка интернет-магазина
  • Контактная информация
  • Страница с товарами (каталоги)
  • Страница самого товара
  • Условия доставки, оплаты и гарантии
  • Корзина и оформление заказа
  • Социальные сети
  • Важные дополнения
  • Вывод

Оформление интернет-магазина

Дизайн интернет-магазина это далеко не последнее, на что нужно заострять внимание. Чем вы уникальнее, тем лучше. Когда бюджеты ограничены, приходится смотреть в сторону готового шаблона, потому что это дешевле и тоже по своему уникально, т.к. различных шаблонов тысячи.

Дизайн и оформление вашего интернет-магазина должен обязательно подчеркивать тематику, быть в одном стиле с товарами, которые вы продаете. Если вы продаете детские игрушки, то явно сайт не должен быть в черных цветах, а наоборот должен быть более яркий и светлый. Универсальный вариант конечно же минимализм в белом цвете с какими то отдельными цветными элементами и блоками, но можно сделать или подыскать готовый дизайн именно в вашей тематике.

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

Структура интернет-магазина (страницы)

На сайте любого интернет-магазина обязательно должны быть следующие страницы:

  1. Главная;
  2. Контактная информация;
  3. Страница(ы) с каталогами товаров (по категориям или все вместе);
  4. Страница самого товара;
  5. Корзина;
  6. Условия доставки, оплаты, гарантии;
  7. Страница оформления заказа.

Это обязательные страницы, но как я и говорил выше, еще требуется фантазия с вашей стороны и дополнения другими страницами. У меня к примеру еще есть: страница отзывов, страница с часто задаваемыми вопросами, акции (категория, но как отдельная страница). Почему я не прописал страницу регистрации и личный кабинет для клиентов? Потому что, как выяснилось, для некоторых магазинов, таких как мой cmoda.ru и для других магазинов, работающих в отдельном городе, это не столь нужно. Еще раз повторюсь, что это обязательный список страниц, но вы его можете и должны дополнять.

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

Шапка интернет-магазина

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

Контактная информация

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

Страница с товарами (каталоги)

Таких страниц на сайте может быть несколько, если у вас несколько групп товаров. На них должны располагаться миниатюры фотографий товаров, цена, название, кнопка «Купить» или «В корзину» и дополнительно может быть рейтинг по звездочкам (считается от отзывов положительных или отрицательных). Товаров на странице должно быть не 1-2, потому что в этом случае страница будет смотреться пусто.

Страница самого товара

На странице самого товара должны быть подробные большие фотографии товара, Название, цена, описание, основные характеристики, условия доставки, есть в наличии или нет, кнопка «Купить», количество отзывы, список похожих товаров, и дополнительные блоки, которые усиливают доверие к магазину. У меня это упоминание о бесплатной доставке, о том, что можно заказать несколько товаров и выбрать дома при получении и условия оплаты. Хотя что я объясняю) Вот скрин структуры моего магазина:

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

Условия доставки, оплаты и гарантии

Важнейшие элементы и страницы на сайте вашего интернет-магазина. Эти страницы нужно обязательно описывать подробно, подробнее некуда! Про различные способы доставки вы должны расписать по пунктам и проставить цены каждого вида доставки. После прочтения информации о доставке, ваш клиент должен четко все понять!

Про возможности оплаты достаточно просто указать, какими способами можно оплатить. Кстати обязательно прочитайте про то, какие платежные системы использовать и как принимать платежи.

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

Корзина и оформление заказа

В корзине ничего замысловатого нет. Она просто должна правильно подсчитывать сумму и все. А вот при оформлении заказа у вас должна быть упрощенная форма без регистрации, потому что не каждому хочется регистрироваться в интернет-магазине. При вводе данных не допускайте лишних пунктов, берите только те данные, которые необходимы, не нужно заставлять заполнять тонны строк. Самые необходимые: ФИО, номер телефона, адрес доставки, mail, комментарий к заказу (не обязательно).

Социальные сети

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

Читайте также:
Что такое Mind Map: программы для создания на русском + примеры

Важные дополнения

Быстрая покупка

Быстрая покупка подходит практически всем интернет магазинам и позволяет во многом упростить процесс оформления заказа для тех, кто любит экономить своё время. Что надо сделать: разместить на странице товара кнопку «Купить в 1 клик» или «Быстрая покупка». По клику на кнопку будет всплывать окно, в котором будет предложено ввести «Имя» и «Телефон», на который вы и перезвоните. Некоторые еще размещают поле для email, чтобы сразу зарегистрировать человека или просто сохранить его email.

Обратный звонок

Еще одна простая вещь, которую используют далеко не все. А ведь это отличный способ сэкономить время вашего покупателя и помочь ему оформить заказ по телефону в удобное для клиента время. Что надо сделать: в шапке сайта, рядом с вашим телефоном, разместите кнопку или текст «Обратный звонок». По клику должно всплывать окно, в котором покупатель введет Имя и Телефон. После отправки заявки желательно связаться с клиентом в течение 10-50 минут .

Информация о доставке и оплате в карточке товара

Нет ничего проще и одновременно сложнее, чем простым и понятным языком написать условия доставки и оплаты. К этой информации обращаются уже тогда, когда практически принято решение о покупке и важно как можно быстрее сформировать у покупателя понимание стоимости и сроков доставки в его регион. И в этом поможет размещение этой информации в сжатом виде в самой карточке товара. Что надо сделать: в 3-5 абзацах напишите основные условия доставки и оплаты. Вы можете разместить это отдельным блоком или во вкладке. Не забудьте в конце текста сделать ссылку на полные условия доставки и оплаты.

Акции, оживляющие сайт

В интернете полно магазинов, по которым не понять работают они или нет. Видя новости, например, от июня 2015 года, многие думают, что магазин скорее мёртв и уходят с сайта. И ваша задача показать, что вы действительно работаете, обрабатываете заказы и готовы помочь своим покупателям. Что надо сделать: разместите у себя на сайте сквозной статический баннер, в котором у вас постоянно будет висеть какая-нибудь акция с ограничением по времени. По истечению срока, вы просто сдвигаете срок на 1-2 недели вперед и снова вывешиваете на свой сайт. Таким образом у вас будет постоянная акция и по датам на неё всегда можно понять, что магазин жив.

А также

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

Вывод

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

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

Дизайн для интернет-магазина: тренды, правила, полезные советы

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

Основные правила дизайна интернет-магазина

  1. Удобство для посетителя. Много ли купит пользователь, если зайдет на неудобный сайт? Сейчас в тренде UX/UI дизайн, который создан для того, чтобы облегчить клиенту жизнь и плавно подвести его к самому главному – покупке или другому целевому действию (оставить контактные данные, зарегистрироваться и так далее). Для этого дизайнер должен продумать все до мелочей: понятное меню, удобные категории товара, небитые ссылки, заметная корзина, яркие кнопки заказа. Все должно быть логично, вытекать одно из другого, чтобы пользователь не метался по сайту вспуганной белкой, а переходил по страницам и добирался в итоге до главного. Например, из меню – в карточку товара, оттуда – в корзину, оттуда – обратно на сайт. Все это должно быть максимально естественно и не вызывать у пользователя ни малейших трудностей. Для этого составляются карты маршрутов по сайту, тестируются различные варианты и в результате выбирается самый оптимальный.
  2. Красота и строгость. Уже давно не в моде кричащие цвета, вычурные шрифты, плотное пространство – современные сайты стильные и элегантные. Много воздуха, не более трех цветов на странице, чистые тона и оттенки цвета, простые четкие шрифты, удобная типографика – вот что отличает сайты, которые продают. Это нужно затем, чтобы покупатель видел за деревьями лес: чтобы полезная и продающая информация не терялась за кричащим оформлением.
  3. Фирменный стиль. Если вы хотите отстроиться от конкурентов – разработка айдентики (фирменного стиля) – обязательное условие. Так вы выделитесь из серой массы интернет-магазинов, пользователь запомнит именно вас. В понятие фирменного стиля входит товарный знак, логотип, слоган, фирменные шрифты и цвета.
  4. Профессиональные фотографии. Если у вас интернет-магазин продуктов и товаров, которые производите сами – тут и думать нечего: проводите предметную съемку и используете эти фото в дальнейшем. Но что если речь идет о большом магазине, торгующем товарами различных брендов? Понятно, что фотосессией тут не отделаешься: нужно обращаться к производителям и поставщикам и просить их прислать качественные фото товара. Ни в коем случае не берите стоковые фото: доверия к таким у посетителей нет. Живые изображения, раскрывающие суть товара – то что надо.
  5. Визуализация. Пользователю неинтересно читать простыни текста. Интернет-магазин – это не новостной сайт и не книга. Все, что он хочет – спокойно выбрать товар и купить его. Следовательно, нужно упростить все, что можно. Для этого в дизайне интернет-магазина активно используются иконки и картинки – они успешно заменяют текст. Например, вместо того чтобы долго рассказывать, что этим товаром можно поделиться в соцсетях, лучше прикрутить иконки этих самых соцсетей. Вместо инструкции, как увеличить изображение для более детального просмотра – использовать значок лупы. Вместо слова “корзина” отрисовать узнаваемую корзину – поверьте, этого будет достаточно.
  6. Интересные фишки. Веб-дизайн, как и любое направление, развивается семимильными шагами. В 2020 году становятся модными различные эффекты. Их применяют чаще всего на сайтах и лендингах, но кто сказал, что интернет-магазины должны оставаться позади? Используйте анимацию – движущиеся элементы, эффект 3D-изображений, градиенты всех оттенков, тени для придания объема, эффект Parallax – когда картинки на сайте “живут” словно в двух разных измерениях и двигаются с разной скоростью и другие. Вот пример объемных изображений, актуальных для интернет-магазина женской одежды.
Читайте также:
Транспортная логистика - что это такое, понятия, задачи и виды

Еще пара правил

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

1. Золотое сечение

Не будем приводить сложных формул и расчетов: достаточно сказать, что пропорции предмета или изображения по правилу золотого сечения составляют 3/2, 5/3 и так далее. Это правило можно применять в построении блоков на сайте, подборе картинок, сочетания текста и фото, размера заголовка и текста.

2. Правило третей

Представьте страницу интернет-магазина. Неважно какую – на любой будет текст и фотографии. Поделите каждую страницу на три одинаковые части и отметьте точки пересечения. Вот это и будут самые главные места – именно туда падает взгляд посетителя. Соответственно, именно там нужно размещать ключевую информацию: кнопку “Купить товар”, корзину, информацию о скидках и акциях. Словом, все, что наиболее актуально для вас в этот момент.

Дизайн основных страниц интернет-магазина

Рассмотрим главные правила для каждого раздела интернет-магазина.

Главная страница

Это лицо сайта – главная страница должна быть максимально информативной и привлекающей внимание. Соответственно, дизайн играет важную роль. Используйте следующие приемы:

  • простая и понятная навигация: меню, разделы, категории и подкатегории. Можно разделить меню по категориям товара, по брендам или всем этим меткам сразу. Главное – помните о правилах трех кликов. Добраться до нужного товара посетитель должен не более чем за три движения мышкой. То есть примерно так: раздел женской одежды – категории платья – товар “платье синее вязаное фирмы Gucci”. В больших магазинах с огромным ассортиментом сделать это непросто: используйте фильтры по материалу, цвету, цене и другим параметрам. Подробнее мы рассказывали в статье Университета InSales о структуре интернет-магазина;
  • яркие баннеры на главной, которые ведут на страницы акций и распродаж. Суммы скидок в процентах или конкретном значении лучше выделять пожирнее да поконтрастнее. Не прячьте баннеры вниз страницы – посетитель должен увидеть их сразу, как только зайдет на сайт;
  • на случай, если глобальных распродаж пока не предвидится, основные продукты магазина можно выделить в отдельный раздел “Хиты продаж” и публиковать их на главной. Людям всегда интересно, что покупают другие – используйте этот прием;
  • рассказ о компании, иллюстрированный фотографиями или картинками. Также на главной можно рассказать алгоритм работы (можно опять же в картинках или схематичных изображениях – помните о визуализации!).

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

О, сколько мы уже писали о карточках товара! Объясняли теорию, рассказывали на пальцах, приводили разборы конкретных сайтов. Напомним еще раз основные правила:

  • красивое информативное фото, а лучше несколько. Этот тот самый случай, когда товар нужно показать лицом. Использовать одно фото, да еще и в плохом качестве или стоковое – это не есть гуд. Покажите товар с разных ракурсов, пригласите моделей и проведите профессиональную съемку. Если есть видео – это будет прекрасным дополнением;
  • блок информации. Как правило, туда включают цену, описание и характеристики, иконки соцсетей. Все эти элементы должны грамотно сочетаться друг с другом. Например, по неписаным правилам (хотя почему неписаным – давно доказано, как именно пользователь просматривает информацию и на что обращает внимание, а что пропускает мимо) в верхнем левом углу располагается название магазина, в верхней строчке – название, потом цена, справа висит манящая корзина;
  • отдельное внимание стоит уделить цене – именно на основании стоимости большинство посетителей принимают решение. Выделите цену контрастным цветом, крупным шрифтом. Если есть скидки – обязательно отметьте это. Про иконки соцсетей мы уже говорили – обязательно прикрутите их, дайте возможность людям поделиться информацией и рассказать о вашем магазине, причем для вас это будет совершенно бесплатно!

Кнопка СТА

Это кнопка с призывом пользователя к действию. В интернет-магазине это чаще всего “Купить” или “Добавить в корзину”. До сих пор ведутся споры, что же более эффективно и повышает конверсию сайта – но на практике в популярных магазинах используется и тот, и другой вариант. Обратите внимание на следующее:

  • цвет кнопки. Правила веб-дизайна предписывают делать ее контрастной – чтобы сразу привлекала внимание. Следите, чтобы кнопка СТА сочеталась по цвету с остальными элементами сайта;
  • текст на кнопке. Здесь важно придумать такой текст, чтобы не спугнуть покупателя. “Купить”, “Добавить в корзину” отлично работают. Можно проявить фантазию и пообщаться с клиентом нестандартным способом (“Что думаешь? Жми скорей!”. Но для этого нужно хорошенько изучить свою целевую аудиторию, чтобы не спугнуть ее), можно предложить за регистрацию что-то полезное и бесплатное (прислать курсы и лекции по интернет-маркетингу, личную подборку товаров для конкретного пользователя и так далее);
  • удобство пользования кнопкой. Вы знали, что на этом этапе воронки продаж отваливается множество клиентов? Казалось бы, человек уже проявил интерес, зашел на сайт, выбрал товар, осталось всего ничего – заполнить форму и сделать заказ! Но этого не происходит. Почему? Как правило, дело в неудобном дизайне. Если пользователю предлагается сложная регистрация, ввод капчи или картинок, множество полей для заполнения, он может психануть и покинуть сайт. Поэтому обязательно учитывайте дизайн не только самой кнопки, но и ее “внутрянки”. Дайте задание дизайнеру о количестве полей, способе регистрации (лучше всего – через соцсети, как на “Алиэкспресс” и других сайтах). Помните, главное – удобство покупателя!
Читайте также:
Как найти любимое дело - пошаговая инструкция + 8 упражнений

Корзина интернет-магазина

И последний элемент, от дизайна которого напрямую зависят ваши продажи и конверсии. Записывайте:

  • располагайте корзину в верхнем правом углу – так привычнее. Это тот самый случай, когда не надо изобретать велосипед – все уже придумано до нас;
  • делайте корзину большой и заметной – чтобы точно не промахнуться;
  • выделяйте ее контрастными цветами;
  • постоянно обновляйте информацию о количестве товаров в корзине. Нельзя, чтобы пользователь забыл о том, что он сам выбрал;
  • попросите дизайнера сделать такую фишку: при наведении курсора мыши на корзине пользователю должен показываться список покупок. То есть он не обязательно должен каждый раз заходить в нее – достаточно просто навести курсор. Помните: чем меньше кликов – тем лучше!
  • товары в корзине должны показываться не просто названием и описанием, а с фотографией и ссылкой на карточку товара. Это нужно для того, чтобы пользователь мог в любой момент посмотреть, что же он выбрал, и возможно, сравнить с другими товарами;
  • рядом с корзиной поместите информацию о заказе товара и доставке. В голове клиента эти понятия неразрывно связаны – вот и не рвите ему шаблон. Мы же помним про удобство, правда?

Несколько советов напоследок

  1. Конечно, хочется немедленно воплотить на сайте все эти штуки. Но если пока нет достаточного бюджета – лучше не торопиться. Хуже нет, чем заказывать дизайн у новичка-самоучки, зато дешево. Ограничьтесь основными правилами и элементами, а сделать редизайн всегда успеете.
  2. Тестируйте и еще раз тестируйте! Цвета, шрифты, текст на кнопке СТА – все что угодно. Только так вы поймете, какой вариант лучше работает и повышает конверсию.
  3. Не слизывайте у конкурентов – добавляйте частичку себя, индивидуальности вашего бизнеса. Найдите баланс между хорошей идеей и вашим фирменным стилем – это и будет оптимальным вариантом.

Как вам советы? Делитесь в комментариях в соцсетях, присылайте ссылки на ваши сайты! Удачи в продвижении!

Интернет-магазин: сложный квест или понятная структура?

21 февраля 2018 Опубликовано в разделах: Интернет-маркетинг для новичков. 8044

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

Мы собрали всю актуальную информацию об ошибках, приемах, а также секретах в создании структуры интернет-магазина, и написали подробное руководство, которое позволит увеличить эффективность торговой площадки.

  • Структура интернет-магазина: ключевые страницы и разделы
    • Главная
    • Каталог
    • Акции
    • Блог
    • Новости
    • О нас
    • Оплата и доставка
    • Корзина
    • Контакты
    • Регистрация
    • FAQ
  • Структура интернет-магазина в виде схемы
    • Блочная схема
    • Линейная схема
    • Древовидная схема
    • Правило «трёх кликов»: да или нет?
  • Структура интернет-магазина: пример
  • Несколько полезных советов

Структура интернет-магазина: ключевые страницы и разделы

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

Главная

Страница, на которую сразу же попадает клиент при переходе на сайт. «Лицо» интернет-магазина, демонстрирующее масштабы площадки и её составляющее. Главная страница открывает большие возможности перед владельцем маркета и способна удивить, привлечь и даже «уговорить» клиента купить товар. В данном разделе всегда размещается информация об акциях и распродажах, а также выносится навигация по разделам сайта.

Рекомендуем добавить на главную страницу несколько популярных товаров с ценами. Какие именно добавлять позиции — зависит от целевой аудитории. Главная задача — заставить посетителя перейти по ссылке, изучить информацию и купить товар. Чаще всего позиции добавляются с маркировкой «Хит продаж», «Новинки», «Товар недели/месяца», «Выбор покупателей», «Рекомендуем» и так далее.

Каталог

Зачастую интернет-магазин занимается реализацией разных групп товаров, которые предполагают разделение на уровни. Мы рассмотрим стандартные три уровня на примере структуры каталога интернет-магазина зоотоваров:

  • 1 уровень — «Собаки».
  • 2 уровень — «Сухие корма».
  • 3 уровень — конкретный корм.

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

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

Рекомендуем чётко разделять разделы и карточки товара, прибегая к дизайнерским приёмам (выделение цветом, шрифтом, элементами). Покупатель должен точно знать, что, нажав на картинку, где изображён определённый корм, он увидит цену и кнопку «Купить», а не получит список ещё десяти производителей и разновидностей лакомства.

Акции

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

  • все акции и распродажи;
  • акционные товары по одному виду скидки.

Не забывайте отмечать (цветом, рамкой, значком) товары, участвующие в акции, в общем списке продукции.

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

Читайте также:
Складская логистика - что это, принципы организации на предприятии

Технически раздел состоит из двух страниц:

  • общая (здесь пользователь сразу же видит список всех публикации с небольшим анонсом);
  • отдельная для статьи (страница, на которой находится сам текст).

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

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

Новости

Раздел в целом похож на блог, с тем лишь отличием, что статьи здесь короче, а периодичность их обновления — чаще. В новости можно включать информацию о поступлениях в каталоге, новых акциях, запуске усовершенствованных разделов, выходе нового товара (например, для магазина электроники можно анонсировать презентацию нового iPhone).
Раздел также делится на две части: общий список новостей (с датами, фото и анонсом) и детальная страница каждой отельной новости.

Рекомендуем использовать этот раздел для продвижения интернет-магазина, и, как и в случае с блогом, не забывать выделять важные фрагменты текста (курсивное или полужирное начертание, подчеркивание, рамка или цитирование).

О нас

Повысить доверие посетителей, предупредить ряд вопросов и даже увеличить продажи — всё это поможет сделать грамотно составленная информация «О нас». Главное — писать честно, интересно и подробно, не забывая упоминать все достоинства магазина и его основателей.

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

Оплата и доставка

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

Корзина

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

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

Контакты

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

Регистрация

Даже несмотря на то, что в последнее время появляется всё больше интернет-магазинов без данного раздела, «Регистрация» всё-таки ещё актуальна там, где пользователю предоставляются персональные скидки и промокоды.

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

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

Если вы планируете добавлять много вопросов, рекомендуем сортировать их по темам, что облегчит поиск и сделает информацию ещё доступнее.

Структура интернет-магазина в виде схемы

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

Блочная схема

Специфичная структура, где все страницы разделов ссылаются на несколько следующих. Чаще всего такую схему используют для описания конкретного товара, где ссылки переносят клиента на страницу с описанием какого-либо достоинства или свойства.

Линейная схема

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

Древовидная схема

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

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

Правило «трёх кликов»: да или нет?

Ещё в 2001 году веб-дизайнер Джеффри Зельдман издал книгу, в которой указал, что правило «трёх кликов» позволит создать интуитивно понятный интерфейс сайта и увеличить продажи. С тех пор информация распространилась по просторам интернета и теперь часто «мелькает» в разнообразных пособиях по созданию структуры и продвижению онлайн-ресурса.

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

А последнее исследование, опубликованное в американском журнале «Технология интерфейса пользователя» показало, что число кликов не влияет на уровень отказа пользователей от изучения сайта. Так, клиент может уйти после второго клика, а может успешно заказать товар после тридцатого.
Всё это позволяет сделать логичный вывод: правило не работает, а лишь напоминает владельцам о том, что интерфейс и структура интернет-магазина, схема которого должна отвечать потребностям аудитории, обязаны быть максимально простыми и понятными для посетителя.

Читайте также:
Логистика - что такое, виды, оптимизация, эффективность и принципы

Структура интернет-магазина: пример

Мы проанализировали несколько крупных интернет-магазинов детской одежды и решили показать пример оптимальной структуры каталога подобной торговой площадки.

  1. Девочкам.
    1.1. Одежда.
    1.1.1. Платья.
    1.1.2. Костюмы.
    1.1.3. Школьная форма.
    1.1.4. Головные уборы.
    1.1.5. Джинсы.
    1.2. Верхняя одежда.
    1.2.1. Куртки.
    1.2.2. Комбинезоны.
    1.2.3. Жилеты.
    1.2.4. Одежда из меха.
  2. Мальчикам.
    2.1. Одежда.
    2.1.1. Брюки.
    2.1.2. Костюмы.
    2.1.3. Школьная форма.
    2.1.4. Джинсы.
    2.1.5. Жилеты.
    2.2. Верхняя одежда.
    2.2.1. Куртки.
    2.2.3. Комбинезоны.
    2.2.4. Жилеты.
    2.2.5. Пальто.

Безусловно, в зависимости от ассортимента структура интернет-магазина будет меняться, однако неизменным остаются два аспекта: логичная сортировка и понятное название всех подразделов.

Несколько полезных советов

Создание интернет-магазина — это сложный и трудоёмкий процесс, требующий максимальной концентрации и понимания целей и задач ресурса. Для того чтобы упростить работу, можно воспользоваться некоторыми рекомендациями:

  1. Изучайте конкурентов. Подробно рассмотрите структуру интернет-магазинов схожей или аналогичной тематики, обращая особое внимание на успех ресурса. Составив «полный портрет» ситуации на рынке, вы сможете выделить для себя полезные разделы или, наоборот, — исключить лишний элемент из своего плана.
  2. Не изобретайте велосипед. На самом деле оптимальная структура сайта уже давно создана ведущими маркетологами и веб-разработчиками со всего мира. Крупные онлайн-магазины, такие как, например, EBay, из года в год оттачивают мастерство структурирования площадки, внедряя новые технологии. Именно поэтому есть смысл перенимать схему у авторитетных маркетов. И не сомневайтесь — там всё верно. Ваша задача — правильно внедрить и подстроить уже имеющуюся структуру под свой магазин.
  3. Старайтесь понимать аудиторию. Подробно изучите привычки и желания целевых клиентов. Это позволит «выстрелить в цель» и дать посетителю именно то, что он хочет.
  4. Обращайте внимание на тренды. Следите за изменениями в мире веб-разработки и старайтесь сохранять современную и актуальную структуру сайта.

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

Как составить ТЗ на разработку интернет-магазина, чтобы получить максимум трафика сразу после запуска

  • Что должно содержаться в техническом задании на разработку магазина?
    • Обязательные этапы создания интернет-магазина
  • Пример ТЗ на разработку интернет-магазина
    • Пример ТЗ на структуру магазина
    • Пример плана ТЗ по технической части интернет-магазина
    • Пример прототипа страницы интернет-магазина
    • Пример ТЗ с описанием структуры страниц магазина (если нет прототипов)
  • Выводы

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

Чтобы избежать конфликтов сторон и на выходе получить дом, полностью соответствующий ожиданиям владельца, нужно начинать с проекта. Точно так же и разработку интернет-магазина нужно начинать с подробного технического задания.

Составление ТЗ требует много времени, фокуса и энергии, а также специфических знаний SEO и сайтостроения. Но если отнестись к этой задаче поверхностно, на выходе может получиться, как на этой картинке:

Хотите, чтобы интернет-магазин был основным каналом продаж и источником дохода? Тогда давайте вникать и разбираться.

Что должно содержаться в техническом задании на разработку магазина?

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

Обязательные этапы создания интернет-магазина

1. Создание общей концепции

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

Базовая концепция ИМ должна содержать такие пункты:

  • общее описание — что будет продавать магазин, в каких регионах и каким потребителям;
  • перечень возможностей для пользователей (регистрация, личный кабинет, подписка на новости и т. д.);
  • перечень возможностей для администраторов (интеграция с CRM, API, способы загрузки товаров и т. д.);
  • ожидаемый объём посетителей.

Желательно решить, на какой CMS будет работать сайт — это будет готовый продукт или самописный движок.

2. Разработка структуры каталога

Каталог сопоставим с фундаментом дома. Это основа любого интернет-магазина. По нашему опыту, от структуры каталога зависит половина успеха сайта.

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

При правильном подходе для разработки структуры каталога достаточно таких данных:

  • ассортимент будущего ИМ (для рубрик и категорий);
  • анализ поискового спроса целевой аудитории (для фильтров, тегов и всего остального).

Рост трафика ИМ сразу после запуска. Вот что может правильная структура:

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

Результат этапа:

  • визуализация каталога;
  • описание взаимосвязей между страницами (например, один товар должен привязываться только к одной категории или к нескольким).

3. Базовые технические требования к сайту

На этом этапе следует уделить достаточно внимания выбору движка для сайта. Оценить все возможности, преимущества и недостатки той или иной CMS. Если провести параллель со строительством, то это этап продумывания эргономичности дома.

Следует заранее продумать нюансы, которые будут влиять на восприятие сайта поисковыми системами:

  • кроссбраузерность;
  • возможность редактирования и добавления метаданных;
  • наличие навигации и перелинковки;
  • наличие хлебных крошек и возможность их редактирования;
  • наличие заголовков;
  • доступность контента и прочее.
Читайте также:
Как поднять свою зарплату: инструкция + что делать при отказе

Должны быть реализованы такие возможности:

  • настройка редиректов;
  • формирование ЧПУ URL;
  • редактирование данных атрибута alt;
  • добавление товара в любой каталог сайта, в несколько разделов;
  • принцип формирования и редактирования карты сайта, robots.txt;
  • формирование шаблонных метатегов с возможностью точечной корректировки;
  • изменение атрибута «canonical»;
  • управление тегом robots для каждой страницы;
  • возможность добавления SEO-текстов;
  • создание дополнительных выборок и посадочных страниц.

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

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

Результат этапа — список технических требований к сайту и движку.

4. Прототипирование основных страниц

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

Базовый список типов страниц интернет-магазина, под которые нужно создавать прототипы:

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

В идеале разработкой прототипов должен заниматься специалист со знанием Usability и SEO. Его задача — проанализировать конкурентов в поисковой выдаче и ожидания пользователей. И на основании этих данных спроектировать страницы, удобные для посетителей и соответствующие требованиям поисковиков.

Результат этапа — схематичные изображения страниц с описанием взаимосвязей между элементами (что должно происходить при взаимодействии с тем или иным элементом страницы).

5. Разработка дизайн-концепции

Этот этап можно сравнить с дизайном интерьера дома. Готовые прототипы передаются дизайнеру, и он отрисовывает все элементы каждой страницы с учётом пожелания заказчика.

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

Результат этапа — готовые макеты, которые можно верстать.

6. Web-разработка

Собственно, строительство дома. На этом этапе верстаются макеты, дизайн «натягивается» на «движок» и настраивается функционал.

Для качественного выполнения работы программистам понадобятся все результаты предыдущих этапов:

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

7. Наполнение магазина товарами

Дом готов — осталось повесить шторы, завести мебель и подключить технику. Последний шаг до запуска интернет-магазина — наполнение его товарами.

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

Сложно сказать, какой процент наполненности магазина можно считать достаточным для его запуска — зависит от специфики, тематики и конкурентности ниши. Если у вас есть SEO-специалисты, требуйте от них чёткого ответа на этот вопрос.

Пример ТЗ на разработку интернет-магазина

Каждый проект уникален и требует индивидуального подхода. Здесь мы приведём примеры из разных ТЗ под каждый пункт отдельно: от структуры сайта до технических аспектов и функционала.

Пример ТЗ на структуру магазина

Выше показан пример структуры интернет-магазина детской одежды и аксессуаров.

  • классический каталог с иерархией по категориям;
  • альтернативные рубрики с разбивкой по полу и бренду;
  • перечень фильтров;
  • визуализацию взаимосвязей между страницами.

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

Пример описания структуры из ТЗ на редизайн магазина семян:

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

Пример плана ТЗ по технической части интернет-магазина

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

1. Общие технические требования к новой версии сайта
1.1. Предотвращение дублей страниц и контента
1.2. Требования к метаданным и заголовкам
1.3. Общие рекомендации по генерации метаданных
1.4. Предотвращение шаблонной переоптимизации
1.5. Требования к страницам пагинации
1.6. Предотвращение появления страниц низкого качества
1.7. Требования к https-протоколу сайта
1.8. Требования к мобильной версии сайта
1.9. Требования к ответам сервера (200, 301, 302, 404, 410)
1.10. Рекомендации по созданию карты сайта
1.11. Требования к элементам, влияющим на скорость загрузки страниц
1.12. ТЗ на внедрение семантической разметки
1.13. Настройки robots.txt
1.14. Критерии выбора CRM-системы и рекомендации по оптимальным вариантам
1.15. Работы на тестовой версии сайта
2. Установка систем аналитики и мониторинга
2.1. Яндекс.Вебмастер
2.2. Яндекс.Метрика
2.3. Google Search Console
2.4. Google Analytics

Пример прототипа страницы интернет-магазина

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

В итоге должны получиться вот такие схемы страниц:

Жёлтыми маркерами на прототипе отмечены элементы, описание которых вынесено в отдельный файл.

Читайте также:
Как заработать на кредитной карте и использовать деньги на бизнес

Пример документа с описанием прототипа:

Пример ТЗ с описанием структуры страниц магазина (если нет прототипов)

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

Главная страница

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

  • большой баннер с акциями;
  • форма поиска товаров;
  • блок с промо-товарами.

Каталог и подразделы

Каталог должен содержать:

  • строка поиска;
  • корзина;
  • фильтры поиска и сортировка;
  • блоки подразделов с возможностью перехода на страницы;
  • поле с возможностью добавить текстовый контент.

Подразделы должны содержать:

  • фильтры;
  • строка поиска;
  • товар;
  • возможность перехода на страницы пагинации;
  • поле с возможностью добавить текстовый контент.

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

  • строка поиска;
  • цена и возможность добавления в корзину;
  • изображение товара;
  • краткое описание и характеристики;
  • краткая информация об условиях покупки (доставка, оплата, гарантия);
  • отзывы;
  • блок «С этим покупают»;
  • блок «Похожие товары».

Корзина

  • нумерация товара;
  • название товара + ссылка на страницу товара;
  • цена товара;
  • количество (с возможностью поменять – по умолчанию 1);
  • возможность удалить товар из корзины;
  • общая стоимость заказа.

Оформление заказа

По ссылке «Оформить заказ» пользователь переходит на страницу, где отображаются все данные его заказа, способ оплаты и доставки. Также на странице должны быть кнопки «Подтвердить заказ» и «Вернуться к редактированию корзины».

Доставка и оплата

Страница должна содержать текстовую информацию об условиях доставки и оплаты товара.

Акции и Новинки

Страница должна содержать информацию о проходящих акциях и новинках компании.

Гарантия

Указывается информация о гарантиях на вашу продукцию.

Отзывы

Страница на сайте с возможностью оставить отзыв о компании/продукции.

Новости и Статьи

Раздел будет содержать перечень новостей и статей компании, которые будут иметь такую структуру:

  • дата;
  • заголовок новости;
  • краткое содержание;
  • возможность поделиться в соцсетях;
  • полное содержание (текст + фото в свободной форме).

Контакты

Страница будет содержать общую контактную информацию, схему проезда.

О компании

Особенности бренда, партнёры, фотографии офиса и сотрудников в рабочем процессе.

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

Выводы

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

  • SEO-оптмимизаторов и Usability-специалистов — на этапе разработки структуры сайта и отдельных страниц;
  • программистов — на этапе продумывания функционала и выбора CMS.

Такой подход поможет сэкономить время, бюджет и будет хорошим бустом для продвижения ресурса. Кроме того, такой проект будет соответствовать предпочтениям пользователей – то, что они ожидают увидеть на сайте.

Если у Вас возникли трудности с разработкой ТЗ для интернет-магазина, наши специалисты помогут Вам с этим!

Что должна содержать Главная страница интернет-магазина

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

Содержание:

Структура главной страницы интернет-магазина

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

Правильная главная страница интернет-магазина состоит из:

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

Разберём каждый блок в отдельности.

Шапка сайта

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

Меню интернет-магазина

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

Визуальный блок главной страницы

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

Здесь можно разместить рекламные баннеры с объявлениями о предстоящей или проходящей акции, особо выгодных предложениях или возможности принять участие в конкурсе с целью получить ценный приз. Если у вас есть несколько интересных предложений, их можно оформить в виде слайдера.

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

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

Читайте также:
Как оформить портфолио фрилансеру: 3 варианта, их плюсы и минусы

Ещё один вариант для заполнения витрины на главной странице интернет-магазина — размещение превью карточек некоторых товаров, которые точно смогут заинтересовать пользователя. Не рекомендуем наполнять эту часть страницы большим количеством продукции. Достаточно показать 5-10 товаров. Главное, чтобы это были действительно интересные для вашей целевой аудитории продукты с выгодными для покупки условиями.

Для этого блока подойдут:

  • товары, пользующиеся наибольшим спросом;
  • популярная продукция с самыми выгодными ценовыми условиями среди конкурентов;
  • уникальная продукция, право на реализацию которой есть только у вас;
  • интересные новинки рынка.

Важность и эффективность определили место размещения самого привлекающего элемента главной страницы — этот блок размещается по центру сразу под шапкой и меню сайта.

Результат «работы» визуального блока зависит не только и часто не столько от самого предложения, сколько от правильного оформления и расстановки акцентов. Это самое настоящее рекламное пространство, от которого во многом зависит, продлятся ваши отношения с посетителем до оформления заказа или завершатся до знакомства с продукцией.

Текстовый контент

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

Текста на главной странице служит для:

  • информирования пользователя о выгодах сотрудничества с интернет-магазином, пользе и качестве продукции и других «плюшках», которые получают клиенты компании;
  • увеличения прибыли за счёт использования техник активных продаж при написании контента;
  • seo-оптимизации и продвижения сайта в поисковой выдаче.

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

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

Блок повышения лояльности

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

Дополнительный информационный блок

Если на главной странице осталось свободное место, рекомендуем использовать и его. Здесь можно опубликовать анонсы предстоящих мероприятий или ссылки на самые последние и интересные новости или статьи из блога.

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

Футер сайта интернет-магазина

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

Как оформить главную страницу интернет-магазина

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

Создавая главную страницу, помните, что она является частью ресурса, а не отдельным самостоятельным организмом, который живёт своей жизнью. Цветовая гамма, шрифты, отступы, интервалы и поля, графические элементы — всё должно гармонично сочетаться со всеми страницами сайта и рекламной продукцией бренда.

Используйте графические объекты только хорошего качества, картинки должны привлекать, при этом быть чёткими. С другой стороны, необходимо следить за «весом» элементов: он не должен стать причиной длительной загрузки сайта и, по этой причине, потери торопливых пользователей.

Главную страницу интернет-магазина требуется адаптировать под использование с мобильных устройств (как и все остальные страницы сайта). Проверьте, как она выглядит на экране разных устройств и, в случае необходимости, доработайте ее.

Вертикальное и горизонтальное меню сайта

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

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

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

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

Правый вертикальный блок в качестве списка ссылок каталога используют в тех странах, язык которых предполагает размещение текста справа налево. Вместе с тем примеры главных страниц популярных интернет-магазинов Украины, России и Европы доказывают, что и здесь можно с большой пользой использовать правый вертикальный блок меню. В нём можно разместить новости магазина, отзывы клиентов, информацию о брендах и т. д.

Заключение

Теперь вам известно, как должна выглядеть главная страница интернет-магазина, чтобы помочь вам превратить как можно больше пользователей в покупателей. А какие еще фишки в оформлении и структуре главной страницы интернет-магазинов заинтересовали вас и повлияли на выбор?

Узнайте еще больше тонкостей и нюансов в продвижении интернет-магазина, которые позволят привлечь новых посетителей и превратить их в клиентов, на курсе «10X Интернет-магазин»‎. А с промокодом «Glavnaya»‎ Вы получите на него дополнительную скидку.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: