Полное пошаговое руководство по тестированию функциональности веб-сайта

16,2% высокотехнологичных компаний переключают свое внимание на взаимодействие с клиентами. 15,5% планируют увеличить инвестиции в улучшение клиентского опыта. О чем это говорит? Это говорит о том, что пользовательский опыт выходит из сферы компетенции дизайнеров и становится основным для любого бизнеса с онлайн-присутствием, независимо от того, является ли он совершенно новым или существует уже много лет. Возможно, именно поэтому так много известных компаний прибегают к тестированию юзабилити для выявления проблем и улучшения своих продуктов и сайтов.

  • Компания Sales Hacker использовала обратную связь с пользователями, чтобы повысить вовлеченность, повысить лояльность и улучшить свои контент-стратегии с помощью информации, предоставленной пользователями.
  • Онлайн-оператор спортивных азартных игр Stan James (сейчас Unibet) использовал результаты тестирования юзабилити, чтобы удвоить коэффициент конверсии с 1,5% до 3% месяц к месяцу.
  • Список успешных примеров можно продолжать и продолжать. Не стесняйтесь ознакомиться с другими примерами.

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

Шаг 1: Определите метрики и создайте анализ задач

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

Существует три показателя, которые обычно учитываются при тестировании юзабилити:

  • Эффективность
  • Эффективность
  • Удовлетворенность

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

Measuring usability

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

  • Каковы цели пользователя?
  • Какие шаги необходимо предпринять для достижения этих целей?
  • Как измеряются усилия?

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

Task analysis

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

Example of hierarchical task analysis

Затем вы разбиваете цель на шаги, необходимые для ее выполнения. Эти шаги также называются подзадачами. Ни один шаг не является слишком маленьким. После этого у вас будет теоретическая картина пути, который проходит пользователь для достижения цели. Затем вы можете использовать анализ задач для определения базовых показателей эффективности и результативности. Давайте попробуем создать свою собственную. Для начала зайдите на сайт Lucidchart. Зарегистрируйте аккаунт, нажав на кнопку «Зарегистрироваться бесплатно» в правом верхнем углу или в середине экрана. Вы попадете на эту страницу и получите возможность начать пробную версию. Пока что прокрутите страницу вниз, пока не увидите синюю кнопку «Start free account», и выберите ее.

Lucidchart sign up

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

Lucidchart flowchart

Выберите первый вариант, «Blank Diagram».

Lucidchart blank diagram

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

Lucidchart process

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

Yes or no in flowchart

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

Flowchart fonts and colors

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

Flowchart download as vector

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

Task analysis flowchart

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

Шаг 2: Определите лучший тип тестирования

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

Сортировка карточек
Безусловно, самый простой и быстрый тест на юзабилити, карточный тест — это инструментальный тест на архитектуру сайта.

Card sort

Если вы помните, как играли в карточные игры, то карточные сортировки похожи на них. Вот как это работает. Карточная сортировка может быть «открытой», в которой пользователи создают свои категории для сортировки карточек, «закрытой», в которой все категории предопределены и негибки. В качестве альтернативы, как показано на иллюстрации выше, сортировка карточек может быть «гибридной», когда пользователи могут свободно добавлять свои собственные категории, но при этом могут использовать и предопределенные категории. Пользователи упорядочивают оставшиеся карточки, обычно отдельные веб-страницы или этапы процесса, по категориям, которые лучше всего соответствуют их ментальной модели. Большинство экспертов рекомендуют придерживаться от 30 до 60 карточек. Проведение сортировки карточек позволяет увидеть, насколько ментальные модели пользователей соответствуют архитектуре сайта и процессу выполнения задач. Она может выявить любые существенные проблемы на ранних стадиях процесса тестирования, как это было в случае с редизайном Pottery Barn (см. ниже).

Card sort example in redesign

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

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

Contextual Inquiry

Не волнуйтесь, неловкость от взгляда через чье-то плечо быстро проходит. Полевые исследования требуют гораздо больше времени, чем карточные, но они идеально подходят для тестирования задач и получения прямой обратной связи от пользователей. Для тех, кто хочет глубже изучить вопросы юзабилити, полевые исследования — это то, что нужно. Контекстные опросы — это первая стратегия, применяемая студией дизайна пользовательского опыта MELEWI для корпоративных продуктов или продуктов для «ограниченного круга пользователей». Авик Гангули, консультант по UX-дизайну в MELEWI, объясняет: MELEWI Contextual Enquiry Sprint разработан для того, чтобы встраиваться непосредственно в контекст пользователя: наблюдать за тем, что делали участники, что они почти делали и чего не делали. Ниже вы можете увидеть, как MELEWI классифицирует и объясняет преимущества внедрения в контекстную сторону исследования юзабилити.

Contextual side

Обратите внимание, что полевые исследования можно проводить удаленно, но при этом часто теряется богатство данных. Николь Фентон и Джейми Альбрехт из 18F, агентства цифровых услуг при правительстве США, подчеркивают этот момент: …Например, контекстное исследование наиболее ценно, когда вы можете наблюдать за людьми в их типичной физической среде. Не упускайте возможность пообщаться лицом к лицу с вашими пользователями и коллегами-исследователями.

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

Heatmap analysis

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

Eye tracking

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

Pros and cons of webcam-based eye tracking

Этот вид юзабилити-теста не так полезен, как полевое исследование удовлетворенности пользователей, но может дать богатые данные об эффективности и результативности. Он также может помочь выявить проблемы с навигацией, выделив места, где глаза пользователей проскакивают или не замечают, по сути, рассматривая ваш сайт через призму глаз пользователей. На основе полученных данных вы можете улучшить дизайн, структуру сайта, навигацию, призывы к действию и т.д. Сортировка карт, полевые исследования и слежение за глазами — не единственные тесты юзабилити в игре. Фокус-группы, A/B-тесты и опросы — все это жизнеспособные формы пользовательского тестирования, которые могут стать наградой за обратную связь, но не должны рассматриваться для любых серьезных редизайнов. Теперь, после определения лучших типов тестов для ваших целей, вам нужно найти людей для тестирования. Вас может удивить, как много их нужно.

Шаг 3: Найти достойных участников

Сколько пользователей вам нужно для проведения юзабилити-теста? Отраслевой стандарт — около пяти. Согласно исследованию UserTesting, 33% компаний набирают пять или меньше пользователей, а 41% — от шести до десяти.

Users per usability study

Ключевым моментом при поиске пользователей для тестирования юзабилити является обеспечение их достоверного приближения к реальным пользователям. Отсутствие проверки изменений в дизайне на уникальной пользовательской базе может привести к серьезным последствиям. Именно это обнаружили дизайнеры Icons8 после того, как развернули редизайн и потеряли почти половину своих пользователей. Именно поэтому мы в Kinsta сделали отзывы пользователей непосредственной частью нашего процесса редизайна. Тем не менее, бывают случаи, когда поиск репрезентативных пользователей отнимает слишком много времени или стоит дорого для целей тестирования. В таких случаях могут быть полезны внутренние тестеры. Этот метод тестирования, называемый «dogfooding» (в смысле, поедание собственного собачьего корма), позволил газете The Boston Globe получить ценные качественные отзывы о новых навигационных функциях. Посмотрите:

Qualitative feedback

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

Web survey response rates

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

UserTesting

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

UserTesting

Userlytics

Userlytics, используемая Google, является еще одной надежной платформой со средними ценами и непревзойденным качеством. Предоставляя записанные видео, панель тестирования Userlytics насчитывает более 200 000 пользователей, что позволяет легко найти идеальные пользовательские прокси. Что отличает Userlytics от конкурентов, так это широкие возможности настройки. Благодаря уникальной логике ветвления, тесты Userlytics могут быть структурированы таким образом, чтобы выполнять несколько различных потоков задач.

Userlytics

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

Шаг 4: Решите, когда, где и с кем

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

  • Удаленно или лично?
  • Модерируемое или немодерируемое?

Посмотрите, как это распределяется в отрасли:

Usability testing

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

Usability specialist

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

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

Skype

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

Google Hangouts

Zoom
Завершает наш список платформ для удаленного юзабилити-тестирования платформа Zoom. Эта платформа имеет значительное преимущество перед Skype или Hangouts: она предоставляет встроенную функцию записи экрана и видео. Фактически, мы используем Zoom здесь, в Kinsta. Однако у нее есть и существенный недостаток. Если в вашей видеовстрече участвует более одного пользователя, то для бесплатных аккаунтов существует ограничение по времени — 40 минут.

Zoom

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

Шаг 5: Промыть и повторить

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

Iterative and Cyclical

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

Journey map

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

Заключение

Тестирование юзабилити является обязательным для любого бизнеса, имеющего представительство в Интернете, но это широкая область. Три общепринятых показателя для тестирования юзабилити — это удовлетворенность, эффективность и результативность. Какие из этих показателей наиболее важны для вас, определит лучший тип юзабилити-теста для вашего сайта. После того как вы определите тип теста, который лучше всего подходит для ваших нужд, настанет время найти подходящих участников. По возможности избегайте внутреннего тестирования, а если ваши собственные клиенты не являются приемлемым решением, ищите близких прокси. Затем выберите между модерируемым и немодерируемым, а также между удаленным и очным тестированием. Каждый из этих вариантов имеет свои преимущества и ограничения, поэтому тщательно продумайте свои варианты. По завершении юзабилити-тестирования вернитесь к результатам и проанализируйте их, чтобы понять, какие изменения необходимы вашему сайту. Затем внесите эти изменения и повторите все заново: итерации — это разница между юзабилити «meh» и «face-melting» юзабилити-звездой. В следующий раз, когда вы задумаетесь о редизайне или захотите улучшить опыт ваших пользователей, обратитесь к этому руководству, чтобы получить окончательное пошаговое руководство по тестированию юзабилити сайта.

Вашу рекламу скликивают конкуренты? Подключите защиту и экономьте бюджет!
This is default text for notification bar

Защита от 🐞скликивания рекламы

Даете рекламу в Яндексе, а конкуренты вас скликивают? Мы сделали систему защиты от скликивания рекламы.