hand holding mobile phone with shopping cart isolated over white background

Почему для мобильных пользователей недостаточно адаптивного дизайна

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

 

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

 

01

 

Однако растет не только число мобильных пользователей, растет время, которое пользователи проводят онлайн с мобильных устройств. Как показывают данные KPCB, средний человек сейчас проводит 2,8 часа в день в онлайн-сервисах с мобильных устройств, и только 2,4 часа в день – с компьютеров.

 

02

 

Мобильные пользователи – это хорошо, но дают ли они конверсию? Компании iAcquire и SurveyMonkey провели исследование и обнаружили, что 70% поисковых запросов, сделанных с мобильных устройств, приводят к совершению целевого действия на сайте в течение часа.

Отличаются даже цифры конверсий на разных устройствах. Вот, например, какие данные в среднем получила компания Monetate по конверсиям на разных типах устройств. Показаны действия «положить в корзину» и «купить».

 

03

 

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

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

  • 50% мобильных пользователей сайта B&Q не могли полноценно взаимодействовать с главной страницей
  • 25% мобильных пользователей испытывали проблемы при поиске на сайте Sport Direct
  • 67% сайтов загружались слишком медленно, по мнению пользователей
  • 100%(!) мобильных пользователей испытывали сложности с оформлением заказа на сайте River Island
  • 50% мобильных пользователей испытывали сложности с созданием аккаунта на сайте Boots
  • 63% мобильных пользователей испытывали проблемы с чтением контента на сайте PaperChase

Джоэл Харви из Conversion Science выдвигает несколько тезисов в отношении конверсии на мобильных устройствах:

  • Адаптивный дизайн в том виде, в каком мы его понимаем сейчас, разрушает конверсию с мобильных устройств
  • Чтобы конверсия была хорошей, мобильная версия сайта должна быть больше похожей на мобильное приложение в плане интерфейса
  • Пытаться уложить максимум информации на небольшом экране – не так важно, как мы думали
  • Посетители с iPhone и со смартфонами на Android ведут себя по-разному.

 

В чем проблема с конверсией на мобильных устройствах?

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

«Мобильные пользователи остро реагируют на любые проблемы с сайтом»

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

Марк Джон Химстра из FullStack Copy определил следующие два типа проблем с мобильными сайтами:

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

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

 

Пример 1 – Schuh

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

 

04

 

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

Предположим, мы решили перейти по ссылке Sale Final Reductions.

 

05

 

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

 

06

 

Вот как выглядит карточка товара, если вы откроете его.

 

07

 

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

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

 

08

 

А вот как выглядит оформление заказа:

 

09

 

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

И следующие шаги в оформлении заказа:

 

10

 

Выбор способа доставки:

 

11

 

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

Выбор метода оплаты:

 

12

 

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

 

Чем отличается трафик с мобильных устройств?

Отличий мобильного трафика множество, но в целом они укладываются в следующие три категории:

  1. Намерение: как правило, намерение, направленное на совершение конверсии у мобильных пользователей более сильное, поэтому оптимизация для мобильных устройств и является такой важной задачей. Бывало ли у вас, что вы увидели какой-то товар в ленте Facebook, который вас заинтересовал, вы перешли в интернет-магазин, но вам кажется все таким неудобным, что вы просто откладываете покупку с мыслью «ок, я сделаю это когда вернусь домой/в офис»? И как часто вы потом забываете про это?
  2. Отвлечения: пользователи мобильных устройств гораздо более легко отвлекаются на разные вещи. Они идут по улице и увидели в витрине что-то, что их заинтересовало больше. Им прилетело сообщение от друга. Кто-то написал комментарий к их посту в Facebook, и они, конечно же, должны посмотреть его! Поэтому ваша задача как можно быстрее провести пользователя до совершения конверсии.
  3. Поведение: сравните в статистике сайта мобильных и не-мобильных пользователей. Скорее всего, вы увидите массу отличий в их поведении. У них гораздо больше отказов, они просматривают меньше страниц и так далее. Они ведут себя по-другому, так может быть надо пытаться конвертировать их по-другому?

«А что же адаптивный дизайн?»

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

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

Сегодня многие владельцы сайтов понимают необходимость того, чтобы мобильным пользователям было удобно. Но они не осознают, что адаптивный дизайн не всегда является оптимальным решением. Адаптивный сайт не означает отличного «юзабилити» для мобильных пользователей.

Говорит Ралука Будйю из компании Nielsen Norman Group:

«Пользователей не волнует вопрос, адаптивный у вас сайт или мобильная версия. Они оценивают сайт с точки зрения юзабилити. Буквально недавно один из респондентов нашего исследования жаловался, что сайт Boston Globe (крупный новостной сайт, использующий адаптивный дизайн) не оптимизирован для мобильных устройств – страницы были слишком длинные, и респондент не мог найти там нужную ему информацию».

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

 

Пример 2: Slack

Вот как выглядит логин в сервис Slack на мобильном устройстве.

 

13

 

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

Главная ошибка оптимизации для мобильных устройств

Главная ошибка — это бороться со слабостями вместо использования сильных сторон мобильного трафика.

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

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

По материалам блога ConversionXL

About likezilla

Мы увлечены тем, что находим способы снизить стоимость услуг digital-маркетинга.