Юзабилити (usability) аудит сайта оценивает соответствие дизайна бизнес-целям компании, целостность стиля, актуальность решений, понятность пользовательских сценариев.

Когда нужен юзабилити аудит

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

1. Нужно привлечь пользователей в новое приложение, но они не идут. Оценки в сторах негативные или явно снизились за последнее время.
2. Нужно провести ребрендинг и повысить конверсию. Команда не уверена, что всё сработает.
3. Нужно автоматизировать рутинные рабочие процессы. Сделать их проще и прозрачнее, чтобы сотрудники работали быстрее и с меньшим числом ошибок.
4. Нужно, чтобы пользователи чаще доходили до покупки. Сейчас на разных этапах пути к корзине пользователи уходят из приложения без покупок.

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

С чего начать проверку сайта или приложения

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

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

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

Важно отметить: при UX-аудите эксперты не анализируют код. Чтобы тщательно проверить сам код, нужно провести аудит кода. А усовершенствовать процессы выявления и устранения ошибок кода поможет QA-аудит.

Что выявляет юзабилити аудит сайта

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

Обнаруживает ключевые проблемы безопасности

1. Отсутствие HTTPS. Базовое требование к современным сайтам: наличие протокола HTTPS, который усиливает защиту от злоумышленников. Это важно, потому что большинство современных браузеров выдают пользователям предупреждения при попытке зайти на сайт без такой защиты — обычные HTTP. Когда человек увидит сообщение о потенциальной угрозе, он может передумать заходить на этот ресурс. И тогда бизнес лишится потенциального клиента.

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

• Рассчитаем стоимость международных SMS по минимальной планке — для крупных корпоративных клиентов они могут стоить около 0,03 доллара.
• Тогда запрошенные ботом сообщения будут стоить компании 2592 доллара в сутки.
• Если расчёты с оператором компания проводит раз в месяц, узнать об этом она сможет только тогда, когда счёт за сообщения превысит 70 000 долларов.
• Если для компании SMS стоит как для обычного частного абонента, итоговая сумма вырастает ещё в 100–200 раз.

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

Технические недостатки интерфейса

1. Отсутствие обработки ошибок. Мы встречали случаи, когда приложения не предлагают исправить ошибку, например, при вводе данных для регистрации. Если пользователь опечатается в номере телефона или почте, он не сможет зарегистрироваться. Избежать этого помогают уведомления об ошибках, которые предлагают варианты замены. Например, если в форму ввели ***@gmailc.om, система предлагает заменить это на ***@gmail.com. Так пользователь с большей вероятностью успешно завершит авторизацию.

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

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

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

Никита Скоробулатов, дизайнер Surf

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

Ошибки в контенте

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

1. Нечитаемая типографика. Чтобы помочь пользователю на его пути к цели, текст должен контрастно выделяться на фоне и легко читаться. Мы рекомендуем делать строки длиной около 75 символов, но также нужно учитывать кегль: эксперты типографики считают, что размер символов в идеале должен относиться к длине строки как 1 к 30.

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

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

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

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

Фавикон — это мини-версия логотипа. Он виден, например, когда у пользователя открыто много вкладок. Без фавикона было бы сложно ориентироваться в такой ситуации:

Проблемы и недочёты дизайна

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

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

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

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

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

Запутанная навигация

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

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

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

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

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

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

Непонятная обратная связь

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

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

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

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

Что делать с найденными проблемами

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

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

Из чего состоит и как выглядит отчёт по UX-аудиту

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

Сроки и стоимость. UX-аудит сайта занимает от 40 часов — это минимальное время, за которое можно исследовать и оценить интерфейс по ключевым критериям. Столько времени займёт, например, небольшой онлайн-магазин с типовой функциональностью. На аудит юзабилити приложения банка уйдет 80–120 часов.

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

Почему UX-аудит бывает не нужен

Найти и исправить ошибки интерфейса не всегда одинаково выгодно. Аудит юзабилити редко бывает нужен, если:

• Выручка компании от приложения менее 1 млн руб. Тогда аудит не принесёт заметной выгоды. В результате изменений интерфейса рост показателей не будет значительным.
• Приложение или сайт — это внутренний корпоративный ресурс. Чаще всего аудит юзабилити в таких случаях не сможет значимо повлиять на прибыль компании. Он важнее для B2C-сайтов и приложений, потому что они напрямую генерируют доход. Исключение: если внутреннее приложение — ключевой продукт для бизнеса. Мы делали UX-аудит такого корпоративного приложения, и это принесло компании желаемый результат.
• Все метрики в порядке и проблем нет. Не каждый интерфейс обязательно нужно исправлять — если он работает хорошо и жалоб нет, UX-аудит не нужен.

Какие результаты приносит аудит интерфейса

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

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

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

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

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

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

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

В результате конверсия в покупку и итоговая выручка выросли. Точные значения не можем разглашать из-за NDA.