Как подружить интернет-магазин

с мобильными устройствами

Спикеры

Юрий

Веденин, CEO

Илья

Горчаков, UX аналитик

Дарья

Косило, UX аналитик

Зачем, почему и с кем

дружить Как выбрать

подходящее

представление

Способы представления

магазина на мобильных

устройствах

Как внедрить

выбранное решение

4

1

2

3

Практика

5

Что делать (и чего не

делать) дальше

6

План

Зачем, почему и с кем дружить 1

Зачем дружить

http://www.ranking.by/en/rankings/pc-vs-nonpc.html

0,00%

1,00%

2,00%

3,00%

4,00%

5,00%

6,00%

7,00%

8,00%

9,00%

I.2013 II.2013 III.2013 IV.2013 I.2014 II.2014 III.2014 IV.2014

Трафик, генерируемый с мобильных устройств, Беларусь

Почему дружить

34%

Процент интернет-пользователей, которые выбирали

товар с помощью мобильного телефона, IV.2013, весь мир

Тренд:

+1% каждый квартал

Используют мобильный телефон в магазине

Нет

36% Да

64%

1 квартал 2012 года

Нет

20%

Да

80%

1 квартал 2013 года

+ 25%

http://www.supermonitoring.com/blog/state-of-mobile-2013-infographic/

С кем дружить

76%

17%

4% 3%

Мобильные операционные системы

Android

iOS

Windows Phone 8

Symbian

http://www.ranking.by/en/rankings/pc-vs-nonpc.html

Анализ веб-аналитики

Динамика прироста трафика с мобильных телефонов:

Октябрь 2013 – 24 000 посетителей

Сентябрь 2014 – 49 000 посетителей

Анализ веб-аналитики

Динамика прироста трафика с планшетов:

Октябрь 2013 – 3 000 посетителей

Сентябрь 2014 – 6 500 посетителей

Анализ веб-аналитики

Яндекс Метрика

Google Analytics

Как выглядит сайт на мобильном?

Проверяем с помощью:

• имеющегося мобильного устройства

• специализированных сервисов

http://www.responsinator.com/

http://studiopress.com/responsive

и другие – см. http://habrahabr.ru/post/189726/

Необходимо постоянно масштабировать страницы

Неудобная навигация

Всплывающие окна

Способы представления магазина на

мобильных устройствах

1 2

Способы решения

1.Сайт с адаптивным дизайном

2.Мобильная версия сайта

3.Мобильное приложение

Адаптивный сайт

Адаптивный дизайн (Responsive Design) – дизайн веб-

страниц, обеспечивающий корректное отображение сайта

на различных устройствах за счет динамической

подстройки под текущие размеры окна браузера.

(Wikipedia).

Автор: Итан Маркотт, 2010 год

Адаптивный сайт

Адаптивный сайт

Адаптивный сайт

Примеры адаптивных сайтов

Примеры адаптивных сайтов

Примеры адаптивных сайтов

Примеры адаптивных сайтов

Примеры адаптивных сайтов

Примеры адаптивных сайтов

Примеры адаптивных сайтов

Еще примеры

nanopark.ru

shop.crayola.com

www.lidl.de

soliver.de

zazzle.com

vans.com

shop.ca

swarovski.com

shop.mango.com

store.diesel.com

ray-ban.com

deal.by

samsung.ru

hmshop.ru

amazon.com

currys.co.uk

Особенности адаптива

1. Одна версия сайта

2. Удобен мобильным пользователям

3. Дольше и дороже разрабатывать

4. Нравится поисковикам

5. Скорость загрузки

6. Есть несколько вариантов реализации

Варианты реализации

Вариант реализации зависит от способа определения

«мобильных пользователей».

1. Размер экрана

2. Тип устройства (определение User-agent пользователя)

3. Комбинированный (термин «RESS»)

RESS (Responsive Web Design + Server Side Components)

Мобильная версия сайта

Ключевая особенность: отдельный сайт(-ы) для

пользователей мобильных устройств.

1. Требуется разработка и дополнительная поддержка

2. Учитывает потребности только мобильных пользователей

3. Бывают сложности в определении User-agent

пользователя и в организации перенаправлений

4. Требует дополнительных настроек для поисковиков

5. Может быть отдельная версия для телефонов и

планшетов.

Примеры мобильных сайтов

Примеры мобильных сайтов

Примеры мобильных сайтов

Примеры мобильных сайтов

Примеры мобильных сайтов

Примеры мобильных сайтов

Еще примеры мобильных сайтов

m.aliexpress.com

m.utinet.ru

m.sapato.ru

m.allegro.pl

m.holodilnik.ru

m.b2b.by

mobile.lufthansa.com

m.unishop.by

m.enter.ru

m.ebay.com

m.market.yandex.ru

m.lamoda.ru

Моб. приложение для e-commerce

Актуально, когда:

1. Магазин имеет большой ассортимент товаров

2. Пользователи периодически совершают заказы

3. Магазин активно проводит акции, раздает скидки, развита

программа лояльности

Примеры мобильных приложений

Примеры мобильных приложений

Преимущества для пользователя

1. Удобный доступ (в т.ч. офлайн) к каталогу товаров,

избранному, контактам и др. информации

2. Легко сделать повторную покупку (или другую операцию)

3. Легко следить и участвовать в акциях

4. Легко следить за статусом заказа

Преимущества для бизнеса

Ключевое преимущество - Бренд всегда в кармане.

И, как следствие:

1. Легче удержать клиента

2. Увеличение повторных продаж

3. Расширенная маркетинговая стратегия (в т.ч. за счет push-нотификаций, акций)

4. Повышение лояльности (за счет качества обслуживания)

Как выбрать подходящее

представление

3

Адаптив VS Мобильная версия

Адаптивный сайт Мобильная версия

Разработка чаще дешевле обычно дороже

Поддержка чаще дешевле дороже

Количество доп. сайтов 0 минимум 1

Влияние на SEO не оказывает могут быть проблемы

Корректность

определения моб.

пользователя

могут быть проблемы

(зависит от реализации) могут быть проблемы (не

зависит от реализации)

Скорость загрузки сайта зависит от реализации обычно быстрее

Отличия в контенте от

основного сайта зависит от реализации да

Веб-аналитика удобнее нужна доп. настройка

Мобильное приложение VS Сайт

Мобильное приложение Сайт

Разработка чаще дороже чаще дешевле

Функциональность чаще шире уже

Взаимодействие чаще быстрее и удобнее

запускается и работает, но

всегда требует установки

чаще медленнее работает, но

не требует установки

Продвижение чаще дороже и более

нестандартное чаще дешевле, стандартнее

Частота

использования чаще – конкретная цель,

скука, интерес реже – конкретная цель

Как выбрать?

• Деньги

• Время

• Размер сайта

Оптимальное решение – сайт с

адаптивным дизайном.

Как внедрить выбранное

решение

4

Процесс

1. Исследуем целевую аудиторию

2. Определяем сценарии использования

3. Разбиваем существующий сайт на

функциональные блоки

4. Приоритизируем

5. Проектируем

6. Передаём в разработку

1. Исследуем целевую аудиторию

Собираем информацию о пользователях

и группируем данные

• Маркетинговое исследование

• Анализ пользователей

• Анализ данных веб-аналитики

• Из головы

1. Исследуем целевую аудиторию

Что должно быть на выходе?

• кто: социальные и демографические

данные

• где: контекст, окружающая среда, время

• зачем: цели, важность, очередность,

частота

2. Определяем сценарии использования

• Карта историй

• Раскадровка (storyboard)

• Карты сценариев

• Карта путешествия потребителя (CJM)

• Истории из жизни

• Пошаговые сценарии

2. Определяем сценарии использования

Что должно быть на выходе?

• Сценарии

• Функциональные блоки, участвующие

на каждом шаге сценария

3. Разбиваем существующий сайт на

функциональные блоки

• Открываем страницу сайта и выписываем

все существующие на ней

функциональные блоки.

• Помечаем блоки, встречающиеся на всех

страницах.

4. Расставляем приоритеты

С привлечением пользователей:

• Модель Кано

• Юзабилити-тестирование (себя и конкурентов)

Без привлечения пользователей:

• Карта бизнес-эффектов (effect map, impact map)

• Веб-аналитика

• По сценариям

4. Расставляем приоритеты

Что должно быть на выходе?

• Функциональный блок

• Его приоритет

• Страница(ы), на которых он

присутствует

4. Расставляем приоритеты

Для интернет-магазинов приоритетными

могут быть:

• Навигация – поиск, фильтры

• Контент – сетка товаров

• Призыв к действию (call to action) –

кнопка «Купить», телефон для заказа

5. Проектируем

• Изучаем рекомендации и лучшие

практики

• Рисуем на бумаге – пробуем варианты

• Проектируем в ПО

• Не забываем тестировать!

5. Проектируем. Рекомендации

1. Сокращайте блоки со второстепенной информацией

(справочная информация, виджеты)

2. Сокращайте количество отображаемых элементов в

блоках с динамическим содержанием: новинки, события,

отзывы и пр.

3. Делайте крупнее навигационные элементы и элементы

взаимодействия. Ссылки заменяйте кнопками.

4. Заменяйте или убирайте всплывающие окна

5. Элементы стиля должны оставаться заметными и

узнаваемыми

Рекомендации по созданию сайтов для мобильных

устройств от Google: https://developers.google.com/webmasters/smartphone-sites/?hl=ru

Гайдлайны Android: http://developer.android.com/design/index.html

Гайдлайны iOS: https://developer.apple.com/library/ios/documentation/UserExperience/

Conceptual/MobileHIG/

Гайдлайны Windows Phone: http://dev.windows.com/en-us/design

5. Проектируем. Полезные ссылки

6. Передаём в разработку

• Дизайн

• Верстка

• Программирование

• Тестирование

Практика

5

POP - Prototyping on Paper popapp.in

iOS

https://itunes.apple.com/us

/app/pop-prototyping-on-p

aper./id555647796?mt=8

Android

https://play.google.com/sto

re/apps/details?id=com.st

udioirregular.pop&hl=ru

Windows

http://apps.microsoft.com/

windows/en-us/app/pop-pr

ototyping-on-paper/7c9a2

0d4-36e4-402b-8f5c-8784

49959285

Процесс

1. Исследуем целевую аудиторию

2. Определяем сценарии использования

3. Разбиваем существующий сайт на

функциональные блоки

4. Приоритизируем

5. Проектируем

6. Передаём в разработку

Изучаем данные

Аркадий так замотался на работе, что совершенно забыл, что сегодня у них с женой годовщина свадьбы! На этот праздник они всегда друг другу дарят подарки. В этом году жена часто говорила о том, что пора бы ей сменить фен. Несколько раз говорила, поэтому Аркадий даже запомнил: с холодным воздухом, ионизацией и насадкой для объёма. Вот теперь пригодится!

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

Аркадий, 29 лет, женат, детей нет, директор небольшой

фирмы.

Пользуется телефоном Apple iPhone 5s. Интернет на

телефоне постоянно включен, так как по работе нужно

всегда быть online.

Разбиваем сайт на блоки

Приоритизируем блоки

• Выписать на стикеры блоки

• Наклеить последовательно (исходя из

приоритетов) блоки одной страницы

• Если блок встречается на нескольких

страницах, он должен всегда находиться

на одном месте

Проектируем

Что делать (и чего не делать)

дальше

6

Что делать (и чего не делать) дальше

СПАСИБО!

Юрий Веденин

y.vedenin@uxpresso.net

yuri_vedenin

Илья Горчаков

i.gorchakov@uxpresso.net

igorchakov

Дарья Косило

d.kosilo@uxpresso.net

dafna_yorke