Кейс Skyeng: Пошаговая инструкция по созданию мобильной версии сайта

Дизайнер онлайн-школы английского Skyeng Павел Тепикин рассказал для рубрики «Интерфейсы» о процессе разработки мобильной версии сайта, благодаря которой сервис увеличил продажи курсов на 11%.

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

Скорость роста мобильной активности поразительна. По статистике Liveinternet по России, за последние два года люди стали выходить в интернет с мобильных устройств в два раза чаще. Похожую картинку мы наблюдали и среди посетителей нашего сайта: с мобильных устройств к нам, уже два года как, заходят в 1,5 раза чаще.

Доля нашей мобильной аудитории росла вместе с общей посещаемостью сайта. Проблема в том, что среди мобильных посетителей показатель отказов был больше в два раза — 22% не задерживались на странице более 15 секунд. Когда мобильная аудитория достигла 20%, стало понятно, что мы не должны терять этих клиентов. Пришло время делать мобильную версию сайта школы.

Постановка задач

Помимо очевидной борьбы с потерей потенциальных клиентов перед мобильной версией мы поставили несколько задач:

актуализировать информацию о предоставляемой услуге и компании (десктопный сайт запустили в 2012 году и с тех пор лишь дополняли);
сделать обзор преимуществ и показать собственную разработку — платформу для занятий Vimbox;
сделать доступнее обратную связь для клиентов.

Этапы дизайнерской работы

Сбор актуальной информации.
Создание информационной архитектуры.
Эскизирование и прототипирование.
Отрисовка в графике.

Сбор актуальной информации

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

Эти тезисы я затем объединил в общий список (Урок, Преподаватель, Платформа, Биллинг, Безопасность, Call-центр, Бизнес-процессы, Школа, Бренд) и проставил по ним приоритетные оценки.

Список фишек

Информационная архитектура

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

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

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

Майндмап мобильной версии

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

Прототипирование — один из моих самых любимых этапов. Это тот момент, когда продукт уже можно пощупать, представить, каким он будет в финале, показать коллегам и друзьям, проверить на жизнеспособность и собрать массу полезного фидбека.

Для создания интерактивных прототипов я использую Axure. Фичи для проектирования мобильного сайта или приложения:

динамические панели, которые позволяют пройти сценарии от начала до конца;
адаптация просмотра прототипа под мобильные устройства.

Откройте на своем телефоне прямо сейчас — http://pauel.me/skyeng-mobile/main.html

Доработка концепции

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

Полистав минуту прототип на телефоне, он сказал: «Здесь невозможно понять, куда идти дальше: на каждой странице несколько переходов, и где я был, а где нет, невозможно удержать голове, поэтому давай разберемся с этим хаосом!».

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

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

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

Отрисовка в графике

Мы посмотрели статистику по размерам экранов устройств посетителей сайта и определили диапазон ширины мобильного сайта. Статистика нам говорила:

основной пик ширины экрана приходится на интервал 300-400px;
следующий пик — 700-800px;
остальные размеры не значительны.

Дизайн отрисовали под основную ширину — 320px. На примере главной страницы сделали «широкий» вариант. Остальные страницы адаптировали уже на этапе верстки.

И несмотря на то, что из-за ограниченных ресурсов не смогли сделать полноценную адаптивную верстку, некоторые простые приемы все же применили:

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

Несколько пар картинок узкого и широкого вариантов:

Картинки интерфейсов с лупой и без:

Немного цифр

С релизом мобильной версии конверсия в подачу заявки у мобильных посетителей выросла с 1,1% до 1,7%.
Показатель отказов у мобильных посетителей снижен с 22% до 17%.
Глубина просмотра увеличилась на 11%.
Время на сайте увеличилось на 12%.
С наступлением mobilegeddon от Google мы поднялись на 2-4 позиции выше по ключевым запросам в мобильной поисковой выдаче.

Лайфхаки при разработке мобильной версии

Всем контактам пропишите ссылку соответствующего протокола: телефону — “tel:», Skype — “skype:», почте — “mailto:». Клиенты в результате будут благодарны.
Используйте правильные клавиатуры: если просите ввести телефон, показывайте клавиатуру с цифрами, для ввода почты также есть своя версия.
Не оставляйте пользователя без возможности перейти на полную версию сайта. Тем более, если мобильная версия является урезанной версией полной.
Позаботьтесь о скорости загрузки: уменьшайте вес картинок, пока потеря качества не станет заметной глазу без пристального разглядывания.
Если используете нестандартные шрифты в дизайне, загружайте пользователю только используемые начертания и наборы символов.
Для видео поставьте картинку-заглушку — она загружается быстрее кода видео.
Цифры, которые меняются со временем — стоимость услуг, количество клиентов, сотрудников, продаж — подтягивайте из базы. Так вам не придется обновлять информацию в двух местах: в полной версии сайта и в мобильной.
Используйте простые инструменты: заказы обратных звонков и обратную связь можно собирать на email.