ПЗ Караулова В.С. (Разработка, создание и внедрение интернет-магазина строительных и отделочных материалов), страница 5

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

1. Эмали, лаки, краски:

• эмали ПФ;

• эмали НЦ;

• эмали для пола;

• эмали и краски для радиаторов;

• лаки;

• колеры;

• морилки;

• краски масляные;

• краски акриловые;

• водоэмульсионные краски;

• прочие краски.

1. Штукатурки, шпатлевки, сухие смеси:

• штукатурки;

• шпатлевки;

• затирки для швов и кафеля;

• прочее.

1. Герметики, силиконы:

• герметики;

• герметики для дерева;

• силиконы;

• пеногерметики.

1. Жидкие гвозди, клеи, мастики:

• клеи «Момент»;

• клеи «Новбытхим»;

• клеи «ПВА»;

• клеи обойные;

• клеи для потолков;

• клеи для керамической плитки;

• жидкие гвозди;

• мастики;

• прочее.

1. Растворители, пропитки, грунтовки:

• растворители;

• грунтовки;

• пропитки;

• антисептики;

• прочее.

1. Электротовары:

• розетки и выключатели;

• лампы;

• энергосберегающие лампы;

• светодиодные лампы;

• автоматы;

• удлинители;

• кабеля и провода;

• прочее.

1. Инструменты:

• слесарный;

• столярный;

• измерительный;

• крепежный;

• ключи, головки;

• садовый;

• режущий;

• строительно-отделочный;

• хозтовары;

• прочее.

1. Замки, мебельная фурнитура:

• замки;

• дверные ручки;

• мебельная фурнитура;

• прочее.

1. Кровля:

• черепица;

• пленки;

• гвозди кровельные;

• прочее.

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

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

В каталоге сделан переключатель страниц (пагинация), вывод товаров – по 30 штук списком.

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

3.2.3 Навигация

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

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

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

В интерфейсе поиск расположен в шапке сайта. Предусматривается поиск только по товарам [15].

3.2.4 Контакты

Для удобства и доверия к Интернет-магазину контактов должно быть много. Основные контакты, по которым идет продажа (несколько телефонов) находятся в шапке сайта. Адрес внесен на страницу контактов и в подвал сайта, он вызывает доверие.

На странице контактов указана информация по контактам уже существующего магазина «Строймаг».

3.2.5 Популярные, новые, сопутствующие и отсутствующие товары

Популярные, новые, сопутствующие товары − это еще один механизм, который базируется на психологических особенностях поведения покупателей. Людям важно, что покупают другие. К популярным товарам у потребителей больше доверия. Для использования этой особенности и были придуманы специальные метки и целые блоки «Популярные товары». Примерно такую же функцию несут «Новые товары» [15].

Блоки с популярными и новыми товарами размещены на главной странице Интернет-магазина. В блоке новых тваров может быть размещено до 6 товаров, в блоке популярных − 12.

Есть очень хороший способ увеличить средний чек – предложить человеку сопутствующие товары к основному. Это очень действенный способ, поэтому блок находится на видном месте. Однако, есть тонкая грань: не надо отвлекать внимание пользователя от основной информации, если он не купит основной товар, то не купит и сопутствующие [15]. Поэтому, блок сопутствующих товаров расположен в карточке товара снизу.

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

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

Более 30% пользователей кладут товар в корзину, но так и не оформляют покупку по разным причинам. Корзина в данном магазине имеет вид небольшого блока в правой части шапки, в котором указана маленькая пиктограмма, количество товаров в корзине и общая сумма (мини-корзина). Прежде, чем человек увидит корзину изнутри, ему нужно добавить хотя бы один товар. Это происходит без перезагрузки страницы [16].

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

В корзине так же реализовано оформление заказа.

Оформление заказа проходит в несколько этапов:

• заполнение данных получателя (e-mail, ФИО, телефон, комментарий);

• выбор способа оплаты;

• выбор варианта доставки;

• адрес доставки (улица, дом, подъезд).

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

Заказчик осуществляет доставку до подъезда. Поэтому необходимо реализовать два способа доставки: самовывоз и доставку. Стоимость доставки зависит от расстояния, и заказчик пожелал озвучивать ее самостоятельно при подтверждении заказа по телефону.

При выборе способа доставки самовывозом, пользователю будет предложено заполнить всего три обязательных поля (Email, ФИО, телефон).При выборе доставки до подъезда к обязательны полям добавится адрес доставки (улица, дом, подъезд).

При оформлении заказа можно очистить форму. Ниже обозначена итоговая стоимость и кнопка «Оформить заказ».

После оформления заказа покупателю показывается номер его заказа, список покупок, итоговое количество, вес и стоимость.

3.2.7 Отзывы

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

В проектируемом Интернет-магазине реализованы отзывы о магазине и о товарах. Оставить отзыв может любой желающий, однако, все отзывы проходят предварительных просмотр администратором магазина (модерацию) и публикуются по его желанию. Такая система сделана с целью избежать потока спама.

3.3 Внешняя часть Интернет-магазина «Строймаг»

Разделим Интернет-магазин на две части: внешнюю (front-end) и внутреннюю (back-end). Внешнюю часть видят все, это место, где совершаются покупки, front-end разработка – это создание клиентской части сайта. Front-end разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса. Все, что связанно с настройкой системы, написанием серверных скриптов, настройкой прав доступа, DNS-сервера и т.д. – это и есть back-end [18].

Исходя из функций и способов повышения конверсии, описанных в части 3.2 Необходимые функции в Интернет-магазине «Строймаг», а так же из принципов проектирования Интернет-магазинов описанных в разделе 2 Проектирование Интрнет-магазина разработана структура сайта и его страниц.

3.3.1 Структура сайта

Структура сайта в Интернет-магазинах обычно не сложная. Чаще всего она делится на две группы: каталог и вспомогательные разделы [14]. Для магазина «Строймаг» разработана структура сайта, представленная на рисунке 3.4. Во вспомогательном меню представлены разделы для покупателей, которые помогают принять решения: «О нас», «Оплата и доставка», «Контакты». Пункт меню «О нас» обязательно должен быть, чтобы новый покупатель мог узнать больше о продавце и проникнуться доверием. К группе каталога можно отнести страницу «Каталог», страницы групп и подгрупп товаров из каталога. Уникальными являются страницы «Главная», «Корзина» и карточка товара.

Рисунок 3.4 – Структура сайта

3.3.2 Структура страниц сайта

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

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

Шаблон шапки страниц изображен на рисунке 3.5.

Рисунок 3.5 – Шаблон шапки сайта

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

Рисунок 3.6 – Шаблон подвала сайта

Главная страница – это то, что видит пользователь (в данном случае покупатель) при первом посещении сайта. Она должна максимально заинтересовать и привлечь его внимание. Информация на главной странице Интернет-магазина «Строймаг» содержит меню каталога, промо-блок, блок новых и популярных товаров (рисунок 3.7).

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

Рисунок 3.7 – Шаблон главной страницы и страницы каталога соответственно

Информация на странице каталога также содержит меню каталога, информацию о товарах в виде списка товаров определенной категории (рисунок 3.7).