Карта кликов, SEO alerts, PopUP формы для вашего сайта
Пробуй бесплатно

Что такое тестирование юзабилити сайта и как его проводить?  

20 Март, 2019
×

Что такое тестирование юзабилити сайта и как его проводить?2

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

Объясняем суть юзабилити-тестирования сайтов на примере юзабилити городов

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

Повседневный Линьфэнь.

Повседневный Линьфэнь.

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

Одна из городских площадей Линьфэнья до 1978 года.

Одна из городских площадей Линьфэнья до 1978 года.

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

Бой на территории Вены в апреле 1945 года.

Бой на территории Вены в апреле 1945 года.

Поскольку правительство Австрии на первое место ставило интересы населения, в 2018 году Вена девятый раз подряд стала самым комфортным городом мира по версии исследовательского агентства «Mercer». С коллегами из «Mercer» согласны аналитики журнала «Economist», которые в 2018 году присвоили Вене статус самого привлекательного города в мире. Ниже показана современная архитектуру города.

Дневной вид на Вену.

Дневной вид на Вену.

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

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

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

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

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

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

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

Разница между UI и UX на примере бутылки с кетчупом.

Разница между UI и UX на примере бутылки с кетчупом.

Теперь рассмотрим пример с пешеходными дорожками. Архитектор спроектировал парк, проложил пешеходные дорожки для прогулок и окружил их зеленым газоном с деревьями. Это UI-дизайн — архитектор сделал так, как по его мнению будет удобно другим. Когда проект был реализован, на одном участке прохожие практически не пользовались пешеходной дорожки и для перемещений использовали газон. Это UX-тестирование — в реальных условиях проект оказался не слишком удобным и пешеходам понадобилась дополнительная дорожка.

Разница между UI и UX на примере пешеходных дорожек.

Разница между UI и UX на примере пешеходных дорожек.

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

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

Варианты исследования пользовательского поведения Компоненты комплексного аудита веб-сайта
Интервью Технический аудит
Онлайн опросы Аудит контента сайта
Анкетирование Проверка семантического ядра
Дерево испытаний Аудит целевой страницы
Карточки Проверка работы аналитических служб
А/Б тесты Ссылочный аудит
Создание персон Анализ конкурентов
Тест кликов Проверка качества внутренней оптимизации
Навигационный тест Маркетинговый аудит
Текст 5 секунд Аудит возможностей развития
Тестирование юзабилити Юзабилити аудит

Пользовательская проверка или юзабилити — это связующее звено между UI-дизайном и аудитом веб-сайта. В UI-дизайне тестирование юзабилити помогает оценить удобство и практичность созданного сайта (вспоминаем кетчуп и дорожку). Пользовательский аудит помогает понять, какие у сайта технические проблемы и как их устранить, чтобы реализовать концепцию UI-дизайна. Из-за такой взаимосвязи тестирование юзабилити (UX-тест) и юзабилити аудит целесообразно объединить и считать частью одной комплексной проверки. Если же разграничить понятия, то достигнуть нужного результата не получится: никому не нужен нерабочий сайт или рабочий сайт с примитивным и непривлекательным дизайном.

На практике взаимосвязь между UI-дизайном, UX-тестом и юзабилити аудитом проявляется по следующей схеме:

  1. Сначала разработчики исследуют нишу, анализируют конкурентов, собирают материал и создают сайт по своему усмотрению. Это работает UI-дизайн.
  2. Далее сайт проверяется пользователями и на основе этой проверки улучшается исходный дизайн. Это работает UX-тест.
  3. На завершающей стадии спроектированный и протестированный сайт проверяется техническими специалистами. Эти специалисты делают так, чтобы все части UI-дизайна работали без ошибок. Это юзабилити-аудит.

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

Почему юзабилити-тестирование важно

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

1 $ вложенный в вопросы UX-тестирования возвращает обратно 100 $.

1 $ вложенный в вопросы UX-тестирования возвращает обратно 100 $.

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

К чему приводит отсутствие юзабилити-тестов.

К чему приводит отсутствие юзабилити-тестов.

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

Если же вместо аудита пользовательского интерфейса вы решите заказать дополнительную рекламу и проигнорируете мнение посетителей, то произойдет следующее:

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

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

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

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

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

Юзабилити-тест — это возможность возобновить неудачные стартапы.

Юзабилити-тест — это возможность возобновить неудачные стартапы.

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

Убытки интернет-магазинов из-за отсутствия юзабилити-тестов.

Убытки интернет-магазинов из-за отсутствия юзабилити-тестов.

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

Как проверить юзабилити сайта: разбираем готовый кейс

Из этого раздела вы узнаете, что такое юзабилити-тестирование на примере. Мы проанализируем интернет-магазина wesco-shop.us и дадим рекомендации по его улучшению. Если планируете запускать Google Ads, заниматься SEO-продвижением или менять дизайн, то аналогичный анализ понадобится и вам. В одном из следующих разделов мы поговорим о том, как проверить юзабилити самостоятельно. Если вам некогда ждать — воспользуйтесь услугами специалистов.

Рекомендация №1 — Следите за правильностью категоризации товаров

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

Каталог продукции до проведения юзабилити-аудита.

Каталог продукции до проведения юзабилити-аудита.

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

Каталог продукции после проведения аудита: все товары перекрашены в красный цвет.

Каталог продукции после проведения аудита: все товары перекрашены в красный цвет.

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

Рекомендация №2 — Некорректная работа скролла

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

Проблема с прокруткой.

Проблема с прокруткой.

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

Совет по редактированию кода.

Совет по редактированию кода.

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

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

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

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

Рекомендация №3 — Ошибка в верстке футера

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

Ошибка в подвале сайта.

Ошибка в подвале сайта.

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

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

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

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

Рекомендация №4 — Придерживайтесь дизайна и выравнивание элементов

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

Расположение рубрик до проведения юзабилити-аудита.

Расположение рубрик до проведения юзабилити-аудита.

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

Расположение рубрик после проведения юзабилити-аудита: ошибка центрирования исправлена и блоки стоят ровно.

Расположение рубрик после проведения юзабилити-аудита: ошибка центрирования исправлена и блоки стоят ровно.

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

Рекомендация №5 — Придерживайтесь органических размеров элементов

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

Расположение поля для комментариев до проведения юзабилити-аудита.

Расположение поля для комментариев до проведения юзабилити-аудита.

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

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

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

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

Рекомендация №6 — Некорректная верстка изображения

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

Размер изображений до проведения юзабилити-аудита.

Размер изображений до проведения юзабилити-аудита.

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

Рекомендация №7 — Исправьте изображение с 404 ошибкой

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

Битое изображение, обнаруженное в процессе проведения юзабилити-аудита.

Битое изображение, обнаруженное в процессе проведения юзабилити-аудита.

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

После исправления ошибок размер изображений поправлен и все блоки выглядят одинаковыми. Вместо поврежденного изображения стоит блок-скидка SALE.

блок-скидка SALE.

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

Рекомендация №8 — Удалите лишние исходящие ссылки

В форме отзывов присутствует ссылка «Powered by YOTPO» (работает на YOTPO). YOTPO — это специальный сервис, упрощающий работу с отзывами на сайте. Если ссылку не удалить, то она будет уводить часть трафика с сайта. Нам такое не нужно.

Ненужная ссылка, выявленная в процессе юзабилити-аудита.

Ненужная ссылка, выявленная в процессе юзабилити-аудита.

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

Владелец сайта ссылку не удалил.

Владелец сайта ссылку не удалил.

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

Рекомендация №9 — Адаптируйте размеры элементов в мобильной версии

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

Ошибка в мобильной версии сайта.

Ошибка в мобильной версии сайта.

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

Ошибка с размером исправлена и в мобильной версии сайта все элементы коллекции одинакового размера.

Ошибка с размером исправлена и в мобильной версии сайта все элементы коллекции одинакового размера.

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

Смотрим сайт на планшете в горизонтальном положении. Все изображения отображаются корректно.

Все изображения отображаются корректно.

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

Смотрим сайт на планшете в вертикальном положении. Все изображения отображаются корректно.

Смотрим сайт на планшете в вертикальном положении. Все изображения отображаются корректно.

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

Рекомендация №10 — Адаптируйте мобильную версию

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

Проблема меню в мобильной версии сайта.

Проблема меню в мобильной версии сайта.

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

Проблема осталась нерешенной.

Проблема осталась нерешенной.

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

Рекомендация №11 — Оптимизируйте размер картинок

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

Проблемы с размером изображений в одном из разделов каталога.

Проблемы с размером изображений в одном из разделов каталога.

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

Обновленный вид страницы.

Обновленный вид страницы.

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

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

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

Если сайт не выполняет полезную функцию, то здесь придется разграничивать понятие целей, гипотез и задач. Цель определяет проблему, ради решения которой проводится тестирование пользовательского сайта. Гипотезы помогает найти вероятную причину проблемы, а задачи помогают сформировать план по устранению этой причины. Чтобы было понятней — рассмотрим такой пример: владелец сайта провел сео-оптимизацию, купил рекламу, вывел сайт в ТОП-3 и Гугла, на 50% увеличил трафик и потерял 50% продаж. В такой ситуации понадобится юзабилити-тестирование с четкой постановкой целей, гипотез и задач.

Какова цель юзабилити-тестирования Гипотезы Задачи
Определить причину снижения продаж на 50% и понять, почему грамотная стратегия продвижения сайта привела к отрицательному результату.

1. Техническая неполадки.

2. Неправильная сео-оптимизация.

3. Проблемы в настройках рекламы.

4.Некачественный контент.

5. Умышленные действия конкурентов.

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

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

3. Связаться с рекламодателям и проверить смысл опубликованных объявлений.

4. Пересмотреть блок и оценить качество опубликованных статей.

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

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

Неподтвержденные проблемы Очевидная проблема Гипотеза, нуждающаяся в дополнительной проверки
Умышленные действия конкурентов. Это гипотеза не подтвердилась потому, что инструменты тестирования юзабилити помогли быстро проанализировать популярные ресурсы на предмет негатива со стороны третьих лиц. Никакой активности не обнаружено. Некачественный контент. За контентное наполнение сайта отвечает три раздела: «Блог», «Карточки товаров» и «Новости».
В большинстве «Карточек товаров» нет описания, фото и видео. Есть только базовый перечень характеристик, которые сами по себе не рекламируют товар.
В разделе «Блог» мало публикаций. При этом каждая опубликованная статья написана с ошибками и не выполняет никакого полезного действия — не приносит пользу читателю.
В разделе «Новости» только корпоративная информация, которую не интересно изучать даже сотрудникам компании.
Техническая неполадки. На некоторых устройствах часть страниц медленно загружается и не отображается так, как это было в первоначальной верстке. Еще проблемы с видеороликами, которые не воспроизводятся на планшетах и смартфонах.
Проблемы в настройках рекламы. Рекламодатели дали обратную связь и подтвердили качество составленных объявлений.
Неправильная сео-оптимизация. Специалисты провели запросы, за счет которых статьи попадают в ТОП-3 Яндекса и Гугла. Все сделано правильно и продвижение проходит по нужным ключам.

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

  1. Коридорный метод тестирования — это когда небольшая группа пользователей поочередно проверяют возможности продукта или сайта, а модератор (организатор теста) фиксирует процесс через приложение для тестирования пользователей. Когда задание выполнено — действия пользователей анализируются и используются  для улучшения юзабилити.
  2. Удаленное тестирование пользователя — это когда модератор наедине беседует с респондентами (целевой аудиторией) и узнает информацию через скайп, телефон или другой способ связи. Далее беседы фиксируются и используется для переработки юзабилити.
  3. Дистанционное не моделируемое тестирование юзабилити — это когда пользователи не общаются с модератором и тестируются через специальную программы. В этой программе есть перечень заданий, который каждый из пользователей должен выполнить так, как он считает нужным. Например, можно попросить респондентов найти контактные данные владельца сайта. Когда задание составлено, модераторам остается зафиксировать возникающие проблемы и на их основе переработать сайт.
  4. Проведение А/Б тестов — это когда создается несколько версий продукта и пользователь может выбрать лучший вариант. Больше информации про А/Б тестирование читайте в статье про оптимизацию конверсии сайта.
  5. Экспертная оценка — это когда для анализа продукта привлекается квалифицированный специалист, способный без целевой аудитории обнажить все проблемные места. Например, если нужно проанализировать мебельный сайт, то для экспертной оценки подойдет опытный продавец мебели. Поскольку такой человек всю жизнь принимал заявки на мебель, то именно он может подсказать о тех нюансах, которые повысят показатели сайта.

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

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

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

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

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

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

Руководство по самостоятельному юзабилити-тестированию

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

Шаг№1. Перед тем, как сделать пользовательское тестирование, поработайте над исправлением типичных ошибок в дизайне юзабилити. Об этом у нас есть статья «ТОП-10 ошибок UX дизайна». Прочтите ее и внесите изменения на своем сайте.

Шаг №2. Пересмотрите предыдущий раздел и сформулируйте цель исследования. После этого подберите гипотезы и распишите под них задачи. Чтобы было проще работать — используйте бесплатные инструменты тестирования UX.

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

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

Шаг №5. Посмотрите статью «20+ сайтов с ужасным юзабилити». Общая ошибка этих сайтов заключается в большом количестве акцентов: на одной странице располагается слишком много изображений, текста, кнопок и прочих элементов, отвлекающих от полезного действия. А теперь посмотрите статью «TOP-60 примеров сайтов ресторанов с крутым дизайном». На этих сайтах все аккуратно и заточено под целевое действие. Вывод: уменьшайте количество акцентов и думайте о целевом действии. В идеале на одной странице пользователь должен выполнять одно целевое действие.

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

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

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

В 2018 году смартфоны победили ноутбуки по показателю трафика и теперь 52% пользователей предпочитают мобильный интернет. Из-за этого юзабилити-исследования проводятся с помощью двух типов инструментов: одни инструменты понадобиться для проверки сайта на десктопных устройствах, а вторые необходимы для тестирование мобильного UX.

Статистика использования девайсов для выхода в интернет по состоянию на январь 2018 года.

Статистика использования девайсов для выхода в интернет по состоянию на январь 2018 года.

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

Приложение Возможные тесты
Google Analytics Это многофункциональный счетчик от компании Google. С его помощью можно проанализировать посещаемость сайта, оценить поведение целевой аудитории и посмотреть источники перехода на сайт. Здесь же можно отследить те разделы и страницы, на которых пользователи проводят больше всего времени. Эти данные позволяют понять, с какой целью пользователи приходят на сайт, чем они интересуются, что им не нравится и при каких условиях можно рассчитывать на их повторное возвращение.
PageSpeed Insights Можно узнать скорость страниц загрузки сайта на десктопных и мобильных устройствах. Тест дополняется ссылками на проблемные страницы и рекомендациями по оптимизации.
Plerdy Можно проанализировать поведения посетителей сайта с помощью тепловой карты кликов. Также с помощью Plerdy удобно проводить редизайн, улучшать опубликованный контент, анализировать призывы к действию, увеличивать показатели конверсии и выполнять прочие полезные задания.
AskUsers Можно напрямую связаться с целевой аудиторией и задать вопросы по работе сайта.
User Testing Можно протестировать сайт или приложение в дистанционном режиме: составляете техническое задание → определяете что нужно протестировать → активируете опцию таргетинга → настраиваете нужную целевую аудиторию → передаете задание пользователям User Testing → получаете юзабилити-тест с видео или аудио комментариями.
Usability Tools Можно сделать видеозапись того, как пользователи ведут себя на сайте.
Usability Hub Можно провести тест пяти секунд, тест кликов, вопросов, навигации и предпочтений.
Optimal WorkShop Это комплексный инструмент, который определяет поведение пользователей по трем тестам: по тесту древа сайта (оценивается навигация), по методу сортировки карточек (оценивается пользовательское мышление на страницах сайта), по карте кликов (оценивается дизайн и привлекательность отдельных элементов сайта или отдельной страницы).
Fend-GUI Можно составить карту внимания и понять, в какой последовательности большинство пользователей изучают информацию на сайте или отдельной странице.

Приложения для мобильного юзабилити-теста

Приложения для UX-тестирования программного обеспечения Возможные тесты
Crashlytics Можно в режиме реального времени отслеживать пользовательские жалобы или системные ошибки, которые привели к сбою мобильного приложения.
Adjust Можно отслеживать востребованность программы в магазинах мобильных приложений, определять источники трафика, следить за различными конверсионными показателями, посчитать средний чек и анализировать действия пользователя на платформе.
AppsFlyer Можно оценивать эффективность запущенной рекламной кампании в интернете и по ТВ.
HockeyApp Можно проанализировать действия пользователя внутри приложения, своевременно устранить ошибки, собрать статистику и наладить обратную связь с посетителями платформы.
Sensor Tower Это специальное приложение, которое помогает продвигать новые приложения в Google Play и App Store.
Woopra Это приложение помогает интернет-магазинам настроить воронку продаж. С его помощью удобно собирать и систематизировать нужную информацию о зарегистрированных пользователях.
Amplitude Можно в режиме реального времени следить за тем, как аудитория взаимодействует с готовым продуктом.
AppLyzer Можно сформировать семантическое ядро и отобрать только релевантные запросы.
Clicktale Можно подготовить тепловую карту и отслеживать пользовательские клики.

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

Запомнить

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

  1. Тестирование юзабилити сайта — это комплексная процедура, которая оценивает сайт с позиции удобства и технической исправности.
  2. Чтобы провести полный обзор юзабилити сайта, нужно задействовать две дисциплины: UI-дизайн и аудит. UI-дизайн будет отвечать за визуальную часть и удобство, а за аудитом закрепляется проверка всей технических элементов.
  3. У UI-дизайн и аудит есть одно общее направлении — юзабилити-тестирование. Юзабилити-тест — это улучшения продукта посредством обратной связи с аторией: спрашиваете о проблеме → получите ответ → принимаетесь за исправление ситуации.
  4. Если не проводить юзабилити-тестирование, то любые действия по продвижению сайта будут неэффективными: 1 $ потраченный на проверку юзабилити — это 100 $ прибыли в будущем.
  5. Юзабилити-тестирование — это сложная многоэтапная процедура, проведением которой занимаются UX-агентства.
  6. Самостоятельно провести юзабилити-тест сложно. Для этого нужно правильно сформулировать цель, определить гипотезы, подготовить задачи и методы тестирования сайта. После нужно организовать сам тест, оценить результат, провести итоговый тест, снова оценить результат, перейти к исправлению ошибок и оценить изменения.
  7. С 2018 года большинство пользователей заходят в интернет через смартфоны, поэтому важно отдельно проводить юзабилити-тестирование для мобильных приложений.

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

Статьи из блога