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

В новом выпуске мы решили совместить количественный и качественный анализ и выбрали в качестве метода удаленное немодерируемое юзабилити-тестирование пользователей через сервис «Фабрика Юзабилити» (Fabuza.ru).

На этой веб-платформе был создан сценарий тестирования со списком задач и опросниками, на который пользователи самостоятельно переходили по сгенерированной ссылке и проходили задачи тестирования без присмотра юзабилити специалиста. Эксперт не мог влиять на работу респондентов, но его анализу были доступны видео-записи, ответы на вопросы и прочие результаты. Рекрутинг (подбор) пользователей также осуществлялся с помощью «Фабрики Юзабилити» из специальных онлайн-баз, сертифицированных согласно ESOMAR.

Из 59 заявок мы выбрали 4 сайта разной направленности – kk-wheel.ru (продажа литых дисков для авто), megaflowers.ru (заказ букетов и поздравлений), incamp.ru (интернет-каталог детских лагерей в России и за рубежом) и gorstom\.ru (стоматологическая клиника). Надеемся, что обзор будет полезен многим из вас.

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

1. Мужчины от 30 лет, со средним уровнем дохода, имеющие автомобиль (тестировали сайты kk-wheel.ru и megaflowers.ru).

2. Женщины и мужчины от 33 лет, со средним уровнем дохода, имеющие детей старше 6 лет (тестировали сайты incamp.ru и gorstom\.ru).

Для того чтобы оценить, справился пользователь с заданием или нет, в удаленном тестировании после выполнения задания респонденты должны дать ответ на контрольный вопрос, например: сколько стоит лечение кариеса? (от 1380 руб.) сколько местное размещение в комнате в детском лагере? (3-4 местное) Или же пользователи должны подобрать продукт по четко заданным характеристикам: букет из 33 красных роз; спортивный лагерь за рубежом с 3 по 10 января. Конечно, такая постановка задачи ограничивает свободу выбора, но проблемы интерфейса будут выявлены в любом случае – ищет пользователь лагерь для своего ребенка (естественный вариант) или для чужого ребенка (заданный сценарием вариант). Стоит отметить, что проведение удаленного тестирования актуально, если не хватает времени и средств на полноценное юзабилити-тестирование, или в качестве дополнения к классическому юзабилити-тестированию.

Мы хотим поделиться с вами самыми яркими моментами исследования.

Автомобильные диски (kk-wheel.ru)

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

Пример инструкции к заданию на Fabuza.ru.

Проблемы подбора дисков

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

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

Почему нет кнопки “В наличии”?

В каталоге представлены диски, которых нет в наличии (kk-wheel.ru)

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

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

Фильтр слабо заметен и работает некорректно (kk-wheel.ru)

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

Сервис «Примерить на автомобиль» (kk-wheel.ru)

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

Сервис «Примерить на автомобиль»: стоимость дисков не указана (kk-wheel.ru)

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

• В каталоге по умолчанию отображаем только товары в наличии.
• Внедряем в фильтр параметр «Цена».
• Более активно выделяем строку фильтра и проверяем ее работоспособность.
• Обеспечиваем легкий доступ аудитории к полезным сервисам: кнопку «Примерить на автомобиль» размещаем на всех страницах каталога.
• Информация о стоимости должна быть легкодоступна.

Проблемы заказа дисков

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

Карточка товара: указание на необходимость адаптера для установки диска (kk-wheel.ru)

Во-вторых, сама форма заказа нуждается в переработке:

1. Количество полей в форме заявки пугает покупателей, ее заполнение требует заметных затрат времени и в ней легко потеряться. Треть пользователей (!) добавила диски в «корзину», но затем отказалась от совершения заказа. Комментарии: «Слишком много информации», «Много данных для оформления».

2. Данные о составе заказа встроены в форму заявки и размещены внизу, что неожиданно и непривычно.

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

4. Требование ввести индекс неоправданно, лишь некоторые пользователи его знают. Комментарий: «Непонятно почему почтовый индекс является обязательным. Если он действительно нужен (при доставке почтой, например), то можно его получить из адреса через сервисы почты России».

5. Неочевиден смысл дважды указывать город доставки (поля «Местоположение» и «Город»).

6. Целевая кнопка «Оформить заказ» слабо выделена и не оптимально размещена слева (элементы, связанные с переходом на следующий шаг, обычно располагаются справа). Комментарий пользователя: «Мелкий шрифт не могу найти кнопку заказать».

Страница оформления заказа на сайте kk-wheel.ru

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

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

В форму заказа нужно внести ряд изменений:

• Параметры автомобиля стоит разместить вверху страницы вместе с блоком «Состав заказа» и представить их в формате простого текста. Маловероятно, что покупатель станет менять авто уже после выбора дисков на этапе оформления заказа.
• Максимально сокращаем количество полей. Например, отказываемся от поля «Индекс» и подгружаем эти данные самостоятельно из базы индексов. А вместо полей «Местоположение» и «Город» оставляем одно поле «Адрес доставки».
• Блоки выбора доставки, ввода контактных данных и выбора способа оплаты желательно отображать последовательно, по мере их заполнения пользователем. То есть разбиваем оформление заказа на шаги. Это снизит информационную нагрузку и сфокусирует покупателя на процессе оформления. Пошаговое оформление заказа на korea-cosmetics\.ru.

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

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

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

Букеты цветов megaflowers.ru

Пользователям были даны задания: подобрать букет из 33 красных роз и заказать его доставку курьером. Задание по подбору букета выполнили только 16 человек из 25. У данного задания было два возможных решения: создание индивидуального букета на карточке товара по клику на ссылке «Изменить состав» или создание букета в «Мастере букетов». Рассмотрим основные проблемы, с которыми столкнулись пользователи.

Проблемы поиска букета

Чтобы сэкономить время, почти все пользователи обращались к блоку «Быстрый выбор букета» на главной странице. Увы, он не работал.

Поиск букета на megaflowers.ru

50% респондентов пытались найти букет через поиск по сайту, введя запрос «красные розы» или «розы». Результаты на странице поисковой выдачи отображались «списком» и без указания на стоимость, что усложняло выбор. А при попытке найти «33 розы» результатов не было вообще.

Фрагмент результатов поиска: не указана стоимость букета (megaflowers.ru)

После выполнения задания пользователи отметили, что на подбор букета им потребовалось много времени (28% респондентов) и сделать это было сложно (36%).

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

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

Проблемы сервиса «Мастер букетов»

Одно из заданий было специально выделено под тестирование сервиса «Мастер букетов»: мы попросили респондентов составить букет из красных и белых роз. Компоновка элементов на странице сервиса не соответствует логике и последовательности действий пользователей. Скорее всего, покупатель cобирает букет в такой последовательности: тип цветов – цвет – количество – оформление. Но блок выбора цветов вообще не попадает в зону внимания пользователя. Когда он переходит на страницу сервиса, перед его глазами находится выбор формы букета и оформления, а также блок «Мои дополнения» неясного назначения.

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

«Мастер букетов» (megaflowers.ru)

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

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

Хорошо бы было так: 1. розы, 2. цвет, 3 кол-во, 4. упаковка (при необходимости).

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

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

Не нужно писать "с нуля". Это настраивает человека на "долго-долго будем собирать". Напишите просто "составить свой букет".

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

Отдельно отметим полезную «фишку» карточек букетов на сайте: они помогают клиенту составить максимально полное представление о внешнем виде подарка. Краткий видеоролик, а также фотографии букета отдельно и букета в руках счастливой девушки позволяют наглядно оценить его размер. А с обзором 360° покупатель рассмотрит все детали.

Фрагмент страницы-карточки букета (megaflowers.ru)

Проблемы заказа букетов

Страницы оформления заказа на сайте megaflowers.ru имеют те же проблемы и рекомендации, что и на сайте kk-wheel.ru (см. первый кейс), поэтому лишь кратко перечислим комментарии пользователей:

Слишком много этапов заказа, страница перегружена информацией.

Не нужно в заказ выводить все фото открыток, может она мне вообще не нужна.

Формы заполнения телефона неудобны, нет дефисов.

Детские лагеря incamp.ru

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

Проблемы поиска лагеря

При поиске мы не выявили особенных проблем, за исключением того, что на сайте нет возможности указать конкретные даты, на которые запланирован отдых. Например, пользователь желает приобрести путевку на новогодние каникулы, а в блоке подбора самый близкий к этому вариант – «Зима 15/16».

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

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

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

Я бы добавила в изначальные параметры поиска информацию о стоимости (задать стоимость от и до) и информации о выезде из Москвы я так и не нашла.

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

Блок подбора путевки (incamp.ru)

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

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

Проблемы страницы-карточки лагеря

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

Комментарии респондентов явно указывают направления для развития:

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

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

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

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

С бронированием путевки особенных проблем не возникло. В целом пользователи позитивно оценили сайт incamp.ru.

Комментарии:

Удобно и достаточно просто ориентироваться.

Легкое бронирование путевки.

Без рекламы и лишних вопросов.

Собрана информация по детскому отдыху, ориентировано на потребителя.

Клиника стоматологии gorstom.ru

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

• узнать стоимость услуг (48%);
• узнать адрес (40%);
• записаться онлайн (40%).

Проблемы поиска цены

По «горячему» следу респондентам было дано задание – узнать стоимость лечения кариеса. С заданием справились лишь 4 человека (!) из 25.

Задача по поиску стоимости лечения зубов на gorstom.ru

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

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

Услуги – это просто описание и не возможно нажать и перейти. НЕТ ССЫЛОК.

Раздел «Услуги» (gorstom.ru): пользователь ожидал, что заголовки реализованы как контекстные ссылки на страницы с подробным описанием услуги.

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

Нижняя область страницы «Терапия» (gorstom.ru)

Поиск стоимости лечения зубов на gorstom.ru.

После задания пользователи отметили, что на поиски цены им потребовалось много времени (84% респондентов) и решить задачу было очень сложно (60%).

Комментарии:

Цены не нашла. Записаться легко, найти филиалы, описание услуг...все, что угодно, но не цены...

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

Я не смог найти расценки на лечение на сайте, даже воспользовавшись картой сайта и поиском.

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

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

Проблемы поиска данных о графике работы

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

Меню навигации gorstom.ru

16% пользователей перепутали графики работы детского и взрослого отделений и рисковали прийти после закрытия клиники. Как видно на скриншоте, взрослое отделение закрывается раньше (на 6 часов!). Но при беглом просмотре пользователи не заметили, что отделение детское, а выхватили взглядом первую подходящую информацию.

Нижняя область страницы «Терапия» (gorstom.ru)

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

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

Проблемы записи на прием

На этапе оформления запроса у пользователей не возникло заметных проблем. Затруднения были связаны только с вводом «капчи». Это можно понять, вот несколько примеров:

Капча gorstom.ru

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

Я не уверена в контрольных цифрах - очень плохо были видны и это очень всегда нервирует.

Рекомендация от пользователя:

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

Интересной и неожиданной «фишкой» gorstom.ru для нас стало наличие детской версии сайта. Мы знаем, что дети боятся и не хотят идти к врачу. А яркий и привлекательный дизайн сайта, онлайн-игры про кариозных монстров (!) помогут снизить опасения малыша.

Детская версия сайта det\.gorstom\.ru.

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

Удачи Вам!

Отдельное спасибо Максиму Козлову и Ксении Воейковой из «Фабрики юзабилити» за помощь в организации теста.