Разработка прототипа для интернет-магазина по продаже морепродуктов

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

1 Этап анализ конкурентов

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

Проанализировано 15 конкурентов и выбраны растущие, на основании этих данных выписаны страницы каждого конкурента.

Пример, как делать анализ конкурентов рассказано в статье "SEO анализ конкурентов для будущего проекта".

2 Этап анализ коммерческих факторов сайтов конкурентов

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

Пример коммерческих факторов главной страницы:

• Логотип
• Телефон
• Кнопка “Заказать звонок”
• Гео
• Слайдер
• Категории
• Оплата
• Работы
• Отзывы
• Вопрос-ответ
• Прайс
• И т.д.

3 Этап построение структуры типовых страниц и их вложенность

На данном этапе мы выстраиваем структуру типовых страниц и их вложенность. Результатом будет карта зависимостей и какие прототипы необходимо будет реализовать.

4 Разработка прототипа с учетом п.2

Сейчас мы разберем пример построения прототипа корзины

Корзина шаг 1

Корзина шаг 2 для физ лиц

Корзина шаг 2 для юр лиц

Корзина - Спасибо за заказ

Рассмотрим более подробно каждый элемент корзины

Рисунок 1 - Корзина

1. Единственный на странице заголовок H1
2. Минифото товара
3. Наименование товара

2-3 задаются в зоне тега <a> и имеют ссылку на соответствующий товар

4. Количество товара для покупки
5. Цена итого за вид товара
6. Всего в заказа единиц видов продукции
7. Итоговый вес, цена
8. Кнопка перехода к оформлению заказа ЮЛ или ФЛ

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

Рисунок 2 - Оформление заказа ФЛ

1. Заголовок H1
2. ТАБ ФЛ
3. Поле ввода ФИО
4. Поле ввода телефона, предусмотреть запрет на ввод букв
5. Поле ввода почты, с проверкой введенных данных
6. Поле выбора адреса - при вводе появляется подсказка
7. Блок оплаты
8. Чек-бокс варианта оплаты
9. Иконка варианта оплаты
10. Текстовое описание варианта оплаты
11. Заголовок поля ввода комментария к заказу
12. Поле ввода комментария
13. Стоимость отобранных товаров
14. Стоимость доставки
15. Скидка
16. Итоговая стоимость
17. Кнопка оформить заказ, при правильном заполнении переводит на форму приема заказа
18. Согласие на обработку персональных данных, содержит ссылку на страницу с соглашением

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

Рисунок 3 - Оформление заказа ЮЛ

1. Поле ввода наименования компании
2. Поле ввода ЮР адреса
3. Поле ввода ИНН
4. Поле ввода КПП
5. Поле ввода почты для чека

* Остальные поля, как на рисунке 2

Страница приема заказа

Рисунок 4 - Форма приема заказа

1. Заголовок H1
2. Иконка
3. Текстовое описание
4. Заголовок H2 или ниже с номером заказа
5. Перечень товаров в заказе, предусмотреть при большом списке пагинацию
6. Стоимость
7. Информация о получателе
8. Телефон
9. Способ оплаты
10. Статус оплаты
11. Возможность распечатать полный заказ

Итог

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

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

В следующем кейсе по прототипам рассмотрим построение другой страницы.

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