Юзабилити - исследование. Юзабилити-тестирование: пошаговая инструкция на примере Yelp

Существует множество способов быстрой оценки юзабилити сайта. Вы можете попробовать эти: 5-Second Usability Tests , Click Tests , Open Ended Question Tests, Navigation Tests , Preference Tests , Survey Monkey , Hallway Tests (попробуйте лично или через презентацию в Skype, Google Hangouts)

Примечание автора: Отечественные сервисы для проведения юзабилити-тестирования: https://uxcrowd.ru , http://sitepolice.ru/ , https://www.userpoint.ru/ , Вебвизор

5 примеров сбора обратной связи

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

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

4. Задавайте открытые вопросы. Разговорите респондентов.

5. Используйте сегментацию. Сегментируйте своих пользователей в зависимости от их показателей LTV (пожизненная ценность клиента).

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

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

7. Избегайте влияния на мнение респондентов . Для физического тестирования сделайте все возможное, чтобы быть беспристрастным модератором.

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

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

Если вы используете эти советы, то влюбитесь в тестирование так же как и мы

Анализ результатов

Дизайн продукта, сайта или приложения — весьма длительный процесс, требующий терпения, проницательности и наличия ряда инструментов. Чтобы понять, что в действительности работает, а что нет, важно знать мнение пользователей. Здесь-то и приходит на помощь пользовательское тестирование (user testing).

Объединив усилия, UXPin, UserTesting и Optimal Workshop решили описать UX-процесс, которому они следовали для гипотетического Yelp:

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

Краткий обзор процесса UX-дизайна

1. Определение продукта

На начальном этапе специалисты определили ценностное предложение (value proposition), незаслуженное преимущество (unfair advantage) и общую бизнес-модель. Поскольку Yelp уже добился значительного успеха в привлечении посетителей, они решили, что было бы интересно понять, как можно повысить частоту использования (frequency of use). Далее был разработан общий план тестирования.

2. Тестирование и анализ

На этапе исследования команда рассмотрела в деталях план тестирования и перешла к немодерируемым сессиям. Была определена демография пользователей и детализированы конкретные задачи. В ходе работы использовались различные методы тестирования, начиная от анализа записей взаимодействий пользователей с сайтом, удаленной карточной сортировки (card sorting) и тестирования первого клика (first-click testing).

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

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

• Переработка текста. В целях извлечения максимальной пользы специалисты несколько раз корректировали инструкции, чтобы язык был как можно более лаконичным и побуждал к конкретным действиям. Это непременное условие для удаленных немодерируемых тестирований, поскольку письменные инструкции являются единственными директивами для участников.
• Проведение (pilot test). Как только инструкции были готовы, было проведено немодерируемое удаленное тестирование с одним пользователем из группы тестирования. Он также оставил отзыв касательно самих инструкций, чтобы команда могла исправить мелкие недочеты и обеспечить полную ясность.
• Обеспечение задач релевантными вопросами. По каждому заданию участник тестирования должен был ответить на вопрос «Была ли выполнена задача?», а также «Оцените уровень ее легкости/сложности». Ответ на первый вопрос давал понять, осуществима ли задача; в то время как второй — позволял углубиться в возможные улучшения дизайна.
• Избегание наводящих вопросов. При тестировании использовался такой, к примеру, вопрос, как «Насколько легко или трудно было вам выполнить эту задачу?» вместо «Насколько трудно было выполнить эту задачу?», что предотвращает вероятность необъективного ответа.

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

3. Дизайн и итерация

Глен Липка (Glen Lipka), вице-президент User Experience, считает, что последовательный (UI, user interface) лучше, чем совершенный пользовательский интерфейс. Последовательность порождает узнаваемость, которая в свою очередь способствует более частому обращению. Ниже приводятся несколько руководящих принципов:

• Дизайн для информации. Люди используют веб-сайты не для того, чтобы восхищаться красивыми дизайнами, но потому что им нужен контент. В описываемом случае, учитывая, что Yelp — это сайт для поиска на местном рынке услуг, редизайн нуждался в лучшей доставке нужной информации нужным людям, и тестирование информационной архитектуры при помощи карточной сортировки было неотъемлемой частью этого процесса.
• Следование принципу MAYA (Most Advanced Yet Acceptable) , «наиболее передовой и в то же время воспринимаемый». В то время как команда хотела обеспечить лучший опыт для изредка заходящих на сайт Yelp пользователей, они не хотели создать нечто настолько чужеродное, что могло бы оттолкнуть опытных пользователей или запутать новых.
• Изучение паттернов пользовательских интерфейсов. Были изучены существующие модели пользовательского интерфейса на других известных сайтах и найдено то, что можно было перенять у них.
• Сделать сайт приятным и удобным для использования (usable). Опыт для изредка заходящих на сайт Yelp пользователей должен был быть более понятным. В то же время, специалисты хотели сохранить приятный внешний вид сайта.

Конечная цель состояла в достижении локального максимума (local maximum). Проект был завершен как только затраты превысили выгоды дополнительной итерации. С учетом ограниченности по времени дизайн-спринта, разработчики не зацикливались на получении глобального максимума (global maximum).

Понимание вашего бизнеса перед проведением тестирования

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

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

Для первого шага специалисты выбрали , поскольку это легкая и вместе с тем всесторонняя визуализация бизнеса:

Не будем утомлять вас всей документацией, поэтому просто посмотрим на то, как вы можете сделать это в целях UX на примере Yelp:

• Самая главная проблема: Люди в определенном городе хотят получить [лучший / быстрый / самый дешевый / самый простой] [продукт / услугу].
• 3 самые основные функции: Отзывы пользователей, лента активности (activity stream), поиск по городу / категории.
• Уникальное ценностное предложение: Возможность вносить компании в список, добавлять отзывы и видеть компании, рекомендованные друзьями и другими пользователями.
• «Несправедливое преимущество» (то, что не может быть скопировано или куплено): Сетевые эффекты (network effects) наличия большой базы пользователей.

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

2. Определение объектов пользовательского тестирования

Учитывая уже имеющуюся у сайта огромную базу пользователей, было решено, что наиболее интересными областями исследования станут частота обращений и удержание пользователей. По мнению Нила Патела (Neil Patel), генерального директора QuickSprout, добавление или удаление функций может добавить ценности продукту. Исходя из этих соображений, мы определись с нужными вопросами:

• Какие функции используют люди при выборе ресторана? (например, фотографии, рейтинг и т.д.)
• Могут ли пользователи выбрать ресторан на основе нескольких конкретных критериев?
• Знают ли пользователи, как сохранять варианты?
• Могут ли они узнать, открыто ли конкретное место в данный момент?

3. Выбор методов тестирования

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

Планирование и сбор качественных данных (qualitative data)

Удаленное юзабилити-тестирование с использованием специального ПО (например, UserTesting) для записи экрана и голоса участника позволяет увидеть действия пользователя и услышать его мысли во время выполнения им определенной задачи.

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

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

Такие критерии отбора как возраст, пол, уровень дохода или уровень владения интернетом были не важны. Поскольку это исследование проводилось исключительно с целью качественного анализа, специлаисты не нуждались в (statistical significance) для подтверждения полученных данных. Они последовали лучшим отраслевым практикам и провели свое исследование с участием 5 пользователей. И, наконец, для простоты дизайн-спринта они тестировали сайт Yelp только на стационарном компьютере.

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

Задания общего характера включали в себя:

• Сфокусированное задание — найти компанию на основании конкретных параметров
• Открытое задание — найти компанию при наличии очень малого количества директив
• Очень конкретное задание — найти определенное место и узнать конкретную информацию о нем

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

Что касается менее распространенных заданий, они предусмотрели различные варианты для каждой группы пользователей. Так как поступило несколько жалоб от зарегистрированных пользователей Yelp касательно функций «Закладка» и «Списки», специалисты попросили зарегистрированных пользователей (группа 1) сохранить компанию для последующего к ней обращения. Для пользователей без учетных записей (группа 2) задачей было найти мероприятие. Важно было увидеть, воспользуются ли они функцией поиска или нет при выполнении этого задания и как они будут принимать решение о том, какое событие посетить.

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

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

Качественный анализ пользовательского исследования

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

1. Функция поиска была основной отправной точкой для любой задачи.

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

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

2. Вкладка «События» не была достаточно заметной.

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

Как ни странно, никто не воспользовался вкладкой «События». Один из участников теста обратился к панели поиска, а другой перешел в категорию «Искусство и Развлечения».

3. Функция закладок оказалось непонятной, а также никто не использовал списки.

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

Из трех участников:

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

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

4. Поиск конкретного места оказалось очень быстрым и легким заданием.

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

5. Пользователи руководствовались фотографиями для определения атмосферы ресторана.

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

6. Фильтры использовались участниками, но могут быть улучшены.

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

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

Когда участники искали ресторан по определенным параметрам, одним из требований было найти ресторан в пределах $ 20/чел. Двое из пяти пользователей были сбиты с толку, в какую категорию следует отнести ресторан с таким бюджетом: $, $$, или $$$ категорию. Один из них заявил, что не знает, что означают эти символы, а другой выбрал неверную категорию. Остальные трое пользователей верно выбрали $$ категорию.

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

Сбор количественных данных о поведении пользователя

Следующей целью стал более подробный анализ . Для этого специалисты провели тестирование первого клика и тестирование с закрытыми картами.

1. Сортировка закрытыми картами с помощью инструмента OptimalSort.

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

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

Применяемая в описываемом тесте сортировка картами имела три простые цели:

• Определить, как часто люди используют поисковые фильтры на сайте Yelp
• Определить, какие фильтры являются наиболее важными
• Определить, какие фильтры являются наименее важными

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

2. Тестирование первого клика с помощью инструмента Chalkmark

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

1. Пропишите четко задачи. Убедитесь, что участник думает о том, как решить проблему, а не просто о том, где кликнуть.
2. Определите лучшие пути для выполнения задачи. Начиная с домашней страницы, постройте все возможные пути для достижения каждой цели.
3. Отведите определенное время на выполнение задач.

Данное тестирование должно было:

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

Специалисты попросили пользователей выполнить определенные задачи, снабдив их скриншотами страниц Yelp. Затем они проанализировали результаты (heatmap) и скорость выполнения этих задач участниками.

Количественный анализ пользовательского исследования

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

1. Результаты тестирования фильтров поиска на сайте Yelp с помощью сортировки закрытыми картами

92,5% участников сказали, что регулярно используют фильтры поиска на этом сайте.

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

Более 88% участников решили, что 7 фильтров вовсе не важны.

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

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

Результаты тестирования первого клика на домашней странице Yelp

2. 30% участников посчитали сайт «перенасыщенным» или «сбивающим с толку».

Тепловая карта продемонстрировала значительные различия того, где именно кликали пользователи. Участников попросили найти ресторан с умеренными ценами, который мог бы вместить компанию до 20 человек. Выполнение задания заняло в среднем 15 секунд — что в условиях интернета много. На изображении ниже вы видите, что 55% кликнули по пункту меню «Рестораны» в верхнем правом углу. Остальные 45% кликнули в совершенно разных местах. Наличие потенциальных ответов в нескольких местах на странице увеличивает когнитивную нагрузку пользователей и вероятность неверного первого клика:

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

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

В результате 37% людей проигнорировали обе эти вкладки и перешли сразу же к строке поиска. 37% людей кликнули по нужной вкладке «События». 18% нажали на вкладку, находящуюся в главной панели навигации.

На основе полученных количественных данных были определены следующие задачи для редизайна:

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

Дизайн, ориентированный на пользователя, и Итерация

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

Якоб Нильсен (Jakob Nielsen), соучредитель Nielsen Norman Group, классифицирует большинство процессов проектирования, включающих юзабилити-тестирование, по двум категориям: итерационное проектирование (iterative design) и параллельное проектирование (parallel design).

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

1 схематично изображенный каркас, несколько итераций → бумажный / интерактивный каркас, несколько итераций → визуальные дизайны, несколько итераций

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

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

3 разных одновременно сделанных дизайна → Пользовательское тестирование (соединяются лучшие идеи дизайна) → 1 дизайн → Итерационый процесс проектирования

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

Описанный процесс редизайна Yelp был по существу параллельным процессом совместно с UX-тестированием, проведенного в самом начале. Так как это был лишь гипотетический редизайн, разработчики остановились после шага «1 дизайн». Если бы это был настоящий редизайн, следующим шагом стало бы проведение дальнейшего тестирования для улучшения прототипа.

Составление эскиза

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

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

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

• Повышение видимости панели поиска
• Сделать вкладку «События» более заметной
• Оптимизировать категории

Кроме того, был добавлен футер и «Отзыв дня» перемещен с правой части страницы в низ.

2. Страница результатов поиска Yelp

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

В этом эскизе были учтены следующие моменты:

• Фотографии должны быть более заметными
• Обозначить категории цен

Создание каркаса

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

Учитывая сложность текущей домашней страницы Yelp, специалистам потребовалось 4 итерации. В добавок к устранению проблем юзабилити, они также хотели сохранить
SEO-аспекты (например, список других городов). Ниже мы сосредоточимся на последней итерации.

• Улучшение панели поиска

Текущий дизайн:

Панель поиска находится в верхней части страницы.

Измененный каркас:

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

• Оптимизировать перечень категорий

Текущий дизайн:

Измененный каркас:

Новая конструкция является более визуальной и представляет только 8 категорий одновременно. Чтобы увидеть больше, пользователям надо просто нажать на кнопку «Другие компании», которая была перемещена ближе к верхней ⅓ страницы для более сильного визуального акцента.

• Облегчить нахождение вкладки «События»

Текущий дизайн:

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

Измененный каркас:

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

• Уменьшение общего хаоса

Текущий дизайн:

Измененный каркас:

Любые вторичные элементы, такие как «Популярные события» или «Списки» (которые по результатам юзабилити-тестирования ни разу не были даже использованы) были перенесены в футер.

2. Страницы результатов поиска Yelp

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

Текущий дизайн:

Фильтры и сортировка Yelp испытывают недостаток иерархии.

Измененный каркас:

Новый каркас выделяет наиболее важные фильтры и перестраивает всю область на квадраты. Каждая категория фильтра включает в себя только четыре варианта, что дает визуальную упорядоченность.Так как 90% пользователей посчитали фильтр «Открыто сейчас» важным, разработчики выделили его как отдельный элемент. Цены прояснены диапазонами доллара, а 7 неважных фильтров скрыты.

• Улучшение макета результатов поиска

Текущий дизайн:

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

Измененный каркас:

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

Прототипирование: низкая и высокая точность

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

1. Прототипирование с низкой точностью

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

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

2. Прототипирование с высокой точностью

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

Специалисты добавили точности, задействовав свою библиотеку элементов пользовательского интерфейса. Что нельзя было сделать в браузере, было создано в Photoshop или Sketch, а затем импортировано непосредственно в UXPin с помощью функции drag & drop. Слои были сохранены, так что надо было только нажимать на элементы и добавлять взаимодействия.

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

Заключение

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

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

К слову, дизайн сайта Yelp, описанный в данной статье, все же претерпел некоторые изменения и теперь выглядит так:

Не исключено, что его разработчики использовали перечисленные выше принципы, чтобы добиться результата, отчасти напоминающего тот, к которому пришли специалисты из UXPin, UserTesting и Optimal Workshop

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

Каких результатов можно добиться при помощи юзабилити-тестирования сайта?

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

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

Разновидности тестирования юзабилити

В зависимости от поставленных целей различают следующие виды исследований:

Качественное тестирование.

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

Количественное тестирование.

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

Сравнительное тестирование.

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

Кросс-культурное тестирование.

Цель - адаптировать зарубежный продукт для российского покупателя или наоборот.

Пользовательское тестирование

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

Айтрекинг-тестирование

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

Тестирование методом персонажей

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

Экспертный анализ

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

A/B-тестирование

Цель - предложить пользователям несколько вариантов дизайна и сравнить реакцию. Выделяются последовательные и параллельные A/B-тесты. При последовательном тестировании usability правки сразу вносятся на сайт и замеряются периоды до и после изменений. При параллельном делается несколько версий, которые сравниваются с основной.

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

• оценку удобства использования;
• сравнение с сайтами-конкурентами.

Подготовка к юзабилити-тестированию и получение отчета

Подготовка состоит из 4 основных этапов:

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

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

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

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

Как подобрать респондентов для тестирования юзабилити?

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

Для проведения процедуры хватит 3–5 человек. Респонденты должны последовательно пройти путь персонажа по сайту по заранее подготовленному сценарию. Он составляется на основе типичных задач, которые решают посетители ресурса. По мере прохождения пути респонденты оставляют комментарии с впечатлениями. Ведется видео- и аудиозапись действий. Это дает возможность оценить, насколько успешно пользователи справились с заданиями, и сколько потребовалось времени на это.

Как создать сценарий для респондентов?

Чтобы создать сценарий пользователя, важно понять 3 вещи:

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

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

С какими проблемами уже сталкивались пользователи. Возможно, об этом писали в службу поддержки.

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

Вот в качестве примера два варианта задания:

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

Забронируйте номер в отеле Италии.

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

Примеры наших кейсов по юзабилити-тестированию

Проведение юзабилити-тестирования сайта

Процедура состоит из двух этапов.

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

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

Анализ результатов тестирования юзабилити

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

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

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

Примерное описание удобного ресурса

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

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

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

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

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

Ресурс понятен и для новичков, и для опытных пользователей.

Сообщение об ошибке пишется понятным языком, и посетитель понимает, как решить проблему, если она возникла.

Информацию на сайте легко найти, и она соответствует запросам аудитории.