M-commerce: значение юзабилити мобильной версии сайта и особенности покупок с мобильных устройств

С вами Максим Жуков из KISLOROD. Мы специализируемся на разработке и развитии e-commerce-проектов.

Мы закончили большой цикл статей о юзабилити в e-commerce проектах, в котором обсуждали только десктоп. Если пропустили, смотрите наши ранние публикации в этом блоге или телеграм-канале.

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

Число людей, использующих смартфоны в 2020 году достигло 3.5 миллиарда. Для сравнения, в 2019 году смартфоны использовало 3.2 миллиарда человек Доля мобильных пользователей постоянно растет. По данным отчета Digital 2020, мобильных пользователей в период с января 2019 по январь 2020 стало на 124 миллиона больше:

Данные по типам устройств (смартфоны, планшеты, десктоп) по России:

Сфера e-commerce также развивается. Примерно три четверти пользователей в мире в возрасте от 16 до 64 лет покупают что-то в Интернете каждый месяц. Чаще покупки совершают через мобильные устройства (52%), чем с помощью ноутбука (36%), хотя данные отчета показывают, что большинство людей используют оба устройства для покупок (74%). Часто выбор девайса зависит от характера товаров.

По данным SaleCycle, на мобильные устройства приходится 65% всего трафика электронной коммерции, но только 53% продаж. Согласно исследованию Яндекс, с мобильных устройств все чаще совершают покупки. Скорее всего, эта тенденция сохранится и в будущем.

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

Закономерно, что конверсия на десктопах выше — но скорее всего ситуация будет меняться. Если ритейлеры начнут уделять больше внимания удобству покупок с мобильных устройств, конверсия будет расти.

По данным SaleCycle, у сайтов, которые продают продукты питания, самый низкий уровень отказов, высокий уровень мобильного трафика (75%) и продаж (67%). Ритейлеры модной одежды конвертируют более высокий процент мобильного трафика в продажи (89,3%). Причина в том, что они ориентированы на молодую аудиторию, которая предпочитает мобильные устройства.

Учитывая тенденции, все больше компаний используют Mobile first подход — когда интерфейс и сайт разрабатывается преимущественно для смартфонов. Немаловажный критерий — алгоритмы Google, которые учитывают удобство просмотра сайта с мобильного. Удобные для пользователей сайты ранжируются выше, чем те, которые имеют хорошие показатели в Google PageSpeed Insights.

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

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

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

Дизайн для мобильных устройств сложнее сделать удобным для пользователей, чем для десктопа. То, что пользователь не может увидеть сразу всю страницу — самая серьезная и наиболее распространенная проблема, с которой сталкиваются пользователи в m-commerce.

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

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

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

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

Когда пользователи перемещаются между страницами сайта на мобильном устройстве, часто происходит дезориентация. Из-за этого пользователь:

• не осознает, где находится;
• не понимает, как перейти к нужной странице или функционалу;
  
• может пропустить что-то действительно важное — УТП, контент, ключевые характеристики и другие триггеры, стимулирующие покупку);
  
• разочаровывается в интернет-магазине.
  

О решении этой проблемы поговорим в следующей статье.

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

Например, на одном из сайтов выводился неполный перечень категорий в мобильной версии — это негативно сказалось на понимании полноты ассортимента испытуемыми. Респонденты думали, что видят весь каталог и разочаровывались в ассортименте. Некоторые пытались найти другие товары, полагая что они должны быть где-то на сайте. В среднем испытуемые тратили на поиски более 10 минут, а затем покидали магазин.

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

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

Хотя и каталог, и сервисная информация должны быть в мобильной версии, форма контента может или должна меняться в зависимости от контекста.

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

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

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

Рассмотрим эти аспекты ниже.

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

На мобильном устройстве есть две возможности:

• вся информация отображается через видимые элементы навигации — кнопки или ссылки, даже если она вложена в подразделы или дочерние страницы;
• контент может быть частично скрыт из-за того, что размещен на слайдере и отображаться только тогда, когда пользователь свайпит.
  

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

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

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

На мобильных устройствах используют пальцы для нажатия ссылок и кнопок. Если на экране много кликабельных элементов, то их можно нажать случайно. Во время исследований Baymard Institute, испытуемые часто делали случайные тапы — у 50% возникли проблемы с нажатием на нужный элемент. Иногда из-за этого испытуемые уходили с сайта.

Например, в футере сайта letu.ru ссылки расположены слишком близко — это неудобно для пользователя.

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

Согласно исследованиям Baymard Institute, испытуемые пытались применять мобильные жесты (двойной тап, разведение пальцев) для увеличения изображений даже на сайтах, которые предоставляли крупные изображения. Когда пользователям это не удавалось (40% случаев), они уходили из карточек товара или из интернет-магазина вообще.

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

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

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

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

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

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

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

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

Хорошей альтернативой динамическим слайдерам оказались статические баннеры на главной странице:

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

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

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

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

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

Во время тестирования Baymard Institute, пользователей в среднем отвлекали каждые 20 минут — звонком, сообщением или другим уведомлением. Некоторых пользователей прерывали гораздо чаще — каждые 4,5 минуты. Частота прерываний зависит от целевой аудитории.

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

• сохранять уже введённые в формы данные,
• внедрить функцию добавления в «Избранное»,
  
• сохранять добавленные в корзину товары,
  
• реализовать понятную навигацию,
  
• обеспечить страницы подсказками.
  

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

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

На смартфонах пользователи принимают за рекламу все, что сильно визуально отличается от остального контента — баннеры, анимацию, большие картинки. Таким образом, они могут упустить важную информацию, просто пролистав ее.

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

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

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

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

Есть 3 подхода к реализации живого чата, и каждый имеет свои минусы:

1) Диалоговое окно самопроизвольно накладывается на всю просматриваемую страницу.

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

2) Окно диалога всплывает самостоятельно и занимает часть экрана

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

3) Чат используется как элемент, который постоянно перемещается и находится перед глазами пользователя

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

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

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

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

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

1. не оптимизированные изображения (по размеру и по весу);
2. не оптимизированные CSS и JS;
   
3. размещение всех JS-скриптов в «шапке» сайта;
   
4. проблемы с кешированием (его отсутствие или неправильная работа);
   
5. большая глубина и количество элементов в DOM;
   

6. на сайте не используются современные форматы изображений (в частности «webp»), асинхронная и/или отложенная загрузка скриптов.

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

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

Оценить скорость загрузки и получить рекомендации по устранению проблем работы сайта на смартфонах можно с помощью сервиса Google PageSpeed Insights. В этой статье мы собрали список практических рекомендаций, внедрив которые вы увеличите показатели сайта.

Для ускорения загрузки страниц на мобильных устройствах можно использовать технологии Яндекс Турбо для интернет-магазина и Google AMP для интернет-магазина. Это хорошие решения, хотя пока они используются редко.

В каждом из 15 крупнейших интернет-магазинов, тестируемых Baymard Institute, были обнаружены технические проблемы, из-за которых пользователи отказывались от работы с сайтом. Поэтому важно периодически проводить функциональное тестирование и проверять вёрстку на разных устройствах. Особенно, если интернет-магазин регулярно наращивает функционал и происходит плотная работа с интерфейсом.

1. увеличение точек соприкосновения пользователя с интернет-магазином — сайт, приложение, социальные сети;
2. постоянная доступность телефона и увеличение числа быстрых и спонтанных покупок;
   
3. широкий охват для рекламных кампаний;
   
4. возможность более точно настроить таргетинг, в том числе по мобильному оператору;
   
5. увеличение CTR за счет того, что мобильная реклама занимает значительную долю экрана и на нее трудно не обратить внимание;
   
6. сканирование штрих-кодов и автоматическое заполнение данных банковских карт;
   
7. благодаря GPS местоположение определяется автоматически, не нужно запоминать почтовые адреса;
   
8. простота мобильных платежей.
   

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

Чтобы определить, насколько грамотно в вашем проекте реализованы другие элементы интерфейса, скачайте наш внутренний чек-лист для улучшения юзабилити интернет-магазина с 250+ пунктами.

И не забудьте поставить лайк (+1), если понравился материал.