Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)

Запуск мобильной
версии сайта:
Руководитель отдела маркетинга
разбор полетов
Надежда Маринчева

1. Мобильная версия сайта или адаптивный дизайн: плюсы и минусы
2. Расчет окупаемости мобильной версии сайта: аргументируем необходимость
3. Кейс телекоммуникационной компании UIS:
- результаты проведения A/B тестирования страницы заказа услуг на
мобильном сайте.
4. Внедрение дополнительных способов коммуникации с посетителями:
мессенджеры и другие сервисы для мобильных версий сайта для увеличения
конверсии.
План презентации

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

«Самая большая глупость
на свете — создание
отдельных мобильных версий
сайтов».
13 сентября 2013
Артемий Лебедев
Мобильные версии сайтов

«Мобильные версии сайтов
перестали быть самой большой
глупостью на свете».
1 декабря 2015
Артемий Лебедев
Мобильные версии сайтов два
года спустя

Отдельная мобильная версия сайта;
Адаптивный дизайн;
Отзывчивый дизайн - RESS (Responsive Design + Server
Side).
3 основных способа построения
мобильный версий:

Разберемся…А в чем разница?

перенаправление мобильных пользователей на
специальный поддомен (m.example.com,
mobile.example.com);
урезанная основная версия сайта с тем функционалом,
который будет полезен пользователям.
Отдельная мобильная версия

Пример отдельной мобильной версии
www.uiscom.ru

Адаптивный VS
отзывчивый дизайн

Используется серверное или браузерное определение устройства. После чего
посетителю выдается конкретный заранее преднастроенный шаблон
Адаптивный дизайн (AWD)

Пример адаптивного дизайна:
www.lufthansa.com - стационарный
компьютер

Пример адаптивного дизайна:
www.lufthansa.com – адаптивный
дизайн

Загружается
подготовленный и
оптимизированный заранее
контент под ваше
устройство
Оптимизация контента

Скорость загрузки - выше

Адаптивные шаблоны могут
разрабатываться на базе
существующего сайта, без его
изменения!
Нужно проработать в дизайне
несколько версий шаблонов под
разные типы устройств –
дольше. Значит – дороже.
Разработка

Используется гибкая структура страницы – «резиновый макет».
Т.е. для всех устройств используется один шаблон, но он
подстраивается под размеры экрана посетителя моментально.
Используются медиа-запросы - (media queries) — блоки кода с
указанием параметров устройств вывода, формирующие
структуру страницы относительно размеров экрана устройств.
Медиа запросы позволяют применять определенные правила
(стили) для вывода различных контентных блоков в различном
порядке и пропорциях в зависимости от ширины экрана и
возможностей устройства, на котором происходит просмотр веб-
сайта.
Отзывчивый дизайн (RWD)

Пример отзывчивого дизайна

Загружается весь контент
вне зависимости от типа
устройства
Оптимизация контента

Скорость загрузки ниже

Нужно переработать весь сайт,
или при разработке нового сайта
это учесть сразу.
Разработка

Какой подход выбрать? «+/-»
разных версий

Удобство для пользователя
Быстрота загрузки, т.к. обычно быстрее загружается
Выбор (можно перейти на основную версию сайта из мобильной)
Легко вносить правки
Можно сделать, уже на готовом десктопном сайте
«+/-» отдельной мобильной версии
сайта
Несколько адресов
Неудобство для пользователя — для десктопной и
мобильной версии разные адреса.
Несоответствие контента на 2-ух версиях
сайтов

Удобство разработки
Единый URL (лучше для SEO, т.к. поисковикам «удобнее»
работать
«+/-» адаптивного дизайна
Медленная загрузка («Вес» сайтов)
Задачи пользователей с десктопа и мобильных
часто отличаются
Отсутствие выбора (нет возможност�� перейти к
обычному сайту)

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

C
Вывод – идеального варианта пока нет.
Все индивидуально.

Расчет окупаемости мобильной версии
сайта: аргументируем необходимость.

Зелёные строки - зафиксированные значения по расчётам
с других вкладок, либо рассчитываются автоматически
Розовые строки - заполняются самостоятельно
Стоимость разработки и внедрения мобильной версии 500000
Средний чек 1 клиента (за последний квартал или год) 6000
Сколько нужно продаж, чтобы окупить мобильную версию 83
Текущая конверсия мобильного трафика в продажи 0,05%
ВО сколько раз я планирую её увеличить? 3
Какая конверсия у меня получится с новой версией 0,16%

Текущий мобильный трафик (среднее значение для месяца) 4 862
НА сколько я планирую его увеличить с новой версией? 2000
Какой мобильный трафик я получу? 6 862
Сколько продаж я получу с текущей конверсией и мобильным трафиком? 3
Сколько продаж я получу с новой конверсией и новым трафиком? 11
Сколько месяцев понадобится на окупаемость мобильной версии при текущих
показателях? 31
Сколько месяцев понадобится на окупаемость мобильной версии при новых
показателях? 7

Файл для расчета

Кейс телекоммуникационной
компании UIS

Период тестирования: 22.06.2016 –
08.07.2016
Контрольная группа/тестируемый вариант
(50%/50%)
Сегмент пользователей: Desktop + Mobile
Цель эксперимента: увеличение «Взят в
работу» по четырем каналам: звонки, чаты,
заявки, регистрации.
Дизайн эксперимента
страницы «Тарифы»
Кейс «Unique
Intelligent
Systems»

Контрольная группа

Тестируемый вариант

Результаты тестирования:
Контрольная группа Тестируемый вариант
Звонки Чаты Заявки Регистр. Звонки Чаты Заявки Регистр.
Трафик 4513 4513 4513 4513 4872 4872 4872 4872
Конверсии 51 42 49 58 72 57 90 39
CvR, % 1,13 0,93 1,09 1,29 1,48 1,17 1,85 0,80
Изменение +31% +26% +70% -38%

Дополнительные способы для
увеличения конверсии на
мобильном сайте

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

Дополнительные способы
коммуникации на сайте адаптируются

Мобильная, адаптивная или RESS – решать вам. Но прислушайтесь к
Артемию Лебедеву, какая-то версия все же нужна точно.
Обязательно рассчитывайте эффективность запуска и планируйте
проект по запуску со сроками и подробными деталями.
Тестируйте разные варианты и замеряйте результаты по всем
конверсионным каналам.
Не слишком увлекайтесь мобильной рекламой, пока не проверите
свой сайт.
Адаптируйте каналы коммуникаций под Mobile. Обидно, если сайт
есть, а связаться через него совершенно невозможно!
Выводы

Спасибо за внимание
Вопросы?
Надежда Маринчева
FB: nadya_marincheva

Запуск мобильной версии сайта: разбор полетов (Надежда Маринчева, CoMagic)

Related slideshows

More Related Content

Запуск мобильной версии сайта: разбор полетов (Надежда Маринче��а, CoMagic)