Почему адаптивный дизайн это не оптимизация мобильной конверсии?

Posted on by riasevastopol

В 2014 году Джереми Смит (Jeremy Smith), специалист по оптимизации конверсии, написал в собственном блоге: «Классическая оптимизация погибла, и на ее месте вырастает дивный новый мир оптимизации мобильной конверсии (mobile conversion optimization)».

Но дать согласие с его словами возможно только частично. есть ли оптимизация мобильной конверсии «дивным новым миром»? Да. «Погибла» ли классическая оптимизация?

Отнюдь нет.

Классическая (т.е. веб) и мобильная оптимизации — две отдельные практики, любая из которых требует собственных определенных стратегий. Одна не заменяет другую, и маркетологам постоянно следует не забывать об этом.

  • 15 образцовых примеров мобильного веб-дизайна

Текущее состояние рынка мобильных устройств

Ни для кого не будет сюрпризом тот факт, что количество пользователей мобильных устройств растет с немыслимой скоростью и уже превысило количество десктопных пользователей (desktop users).

Эти comScore четко демонстрируют эту тенденцию:

В соответствии с информации Statista, общее число пользователей мобильных устройств во всем мире образовывает 2 700 000 000.

Потребление мобильного интернета кроме этого существенно выросло: у среднестатистического взрослого уходит 2,8 часа в сутки на серфинг посредством мобильных устройств и лишь 2,4 часа — на доступ в интернет с компьютера/ноутбука.Почему адаптивный дизайн это не оптимизация мобильной конверсии?

KPCB привел сведения об применении интернета за последние 8 лет:

Количество часов, проводимых в сети среднестатистическим взрослым с применением разных устройств: зеленый — мобильный, светло синий — десктоп/лэптоп, желтый — другие девайсы

Так, рост популярности мобильных устройств для выхода в сеть очевиден, но как наряду с этим обстоит дело с конверсией?

iAcquire и SurveyMonkey установили, что 70% всех поисков на мобильных устройствах ведет к конверсионному действию на сайтах в течение 1 часа. Наряду с этим показатели конверсии мобильных и десктопных пользователей существенно отличаются:

Коэффициенты конверсии по типу применяемого устройства (светло-зеленые линии — «продажи», темно-зеленые — «добавление в корзину»)

Econsultancy совершил пользовательское тестирование мобильных предположений сайтов с целью обнаружения их главных неприятностей:

По результатам пользовательского тестирования 15 мобильных сайтов было распознано следующее:
50% пользователей не удалось корректно загрузить основную страницу сайта BQ;
25% пользователей испытывали проблемы с поиском на сайте Sports Direct;
67% сайтов, в соответствии с пользователям, имели низкую скорость загрузки;
100% пользователей столкнулись с проблемами на протяжении оформления приобретения на сайте River Island;
50% пользователей имели сложности с регистрацией на сайте Boots;
63% пользователей поняли, что в мобильной версии сайта Paperchase не всецело отображается контент.

  • Как повысить «мобильную конверсию»?

Из-за чего мобильные устройства конвертируют хуже?

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

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

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

Мелкий экран, неприятности со связью, отвлекаемость внимания — обстоятельств нехорошей мобильной конверсии возможно множество

Твитнуть цитату

Марк Джон Химстра (Mark John Hiemstra) из Full Stack Copy выделил два типа мобильных помех: настоящие и ментальные:

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

Настоящие помехи появляются тогда, в то время, когда люди испытывают трудности при заполнении всех этих бессчётных полей контактной формы либо в то время, когда никак не смогут надавить на кнопку призыва к действию (call to action) по причине того, что она через чур маленькая; или же ваш сайт не оптимизирован для мобильных устройств и исходя из этого людям приходится продолжительно прокручивать страницу вниз и/либо увеличивать ее масштаб, дабы добраться до контактной формы».

Хороший пример: Schuh (вебмагазин обуви)

Посмотрим на конверсионную воронку мобильной версии сайта Schuh.

Так выглядит домашняя страница сайта на мобильных устройствах:

Обратите внимание на большие кнопки, лаконичность, четко обозначенную функцию поиска и т.д. Отправимся дальше и кликнем на красный баннер с надписью «Финальные скидки»:

У вас имеется возможность сходу выбрать необходимый размер обуви, и при жажде вы имеете возможность отфильтровать результаты поиска кроме этого по вторым чертям (бренд, цвет, материал, цена и т.д.) :

Вот так отображается определенная позиция:

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

Так выглядит корзина:

Тут все предельно светло, а сейчас посмотрим на процедуру оформления приобретения:

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

Ход 1:

Ход 2:

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

Ход 3:

И опять увидьте размер и простоту главных элементов страницы.

Целый процесс сотрудничества с сайтом прошел полностью без каких-либо неприятностей. Если вы обратите внимание на время, в то время, когда были сделаны первый и последний скриншоты, то увидите, что целый процесс из 9 шагов не занял и 5 мин..

  • Оптимизация мобильной конверсии: все дело в скорости

Отличие мобильного трафика от десктопного

Мобильный трафик существенно отличается от десктопного. Талия Вольф (Talia Wolf) из Conversioner и Banana Splash растолковывает это:

«Если вы имеете дело с мобильной оптимизацией, то вы должны относиться к мобильным визитёрам как к совсем второму типу потенциального клиента, чье поведение отличается от десктопного и требует применения полностью вторых стратегий. Применяйте эти Google Analytics для анализа поведения мобильных пользователей: обратите внимание, какие конкретно страницы они просматривают, какие конкретно устройства применяют, на процент отказов (bounce rate), коэффициент конверсии (conversion rate), критерии поиска (search terms), и воронку продаж, через которую они проходят. Любая подробность имеет значение и разрешит вам в будущем обеспечить пользователям более успешный опыт сотрудничества с вашим мобильным сайтом».

Фактически говоря, все различия между мобильным и десктопным трафиками возможно свести к 3 категориям: намерение, уровень отвлекаемости и поведение.

1. Намерение

Мобильные пользователи, в большинстве случаев, имеют более сильные намерения. Легко представьте: десктопные пользователи в большинстве случаев сидят дома либо в офисе и владеют свободным временем. Они просматривают разные сайты, заходят на собственный профиль Facebook, слушают музыку.

Мобильные же пользователи, в большинстве случаев, неизменно в движении и ограничены во времени.

Случалось ли с вами когда-нибудь такое, что вы собрались приобрести что-то онлайн, просмотрели предложение с вашего сотового телефона и решили отложить приобретение до приезда к себе? Это происходит со всеми и частенько. Но в случае если сайт прекрасно оптимизирован под мобильное устройство, люди будут выполнять приобретение в ту же самую 60 секунд, когда они поразмыслили о ней.

2. Уровень отвлекаемости

Длительность концентрации внимания на мобильных устройствах еще меньше, чем на десктопных. Вследствие этого, учтите следующее:

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

При всем наряду с этим направляться не забывать, что упрощая и уменьшая мобильную версию сайта, принципиально важно не перестараться, в противном случае он прекратит быть для визитёра призывом к действию (call to action). Принципиально важно отыскать верный баланс.

3. Поведение

Проанализируйте эти Гугл Analytics. Создайте сегмент мобильных пользователей и сегмент десктопных пользователей. Пройдитесь через все разделы вашей панели инструментов и сообщите, что вы видите.

Готовы поспорить, что вы замечаете полностью два различных типа поведения.

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

Мобильные пользователи ведут себя в противном случае, по причине того, что их намерения и внешнее окружение существенно отличаются. Следовательно, и преобразовать их нужно особенным образом.

  • Навигация мобильных приложений и сайтов: базисные правила юзабилити

Но у нас же адаптивный дизайн…

В то время, когда заходит обращение о адаптивном либо респонсивном дизайне, эксперты рассуждают фактически одинаково:

Талия Вольф: «Не смотря на то, что респонсивный дизайн (responsive design) имеет очевидные преимущества, он все же не есть оптимизированным для мобильных устройств. По собственной сути, респонсивный дизайн только разрешает сайту прекрасно отображаться на мобильных устройствах, но он не отвечает своеобразным потребностям мобильных визитёров».

Респонсивный дизайн больше относится к тому, как выглядит мобильный сайт, чем к актуальному пользовательскому опыту (user experience).

Рафаэль Паулин-Дэйгл (Raphael Paulin-Daigle) из Growth Marketing Expert додаёт к этому:

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

Респонсивный дизайн не равняется качественному UX. Не хватает дизайн респонсивным и заявить, что ваш мобильный сайт оптимизирован. Это просто не имеет никакого смысла.

Респонсивный дизайн больше относится к тому, как выглядит мобильный сайт, чем к актуальному пользовательскому опыту

Твитнуть цитату

Пример: Slack (корпоративный мессенджер)

Разработчикам Slack как мы знаем, что вводить пароль на сотовом телефоне, в особенности в случае если это долгий и сложный пароль, возможно сложно. Вместо этого сервис предлагает вам воспользоваться «чудесной ссылкой», отправляемой на вашу email и благодаря которой вы имеете возможность зарегистрировать себя на их сайте. Это пример хорошего UX.

Мобильный сайт vs. Респонсивный сайт

В то время, когда речь заходит о респонсивном дизайне, весьма сложно не подметить бессчётные споры на тему что лучше: мобильный либо респонсивный сайт? направляться ли создавать особую мобильную версию сайта либо же достаточно применять респонсивный дизайн? Мнения специалистов по этому вопросу разделяются:

Ралука Будиу (Raluca Budiu) из Nielsen Norman Group имеет занимательные мысли на данный счет:

«Честно говоря, пользователям абсолютно все равно, респонсивный у вас сайт либо нет: они элементарно не видят никакой отличия между особой мобильной версией сайта и респонсивным сайтом. Для них все, что отличается от десктопного варианта, есть мобильным сайтом. И в случае если у мобильных сайтов нехорошее юзабилити, (т.е. удобство применения), то значит они не оптимизированы под мобильные устройства.

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

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

Подведем итоги:

  • Никого не тревожит, отдельная ли у вас мобильная версия сайта либо же респонсивный дизайн.
  • Пользователям ответственна интуитивность дизайна.
  • Существуют заблуждения по поводу того, что есть респонсивным дизайном, а что есть мобильной версией сайта.
  • Не существует определённого победителя и верного ответа. Принципиально важно направляться опыту хороших мобильных дизайнов.

Кейс Marketing Experiments

Marketing Experiments задал увлекательный вопрос: «Что будет генерировать больше Free Trial подписок (бесплатные пробные предположения продуктов) — респонсивный либо нереспонсивный дизайн?»

Для большинства людей ответом будет респонсивный сайт. Согласны?

Посмотрите на нереспонсивный дизайн:

А сейчас на респонсивный дизайн:

Сейчас взглянуть на результаты:

Думается, что семь дней дизайн и в самом деле содействует повышению конверсии. Но разглядим результаты более подробно:

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

Marketing Experiments высказал предположение, что обстоятельством этого есть то, что респонсивный десктопный дизайн не появляется в виде всплывающего окна (popup), как это происходит при с нереспонсивным дизайном.

Вывод тут состоит не в том, что респонсивный дизайн ненужен и полностью не работает. Это всего лишь один частный случай. Но респонсивный дизайн не гарантирует успех в 100% случаев. Он может сработать в вашем случае, быть может и не сработать.

Но если вы думаете, что ваш мобильный сайт оптимизирован, лишь по причине того, что имеет респонсивный дизайн, вы очень многое упускаете из виду.

4 распространенные неточности мобильной оптимизации

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

1. Борьба с недочётами vs. Применение преимуществ

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

И по данной причине кое-какие маркетологи пробуют использовать к мобильным предположениям те же тактики, что и для десктопных сайтов. Вместо того, дабы воспользоваться преимуществами мобильных устройств, они пробуют сражаться с их недочётами.

К примеру:

  • Мелкий размер экрана. Не пробуйте впихнуть все с вашего сайта в мобильную версию. Выделите важные сведенья и сократите элементы дизайна.
  • Легко отвлекающиеся визитёры. Не пробуйте держать в заложниках визитёров на вашем сайте. Вместо этого обеспечьте им возможность возвратиться на ваш сайт в любую секунду и закончить желаемое воздействие. Разрешите им сохранять текущее состояние и историю.

2. Нехорошее отслеживание

Вам знакомо понятие кросс-девайсных приобретений (cross-device shopping)? Сущность содержится в том, что процесс одной конкретной приобретения протекает на нескольких устройствах. Допустим, вы находите и просматриваете данные о каком-то продукте на вашем iPhone, после этого позднее вечером вы берёте его с вашего ноутбука.

В соответствии с итогам исследования comScore, тенденция кросс-девайсных приобретений усиливается :

В следствии, мобильная веб-аналитика может стать сверхсложной.

3. Мобильная версия — это совсем вторая история.

Другая себестоимость мобильной версии существенно превышает десктопную. Из-за изюминок свойственных мобильным устройствам вам нужно будет сократить версию сайта, дабы упростить воронку продажи. Но что будет означать для пользователя, если вы покинете A в пользу B?

Ралука Будиу (Raluca Budiu) из Nielsen Norman Group даёт рекомендацию на данный случай:

«Еще один принципиальный момент, что не до конца осознан дизайнерами, — это то, что мобильный контент должен иметь многоуровневую структуру. Это совсем не свидетельствует, что мы должны произвольным образом уменьшать либо прятать контент (что, к сожалению, и делают весьма многие). Нужно расставить приоритеты, выделить сущность, а подробности убрать на вторичные страницы».

4. Через чур сложная навигация

Совокупность фильтрации и мобильной навигации еще до сих пор не доведена до совершенства. Ли Дуддел (Lee Duddell) из семь дней растолковывает кое-какие из самый распространенных неприятностей мобильных предположений сайтов электронной коммерции (eCommerce):

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

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

  • сортировка и Фильтрация не трудилась корректно на 5 из протестированных сайтов.
  • Пользователи не могли настроить нужную им фильтрацию».

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

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

  • 5 распространенных неточностей юзабилити при разработке мобильной версии лендинга

Заключение

Рост популярности мобильных устройств во всем мире повлек за собой появление многих новых вопросов относительно оптимизации конверсии, ответы на многие из которых нам до сих пор еще не известны.

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

Предлагаем вам взять на вооружение следующие советы:

  1. Применяйте каждые инструменты мобильной и веб-аналитики на ваш выбор.
  2. Совершите качественное и количественное изучение, дабы лучше осознавать потребности, опасения, мотивации и препятствия мобильных пользователей.
  3. Расставьте приоритеты при выборе графического функционала и контента.
  4. Систематически уменьшайте (либо структурируйте) элементы и контент дизайна в соответствии с запросами вашей мобильной аудитории.
  5. Оцените ваш мобильный сайт с позиций UX и создайте мобильную конверсионную воронку.
  6. Начните проводить тесты, дабы улучшить мобильную конверсию.

Высоких вам конверсий!

По данным: conversionxl.comimage source markuskoller

Случайные статьи:

Как сделать адаптивный сайт?


Подборка похожих статей:

riasevastopol

More Posts