Вы узнаете, что это за исследование, из каких этапов оно состоит и почему в нем должен быть заинтересован каждый владелец веб-сайта. Также поговорим о методах исследования юзабилити сайта, рассмотрим полезные сервисы и посмотрим готовый отчет о юзабилити сайта. Вся перечисленная информация поможет понять, что такое юзабилити-тестирование, когда его стоит проводить самостоятельно и когда для тестирования сайта нужно привлекать квалифицированных UX-специалистов.
Часто задаваемые вопросы маркетологов и дизайнеров UX:
- Как провести юзабилити-тестирование сайта?
- Что такое юзабилити-тестирование сайта? Как написать заголовок для юзабилити-тестирования сайта?
- Какие виды юзабилити-тестирования мне следует проводить на сайте?
- Как провести юзабилити-тестирование веб-сайта до его создания?
- Что проверять при тестировании юзабилити сайта?
- Сколько вы можете заработать на тестировании юзабилити веб-сайта?
Андрей Чорный, CEO Plerdy. Тема: Юзабилити сайта: поколение Z и что изменилось в восприятии сайта?
Инструменты Plerdy предлагают тепловую карту веб-сайта и запись видео-сеанса, чтобы помочь проанализировать поведение пользователей. С Plerdy вы можете легко проверить удобство использования своего сайта, улучшить дизайн, проанализировать призывы к действию, повысить коэффициент конверсии и многое другое.
Что такое юзабилити-тестирование
Юзабилити-тест — это комплексная проверка сайта на предмет его удобного визуального восприятия и правильной работы всех технических элементов. За удобство визуального восприятия отвечает UI-дизайн, а для проверки технических элементов используется аудит сайта. Давайте разбираться, как это связано.
UI-дизайн — это создание прототипа продукта или визуального интерфейса, который по мнению разработчиков будет удобен пользователям. UX-тестирование — это проверка созданного продукта с помощью целевой аудитории или тех пользователей, которые могут быть заинтересованы в запускаемом сайте или приобретаемом продукте. Чтобы было понятно — определим разницу между UI и UX на примере бутылок для кетчупа и пешеходных дорожек.
По мнению дизайнера, продаваемая бутылка для кетчупа должна обладать следующими характеристиками: быть компактного размера, удобно сидеть в руке, иметь верхнюю крышку открывания, стильный внешний вид и дозатор на выходе. Это UI-дизайн — продукт, который кажется правильным с позиции разработчика. Далее созданная бутылка с UI-дизайном передается любителю кетчупа, который считает эту разработку бессмысленной: в нее помещается мало кетчупа, у нее нет нижней крышки открывания и зачем-то встроен дозатор. Это UX-тестирование — проверка созданного продукта на практике.
Разница между UI и UX на примере бутылки с кетчупом.
Теперь рассмотрим пример с пешеходными дорожками. Архитектор спроектировал парк, проложил пешеходные дорожки для прогулок и окружил их зеленым газоном с деревьями. Это UI-дизайн — архитектор сделал так, как по его мнению будет удобно другим. Когда проект был реализован, на одном участке прохожие практически не пользовались пешеходной дорожки и для перемещений использовали газон. Это UX-тестирование — в реальных условиях проект оказался не слишком удобным и пешеходам понадобилась дополнительная дорожка.
Разница между UI и UX на примере пешеходных дорожек.
Аудит — это комплексная проверка веб-сайта на предмет наличия технических уязвимостей. С помощью аудита сайта можно понять, достигает ли целевой трафик поставленной цели, какие существуют проблемы и какие действия нужно предпринять для исправления ситуации. Например, если на сайте появится вирус, то все поисковые системы его сразу увидят и начнут блокировать. Сайт сразу попадет в категорию опасных ресурсов и станет недоступен многим пользователям. Отсюда падение трафика, низкие продажи и сопутствующие последствия. Если провести аудит, то проблему можно быстро увидеть и устранить.
Теперь давайте разберемся, в какой точке UI-дизайн взаимодействует с аудитом веб-сайтов и как это связано с юзабилити-тестированием. Для этого составим таблицу и выпишем варианты исследования пользовательского поведения и варианты исследования комплексного аудита веб-сайта.
| Варианты исследования пользовательского поведения | Компоненты комплексного аудита веб-сайта |
| Интервью | Технический аудит |
| Онлайн опросы | Аудит контента сайта |
| Анкетирование | Проверка семантического ядра |
| Дерево испытаний | Аудит целевой страницы |
| Карточки | Проверка работы аналитических служб |
| А/Б тесты | Ссылочный аудит |
| Создание персон | Анализ конкурентов |
| Тест кликов | Проверка качества внутренней оптимизации |
| Навигационный тест | Маркетинговый аудит |
| Текст 5 секунд | Аудит возможностей развития |
| Тестирование юзабилити | Юзабилити аудит |
Пользовательская проверка или юзабилити — это связующее звено между UI-дизайном и аудитом веб-сайта. В UI-дизайне тестирование юзабилити помогает оценить удобство и практичность созданного сайта (вспоминаем кетчуп и дорожку). Пользовательский аудит помогает понять, какие у сайта технические проблемы и как их устранить, чтобы реализовать концепцию UI-дизайна. Из-за такой взаимосвязи тестирование юзабилити (UX-тест) и юзабилити аудит целесообразно объединить и считать частью одной комплексной проверки. Если же разграничить понятия, то достигнуть нужного результата не получится: никому не нужен нерабочий сайт или рабочий сайт с примитивным и непривлекательным дизайном.
На практике взаимосвязь между UI-дизайном, UX-тестом и юзабилити аудитом проявляется по следующей схеме:
- Сначала разработчики исследуют нишу, анализируют конкурентов, собирают материал и создают сайт по своему усмотрению. Это работает UI-дизайн.
- Далее сайт проверяется пользователями и на основе этой проверки улучшается исходный дизайн. Это работает UX-тест.
- На завершающей стадии спроектированный и протестированный сайт проверяется техническими специалистами. Эти специалисты делают так, чтобы все части UI-дизайна работали без ошибок. Это юзабилити-аудит.
Если сайт удобно спроектирован, есть высокая вероятность того, что он сможет выполнять свою полезную функцию.
Почему юзабилити-тестирование важно
Когда пользователь впервые попадает на сайт, то в первые три секунды обращает внимание на дизайн. Если с дизайном все хорошо — на протяжении следующих десяти секунд идет знакомство со структурой, навигацией и контентом. Если все работает и посетителю все понятно, то он изучит материал и совершит нужное целевое действие: оформить подписку, позвонит, приобретет товар или воспользуется предложенной услугой. Если в первые 15 секунд у нового посетителя возникнут сложности, то он закроет страницу и не вникнет в суть предложения. Если посетитель останется на странице, но ему будет что-то непонятно или что-то не понравится — ситуация повториться и сайт не выполнит полезную функцию.
1 $ вложенный в вопросы UX-тестирования возвращает обратно 100 $.
Чтобы лучше понять, какова цель юзабилити-тестирования, рассмотрим пример. Предположим, вы расположили на сайте всплывающее окно, которое предлагает указать телефон и получить обратный звонок от менеджера. Если посетителей сайта будет раздражать это окно, то они будут изучать контент и делать заказы у конкурентов. В этом случае своевременное юзабилити тестирование сайта позволит быстро обнаружить и устранить проблему: первый же опрос пользователей даст понять, что дело в всплывающем окне.
К чему приводит отсутствие юзабилити-тестов.
В сфере электронной коммерции обращаются триллионы долларов и из-за отсутствия обзоров пользовательского опыта 35% этих средств будут тратиться впустую.
Если же вместо аудита пользовательского интерфейса вы решите заказать дополнительную рекламу и проигнорируете мнение посетителей, то произойдет следующее:
- После увеличения рекламного бюджета на сайт придет больше трафика.
- Все недовольные посетители будут переходить к конкурентам, которые изучили руководство по юзабилити-тестированию и сделали удобный сайт.
- Сайт по-прежнему не будет выполнять полезную функцию.
- За счет возросших рекламных затрат вырастет убыток.
Обзор юзабилити помогает разобраться с фундаментальными проблемами, влияющие на показатели конверсии. Это основная задача, ради которое важно проводить пользовательское исследование и исправлять ошибки на сайте.
UX-тесты упрощают проектирование сайта и позволяют его запускать в два раза быстрее.
Вместе с этим у юзабилити-теста есть и другие преимущества: тестирование увеличивает объем продаж, позволяет реанимировать неудачно запущенные интернет-стартапы и экономит время разработчиков сайта.
Юзабилити-тест — это возможность возобновить неудачные стартапы.
Ежегодно на запуск новых IT-стартапов в мире тратится около триллиона долларов. Примерно 150 миллиардов долларов выпадает на долю неудачных интернет-стартапов, большую часть из которых можно реанимировать за счет своевременного тестирования юзабилити.
27% американских онлайн-покупателей отказываются от покупок из-за неудобного дизайна или слишком сложной формы заказа. Переводим эту цифру в денежный эквивалент и получаем, что американские интернет-магазины ежегодно недополучают 260 миллиардов. Примерно такая же ситуация и в других странах.
Как проверить юзабилити сайта: разбираем готовый кейс
Из этого раздела вы узнаете, что такое юзабилити-тестирование на примере. Мы проанализируем интернет-магазина wesco-shop.us и дадим рекомендации по его улучшению. Если планируете запускать Google Ads, заниматься SEO-продвижением или менять дизайн, то аналогичный анализ понадобится и вам. В одном из следующих разделов мы поговорим о том, как проверить юзабилити самостоятельно. Если вам некогда ждать — воспользуйтесь услугами специалистов.
Рекомендация №1 — Следите за правильностью категоризации товаров
Иногда продукция не соответствует цвету. Это создает ощущение беспорядка, добавляет ненужный акцент и отвлекает от изучения каталога. Если всю продукцию отобразить в одном цвете, то получится вернуть ощущение фирменности и порядка.
Каталог продукции до проведения юзабилити-аудита.
На анализируемой странице мы видим фиолетовые кухонные часы, которые выбиваются из общей цветовой гаммы. Чтобы воссоздать порядок, достаточно перекрасить кухонные часы в красный цвет. Мы бы не акцентировали внимание на цветах, если бы у сайта не было фирменного стиля. Поскольку стиль есть — следим за его исполнением.
Заказчик воспользовался рекомендацией и собрал на странице продукцию красного цвета. Выглядит аккуратно. Чтобы усилить эффект, можно пригласить дизайнера, поработать над оттенком и добиться того, чтобы весь каталог был одного цвета. Оставляем выполнение этой трудозатратной работы на усмотрение владельца сайта.
Рекомендация №2 — Некорректная работа скролла
На странице есть внутренняя прокрутка, которую необходимо удалить. Прокрутка разработана с помощью неправильного кода — его нужно отредактировать и сделать страницу без ошибок.
Проблема с прокруткой.
На примере полоса прокрутки выглядит слишком жирной и отдаленной от правого края. Плюс она выполнена в том же цвете, что и продукция на странице. Это отвлекает от просмотра и усложняет процесс перемещение. Если прокрутку удалить — страница станет аккуратней.
Совет по редактированию кода.
Смотрим код, находим ошибку, делаем скриншот и показываем, какую часть нужно отредактировать. Напоминаем заказчику о проблеме и высылаем скриншот.
Рекомендация №3 — Ошибка в верстке футера
Иногда после обновления главной страницы возникает ошибка в подвале сайта: возникает серая плашка с надписью и поиском, которых быть не должно. Нужно поправить код и добиться соблюдения первоначальной верстки.
Страница должна заканчиваться небольшим белым пространством. То есть после ссылки на соцсети и платежные системы не должно быть никаких отвлекающих элементов. Допускается форма вызова подписки «Sign Up» и еще можно добавить стрелку возврата к началу страницы.
Также появляется нерабочая форма поиска, которая будет всех раздражать.
Рекомендация №4 — Придерживайтесь дизайна и выравнивание элементов
Три блока с рубриками съехали в левую сторону и не вписываются в общий макет страницы. Для исправления ситуации нужно достаточно в админку и правильно выставить настройки центрирования. Дело на три секунды.
Вообще владельцу сайта нужно пересмотреть рубрикатор. Для такой страницы три мелких блока даже после центрирования будут смотреться неестественно. Предлагаем добавить новую рубрику, увеличить картинки и выровнять все по центру. Должно получиться хорошо.
Заказчик согласился с нашими аргументами и сразу все поправил. Получилось четыре одинаковых блока, которые аккуратно располагаются под основной картинкой страницы. Если в будущем у магазина появятся новые рубрики, то их удобно упаковывать в блоки и располагать друг под другом. Получится аккуратно и не будет проблем с навигацией.
Рекомендация №5 — Придерживайтесь органических размеров элементов
Поле для комментариев нужно уменьшить и расположить в центре. Сейчас это поле выглядит слишком широким и неудобным.
Отмечаем красным прямоугольником оптимальную область для блока комментариев. Такое сужение необходимо для того, чтобы читателю было удобно работать с текстом: писать сообщение, перепроверять его содержимое и вносить правки.
Владелец сайта воспользовался нашим советом частично: он уменьшил общую ширину поля, но оставил его растянутым на всю страницу. При таком расположении пользователю будет неудобно работать с длинными сообщениями, в которых он пытается структурировано описать какую-то проблему. Предупреждаем заказчика и двигаемся дальше.
Рекомендация №6 — Некорректная верстка изображения
В каждом блоке у всех изображений должен быть одинаковый размер. Если этого не соблюдать, возникает ощущение беспорядка и пользователь может подумать, что сайт склепали на скорую руку. Отсюда недоверие, падение продаж и прочие неприятности.
Отмечаем изображение, которое отличается от остальных. Передаем скриншот заказчику и объясняем важность немедленных правок. Проблема несложная и устраняется редактированием программного кода.
Рекомендация №7 — Исправьте изображение с 404 ошибкой
Находим на странице поврежденное изображение, которое располагается сразу под рубрикатором. Просим заказчика его удалить или заменить на рабочее.
Битое изображение, обнаруженное в процессе проведения юзабилити-аудита.
Отмечаем нерабочее изображение и показываем ошибку собственнику сайта. Просим, чтобы штатный программист перепроверил код и обновил тему сайта. Ничего сложного, но нужно выделить немного времени.
После исправления ошибок размер изображений поправлен и все блоки выглядят одинаковыми. Вместо поврежденного изображения стоит блок-скидка SALE.
Нас услышали: программист сделал обновление темы, поправил код и обновил изображение. Теперь на месте поврежденного изображения у нас баннер со скидкой. Можно ловить клиентов.
Рекомендация №8 — Удалите лишние исходящие ссылки
В форме отзывов присутствует ссылка «Powered by YOTPO» (работает на YOTPO). YOTPO — это специальный сервис, упрощающий работу с отзывами на сайте. Если ссылку не удалить, то она будет уводить часть трафика с сайта. Нам такое не нужно.
Ненужная ссылка, выявленная в процессе юзабилити-аудита.
Есть такое правило: на страницах интернет-магазина все элементы дизайна должны работать на то, чтобы не мешать пользователю покупать товар. Если какой-то элемент отвлекает от покупки — его нужно замаскировать или удалить. Иначе падение конверсии неизбежно.
Рекомендация №9 — Адаптируйте размеры элементов в мобильной версии
Если переключиться на мобильную версию сайта, то первый элемент коллекции будет больше других. Эту ошибку нужно исправить, поскольку дизайн на всех современных устройствах должен быть выполнен в одинаковом стиле.
Переключаемся на мобильную версию сайта и видим проблему с версткой: первый товар на странице крупнее остальных. Его нужно уменьшить и сделать так, чтобы рядом поместилось описание еще одной товарной единицы. То есть должно быть два товара в одной строке.
Собственник сайта внес правки и теперь у страницы каталога появился адаптивный дизайн. Это значит, что вы увидите упорядоченную верстку на любом устройстве, с которого зайдете на сайт. Если открыть каталог на смартфоне, то на одной строке будет два описания. Все как надо.
Смотрим сайт на планшете в горизонтальном положении. Все изображения отображаются корректно.
Рекомендация №10 — Адаптируйте мобильную версию
В мобильной версии сайта не полностью открывается меню и нет ссылки на главную страницу.
Красным прямоугольником отмечена проблемная область интерфейса. В мобильной версии сайта часть меню закрывается шапкой сайта.
Меню на смартфоне не открывается. При нажатии на решетку меню происходит обновление страницы.
Рекомендация №11 — Оптимизируйте размер картинок
На одной из страниц каталога некоторые элементы коллекции разного размера. Нам такой формат не подходит и мы стремимся к тому, чтобы все смотрелось одинаково.
В каталоге показывается миниатюра изображений. Задача этой миниатюры в том, чтобы пользователь быстро получил общее представлении о внешнем виде просмотриваемой продукции. Детали здесь не важны, поэтому и масштаб принимать в расчет не обязательно.
Как проводить юзабилити-тестирование
Этап №1. Сначала нужно сформулировать цели, гипотезы и задачи юзабилити-тестирования. Цель определяет проблему, ради решения которой проводится тестирование пользовательского сайта. Гипотезы помогает найти вероятную причину проблемы, а задачи помогают сформировать план по устранению этой причины.
| Какова цель юзабилити-тестирования | Гипотезы | Задачи |
| Определить причину снижения продаж на 50% и понять, почему грамотная стратегия продвижения сайта привела к отрицательному результату. |
1. Техническая неполадки. 2. Неправильная сео-оптимизация. 3. Проблемы в настройках рекламы. 4.Некачественный контент. 5. Умышленные действия конкурентов. |
1. Провести технический аудит и определить возможный неисправности. 2. Провести повторный анализ семантического ядра и использованных ключей. 3. Связаться с рекламодателям и проверить смысл опубликованных объявлений. 4. Пересмотреть блок и оценить качество опубликованных статей. 5. Проверить ютуб и тематические форумы на предмет отрицательных отзывов и критики. |
Этап №2. Если попробовать проверить все сразу, то вычислить настоящую причину проблемы будет проблематично. Вернемся к нашему примеру. После поверхностной проверки предложенных гипотез у нас такой результат: три проблемы не подтвердились, появилась одна очевидная проблема и одна гипотеза вызывает сомнения.
| Неподтвержденные проблемы | Очевидная проблема | Гипотеза, нуждающаяся в дополнительной проверки |
| Умышленные действия конкурентов. Это гипотеза не подтвердилась потому, что инструменты тестирования юзабилити помогли быстро проанализировать популярные ресурсы на предмет негатива со стороны третьих лиц. Никакой активности не обнаружено. | Некачественный контент. За контентное наполнение сайта отвечает три раздела: «Блог», «Карточки товаров» и «Новости». В большинстве «Карточек товаров» нет описания, фото и видео. Есть только базовый перечень характеристик, которые сами по себе не рекламируют товар. В разделе «Блог» мало публикаций. При этом каждая опубликованная статья написана с ошибками и не выполняет никакого полезного действия — не приносит пользу читателю. В разделе «Новости» только корпоративная информация, которую не интересно изучать даже сотрудникам компании. |
Техническая неполадки. На некоторых устройствах часть страниц медленно загружается и не отображается так, как это было в первоначальной верстке. Еще проблемы с видеороликами, которые не воспроизводятся на планшетах и смартфонах. |
| Проблемы в настройках рекламы. Рекламодатели дали обратную связь и подтвердили качество составленных объявлений. | ||
| Неправильная сео-оптимизация. Специалисты провели запросы, за счет которых статьи попадают в ТОП-3 Яндекса и Гугла. Все сделано правильно и продвижение проходит по нужным ключам. |
Этап №3. Когда фокус на ключевых гипотезах определен — нужно сначала подобрать оптимальные методы юзабилити-тестирования, а после провести испытание на целевой аудитории. Перечислим популярные методы и применим их к нашим гипотезам:
- Коридорный метод тестирования — это когда небольшая группа пользователей поочередно проверяют возможности продукта или сайта, а модератор (организатор теста) фиксирует процесс через приложение для тестирования пользователей. Когда задание выполнено — действия пользователей анализируются и используются для улучшения юзабилити.
- Удаленное тестирование пользователя — это когда модератор наедине беседует с респондентами (целевой аудиторией) и узнает информацию через скайп, телефон или другой способ связи. Далее беседы фиксируются и используется для переработки юзабилити.
- Дистанционное не моделируемое тестирование юзабилити — это когда пользователи не общаются с модератором и тестируются через специальную программы. В этой программе есть перечень заданий, который каждый из пользователей должен выполнить так, как он считает нужным. Например, можно попросить респондентов найти контактные данные владельца сайта. Когда задание составлено, модераторам остается зафиксировать возникающие проблемы и на их основе переработать сайт.
- Проведение А/Б тестов — это когда создается несколько версий продукта и пользователь может выбрать лучший вариант. Больше информации про А/Б тестирование читайте в статье про оптимизацию конверсии сайта.
- Экспертная оценка — это когда для анализа продукта привлекается квалифицированный специалист, способный без целевой аудитории обнажить все проблемные места. Например, если нужно проанализировать мебельный сайт, то для экспертной оценки подойдет опытный продавец мебели. Поскольку такой человек всю жизнь принимал заявки на мебель, то именно он может подсказать о тех нюансах, которые повысят показатели сайта.
| Методы тестирования юзабилити | Проверяемая гипотеза | Что можно узнать |
| Дистанционное не моделируемое тестирование юзабилити | Гипотеза про некачественный контент | По пользователям можно увидеть, какие разделы сайта они посещают, как долго изучают контент, какие статьи быстрее закрывают, а на каких задерживаются и переходят к углубленному изучению. |
| Экспертная оценка | Гипотеза про технические неполадки | Можно быстро проверить, как пользователь переключается между страницами, что мешает работать с сайтом и как это исправить. |
При этом важно помнить, что отчет о тестировании превращается в бесполезную бумагу, если владелец сайта по какой-то причине не будет выполнять составленные рекомендации.
Запомнить
Теперь вы знаете, что такое юзабилити-тестирование и какова его роль. Мы надеемся, что теперь вы будете постоянно пользоваться данной услугой и быстро заслужите поддержку аудитории.
Напишите в комментариях, что вы думаете о юзабилити-тестах: действительно ли это полезная штука или это очередной развод маркетологов?
