Инструкция по аудиту
юзабилити
сайта
Взаимодействие с аудиторией
1. На сайте должно быть сильное и понятное УТП
Уникальное торговое предложение должно быть сформулировано так, чтобы товар сразу захотелось приобрести (интерес, польза, выгода, гарантии)
2. На сайте должен быть призыв к действию. Желательно использовать различные типы призывов к действию.
  • Призыв к действию мотивирует посетителя совершить определенное нужное вам действие.
  • Использование различных типов призывов к действию уменьшает стресс-фактор для посетителя, поскольку он может выбрать наиболее удобное для него действие.
  • Различные призывы к действию должны встречаться посетителю сайта на разных страницах, чтобы напоминать и подталкивать к совершению целевого действия.
  • Кнопка (ссылка) призыва к действию должна выделятся на сайте (цвет), должно быть понятно, что она кликабельная
3. На сайте должна быть указана контактная информация
  • Контакты традиционно указываются в верхнем правом углу.
  • Наличие контактов значительно повышает доверие к сайту.
  • Контакты должны быть указаны максимально полно и подробно вплоть до описания места расположения офиса с приложением карты
4. На сайте при необходимости должны быть сигналы для посетителей, помогающие понять, что происходит
Например, сообщения о загрузке, полосы (окна) для загрузки, подсказки в полях для ввода и т.п.
5. На сайте должна быть предусмотрена возможность отменить действие
В противном случае посетитель может просто уйти с сайта, чтобы нежелательное для него действие не происходило (например, он решил не заполнять форму, а вернуться к каталогу)
6. Если на сайте необходима процедура регистрации - она должна быть максимально простой и быстрой
Контент – содержание и оформление
1. Лаконичные понятные заголовки. Различный размер шрифтов у заголовков разных уровней.
Наибольший шрифт - у главного (одного) заголовка.
Суть текста воспринимается при быстром прочтении заголовков
2. Основной контент удобен для прочтения
  • Использование форматирования для подачи большого объема информации: категоризация, списки, таблицы
  • Удобный размер шрифта для чтения
  • Черный шрифт на белом фоне
  • Не использовать justify (выравнивание по ширине), Caps, различные типы и размеры шрифта в одной строке (абзаце)
  • Выделение цветом и жирность должны использоваться в разумных пределах


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

Ниже пример того, как стиль цветов и шрифтов не выдерживается даже на одной странице
4. Пользователю должно быть понятно из названия ссылки, куда она его приведет
Ссылки "Обзор" и "Подписчикам" совершенно не информативны для школы вокала
Информационная архитектура
1. Главную навигацию и ссылки в тексте легко найти и распознать
  • Для пользователя должно быть ясно, какие фразы, кнопки и т.п. являются кликабельными
  • На сайте должно быть меню с понятными и четкими названиями, отсылающими ко всем необходимым страницам

На картинке пример понятной навигации
2. По сайту есть поиск и его легко найти
3. Урлы понятные и структурированные. Нет чрезмерно динамичных урлов
Дизайн сайта
1. Вся цепляющая посетителя информация должна быть в первом скролле
Если посетитель не увидит для себя ничего интересного на главном экране, дальше он просто не пойдет
2. Стилистика сайта должна соответствовать его тематике
Если это интернет-магазин игрушек, то вряд ли цвет хаки будет уместен
3. Хороший контраст текста и фона
  • Используются правильные цвета (сочетаются с тематикой, не раздражают зрение, призывы к действию выделены)
  • Черный текст на белом фоне

На картинке пример неудачного контраста
4. Для иконок используются знакомые формы
5. Отсутствие «визуальной замусоренности»
Наличие на сайте обилия информации и пестроты вызывает у пользователя растерянность и желание покинуть сайт.

Идентификация. Кто вы такие?
1. Лого компании расположено на видном месте
Традиционно это верхний левый угол. У логотипа есть четкое и краткое пояснение, чем вы занимаетесь
2. Главную страницу посетитель способен осознать за 5 секунд
Главный экран, из которого не сразу понятно, что предлагает компания и на что скидки. Никакого обозначения направления деятельности нет
3. На сайте есть ссылки на "О нас" и "Контакты"
Наличие на сайте контактной информации и информации о компании (команде) повышает доверие посетителей
4. У сайта есть фавикон
Значок веб-сайта, отображаемый браузером
Доступность сайта
1. Время загрузки сайта в разумных пределах
Проверить можно с помощью сервиса PageSpeedInsights
2. На сайте не должно быть горизонтального скролла
Уплывание экрана влево-вправо значительно ухудшает восприятие информации
3. На сайте нет "битых ссылок"
  • «Битые ссылки» – ссылки, при переходе по которым, пользователь попадает на на несуществующие веб-страницы, документы и изображения, которые были удалены или перемещены. При переходе по подобной ссылке, браузер выдаст сообщение об ошибке 404.
  • Проверить сайт на "битые ссылки" можно при помощи http://www.brokenlinkcheck.com/
  • Крупным сайтам сложно отслеживать битые ссылки, поэтому хорошо, если у сайта будет кастомная (индивидуальная) 404 страница, выдержанная в едином стиле с сайтом и предлагающее пользователю совершить какое-то действие вместо того, чтобы он просто покинул сайт.
Заполнение шаблона юзабилити по этой инструкции
1. Открыть соответствующий шаблон в Тильде
  • Выбрать "Создать страницу"
  • Далее вкладка "Мои шаблоны"
  • Выбираем "Шаблон аудита юзабилити сайта"


2. Заполнить шаблон
К различным страницам сайта могут относится разные показатели из инструкции: необходимо выбрать нужные и разъяснить их в соответствии с инструкцией
3. Сохранить страницу
  • Зайти в "Настройки"
  • Прописать заголовок, адрес страницы.
  • Также во вкладке "Дополнительно" можно выбрать папку для страницы
Юзабилити тестирование поможет определить проблемные места и понять, где теряется конверсия
Made on
Tilda