5 факторов, которые негативно влияют на пользовательский опыт в мобайл

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

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

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

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

Так, 63% участников тестирования прервали сессии при просмотре сайтов с мобильных устройств исключительно из-за ошибок юзабилити, которые можно устранить…

Факторы, негативно влияющие на пользовательский опыт в m-commerce

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

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

Уникальные проблемы, с которыми сталкиваются мобильные пользователи при покупке товаров онлайн:

1. Недостаточный обзор страницы
2. Чувство дезориентации
3. Технические проблемы
4. Случайные или непреднамеренные нажатия / выбор
5. Внешние помехи

1. Недостаточный обзор страницы

«Взгляну-ка я на отзывы покупателей.... Отзывы.... Не пойму, Amazon изменил сайт?... Я ищу отзывы... Не. Что-то не нахожу. Не вижу, и все тут. Ослеп я, что ли? Они тут вообще есть?... Ладно, все, не могу найти... Либо я таки слепой, либо... страница слишком длинная…»

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

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

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

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

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

В мобильной версии гораздо сложнее установить и поддерживать обзор контента. Так, на мобильном сайте Macy’s мы видим первый шаг пользовательского опыта – навигация основного меню (первое изображение), затем «Выберите отдел» (второе изображение), затем «Женщины» (третье изображение). Мобильный пользователь уже три раза нажал на интерфейс, в отличие от пользователя навигации основного меню Macy’s на десктопе, которому вообще не нужно было ничего нажимать (только наводить курсор, чтобы развернуть пункты меню). И при этом у мобильного пользователя все еще гораздо меньше информации по сравнению с пользователем настольного устройства.

‍‍Если обзор слишком маленький, пользователям приходится идти назад, физически нажимая на интерфейс или кнопку «Назад» на своем устройстве, как правило, несколько раз; они не могут просто еще раз просмотреть основное навигационное меню, как на десктопе, чтобы «начать заново». Кроме того, мобильные пользователи не могут видеть более 10-15 пунктов меню в одном окне просмотра браузера, что приблизительно на 80% меньше, чем доступно пользователям настольных устройств.

Так же обстоят дела и с главной страницей. Пользователи десктопе часто видят всю страницу в двух или трех окнах просмотра; в мобильной же версии, прежде чем пользователи достигнут футера сайта, главная страница может занимать от 5 до 10 окон просмотра.

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

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

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

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

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

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

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

2. Чувство дезориентации

«Почему здесь только 3 дополнительных варианта обуви... вроде было больше... Как же вернуться к главному меню женской обуви? Не понимаю. И какие-то странные опции [«Спортивная обувь», «Бутсы и шиповки», «Обувь на каждый день»]... что-то я запутался. [Позже] Не нравится мне этот сайт [Under Armour]! Как же вернуться ... Кажется, я видел это на предыдущем уровне меню... Да, этот сайт немного раздражает. Я бы уже ушел отсюда к этому моменту.»

Еще одна сложность, тесно связанная с отсутствием обзора страницы –– чувство дезориентации.

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

Так, например, не оправдались ожидания пользователя от кнопки «Назад» на сайте Walmart. Пользовательский путь состоял из следующих шагов: «страница выдачи > страница товара > подстраница отзывов», затем посетительница сайта нажала на внутристраничную ссылку «Назад». Таким образом она вернулась на подстраницу отзывов на странице товара. Когда же она свайпнула край экрана, чтобы вернуться к странице выдачи, она опять оказалась на подстранице отзывов. В замешательстве участница тестирования опять нажала внутристраничную ссылку «Назад» и вернулась на страницу товара. К этому моменту она уже забыла, зачем она изначально хотела вернуться к странице выдачи и вместо этого начала просматривать cross-sell предложения. Неоправданные ожидания пользователей в отношении кнопки «Назад» могут привести к серьезной дезориентации и сбить пользователей с пути.

Три основных вопроса, которыми, как правило, задаются пользователи, когда они дезориентированы:

• «Где я?»
• «Как я сюда попал?»
• «Как же мне попасть в [х]?»
  

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

Как смягчить проблемы UX в m-commerce

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

1. Следите за тем, чтобы пользователям всегда было понятно, где они находятся в иерархии сайта;
2. Убедитесь в том, что навигационные функции сайта (кнопки «Назад», автопрокрутка) работают именно так, как ожидает большинство пользователей;
3. Проверяйте ваш сайт на наличие технических проблем, которые часто приводят к дезориентации.

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

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

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

3. Технические проблемы

Да что ж так медленно… Не пойму, это интернет тормозит, мой телефон или сайт. Что же делать? На этом этапе я обычно говорю себе: «Ок», и секундой позже «Ну, нет», и ухожу с этого сайта… Сайт должен работать быстрее. Мне лично это не подходит, у меня не хватает терпения… Если ждать приходится слишком долго, я просто ухожу и ищу то, что мне нужно, где-то в другом месте.»

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

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

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

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

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

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

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

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

Поэтому к данному вопросу стоит отнестись серьезно:

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

4. Случайные или непреднамеренные клики

«Совершенно случайно кликнул, сам не понял, как.»

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

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

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

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

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

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

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

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

Есть риск, что пользователь просто покинет сайт.

На сайте Herschel пользователь безуспешно пытался установить максимальную цену с помощью слайдера. Этот опыт негативно сказался на его восприятии сайта. Область нажатия ползунка была слишком маленькая ~1.9мм x 1.9мм.

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

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

5. Внешние помехи

«Вот черт. Вы не против, если я отвечу?»

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

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

Телефонные звонки и сообщения очень отвлекают, так как они часто имеют приоритет. Это подтвердилось во время тестирования, когда пользователь ответил на телефонный звонок во время тестовой сессии.

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

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

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

Но этот контекст важно учитывать в дизайне, например, вы можете:

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

Соблюдение вышеуказанных общих принципов необходимо для предотвращения потерь в объемах продаж.

M-commerce популярна среди пользователей, но крайне непросто правильно реализовать юзабилити мобильной версии сайта

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

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

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

Поэтому важно понимать пять основных сложностей, с которыми сталкиваются мобильные пользователи при просмотре сайтов электронной коммерции:

1. Недостаточный обзор страницы
2. Чувство дезориентации
3. Технические проблемы
4. Случайные или непреднамеренные клики
5. Внешние помехи

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

Перевод статьи