Разработка прототипа для интернет-магазина по продаже морепродуктов
Сегодня рассмотрим прототип интернет-магазина по продаже морепродуктов в Москве, что должно в него входить и как он должен выглядеть.
Прототип для интернет-магазина по продаже морепродуктов в Москве
1 Этап анализ конкурентов
Для того, чтобы понять какие страницы должны быть на сайте и с какими коммерческими факторами необходимо сделать анализ конкурентов, что у нас было сделано.
Проанализировано 15 конкурентов и выбраны растущие, на основании этих данных выписаны страницы каждого конкурента.
Пример, как делать анализ конкурентов рассказано в статье "SEO анализ конкурентов для будущего проекта".
2 Этап анализ коммерческих факторов сайтов конкурентов
На данном этапе как раз происходит анализ коммерческих факторов. По итогу у нас получается список пересечений по коммерческим факторам, которые присутствуют у всех конкурентов, и которые дополнительно можно добавить.
Пример коммерческих факторов главной страницы:
1) Логотип
2) Телефон
3) Кнопка “Заказать звонок”
4) Гео
5) Слайдер
6) Категории
7) Оплата
8) Работы
9) Отзывы
10) Вопрос-ответ
11) Прайс
12) И т.д.
3 Этап построение структуры типовых страниц и их вложенность
На данном этапе мы выстраиваем структуру типовых страниц и их вложенность. Результатом будет карта зависимостей и какие прототипы необходимо будет реализовать.
4 Разработка прототипа с учетом п.2
Сейчас мы разберем пример построения прототипа корзины
Корзина шаг 1
Корзина шаг 2 для физ лиц
Корзина шаг 2 для юр лиц
Корзина - Спасибо за заказ
Рассмотрим более подробно каждый элемент корзины
Рисунок 1 - Корзина
- Единственный на странице заголовок H1
- Минифото товара
- Наименование товара
2-3 задаются в зоне тега <a> и имеют ссылку на соответствующий товар
4. Количество товара для покупки
5. Цена итого за вид товара
6. Всего в заказа единиц видов продукции
7. Итоговый вес, цена
8. Кнопка перехода к оформлению заказа ЮЛ или ФЛ
Оформление заказа ФЛ
Рисунок 2 - Оформление заказа ФЛ
- Заголовок H1
- ТАБ ФЛ
- Поле ввода ФИО
- Поле ввода телефона, предусмотреть запрет на ввод букв
- Поле ввода почты, с проверкой введенных данных
- Поле выбора адреса - при вводе появляется подсказка
- Блок оплаты
- Чек-бокс варианта оплаты
- Иконка варианта оплаты
- Текстовое описание варианта оплаты
- Заголовок поля ввода комментария к заказу
- Поле ввода комментария
- Стоимость отобранных товаров
- Стоимость доставки
- Скидка
- Итоговая стоимость
- Кнопка оформить заказ, при правильном заполнении переводит на форму приема заказа
- Согласие на обработку персональных данных, содержит ссылку на страницу с соглашением
Оформление заказа ЮЛ
Рисунок 3 - Оформление заказа ЮЛ
- Поле ввода наименования компании
- Поле ввода ЮР адреса
- Поле ввода ИНН
- Поле ввода КПП
- Поле ввода почты для чека
* Остальные поля, как на рисунке 2
Страница приема заказа
Рисунок 4 - Форма приема заказа
- Заголовок H1
- Иконка
- Текстовое описание
- Заголовок H2 или ниже с номером заказа
- Перечень товаров в заказе, предусмотреть при большом списке пагинацию
- Стоимость
- Информация о получателе
- Телефон
- Способ оплаты
- Статус оплаты
- Возможность распечатать полный заказ
Итог
Мы с вами рассмотрели построение прототипа на основании действующего проекта. Я вам подробно расписал, как строился прототип страницы коризны, и какие элементы использовались для построения.
Прототип - это экономия времени на реализацию дизайна сайта, а также творческий рубеж для маркетолога и seo оптимизатора.
В следующем кейсе по прототипам рассмотрим построение другой страницы.
P.S. Прототип - это не дизайн, и в дизайне может отличатся расположение кнопок и ссылок, но вся суть сохраняется в том виде, котором мы ее закладываем.
