Юзабилити-лаборатория: удаленное количественное юзабилити-тестирование мобильной версии

Новый выпуск лаборатории мы решили посвятить актуальной теме мобильных версий. Поэтому сегодня поделимся с вами результатами тестирования мобильной версии сайта digacompany\.ru, которое провели через сервис «Фабрика Юзабилити» (Fabuza.ru). На этой веб-платформе был создан сценарий тестирования со списком задач и опросниками, на который пользователи самостоятельно переходили по сгенерированной ссылке и проходили задачи тестирования без присмотра юзабилити-специалиста. Эксперт не мог влиять на работу респондентов, но его анализу были доступны видеозаписи, ответы на вопросы и прочие результаты.

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

Респонденты для тестирования были подобраны с помощью «Фабрики Юзабилити» и сертифицированных рекрутинговых агентств. Персональный подход к рекруту для мобильного теста гарантирует соответствие пользователей тем параметрам, которые мы указываем как значимые для представителей целевой аудитории.

Теперь подробнее о самом тестировании

Интернет-магазин digacompany\.ru предлагает строительные и отделочные материалы оптом и в розницу (г. Москва). В проекте приняло участие 24 пользователя (15 мужчин, 9 женщин), средний возраст составил 33 года, все проживают в Москве и ранее не посещали исследуемый сайт.

50% пользователей ранее заказывали стройматериалы через интернет. Другие 50% предпочитают делать покупки лично в основном из-за недоверия к качеству продукции онлайн-магазинов:

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

К слову, мы поинтересовались у опытных онлайн-покупателей, сайты каких строительных магазинов они посещали за последние полгода. 3 лидера – Leroy Merlin, OBI и Петрович. Список строительных товаров, которые пользователи заказывали через интернет, весьма широк, но среди самого популярного отметим плитку, ламинат, обои, сухие смеси и герметики.

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

- Цена (8 ответов).

- Быстрая и удобная доставка (5 ответов).

- Удобный сайт (5 ответов): «Удобное меню», «Простота оформления заказа», «Строка поиска. Удобная корзина с ценой за штуку, за опт, с учетом скидки».

- Наличие изображений товаров (3 ответа): «Очень важна возможность увидеть хорошие фотографии нужного мне товара (например того же паркета – рисунок и цвет мне был важен)».

- Качество товаров (3 ответа).

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

Задание №1. Работа с каталогом

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

Результативность этого задания – 58%: только 14 из 24 пользователей смогли найти необходимый продукт. Остальные 42% (10 из 24) дали неверный ответ. Давайте разберемся, в чем дело.

Меню в «шапке»

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

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

Слева – раскрывающееся меню в «шапке» digacompany\.ru, ссылка на общий каталог. Справа – раскрывающееся меню на странице каталога.

  

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

Слева – раскрывающееся меню leroymerlin.ru. Справа – вложенные категории меню obi.ru.

  

Единый каталог продуктовой категории

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

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

На сайте digacompany\.ru реализован второй вариант (изолированные каталоги для каждого производителя), что и сыграло злую шутку с пользователями. Респонденты успешно открывали каталог и переходили в категорию «Ламинат», где рассчитывали указать необходимые параметры фильтрации и подобрать подходящий вариант. Но в разделе «Ламинат» продукция представлена только в виде витрины-слайдера с несколькими товарами («Новинки», «Распродажа», «Популярное»). Для 42% респондентов было неочевидно, что это только часть ассортимента магазина и что требуется перейти в каталоги производителей. В результате они просмотрели только витрину и сделали вывод о минимальной стоимости на основе представленных в ней товаров.

В продуктовой категории «digacompany\.ru» размещены ссылки на каталоги производителей и витрина-слайдер, но нет списка продукции.

  

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

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

Комментарии пользователей:

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

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

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

Наблюдение: витрина-слайдер на странице продуктовой категории содержит три вкладки – «Новинки», «Распродажа, «Популярное». Интересно, что пользователи рассчитывают найти самые дешевые варианты товаров во вкладке «Распродажа». Увы, если ламинат-«новинка» доступен по цене 345 руб./м², то самый дешевый ламината по «распродаже» – 950 руб./м². Возможно, стоит учитывать ожидания аудитории и размещать во вкладке «Распродажа» также самые экономичные предложения.

Блок подбора товаров

Представьте, что вы выбираете ламинат на кухню. Какие параметры вы будете учитывать? Вряд ли только цену. Как минимум ламинат должен сочетаться с цветом стен, мебели и пр. Но в каталоге digacompany\.ru подбор продукции по цвету не предусмотрен. Комментарий пользователя:

• «Я сначала по цвету подбираю, а потом уже по цене. Тут такого нет»

Рекомендуем добавить фильтрацию по цвету.

Задание №2. Добавление в «корзину»

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

Результативность второго задания – 66%, 16 из 24 пользователей смогли рассчитать необходимое количество продукции. А 34% (1/3 аудитории) потенциально может иметь сложности уже на начальном этапе перехода к оформлению заказа и будет вынуждена звонить в компанию или обращаться в розничный магазин.

Выбор количества продукции

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

Вопрос (без вводной части): «Узнайте, какое количество ламината Вам потребуется на кухню размером 20м²».

Фрагмент страницы-карточки «Ламинат Floorpan» (digacompany.ru).

Рассчитали? :)

Пользователю известно, что у него кухня 20м². Чтобы понять, сколько ламината ему потребуется, нужно знать, на какую площадь рассчитана одна упаковка. Но в блоке добавления товара в «корзину» эта информация не указана. А заголовок продукции, где отражено соотношение упаковка/м², аудитория игнорировала.

Для части респондентов было неочевидно, что именно они добавляют в «корзину»: упаковки, квадратные метры, доски ламината… Особенные сложности с расчетами возникли у покупательниц женского пола.

Комментарии пользователей:

• «Не сразу понятно, сколько метров в упаковке и это не выделено»
• «Я думал, на сайте есть калькулятор для расчета»
• «Расчет необходимого количества материалов должен быть доступен в подсказках»
• «Я считала сама на калькуляторе, расчета на сайте не нашла»
• «Не нашла "пункт" в меню, который указывал бы на возможность сделать расчет материала на определенное количество метров»

Особенно нравится этот:

• «Я посмотрела на цену, которая указана за 1 кв метр, и добавила в корзину столько, сколько квадратных метров на кухне»

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

Слева – фрагмент карточки товара. Справа – фрагмент страницы «Корзина».

  

Важно! Не вынуждайте пользователей делать вот так :)

Рекомендации

Рекомендуем выносить информацию о соотношении упаковка/м² из заголовка продукта на основную область страницы-карточки (или дублировать ее). Желательно размещать это указание рядом с блоком добавления товара в «корзину».

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

Слева – пример подсказки на сайте moscow.petrovich.ru.

Пожелания пользователей:

• «Можно сделать калькулятор, который высчитывает необходимое кол-во! Также с учетом запаса на подбор. Я ответил 10 пачек на 20кв.м. это сухой расчет! Но не точный!»
• «Если делать это для "чайников", то ввести формулу расчёта по размерам помещения и соотношению количества ламината в упаковке»
• «Калькулятор всему голова»

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

Слева – пример подсказки для расчета количества товара (digacompany\.ru). Справа – калькулятор расчета количества материала по площади помещения на сайте obi.ru.

  

Задание №3. Сопутствующие товары

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

Результативность третьего задания такая же, как и второго – 66%, 16 из 24 пользователей нашли вкладку «Сопутствующие товары» на странице-карточке и смогли ответить на контрольный вопрос. А 34% (1/3 аудитории) не нашли данные о дополнительных товарах, хотя потенциально могли бы заказать на сайте больше и принести компании больше прибыли.

Вкладка «Сопутствующие товары»

Пользователи старательно искали дополнительные товары (плинтус, подложка) на странице-карточке, рассчитывая увидеть отдельную витрину-слайдер или раскрывающуюся вкладку.

На странице-карточке digacompany.ru имеются различные вкладки с данными о товаре «Описание», «Характеристики», «Бренд», «Сопутствующие товары». Но они не видны на странице по умолчанию все сразу, а скрыты в одном раскрывающемся списке. То есть на странице в один момент времени отображается только одна вкладка – «Описание». Чтобы увидеть остальные вкладки, требуется кликнуть на заголовок первой вкладки.

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

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

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

Слева – фрагмент карточки товара digacompany\.ru: вкладки скрыты в раскрывающемся списке. Справа – фрагмент карточки товара leroymerlin.ru: вкладки видны сразу.

  

Опытные покупатели также заметили:

• «В сопутствующих товарах [прим. на странице-карточке] не все представлено и начал искать еще клей для ламината (для лучшего крепления), набор для укладки ламината и заглушки для плинтусов (про плинтуса не написано, из какого материала они сделаны)».

Часть пользователей сразу может быть заинтересована только в сопутствующих товарах и искать их в разделе основного товара (например, искать плинтуса для ламината в разделе «Ламинат» или «Напольные покрытия»). Поэтому целесообразно размещать витрину-слайдер «Сопутствующие товары» также на страницах основных продуктовых категорий.

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

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

Комментарий по оформлению заказа

Процедура оформления заказа на сайте digacompany\.ru достаточно простая, поэтому мы не останавливаемся на ней подробно, кроме одного момента.

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

Выбор способа доставки при оформлении заказа (digacompany.ru) – адрес пункта самовывоза не указан.

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

Итоговый опрос

В завершение тестирования респонденты отвечали на вопросы об их впечатлениях от работы с сайтом в целом. Для получения итоговых метрик использовался опросник SUPR-Q (The Standardized User Experience Percentile Rank Score) и шкала NPS (Net Promoter Score).

Метрики

• Удобство – легкость использования сайта и ориентации в его структуре.
• Доверие – готовность пользователя рассчитывать на информацию, полученную на сайте.
• Визуальная привлекательность – простота и понятность оформления сайта, привлекательность дизайна.
• Лояльность – приверженность пользователей продукту или компании, готовность к повторным заказам.

Значения метрик:

0-3,4 – неудовлетворительный показатель;

3,5-3,9 – средний показатель;

4-5 – высокий показатель.

Метрики	Значение	Утверждения опросника
Удобство	2,9	Этим сайтом легко пользоваться
		Мне было легко ориентироваться на сайте
Доверие	3,5	Информация на этом сайте вызывает доверие
		Я могу рассчитывать на информацию, которую получаю на этом сайте
		Я доверяю этому сайту при совершении покупок на нем
Визуальная привлекательность	3,4	Я считаю этот сайт привлекательным
		Этот сайт имеет простое и понятное оформление
Лояльность	2,9	Скорее всего, я воспользуюсь этим сайтом снова
		Какова вероятность того, что вы порекомендуете этот сайт своим знакомым/коллегам/друзьям

Судя по результатам, у сайта есть потенциал для улучшения пользовательского опыта. Индекс пользовательской лояльности по шкале NPS (Net Promoter Score) также недостаточно высок, и для ресурса digacompany\.ruравен -58%. По данным marketizator.com, для ecommerce-сайтов индекс лояльности считается высоким от 28%. А средний балл для веб-сайтов равен -14%.

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

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

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

Удачи Вам!

Отдельное спасибо Максиму Козлову и Алексею Панкову из «Фабрики юзабилити» (fabuza.ru) за помощь в организации теста.