Кейс 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.
0
9 комментариев
Популярные
По порядку
Написать комментарий...

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Откройте на своем телефоне прямо сейчас — http://pauel.me/skyeng-mobile/main.html открыл на windows phone увидел это http://savepic.net/6893097.png

1

Печалька :( Прототип в гельветике.

0

Просто оставлю для тех, кто изучает тему: http://www.slideshare.net/Shnur_EKB/me96ru
Это была первая попытка описать ключевые моменты нашего первоначального опыта. С тех пор многое уже изменилось (например, отказались от Hummer.js), но все равно может быть полезно.

0

А почему не сразу приложение?

0

Приложение вряд ли решило бы проблему потери мобильного трафика. А вот для нашей платформы сделаем со временем :)

0

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

0

Павел, какую программу использовали для mindmap? (на скриншоте)

0

Я не павел, но скорее всего это https://www.mindmeister.com

0

Александр, все верно, это mindmeister

0
Читать все 9 комментариев
Apple вышел в лидеры продаж на китайском рынке смартфонов впервые с 2015 года

Apple вышел в лидеры продаж на китайском рынке смартфонов впервые с 2015 года. Теперь его доля там, согласно данным издания Cult of Mac, составляет 22% против доли Vivo и Oppo на уровне 20% и 18% соответственно.

Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

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

Штраф 10 тысяч рублей за утерю терминала, который банк забрал сам

Здравствуйте! Пишу про СберБизнес.

Это Элви Рэй Смит: он мечтал создать анимационный фильм на компьютере, соосновал Pixar, но ушёл из компании из-за Джобса Статьи редакции

Смит создал альфа-канал, который используется в Photoshop и других редакторах, работал в Xerox и LucasFilm и убеждал всех, что за компьютерной графикой будущее, однако всерьез его никто не воспринимал – кроме Стива Джобса.

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

«Хочу супер-пупер мега продукт, начинайте штормить». Разбираемся, как гроуз-хакинг помогает бизнесу расти

Подкаст «Бизнес, роботы мечты» — это клуб предпринимателей, где помогут, если что-то идёт не так; покажут новую цель, если застопорился.

История о том, как я привез в Россию самые продвинутые детские клюшки для хоккея. И чем они такие продвинутые

Привет! Меня зовут Александр Тягалов, очень рад нашему «заочному» знакомству. Расскажу вам о создании особенного бизнеса. Три года назад мы с Владимиром Тронько привезли в Россию и продаем (с каждым годом все успешнее) детские клюшки финской марки VIKKELA. У этих клюшек нет аналогов на Российском и Европейском хоккейном рынке, так что, с одной…

Kornia - Python библиотека для обработки изображений в задачах CV

В этой статье я хотел бы познакомить читателей с библиотекой для ЯП python — Kornia, имеющей богатый функционал в области computer vision. Библиотека написана с использованием pytorch, в ее основе лежат готовые решения, такие как torchvision, PIL, skimage, tf.image, OpenCV. В Kornia реализована возможность выполнения вычислений не только с…

Что если новый дом вам не нравится? Советы тем, кто переезжает в другую страну, и их менеджерам

Меня зовут Татьяна Карачевцева, в свое время я переехала из Харькова и Киев, а оттуда перебралась в Софию. Здесь уже как HR-менеджер помогла многим коллегам адаптироваться к жизни и работе в Болгарии. Совместив личный и профессиональный опыт, я попробовала собрать подсказки для обеих сторон, вовлеченных в процесс релокации. Какие стадии адаптации…

Медитация — это Prosto: история самого прибыльного сервиса для заботы о ментальном здоровье
Главная страница приложения Prosto: Медитации и Сон
Сервис аренды электросамокатов Whoosh начнёт работать в Португалии в феврале 2022 года и вложит в запуск $20 млн Статьи редакции

На старте в Лиссабоне будет работать 2500 самокатов.

Whoosh
null