PRIME

Приоритетное проектирование

Как обычно проектируют обычные сайты?

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

Затем он создаёт новый проект в «Axure» и начинает проектирование главной страницы будущего сайта.

Прототип главной – ориентир для всех внутренних.

PRIMEСогласованный прототип главной страницы становится ориентиром для прототипов всех внутренних.

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

Почему это не подходит для проектирования интернет-магазина?

PRIME

• Стандартного брифа не достаточно.

• Не верен принцип «от главной – к внутренней»

• Иной подход к проектированию под мобильные устройства.

Стандартного брифа не достаточно

PRIME

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

В дополнение к этому нужно узнать:

• Аналитику существующего магазина, если он есть (GA, Яндекс Метрика)

• Данные о покупках и покупателях в офф-лайн магазинах, если они есть.

• Методы привлечения покупателей, в том числе офф-лайн кампании.

• Цели проекта, выраженные в цифрах и деньгах. • Преимущества и недостатки магазина.• Основные отличия от конкурентов, например – ассортимент

или цена.• Технические особенности бизнеса – CRM, эквайринг, 1С, и др.

Мы называем это предпроектной аналитикой

PRIME

Метрика

Директ

Магазин на Варшавке

Бриф

ROIКарта кликов

GA% отказовБрошенные

корзиныОтчёт за I квартал

AdWords

веб-визор

CRM

Анкеты

Интервью

CPCЦели

Не верен принцип «от главной – к внутренней»

PRIME

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

В случае с интернет-магазинами ситуация обратная – по рекламе

или из естественной поисковой выдачи пользователь попадает сразу на страницу товара.

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

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

Не верен принцип «от главной – к внутренней»

PRIME

Раз так – наибольшее внимание стоит уделить именно карточке товара и приоритетнее начать с неё.

В этом случае последовательность будет «от карточки товара – к главной»

Карточка

Каталог

Главная

Правильная наследственность элементов

PRIME

Это позволит остальным прототипам наследовать действительно необходимые и важные с точки зрения продаж элементы.

Характеристики товара и его стоимость – в фильтры каталога и поиск по цене, наличие или отсутствие товара – в соответствующий фильтр каталога, приоритетные и маржинальные товары – в акции и специальные предложения.

Благодаря такому подходу, можно учесть такие нюансы в фильтрах каталога, как «товар с видео» или «срок гарантии», «материал товара» или «страна производитель».

Как правило, на этапе проектирования каталога до проектирования карточки товара такие нюансы не известны.

Дополнительно

PRIME

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

Иной подход к проектированию под мобильные устройства

PRIME

Корпоративные сайты проектируют в последовательности от версии для компьютера к версии для мобильных устройств.

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

Минусы такого подхода:

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

• Мобильная вёрстка не учитывает потребности и контекст использования сайта со смартфона, а лишь «помещается» в экран устройства.

Пример компоновки от десктопа к смартфону

Logo

Logo

Logo

11

2 3 4 2 3

1

2

Интернет-магазин должен не просто «помещаться» на экране мобильного устройства, а продавать и взаимодействовать с покупателем.

PRIME

• Проектирование версии под смартфон и портретную ориентацию планшета параллельно проектированию десктопа.

• Отказ от всего «лишнего»

• Упрощение процедуры оформления заказа.

• Интерфейсы и фильтры

Параллельное проектирование версий

PRIME

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

Такой подход позволит избежать типовых ошибок и ускорит дальнейшее движение проекта от прототипа к готовому решению.

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

Узнать контекст использования нужно на этапе предпроектной аналитики.

Отказ от всего «лишнего»

PRIME

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

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

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

Не пытайтесь «вместить» в экран всё ваше меню, используйте привычный мобильным пользователям «сэндвич»

Сэндвич

PRIME

Упрощение процедуры оформления заказа

PRIME

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

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

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

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

PRIME

Популярные в мире мобильные операционные системы iOS и Android заложили привычные всем пользователям стандарты интерфейсов. Например, «сэндвич», о котором мы писали выше.

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

Это важно, потому что пользователи уже знакомы с такими интерфейсами и знают чего ожидать за «касанием» того или иного элемента.

PRIME

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

В завершение

PRIME

Проектирование интернет-магазина – основополагающий и один из самых важных этапов всего проекта.

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

Важно не пренебрегать этой работой, сделать её качественно и вдумчиво.

PRIME

Prime e-commerce agency

• Успешно работаем с 2012 года.

• Ориентируемся на e-commerce проекты и проекты с выраженными в денежном эквиваленте целями.

• Сопровождаем e-commerce проекты, как с технической, так и с маркетинговой стороны.

• Дорого.

PRIME

Спасибо!

www.daprime.ru