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

1. PRIME
Приоритетное
проектирование

2. Как обычно проектируют обычные сайты?
PRIME
Проектировщик внимательно изучает бриф, сайты которые нравятся
и не нравятся заказчику, при необходимости – уточняет дополнительные
вопросы у менеджера.
Затем он создаёт новый проект в «Axure» и начинает проектирование
главной страницы будущего сайта.

3. Прототип главной – ориентир для всех внутренних.
PRIME
Согласованный прототип главной страницы становится ориентиром
для прототипов всех внутренних.
Внутренние страницы наследуют от главной общие стили, навигацию,
блоки и элементы.

5. Почему это не подходит для проектирования интернет-
магазина?
PRIME
• Стандартного брифа не достаточно.
• Не верен принцип «от главной – к внутренней»
• Иной подход к проектированию под мобильные устройства.

6. Стандартного брифа не достаточно
PRIME
Из стандартного брифа можно узнать бюджет проекта, планируемые
сроки, основных конкурентов, сайты которые нравятся и не нравятся
заказчику.
В дополнение к этому нужно узнать:
• Аналитику существующего магазина, если он есть (GA, Яндекс Метрика)
• Данные о покупках и покупателях в офф-лайн магазинах, если они есть.
• Методы привлечения покупателей, в том числе офф-лайн кампании.
• Цели проекта, выраженные в цифрах и деньгах.
• Преимущества и недостатки магазина.
• Основные отличия от конкурентов, например – ассортимент или цена.
• Технические особенности бизнеса – CRM, эквайринг, 1С, и др.

7. Мы называем это предпроектной аналитикой
PRIME
Метрика
Директ
Магазин на Варшавке
Бриф
ROI Карта кликов GA
% отказов
Брошенные корзины
Отчёт за I квартал
AdWords
веб-визор
CRM
Анкеты
Интервью
CPC Цели

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

9. Пример карты путей и входных точек интернет-магазина

10. Не верен принцип «от главной – к внутренней»
PRIME
Раз так – наибольшее внимание стоит уделить именно карточке товара
и приоритетнее начать с неё.
В этом случае последовательность будет «от карточки товара – к
главной»
Карточка Каталог Главная

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

13. Дополнительно
PRIME
Начиная проектировать магазин с карточки, вы в первую очередь думаете
о том, как продать товар, а не о том, как «водить» вашего пользователя
по сайту. Менеджеры в классическом ритейле именно затем встречают
покупателей на входе в торговый зал, чтобы подвести к товару.

14. Иной подход к проектированию под мобильные устройства
PRIME
Корпоративные сайты проектируют в последовательности от версии
для компьютера к версии для мобильных устройств.
В этом случае прототипы широкоформатных версий просто компонуют
под размеры мобильных экранов.
Минусы такого подхода:
• Никаких отдельных решений для touch-устройств не готовятся заранее,
часто при компоновке не соблюдаются общие требования мобильных
операционных систем.
• Мобильная вёрстка не учитывает потребности и контекст использования
сайта со смартфона, а лишь «помещается» в экран устройства.

15. Пример компоновки от десктопа к смартфону
Logo
Logo
Logo
1
1
2 3 4 2 3
1
2

16. Интернет-магазин должен не просто «помещаться»
на экране мобильного устройства, а продавать
и взаимодействовать с покупателем.
PRIME
• Проектирование версии под смартфон и портретную ориентацию
планшета параллельно проектированию десктопа.
• Отказ от всего «лишнего»
• Упрощение процедуры оформления заказа.
• Интерфейсы и фильтры

17. Параллельное проектирование версий
PRIME
Уже на этапе проектирования версии под стандартные разрешения
мониторов необходимо понимать, каким образом будет реализовываться
основной функционал на мобильных устройствах и экранах с другим
соотношением сторон (планшет, портретная ориентация).
Такой подход позволит избежать типовых ошибок и ускорит дальнейшее
движение проекта от прототипа к готовому решению.
Проектируя сайт под мобильные устройства важно не забывать про
общие правила операционных систем (гайды) и чётко понимать контекст
использования сайта со смартфона или планшета.
Узнать контекст использования нужно на этапе предпроектной аналитики.

18. Отказ от всего «лишнего»
PRIME
Чаще всего пользователи мобильных устройств не нуждаются во всех
100% функционала и контента сайта.
На этапе предпроектной аналитики необходимо выяснить основные
потребности мобильных пользователей, проектируя магазин под
смартфон важно максимально качественно закрыть именно их.
По возможности, не предусматривайте в мобильной версии статьи
и новости «под SEO», избавьте пользователя от лишних «касаний»
и «слишком подробных фильтров». Всю основную и самую необходимую
информацию, такую как «Оплата» и «Доставка», желательно
сгруппировать в один раздел.
Не пытайтесь «вместить» в экран всё ваше меню, используйте привычный
мобильным пользователям «сэндвич»

19. Сэндвич
PRIME

20. Упрощение процедуры оформления заказа
PRIME
Если не упростить для мобильных пользователей процесс оформления
заказа, можно получить очень высокий процент «брошенных корзин»,
вместо высоких продаж со смартфона.
Важно понимать, что такие вещи как набор текста или заполнение
большого количества полей всегда не удобно делать при помощи
клавиатуры смартфона.
Нужно решить, какие данные о пользователе действительно необходимы
для завершения продажи и спросить только их.

21. Интерфейсы и фильтры
PRIME
Популярные в мире мобильные операционные системы iOS и Android
заложили привычные всем пользователям стандарты интерфейсов.
Например, «сэндвич», о котором мы писали выше.
Проектируя мобильные интерфейсы и фильтры следует особое внимание
уделить элементам, реализованным в операционных системах для
решения схожих типов задач – переключения, выпадающие списки,
включения и выключения функций и др.
Это важно, потому что пользователи уже знакомы с такими интерфейсами
и знают чего ожидать за «касанием» того или иного элемента.

22. PRIME
Интерфейсы и фильтры

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

24. PRIME
Prime e-commerce agency
• Успешно работаем с 2012 года.
• Ориентируемся на e-commerce проекты и проекты
с выраженными в денежном эквиваленте целями.
• Сопровождаем e-commerce проекты, как с технической,
так и с маркетинговой стороны.
• Дорого.

25. PRIME
Спасибо!
www.daprime.ru