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

1. Как подружить интернет-магазин с мобильными устройствами

2. Спикеры
Юрий Веденин,
CEO
Илья Горчаков,
UX аналитик
Дарья Косило,
UX аналитик

3. Зачем, почему и с кем дружить
Как выбрать подходящее представление
Способы представления магазина на мобильных устройствах
Как внедрить выбранное решение
4
1
2
3
Практика
5
Что делать (и чего не делать) дальше
6
План

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

5. Зачем дружить
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
Трафик, генерируемый с мобильных устройств, Беларусь

6. Почему дружить
34%
Процент интернет-пользователей, которые выбирали товар с помощью мобильного телефона, IV.2013, весь мир
Тренд: +1% каждый квартал

7. Используют мобильный телефон в магазине
Нет 36%
Да 64%
1 квартал 2012 года
Нет 20%
Да 80%
1 квартал 2013 года
+ 25%
http://www.supermonitoring.com/blog/state-of-mobile-2013-infographic/

8. С кем дружить
76%
17%
4%
3%
Мобильные операционные системы
Android
iOS
Windows Phone 8
Symbian
http://www.ranking.by/en/rankings/pc-vs-nonpc.html

9. Анализ веб-аналитики
Динамика прироста трафика с мобильных телефонов:
Октябрь 2013 – 24 000 посетителей
Сентябрь 2014 – 49 000 посетителей

10. Анализ веб-аналитики
Динамика прироста трафика с планшетов:
Октябрь 2013 – 3 000 посетителей
Сентябрь 2014 – 6 500 посетителей

11. Анализ веб-аналитики
Яндекс Метрика
Google Analytics

12. Как выглядит сайт на мобильном?
Проверяем с помощью:
•имеющегося мобильного устройства
•специализированных сервисов
http://www.responsinator.com/
http://studiopress.com/responsive
и другие – см. http://habrahabr.ru/post/189726/

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

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

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

16. Способы представления магазина на мобильных устройствах
1
2

17. Способы решения
1.Сайт с адаптивным дизайном
2.Мобильная версия сайта
3.Мобильное приложение

18. Адаптивный сайт
Адаптивный дизайн (Responsive Design) – дизайн веб- страниц, обеспечивающий корректное отображение сайта на различных устройствах за счет динамической подстройки под текущие размеры окна браузера.
(Wikipedia).
Автор: Итан Маркотт, 2010 год

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

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

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

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

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

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

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

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

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

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

29. Еще примеры
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

30. Особенности адаптива
1.Одна версия сайта
2.Удобен мобильным пользователям
3.Дольше и дороже разрабатывать
4.Нравится поисковикам
5.Скорость загрузки
6.Есть несколько вариантов реализации

31. Варианты реализации
Вариант реализации зависит от способа определения «мобильных пользователей».
1. Размер экрана
2. Тип устройства (определение User-agent пользователя)
3. Комбинированный (термин «RESS»)
RESS (Responsive Web Design + Server Side Components)

32. Мобильная версия сайта
Ключевая особенность: отдельный сайт(-ы) для пользователей мобильных устройств.
1.Требуется разработка и дополнительная поддержка
2.Учитывает потребности только мобильных пользователей
3.Бывают сложности в определении User-agent пользователя и в организации перенаправлений
4.Требует дополнительных настроек для поисковиков
5.Может быть отдельная версия для телефонов и планшетов.

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

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

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

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

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

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

39. Еще примеры мобильных сайтов
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

40. Моб. приложение для e-commerce
Актуально, когда:
1. Магазин имеет большой ассортимент товаров
2. Пользователи периодически совершают заказы
3. Магазин активно проводит акции, раздает скидки, развита программа лояльности

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

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

43. Преимущества для пользователя
1. Удобный доступ (в т.ч. офлайн) к каталогу товаров, избранному, контактам и др. информации
2. Легко сделать повторную покупку (или другую операцию)
3. Легко следить и участвовать в акциях
4. Легко следить за статусом заказа

44. Преимущества для бизнеса
Ключевое преимущество - Бренд всегда в кармане.
И, как следствие:
1. Легче удержать клиента
2. Увеличение повторных продаж
3. Расширенная маркетинговая стратегия (в т.ч. за счет push- нотификаций, акций)
4. Повышение лояльности (за счет качества обслуживания)

45. Как выбрать подходящее представление
3

46. Адаптив VS Мобильная версия
Адаптивный сайт
Мобильная версия
Разработка
чаще дешевле
обычно дороже
Поддержка
чаще дешевле
дороже
Количество доп. сайтов
0
минимум 1
Влияние на SEO
не оказывает
могут быть проблемы
Корректность определения моб. пользователя
могут быть проблемы
(зависит от реализации)
могут быть проблемы (не зависит от реализации)
Скорость загрузки сайта
зависит от реализации
обычно быстрее
Отличия в контенте от основного сайта
зависит от реализации
да
Веб-аналитика
удобнее
нужна доп. настройка

47. Мобильное приложение VS Сайт
Мобильное приложение
Сайт
Разработка
чаще дороже
чаще дешевле
Функциональность
чаще шире
уже
Взаимодействие
чаще быстрее и удобнее запускается и работает, но всегда требует установки
чаще медленнее работает, но не требует установки
Продвижение
чаще дороже и более нестандартное
чаще дешевле, стандартнее
Частота использования
чаще – конкретная цель, скука, интерес
реже – конкретная цель

48. Как выбрать?
•Деньги
•Время
•Размер сайта
Оптимальное решение – сайт с адаптивным дизайном.

49. Как внедрить выбранное решение
4

50. Процесс
1.Исследуем целевую аудиторию
2.Определяем сценарии использования
3.Разбиваем существующий сайт на функциональные блоки
4.Приоритизируем
5.Проектируем
6.Передаём в разработку

51. 1. Исследуем целевую аудиторию
Собираем информацию о пользователях и группируем данные
•Маркетинговое исследование
•Анализ пользователей
•Анализ данных веб-аналитики
•Из головы 

52. 1. Исследуем целевую аудиторию
Что должно быть на выходе?
•кто: социальные и демографические данные
•где: контекст, окружающая среда, время
•зачем: цели, важность, очередность, частота

53. 2. Определяем сценарии использования
•Карта историй
•Раскадровка (storyboard)
•Карты сценариев
•Карта путешествия потребителя (CJM)
•Истории из жизни
•Пошаговые сценарии

54. 2. Определяем сценарии использования
Что должно быть на выходе?
•Сценарии
•Функциональные блоки, участвующие на каждом шаге сценария

55. 3. Разбиваем существующий сайт на функциональные блоки
•Открываем страницу сайта и выписываем все существующие на ней функциональные блоки.
•Помечаем блоки, встречающиеся на всех страницах.

56. 4. Расставляем приоритеты
С привлечением пользователей:
•Модель Кано
•Юзабилити-тестирование (себя и конкурентов)
Без привлечения пользователей:
•Карта бизнес-эффектов (effect map, impact map)
•Веб-аналитика
•По сценариям

57. 4. Расставляем приоритеты
Что должно быть на выходе?
•Функциональный блок
•Его приоритет
•Страница(ы), на которых он присутствует

58. 4. Расставляем приоритеты
Для интернет-магазинов приоритетными могут быть:
•Навигация – поиск, фильтры
•Контент – сетка товаров
•Призыв к действию (call to action) – кнопка «Купить», телефон для заказа

59. 5. Проектируем
•Изучаем рекомендации и лучшие практики
•Рисуем на бумаге – пробуем варианты
•Проектируем в ПО
•Не забываем тестировать!

60. 5. Проектируем. Рекомендации
1.Сокращайте блоки со второстепенной информацией
(справочная информация, виджеты)
2. Сокращайте количество отображаемых элементов в блоках с динамическим содержанием: новинки, события, отзывы и пр.
3. Делайте крупнее навигационные элементы и элементы взаимодействия. Ссылки заменяйте кнопками.
4. Заменяйте или убирайте всплывающие окна
5. Элементы стиля должны оставаться заметными и узнаваемыми

61. Рекомендации по созданию сайтов для мобильных устройств от 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. Проектируем. Полезные ссылки

62. 6. Передаём в разработку
•Дизайн
•Верстка
•Программирование
•Тестирование

63. Практика
5

64. POP - Prototyping on Paper popapp.in
iOS
https://itunes.apple.com/us/app/pop-prototyping-on-paper./id555647796?mt=8
Android
https://play.google.com/store/apps/details?id=com.studioirregular.pop&hl=ru
Windows
http://apps.microsoft.com/ windows/en-us/app/pop-prototyping-on-paper/7c9a20d4-36e4-402b-8f5c-878449959285

65. Процесс
1.Исследуем целевую аудиторию
2.Определяем сценарии использования
3.Разбиваем существующий сайт на функциональные блоки
4.Приоритизируем
5.Проектируем
6.Передаём в разработку

66. Изучаем данные
Аркадий так замотался на работе, что совершенно забыл, что сегодня у них с женой годовщина свадьбы! На этот праздник они всегда друг другу дарят подарки. В этом году жена часто говорила о том, что пора бы ей сменить фен. Несколько раз говорила, поэтому Аркадий даже запомнил: с холодным воздухом, ионизацией и насадкой для объёма. Вот теперь пригодится!
Аркадий едет на машине на очередную встречу по работе, а во время остановок на светофорах судорожно пытается найти и купить подходящий подарок жене на сайте интернет-магазина, главное чтобы был самовывоз и забрать можно было бы через три часа по дороге с работы домой.
Аркадий, 29 лет, женат, детей нет, директор небольшой фирмы.
Пользуется телефоном Apple iPhone 5s. Интернет на телефоне постоянно включен, так как по работе нужно всегда быть online.

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

68. Приоритизируем блоки
•Выписать на стикеры блоки
•Наклеить последовательно (исходя из приоритетов) блоки одной страницы
•Если блок встречается на нескольких страницах, он должен всегда находиться на одном месте

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

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

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

72. СПАСИБО!
Юрий Веденин y.vedenin@uxpresso.net yuri_vedenin
Илья Горчаков
i.gorchakov@uxpresso.net
igorchakov
Дарья Косило
d.kosilo@uxpresso.net
dafna_yorke