Сценарии проверки сайта

Зачем нужно тестирование?

Тестирование — это отдельный этап в процессе разработки сайтов, который может быть полезен на любом этапе разработки. Тестирование даёт ответ на вопрос «‎А как работает сайт?»‎, помогает выявить ошибки на сайте, показывает возможности для улучшения сайта.

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

➀ О чем эта статья

В статье «Как протестировать сайт. Подробное руководство»‎ хотелось бы поделиться информацией для тех, кто собирается тестировать сайты. В статье содержится информация о том, как можно быстро протестировать любой сайт. Дается информация о том, как сделать так, чтобы протестировать сайт быстро, не упустив самого главного, а также о том, как максимально подробно протестировать сайт, чтобы ни о чём не забыть, ничего не упустить.
Конечно, осветить все моменты и нюансы в одной статье вряд ли возможно, поэтому в процессе будут даваться ссылки на другие страницы и источники, чтобы можно было ознакомиться с ними по мере необходимости. Статья построена таким образом, что Вы можете обратиться к нужному пункту и изучить именно ту информацию, которая волнует Вас в данный момент времени.

➁ Для кого эта статья

Кому может быть полезна статья «Как протестировать сайт. Подробное руководство»‎:
❄ Вебмастер / разработчик сайта только что сделал новый сайт или доработку и хочет получить информацию, как протестировать сайт, чтобы оперативно исправить ошибки и проблемы.
❄ Менеджер проекта столкнулся с проблемой, что пользователи быстро уходят с сайта, хочет узнать, как тестируют сайты, и что можно улучшить на сайте, чтобы повысить лояльность клиентов.

❄ Тестировщик, который хочет структурировать и систематизировать свои знания по веб-тестированию.

➂ Экспресс-тестирование сайта

Представьте, что Вам сейчас предстоит быстро протестировать сайт. Составим пункты, как провести экспресс-тестирование сайта:
➀ Изучить сайт, выписать структуру и всю необходимую информацию для тестирования.
➁ Составить план тестирования, выбрать только самые главные страницы и критично важную функциональность, без которой невозможно представить работу сайта, определить объём работ и достаточно маленький срок.
➂ Провести тестирование с использованием методик и техник тестирования.
Существует так называемый временной подход, который мы используем — это выделение определенного количества времени на экспресс-тестирование — это могут быть короткие сессии тестирования по 5, 10 минут, N минут… Главное — это успеть найти хотя бы несколько ошибок, своего рода приключение и вызов для тестировщика. А заказчику — полезная информация об ошибках, чтобы понимать, какие могут быть проблемы у пользователей при первом знакомстве с сайтом.

➂.➀ Плюсы экспресс-тестирования:

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

➂.➁ Минусы экспресс-тестирования:

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

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

➃ Подробное тестирование сайта

Зачастую экспресс-тестирование используют только для первичной оценки состояния сайта, для первого впечатления и знакомства с сайтом. Попробуем рассказать о том, как провести более полное тестирование.
Этапы тестирования будут практически теми же, за исключением того, насколько точно и правильно будут оценены объем работ по тестированию и сроки:
❄ Изучить сайт, выписать структуру и всю необходимую информацию для тестирования.
❄ Составить план тестирования, выбрать сначала самые главные страницы, затем менее важные, и в последнюю очередь ещё менее значимые, в каждой странице выделить функциональность и сценарии сначала критически важные, затем важные, затем менее важные. Определить необходимый, достаточный объём и оптимальный срок работ по тестированию.
❄ Провести тестирование с использованием методик и техник тестирования.
Каждый из этапов требует освещения, поэтому рассмотрим их более подробно ниже.

➃.➀ Изучение сайта

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

➃.➁ План тестирования

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

➃.➁.➀ Для чего нужен план тестирования (тест-план)?

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

➃.➁.➁ Тест-план может состоять из следующих разделов:

❄ Исходная информация. Что известно о сайте и собрано на этапе изучения сайта: информация о компании, заказчике, целевая аудитория, что заказчик ожидает от тестирования сайта.
❄ Страницы и функциональность. Список страниц с приоритезацией (самые важные, средней важности, менее важные). Функциональность (критически важная, важная, менее важная). В общем всё то, что именно будет тестироваться. Стоит также указать те страницы и функциональность, которые не будут входить в план тестирования и не будут тестироваться.
❄ Виды тестирования: функциональное тестирование, тестирование мобильной версии и другие виды тестирования.
❄ Окружения, на которых будет производиться тестирование.
❄ Анализ рисков. Обдумывание: что может пойти не так в процессе тестирования и мер по предотвращению этих рисков.

❄ Сроки проведения тестирования.

➃.➂ Виды тестирования

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

➃.➂.➀ Функциональное тестирование. Скачать пример отчета

➃.➂.➁ Тестирование вёрстки.

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

➃.➂.➂ Кроссбраузерное тестирование.

Примеры ошибок:
❄ В Internet Explorer 11 не отображается слайдер с картинками.
❄ В Mozila Firefox не видна кнопка для заказа товара.

➃.➂.➃ Тестирование удобства использования.

Примеры ошибок:
❄ Неудобно листать список товаров.
❄ Для регистрации на сайте требуется заполнить огромное количество полей.

➃.➂.➄ Автоматизированное тестирование.

Примеры работ:
❄ Написание Selenium-тестов для покрытия главной страницы.
❄ Создание коллекции с тестами для API в Postman.

➃.➂.➅ Тестирование безопасности.

Пример: сканирование сайта на уязвимости.

➃.➂.➆ Нагрузочное тестирование.

Пример: имитация большого количества посещений.

➃.➃ Инструменты тестировщика

Для проведения тестирования веб-приложений используются различные инструменты:
❄ Chrome DevTools: показывает ошибки в консоли и многое другое.
❄ Fiddler: помогает анализировать запросы.
❄ Pixel Perfect: помогает выявлять ошибки в вёрстке.
И многие другие..

➃.➄ С чего начать тестирование сайта

Сначала можно начать общее тестирование сайта, например, если у Вас уже есть общий чек-лист для проверки сайта, Вы можете пройтись по его пунктам. Если такого чек-листа нет, можно его придумать. К примеру, самой первой проверкой может быть — а открывается ли вообще сайт? Какой отдается код ответа? Дальше генерируем идеи и записываем, что было проверено.

➃.➅ Что тестировать на сайте

Опытный тестировщик обладает знаниями и опытом. В ответе на вопрос «‎Что тестировать?» могут хорошо помочь техники тест-анализа, которые помогают исследовать сайт таким образом, чтобы выделить необходимые для тестирования объекты сайта. Примеры техник тест-дизайна: тестирование переходов и состояний, структурирование элементов системы в интеллект-карту и другие.
В простом случае — попробуйте выделить объекты на Вашем сайте и выпишите их в каком-нибудь виде для дальнейшего анализа.
А лучше — пройти курсы по техникам тест-анализа / изучить материалы по этой теме, разобраться в этой теме и тогда на вопрос «‎Что тестировать?» Вы всегда будете знать ответ при тестировании любых сайтов.

➃.➆ Как тестировать сайт

Когда стало понятно, что именно тестировать — это может быть, например, форма обратной связи на сайте или меню сайта — самое время задать вопрос «‎А как же всё это тестировать?». Ответить на этот вопрос могут опыт, знания тестировщика. Т.е. чем больше тестировщик тестирует сайты, тем больше у него опыта. Ответить на этот вопрос может теория тестирования. Техники тест-дизайна помогают в генерации и придумывании тест-кейсов и различных сценариев. Примеры техник тест-дизайна: разбиение на классы эквивалентности, выделение граничных значений и многие другие.

➃.➆.➀ Как будем тестировать сайт?

У нас уже есть список страниц и модулей, которые нужно протестировать в первую очередь.
Берем первую самую важную страницу, выделяем главные модули на странице и проверяем их в первую очередь. Затем проверяем второстепенные модули и так далее.
Можно поступить по-другому. Начинаем смотреть на сайт сверху вниз и проверяем каждый элемент, каждый модуль на сайте, так тестирование получится более полным.
Каждый модуль и элемент на сайте нужно смотреть с разных сторон, настоящий тестировщик может увидеть то, что другие не заметят, за это больше всего и ценятся тестировщики. Поэтому старайтесь идти до конца, никогда не останавливаться, нужно всегда пытаться найти то, чего другие не увидят.
Так действуем до тех пор, как страница не проверена полностью.
А дальше проверяем все остальные страницы согласно плану.

➃.➆.➁ А что по техникам тест-дизайна?

По поводу техник тест-дизайна: в простом случае — попробуйте взять каждый из объектов на Вашем сайте и разобрать его по полочкам, проанализировать и представить, какие могут быть проблемы в данном конкретном объекте. Затем нужно проанализировать несколько объектов, попытаться провести между ними связи. После анализа нескольких объектов переходите к анализу других объектов. Затем анализируйте группы объектов и связи между ними.
А лучше — пройти курсы по техникам тест-дизайна / изучить материалы по этой теме, разобраться в этой теме и тогда на вопрос «‎Как тестировать?» Вы всегда будете знать ответ при тестировании любых сайтов.

➃.➆.➂ Кажется, уже всё протестировано..

Когда кажется, что всё уже протестировано, и больше идей нет, можете поискать готовые чек-листы для тестирования сайтов в разных источниках. Можете посмотреть примеры чек-листов ниже.
Для случая, когда кончились идеи, мы создали специальный сервис «‎Генератор идей для тестирования веб-сайта», можете ознакомиться с ним ниже.

Подытожим

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

➃.➇ Как искать ошибки на сайте

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

➄ Полезные материалы для тестирования сайта

В данном разделе приведены полезные материалы для тестирования веб-сайтов.

Идеи для тестирования сайта.

➄.➀ Идеи для тестирования сайта

Если Вы находитесь в поиске новых идей для тестирования веб-сайта, можете воспользоваться сервисом Идеи для тестирования сайта.

➄.➁ Чек-лист тестирования сайта

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

Примеры чек-листов.

Продолжение серии статей о ю-тестах от команды AIC

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

Определение границ исследования

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

Тестируемый продукт

То, что тестируем: от десктопной версии сайта до омниканального взаимодействия нескольких продуктов (сайта и приложения) или полного продуктового цикла (актуально в рамках CJM).

Объект теста

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

Цель

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

Задачи

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

Пишем сценарий

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

Инструкция

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

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

Интервью

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

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

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

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

Тестирование интерфейса

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

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

0 — респондент не справился с заданием

1 — респондент справился с заданием со значительными затруднениями

2 — респондент справился с заданием и перешел на следующий шаг

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

Дополнительные вопросы

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

Кто-то спрашивает такие вопросы во время выполнения задания, кто-то оставляет на финал исследования. Мы в AIC придерживаемся серединной позиции и задаем их после каждого шага задания. Таким образом, респондент не отвлекается от выполнения задания и не забывает подробности.

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

Общие вопросы

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

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

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

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

Итого

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

Автор: Дина Шаронова, UX-исследователь в AIC

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

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

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

Юзабилити-тест: что именно тестировать

Хочется улучшить сайт, но непонятно с чего браться? Пара идей что проверять тестом юзабилити, чтобы сдвинуться с места:

Этапы, где теряются конверсии

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

Рассмотрим реальный кейс теста юзабилити компании Imaginary Landscape. Из Google Analytics видно, что пользователи заходят на страницу с формой обратной связи, но заявку на звонок не отправляют. Видимо, что-то не так с самой заявкой.

Компания выдвинула гипотезы о причинах и сделала несколько вариантов формы. После юзабилити тестирования стало понятно, что дело в количестве строк: люди не хотят вводить так много данных. Форму поменяли, количество строк сократили c 11 до 4, после чего конверсия выросла на 140%.

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

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

Элементы, обманывающие ожидания

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

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

• повесить на элемент ссылку на что-то полезное, что логично было бы ожидать по клику;

• переработать оформление, чтобы элемент не выглядел активным;

• вовсе его убрать, если он не несет практической ценности.

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

• добавить надпись, которая бы давала понять, что ссылка здесь;

• сделать ссылку явной, вынести ее за рамки элемента;

• добавить элементу реакцию — увеличение или подсветку при наведении.

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

Что еще тестируют на сайте

Кроме прочего, анализируют:

• структуру сайта, чтобы сделать ее простой и понятной для пользователя;

• кнопки на кликабельность, особенно после того, как в моду вошел так называемый плоский дизайн — без теней и градиентов;

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

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

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

Сравнивать два или более варианта правильнее с помощью A/B-тестирования. Как это делается, мы разобрали в статье:
A/B тесты на пальцах

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

1. Инструменты Яндекс Метрики

В рунете популярностью пользуется бесплатные инструменты юзабилити-тестирования от Яндекс Метрики.

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

Чтобы установить «Вебвизор», авторизуйтесь на Яндекс Метрике и перейдите на вкладку «Добавить счетчик». В «Настройках» скопируйте код счетчика и вставьте на все страницы сайта.

Вот так выглядит отчет «Вебвизора». А просмотр действий пользователя начнется при нажатии на значок воспроизведения.

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

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

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

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

Почитать по теме:
Яндекс.Метрика от А до Я

Не так давно Яндекс.Взгляд объединили с Яндекс.Толокой, получился UX-тест. Он платный, исследование стоит 999 рублей, но мы решили его упомянуть.

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

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

2. Google Оптимизация

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

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

Есть несколько моделей тестирования:

• A/B-тест — создание нескольких вариантов страницы и выбор лучшего из них;

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

Есть бесплатная версия сервиса Google Optimize и платная Google Optimize 360.

Подробнейшая инструкция по сервису

3. Анализ сайта

Комплексная онлайн-проверка сайта по многим параметрам: отношение поисковиков, санкции, оптимизация, технические параметры, ссылки — в общей сложности у него 70+ тестов.

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

• распознавание фавикона;
• наличие 404 и ссылки у недоступной страницы;
• ускорение: настройка кэширования, оптимизация времени ответа сервера, сжатие, объем ресурсов, CSS.

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

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

4. Hotjar

Сервис, собравший в себя инструменты для юзабилити-тестирования: 

• тепловые карты с просмотром популярных областей кликов на странице;

Тепловая карта в сервисе

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

• анализ воронки продаж;
• внедрение триггерных опросов.

Инструменты обратной связи локализованы для сбора отзывов на более чем 40 языках, включая русский. Для работы понадобится добавить код сервиса на сайт. Можно сделать это вручную или через Google Tag Manager.

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

5. UsabilityHub

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

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

Сервис предлагает пять простых тестов:

• Five Second Test — тест пяти секунд
  Принцип таков: вы загружаете скриншот тестируемой страницы на сайт, участники теста смотрят на нее в течение 5 секунд, после чего дают свою оценку. Можно задавать разные вопросы, например, какой элемент больше всего привлек внимание, что запомнилось, о чем сайт и тому подобное. По завершении вы получите ответы участников теста в полном объеме + автоматически сгенерированное облако часто повторяющихся слов.

Question Test — тест вопросов

• Вы спрашиваете о своем сайте — реальные люди отвечают.
• Navigation Test — анализ навигации
  Позволяет понять, насколько удобно пользователям переходить внутри вашего сайта, понятна ли его архитектура и навигация.
• Preference Test — предпочтение
  Поможет провести А/В тестирование дизайна сайта, приложения, листовки. Загружаете два варианта дизайна — пользователи выбирают, какой им больше нравится. Все просто и оперативно.
• Click Test — тест кликов
  Действия те же, только вместо ответов получаем тепловую карту кликов. По ней мы увидим, что пользователи, к примеру, не жмут на стратегически важную (для нас) кнопку, зато активно кликают картинку. Дополнительно сервис предоставит отчет о количестве кликов и среднем времени щелчка.

6. Plerdy

Сервис для просмотров карт кликов. Интерфейс на русском языке, есть бесплатный тариф, который включает в себя 2000 просмотров страниц в день, 100 видеосессий и 10 аудитов.

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

7. Crazy Egg

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

8. Inspectlet

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

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

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

9. Фабрика Юзабилити

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

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

Подготовила Ольга Мороз, обновила Елена Жмурина

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

Что такое юзабилити-тестирование

Юзабилити-тестирование (usability testing) — это возможность посмотреть на интерфейс глазами пользователя и проверить удобство продукта. Тесты помогут определить:

• впечатление о продукте — что пользователь чувствует при первом использовании;
• прозрачность навигации — легко ли найти нужный раздел;
• доступность формулировок и качество контента — все ли понятно сформулировано и достаточно ли информации.

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

Виды и методы юзабилити-тестирования

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

По целям

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

По наличию модератора

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

По местонахождению участников

• Очное. Участник и модератор взаимодействуют напрямую и находятся в одном помещении.
• Удаленное. Человек тестирует продукт, находясь в удобном для себя месте, общение с модератором проходит по видеосвязи.

Также тестирование бывает качественным и количественным:

• Качественное. Участвуют 6–8 человек на каждый сегмент аудитории. Главная цель — выявить проблемы и выяснить причины, оценить потребности посетителей сайта, найти способы удовлетворения этих потребностей. 

Количественное. Участвуют от 50 человек. Главная цель — проверить, насколько часто люди сталкиваются с проблемами при использовании интерфейса и что потом может доработать UX-дизайнер. Здесь будет трудно получить ответы на вопросы «почему», «как именно», зато удастся узнать, насколько сами проблемы критичны, часто ли встречаются.

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

Основные методы юзабилити-тестирования — это:

• лабораторное тестирование. Респонденты получают сценарий и выполняют задания под наблюдением модератора;
• глубинное интервью. Людям, которые уже пользовались продуктом, задают вопросы, чтобы понять, какое впечатление у них осталось от приложения или сайта;
• фокус-группы. Группе из 3–10 респондентов предлагают обсудить будущий продукт;
• тепловая карта. Показывает, какие элементы на экране привлекают больше всего внимания;
• А/Б-тестирование. Помогает сравнить две версии приложения, сервиса или сайта, отличающиеся несколькими элементами. Аудиторию разбивают на сегменты, каждому показывают какую-то одну версию.

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

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

Допустим, мы планируем исследовать, насколько понятной получилась навигация в приложении, которое пока находится на стадии прототипа. Готовимся к тестированию и прописываем:

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

Для тестирования потребуется 8–12 респондентов. Это могут быть клиенты компании или представители целевой аудитории. Не стоит звать знакомых и друзей, потому что они могут быть не до конца честными, чтобы вас не обидеть. А вот людей из категории «знакомые знакомых» можно пригласить. Чтобы точно пришли представители вашей аудитории, обрисуйте знакомым и друзьям портрет ЦА, и они кого-нибудь посоветуют.

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

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

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

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

К примеру, начинающий UX/UI-дизайнер хочет проверить юзабилити сервиса по доставке еды. 

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

Сфокусированное задание

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

Но если предлагать только это задание, картина будет неполной по нескольким причинам:

• Точечная проверка интерфейса. Если в сервисе есть другие недочеты, респонденты их не найдут, так как у них нет такой задачи.
• Маленькая выборка инсайтов. Возможно, если человеку на самом деле надо заказать еду, он подошел бы к выбору по-другому: не стал бы ограничивать общую сумму и обращал внимание на другие параметры (качество, свежесть, производитель). Четкая задача при тестировании сужает круг поиска ошибок.
• Нет вовлечения. Респонденты могут выполнить задачу формально: найдут первые попавшиеся блюда, которые отвечают установленным критериям, и завершат работу. При этом в обычной жизни человек может заказывать совершенно другие продукты в таком же сервисе. Поэтому лучше максимально приближать задание к настоящей жизни исполнителя.

Задача с контекстом

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

Задача с учетом опыта пользователей

В этом случае важны:

• параметры участников. Например, уточняем, как человек на самом деле выбирает продукты в сервисе доставки. Что покупает и как определяет, что продукт подходит. Может быть, он ориентируется на цену, производителя или рекламу;
• сценарии участников. То, как человек заказывает еду в онлайн-сервисе в обычной жизни: смотрит промокоды, выбирает товары со скидками, переходит в конкретные категории каждый раз. Тогда нужно попросить его воспроизвести свой стандартный алгоритм.

Задания без заданий

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

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

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

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

1. Сделайте первое задание максимально простым. Это поможет участникам влиться в формат и привыкнуть к модератору.
2. Формулируйте задания без подсказок. Респондент сам должен понять, как его выполнить, иначе тестирование потеряет смысл. 
3. Не используйте термины, которые описывают интерфейс продукта. Они могут быть непонятны простым пользователям.
4. Позаботьтесь о тайминге. Если нужно выполнить много заданий, расставьте приоритеты. Не старайтесь в один тест вместить слишком много задач. Люди устанут, результаты не будут корректными.
5. Проверьте, соответствуют ли задачи гипотезам. Например, если нужно протестировать подписку на новости, не просите в задании делать это напрямую. Важно, заметит ли респондент эту возможность самостоятельно.

Метрики юзабилити

Стандартные характеристики юзабилити любого продукта: эффективность, продуктивность, удовлетворенность. 

Например, какие конкретно могут быть метрики:

Успешность выполнения задач. Оцениваем либо по принципу «справился или нет», либо по методу Нильсена:

• 100% — справился с задачей почти без проблем;
• 50% — были трудности, но человек решил задачу;
• 0% — человек не выполнил задание.

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

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

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

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

Наблюдение

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

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

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

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

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

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

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

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

Группируем наблюдения по значимым признакам. Фиксируем замечания на стикерах и размещаем их на специальной доске. Затем стикеры объединяем в группы по какому-либо признаку: например, ошибки на этапе добавления товаров в корзину, перехода к оплате, выбора конкретного способа оплаты и пр. — и смотрим, где больше всего стикеров. Это значит, что у множества людей возникли схожие проблемы.

Найденные проблемы или ошибки классифицируем:

• Критические. Допустим, не функционирует кнопка. Если ее не починить, пользовательский сценарий невозможно пройти, а значит, человек не может зарегистрироваться или совершить покупку.
• Серьезные. Например, выдача в поиске занимает слишком много времени. Пользователи могут сдаться, не пройти от начала и до конца задуманный сценарий. Кто-то выбирает закрыть приложение и искать в другом месте.
• Минорные. Предположим, человеку приходится несколько секунд ждать загрузку результатов. Это вызывает раздражение, но не мешает завершать пользовательский сценарий. Человек не уйдет, так как потратил уже какое-то время, но впечатление от сервиса испорчено.

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

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

Для исследования юзабилити интерфейса можно воспользоваться платными или бесплатными сервисами. 

Яндекс.Метрика

Она бесплатная и подходит для количественного анализа пользователей сайта. Метрика фиксирует действия пользователей: передвижения мышки, заполнение форм, клики, копирование текста и пр. Регистрирует все данные так, как если бы это была видеозапись посещения сайта. А дальше анализируем данные при помощи инструментов Яндекс.Метрики:

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

Optimal Workshop

Сервис предоставляет три инструмента:

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

Участников для тестирования нужно искать самостоятельно.

UsabilityHub

Предлагает три инструмента:

• Navflow — помогает выяснить, насколько человеку комфортно ориентироваться по странице.
• Fivesecondtest — выявляет элементы, которые наиболее привлекательны для посетителей сайта.
• ClickTest — формирует карту кликов, которая показывает те области веб-страницы, где люди больше всего выполняют какие-либо действия.

Анализируем приложение так:

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

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

Usabilla

Работаем в несколько этапов:

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

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

Feng-GUI

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

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

Итоги

1. Тестируйте прототип на этапе разработки. Тогда в готовом продукте не придется делать существенных правок, которые увеличат бюджет.
2. Выбирайте релевантную аудиторию. Тестировать продукт стоит на тех, кто действительно может им пользоваться, а не на случайных людях, родственниках или знакомых. 
3. Задавайте вопросы, которые предполагают развернутый ответ, и не давайте подсказок.
4. Фиксируйте замечания респондентов и обращайте внимания на эмоции. 
5. Проводите несколько тестов в ходе разработки, делайте промежуточные выводы и дорабатывайте элементы интерфейса.
6. Обязательно тестируйте готовый продукт и прислушивайтесь к обратной связи от пользователей.