Download as PDF, PPTX
Uploaded byYuri Vedenin
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными устройствами
Документ обсуждает, как интегрировать интернет-магазин с мобильными устройствами, включая выбор подходящего представления (адаптивный сайт, мобильная версия или мобильное приложение). Приводятся статистические данные о росте трафика с мобильных устройств, а также практические рекомендации по проектированию и внедрению мобильных решений. Основной акцент делается на исследовании целевой аудитории, определении сценариев использования и приоритизации функциональных блоков сайта.
More Related Content
di.by 2014 e-commerce mobile: как подружить интернет-магазин с мобильными устройствами
- 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.
- 64. POP - Prototypingon 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. СПАСИБО! Юрий Веденин[email protected] yuri_vedenin Илья Горчаков [email protected] igorchakov Дарья Косило [email protected] dafna_yorke