От структуры до модулей: гайд по интернет-магазинам и их компонентам

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

Каким должен быть сайт интернет-магазина, который подойдет именно вам и будет успешно продавать вашу продукцию? Как составить его базовую структуру, какие компоненты добавить — объективно необходимые, желательные, опциональные? Рассказываем в этой статье!

Принципы формирования структуры

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

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

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

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

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

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

Типовая главная страница интернет-магазина состоит из набора информативных блоков:

• Набор баннеров (или карусель) предназначен для размещения акционных предложений, новинок, рекламных изображений.
• Ленты товаров — для показа самых популярных товаров, хитов продаж, новинок, товаров для распродажи.
• Также на главной обычно представляют категории товаров — ссылки на разделы-категории, благодаря которым покупатели могут быстро перейти к поиску интересующего продукта.
• Популярные категории служат для наглядного выделения наиболее популярных или востребованных у покупателей категорий товаров.
• Блок отзывов и рейтингов — для отображения отзывов клиентов и рейтингов товаров.
• Ленты последних новостей или специальных предложений — раздел для ознакомления со скидками, акциями. Также используется для интернет-магазинов, где ведется блог или выкладываются новости о важных событиях, обновлениях ассортимента.
• Информация о доставке, оплате (в кратком виде) требуется пользователям, которые хотят быстро узнать о вариантах оплаты, доставки, возврата товаров.
• Контактная информация служит для оперативного предоставления данных об адресе компании, контактной информации, а также сведений, куда обратиться за поддержкой. Как и в случае с доставкой и оплатой, это краткая информация — для предоставления полных данных на сайте часто создаются отдельные страницы.

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

Модули и функциональные блоки

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

Каталог товаров (листинг)

Это одновременно и самостоятельная страница, и функциональный модуль. Основа его структуры — вывод превью карточек товаров с описаниями, которые сгруппированы по категориям.

Каталог позволяет:

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

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

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

Фильтр товаров

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

Сортировка товаров

Функционал для распределения продуктов по популярности, цене, новизне и пр. Упрощает их поиск и выбор на странице.

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

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

Избранные товары

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

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

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

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

В карточке часто располагаются следующие блоки.

Похожие товары

Функционал для карточки товара с листингом. В листинге представлены сопутствующие, схожие, рекомендованные, акционные, недавно просмотренные позиции.

Отзывы или комментарии

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

Рейтинг товара

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

Чек-лист по конверсионным свойствам карточки товара

• Каждый товар снабжен высококачественными фотографиями.
• Все изображения представлены в достаточном количестве.
• Есть возможность увеличить изображения при клике или наведении мыши.
• Товар показан на изображениях во всех ракурсах, а также в процессе использования.
• Характеристики оформлены подробно, в виде таблицы.
• Наиболее важные характеристики сразу заметны глазу.
• Присутствуют видеообзоры как от лица магазина, так и от лица покупателя.
• Есть форма с комментариями, ответами на вопросы о товаре.
• Доступна информация об оплате (ее можно продублировать иконками и логотипами платежных систем).
• Цены указаны в карточке товара, а не предлагаются в отдельном файле или «по запросу».
• Есть информация о наличии на складе. Если он отсутствует, кнопка покупки должна быть неактивной или содержать текст вида «Привозите больше»,  «Сообщите о поступлении».
• Указывается дата доставки (хотя бы примерная).
• Есть онлайн-подборщик комплектов товара.
• Предлагаются дополнительные услуги — установка, настройка и пр.
• Имеется информация о рекомендациях, сопутствующих товарах из этой коллекции, серии.

Скачать полный чек-лист, которым пользуются наши специалисты, можно по ссылке.

Поиск

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

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

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

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

• Блок корзины является одним из наиболее ярких пятен на странице, заметен в первые 3 секунды просмотра сайта.
• При добавлении товара в корзину РЯДОМ с кнопкой добавления появляется информация о том, что товар в корзину добавлен.
• При добавлении товара в корзину в блоке «Корзина» происходит видимое изменение.
• При нажатии на ссылку «Добавить в корзину» повторно появляется информация о том, что товар уже в корзине, а также предложение «Просмотреть содержимое корзины» или «Добавить еще один такой товар».
• Реализован выбор количества товаров.
• Есть миниатюрное фото товаров в корзине.
• Есть активные ссылки на карточку товара из списка корзины.
• Число этапов оформления заказа, а также количество полей для заполнения сведено к минимуму.
• Корзина доступна без регистрации (идеальный вариант — авторизация через соцсети).
• Оформление заказа не прерывается, если пользователь не зарегистрирован.
• На странице корзины есть информация о доставке.
• Предлагается несколько вариантов доставки.
• Сделан акцент на скидки и бонусы, т, е. выгоду для покупателя.
• О совершении заказа на сайте обязательно приходит уведомление (на почту — письмо о заказе, его оплате, статусе доставки).

Онлайн-оплата

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

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

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

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

Личный кабинет

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

В типовом личном кабинете можно:

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

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

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

Комплексный подход к разработке интернет-магазина: почему это важно

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

Поэтому работать над созданием такого сайта должна команда профессионалов:

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

Команда Site Elite успешно справляется с требованиями самых придирчивых заказчиков. Интернет-магазины, которые мы создаем, стабильно держатся в ТОПах поисковиков, собирают заказы и приносят прибыль своим владельцам.