Ситуация — разработали сайт, все кнопки и «вкладки» активны, есть необходимая информация, но кажется, с ним что-то не так. Или все так, но хочется сделать его еще удобнее и эффективнее. Вот тут на сцену выходит юзабилити-тестирование — помогает найти, где спотыкаются пользователи, и понять, как это исправить.
На связи команда Рецифры. Мы специализируемся на разработке и сопровождении порталов и сайтов для госструктур. В 2025 году вошли в топ-7 разработчиков сайтов и веб-сервисов в сфере «Государственные структуры и услуги: государственные программы» Рейтинга Рунета.
Мы впервые проводили юзабилити-тестирование по заказу Фонда поддержки предпринимательства Югры «Мой Бизнес». Результат — скорректировали ресурс и сделали его более понятным и удобным для пользователя. Все исправили в рамках одного проекта.
А что не так? Начинаем с постановки проблемы
Заказчик сформулировал проблему с позиции пользователя: сайт работал, содержал нужную информацию, но пользоваться им было дискомфортно. Вместе мы сформулировали несколько гипотез, которые подтвердили или опровергли после тестирования.
Если совсем просто, то мы смотрели:
- может ли пользователь найти на сайте то, что нужно — например, меры господдержки предпринимателей;
- насколько удобно пользоваться сайтом — есть ли необходимые вкладки, легко ли их найти, комфортна ли навигация;
- как долго пользователь ищет информацию — делает пару кликов или несколько десятков, переходит на одну-две страницы или теряется между вкладками.
Первая сложность — это формулировка четкого технического задания. Пришлось развивать гибкость, мы по ходу работы собирали, анализировали информацию и уточняли цели и задачи юзабилити. И следили, чтобы весь проект уложился в согласованный бюджет.
Тестирование проводят эксперты, но без участия заказчика не обойтись. Он предоставляет исходные данные, информацию для тестов, и, например, базы данных пользователей. Полное включение в процесс — не обязательно. Но мы передаем промежуточные итоги юзабилити и можем по ходу подготовки к тестированию скорректировать поставленные задачи. У нас с заказчиком — полное взаимопонимание, поэтому и совместные проекты получаются классные.
Идем дальше: 7 базовых шагов юзабилити
1. Формулируем задачу — тут мы изучали:
2. Собираем гипотезы — исходили из гипотезы дискомфорта использования. Формально на сайте были все нужные кнопки, вкладки и данные. А на деле — искать нужную информацию неудобно, некоторые элементы дизайна все только усложняли.
3. Формируем выборку — работали с базой данных заказчика.
4. Разрабатываем сценарий тестирования — от знакомства с пользователем и измерения метрик к общему впечатлению от продукта.
5. Работаем с фокус-группами — работали с базой данных заказчика. Выбрали респондентов разного пола и возраста, с разной частотой пользования порталом (от ежедневного посещения сайта до обращения к нему только по необходимости).
6. Проводим исследования — количественное и качественное тестирование в онлайн-формате по согласованному сценарию.
7. Анализируем результаты — сделали диаграммы, графики и полноценный отчет для заказчика с тезисами.
- насколько удобен и интуитивен поиск конкретной меры поддержки, исходя из заданных параметров;
- эффективность и понятность интерактивного помощника в разделе «Меры поддержки»;
- возможные баги в работе сайта.
2. Собираем гипотезы — исходили из гипотезы дискомфорта использования. Формально на сайте были все нужные кнопки, вкладки и данные. А на деле — искать нужную информацию неудобно, некоторые элементы дизайна все только усложняли.
3. Формируем выборку — работали с базой данных заказчика.
4. Разрабатываем сценарий тестирования — от знакомства с пользователем и измерения метрик к общему впечатлению от продукта.
5. Работаем с фокус-группами — работали с базой данных заказчика. Выбрали респондентов разного пола и возраста, с разной частотой пользования порталом (от ежедневного посещения сайта до обращения к нему только по необходимости).
6. Проводим исследования — количественное и качественное тестирование в онлайн-формате по согласованному сценарию.
7. Анализируем результаты — сделали диаграммы, графики и полноценный отчет для заказчика с тезисами.
Дальше покажем, что мы выяснили в результате тестирования и что улучшили.
Мы выяснили, что надо корректировать версию для мобильных устройств, интерактивного помощника и навигацию
Адаптация под мобильные устройства — оказалось, что многие респонденты работают только на смартфонах и планшетах. В поисках мер господдержки они заходят на портал «Бизнесюгры.рф» с телефона, а стационарные компьютеры или ноутбуки вообще не используют. Это один из неожиданных и неочевидных итогов исследования.
При этом чаще всего ресурсы госорганов разрабатываются, тестируются и совершенствуются под пользователя, работающего за компьютером.
Интерактивный помощник — одна из самых крутых фишек сайта, работал не на 100%, потому что:
- промежуточная выдача результатов на экране автоматически затемнялась;
- результаты поиска сложно прочесть из-за «шторки» с текстом «Вот, что я нашел».
Вот так выглядел интерактивный помощник до тестирования. Не было кнопки, которая бы в один клик перекидывала на страницу мер поддержки. Чтобы выйти из интерактивного помощника, пользователи нажимали на логотип и возвращались на главную страницу вместо страницы мер поддержки. Путь неудобный и неочевидный.
Навигация — тоже всплыла проблема, в том числе из-за слабой мобильной версии, а пользоваться «классическим» порталом со смартфона неудобно.
Вот так выглядела главная страница до доработки. Например, кнопка «Меры поддержки» в шапке не выглядела кликабельной и была похожа на заголовок, поэтому многие пользователи ее не замечали. Поисковая строка тоже терялась из-за маленького размера. К тому же оказалось, что одной только картинки в виде лупы — еще недостаточно, чтобы понять функционал.
Еще мы узнали, что часть фокус-группы не понимает термины и определения мер господдержки. Получается, например, что до того как найти меры господдержки для «социального бизнеса», предприниматель сначала должен самостоятельно узнать, что же понимается под этим термином.
Тут мы как разработчики не можем вносить изменения, но в отчете для заказчика момент терминологии подчеркнули.
Что мы изменили по результатам юзабилити
1. Перенесли меры поддержки и интерактивного помощника на главный экран, чтобы были видны на любом устройстве
2. В меню дали доступ к общей странице мер поддержки и сделали более очевидным кликабельность заголовка — «Меры поддержки». Дописали слово «поиск» в поисковую строку. Стало понятно, зачем там нарисована лупа.
3. Добавили возможность вернуться к старту помощника в один клик и возможность удалить категории в фильтрах без полного сброса всех параметров. Сделали кнопку «Найти» на странице мер поддержки.
4. Увеличили поля фильтров с категориями, чтобы при скролле прокручивались только они, а не вся страница сайта. Добавили визуальных отличий между фильтрами и интерактивным помощником, чтобы с первого взгляда была видна разница.
Все изменения согласовали с заказчиком и его бюджетом. Подготовили макеты, еще раз все согласовали, протестировали на дополнительной площадке и перенесли на сайт.
Вот какие метрики изменились после обновления сервиса
1. Динамика просмотров — выросло количество просмотров, это значит, что люди стали пользоваться интерактивным помощником чаще и детальнее в нем разбираться.
2. Динамика посещаемости и активности пользователей — сравнили показатели за один и тот же летний месяц, август 2023 и август 2024:
- интерактивным помощником пользовались в два раза больше посетителей;
- в два раза увеличилось время нахождения на странице;
- на 37% выросла глубина просмотра, то есть в среднем пользователь стал просматривать больше страниц.
Еще немного примеров «до» и «после» изменений по результатам юзабилити
Было Стало
С тех пор как мы модернизировали сайт по результатам юзабилити-тестирования, он пережил еще несколько модификаций. Любой, даже самый классный сайт, нужно регулярно тестировать с помощью пользователей и добавлять новые функции, — тогда он всегда будет востребованным, посещаемым и трендовым.
У Рецифры большой опыт работы с государственными заказчиками — мы понимаем, как правильно оформлять документы и участвовать в закупках. Можем в рамках одного проекта провести юзабилити и скорректировать сайт, чтобы он стал более удобным, понятным и функциональным.