7 лучших методик исследования юзабилити

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

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

Классическая схема сортировки выглядит так:

01. _Даем испытуемому набор карточек.
02._Он их группирует удобным для себя образом.
03._Дает названия получившимся кластерам и иерархическим группам.
04._Итоги фиксируем и даем карточки следующему испытуемому.

22 элемента юзабилити, которые должны быть идеальны

Чек-лист

Техника № 1 — Сортировка карточек

Из результатов нужно выделить среднее арифметическое. Это и будет оптимальный вариант структуры.

Если нужно проверить имеющуюся структуру, идите от обратного. Дайте участнику задание найти карточку, двигаясь по визуальному «дереву»‎ структуры сверху вниз. Если возникли проблемы с поиском, в компоновке разделов что-то не так.

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

Техника № 2 — Экспертный обзор

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

Техника № 3 — Отслеживание взгляда (Eye Movement Tracking)

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

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

Техника №4 — Отслеживание движения курсора (Mouse Tracking)

Тепловые карты в Яндекс.Метрике — это результат отслеживания курсора. Из них вы сможете понять, какие элементы юзеры считают кликабельными, куда нажимают чаще всего. А карта скролла показывает, до какого момента пользователям интересен контент.

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

Техника №5 — Полевые исследования

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

Техник №6 — Прямое тестирование юзабилити

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

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

Техника № 7 — Создание персонажа-пользователя

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Навигация и структура сайта

Путь к покупке/заказу

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

Структура сайта

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

СТА

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

Совет интернет-маркетолога

Используйте инфинитивы: купить, заказать, добавить в корзину. Чтобы придумать хороший CTA, подумайте от лица пользователя: «Я хочу…(скачать, купить и т. д.)»‎.

Разинькова Валерия
Ведущий интернет-маркетолог

Совет интернет-маркетолога

Мелочь, на которую не обращают внимание — автоисправление опечаток. Дайте пользователю возможность найти нужный товар по запросам «диван»‎, «деван»‎, «дмван»‎. Если система не распознает слово, предлагайте перейти в каталог.

Разинькова Валерия
Ведущий интернет-маркетолог

Поиск

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Оформление ссылок

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

Хлебные крошки

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

Совет интернет-маркетолога

Если у вас большой интернет-магазин и некоторые товары находятся сразу в нескольких разделах, настройте динамические хлебные крошки. Они будут генерироваться в зависимости от пути пользователя, а не от иерархии сайта. Например, для подарочного набора косметики крошки могут выглядеть так: «каталог > подарки для девушек > подарочный набор Dove»‎ или «каталог > подарочные наборы > подарочный набор Dove»‎.

Разинькова Валерия
Ведущий интернет-маркетолог

Контакты на сайте

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Онлайн-консультант

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Качество контента

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Каталог товаров и услуг

Категоризация

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Фильтрация

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Страница товара

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

Совет интернет-маркетолога

Не экономьте на визуале и добавьте фотографии в хорошем качестве с разных ракурсов. Мыльные мелкие картинки в карточке сразу оттолкнут от товара.

Разинькова Валерия
Ведущий интернет-маркетолог

Корзина и избранное

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Мобильная версия

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Техническая сторона

Битые ссылки

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

Совет интернет-маркетолога

Используйте специальные сервисы, например: Screaming Frog SEO Spider Tool, Netpeak Spider, Majento SiteAnalyzer.

Разинькова Валерия
Ведущий интернет-маркетолог

Страница 404

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Скорость загрузки

Медленные сайты раздражают. Чем выше скорость загрузки, тем меньше вероятность, что пользователь закроет вкладку. Регулярно проверяйте скорость с помощью сервисов наподобие PageSpeed Insights или PR-CY. Идеальное время загрузки — 1–2 секунды.

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Фавикон и сниппет

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Данные из эксперимента Eye Movement Tracking

Дизайн

Цветовая палитра

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Кликабельные элементы

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Паттерны сканирования

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Верстка

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

Совет интернет-маркетолога

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

Разинькова Валерия
Ведущий интернет-маркетолог

Сохраняйте себе наш готовый чек-лист по проверке юзабилити и улучшайте свой сайт!

Почему нам доверяют?

Более 20 лет мы занимаемся продвижением бизнеса разных отраслей, от стартапов до крупных корпораций

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

Все работы, их сроки и бюджет фиксируются в договоре

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

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

Более 500 наград в ТОП-10 рейтинга ведущих Digital компаний. Неизменные лидеры рейтинга Рунета, CMS, Ruward, SeoNews. Интернет-магазины, услуги, порталы и каталоги в любой отрасли и на любой CMS