Полный чек-лист для самостоятельного аудита юзабилити сайта

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

Цели: выяснить, как оценивают сайт пользователи и поисковые системы; определить критические ошибки.

Анализируем данные систем аналитики Google Analytics и Яндекс.Метрика. Нас интересуют самые популярные страницы и критические места (где большой процент отказов, отсутствует или низкая конверсия). Смотрим, как ведут себя пользователи на сайте: их пути, клики и переходы.

Важно, на каких устройствах чаще открывают сайт.

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

Цель — проанализировать общее восприятие интерфейса людьми.

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

Определяем, насколько интерфейс сайта соответствует тематике и ожиданиям целевой аудитории. Он должен быть понятен пользователям, говорить с ними «на одном языке». Для этого требуется предварительно изучить ЦА и конкурентное окружение.

Тестируем возможности совершения действий и их отмены на сайте. У пользователя должен быть выбор, а также право в любой момент отменить решение (вернуться назад). Особенно важно для ключевых разделов и страниц.

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

Анализируем логику интерфейса. Сайт должен предлагать пользователю определенную последовательность действий для достижения конкретной цели (решения задачи). Вероятность ошибок следует свести к нулю.

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

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

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

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

На сайте должна присутствовать только необходимая и актуальная информация в минимально возможном объеме. Следует стремиться к простоте в логике и оформлении.

Цель — определить качество визуализации на сайте.

Анализируем расположение объектов по отношению друг к другу: оцениваем расстояние между элементами, в том числе между абзацами, строками, словами, буквами в тексте. Оцениваем дизайн с точки зрения информативности и загруженности.

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

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

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

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

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

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

Цель — дать оценку качества размещенного на сайте текстового, графического, видео-контента.

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

Оптимальная длина строк — от 60 до 80 символов (хорошо воспринимается). Все тексты должны иметь заголовки, подзаголовки и четкую структуру. Содержание проверяется на отсутствие «воды» (бессодержательность), лаконичность изложения. В текстах не должно быть ошибок. Также проверяем типографирование.

Анализируем качество фото-контента. Хорошо, когда на сайте используются оригинальные реалистичные изображения. Стоковые фото нужно стараться употреблять по-минимуму. Картинки должны быть в высоком разрешении, желательно — в цветовой гамме сайта. Для значимых фотографий следует предусмотреть возможность увеличения при наведении (открываются в модальном окне).

Проверяем таблицы на правильное выравнивание (текст — слева, числа — по правому краю). Единицы измерения указываются в начальной строке, не дублируются.

Особенно важно тестировать отображение таблиц на мобильных устройствах — здесь часто бывают проблемы.

Цели: исследовать удобство и доступность структуры сайта, проанализировать ее на соответствие логике.

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

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

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

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

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

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

Вся дополнительная информация, помогающая потенциальному клиенту, должна в простой и доступной форме отражаться на вспомогательных информационных страницах («Контакты», «Оплата», «Доставка»). Обязательно наличие блока, подтверждающего надежность компании («О нас», «Гарантии»).

Цели: оценить доступность пользовательских функций и удобство совершения действий.

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

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

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

Отлично, если предусмотрена возможность автозаполнения. Если это технически неосуществимо, в полях прописываются шаблонные варианты. Желательна проверка данных на корректность (e-mail, даты, числа). Ошибка сразу выделяется, чтобы пользователь мог ее исправить.

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

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

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

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

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

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

Для выбора из 5 и более вариантов используется выпадающий список. Если значений больше двадцати, он должен быть комбинированным. Варианты сортируются по популярности, алфавиту или другому признаку. Необходимо предусмотреть выбор «общего» значения («Все», «Любой» и т.п.).

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

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

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

С помощью модальных окон уточняется дополнительная информация, выносятся предупреждения, открываются формы для связи. Фон затемняется, при этом остается на виду кнопка закрытия окна.

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

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

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

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

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

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

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

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

Цель — анализ технической составляющей сайта, влияющей на юзабилити.

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

Замеряем скорость загрузки ключевых страниц. Оптимальный показатель — 1-2 секунды. Загрузка не должна длиться дольше 3-4 секунд.

На сайте необходимо проверить SSL-сертификат.

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

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

Проверяем, как оформлена страница 404-й ошибки. Здесь должны быть ссылки на основные разделы сайта и поиск.

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

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

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

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