Главное Свежее Вакансии   Проекты
Комментируемое:

Список ссылок временно недоступен
😼
Выбор
редакции
302 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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


Подготовительная работа


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

1. Анализ статистики


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

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

2. Обратная связь


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

Общий план


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

3. Видимость сайта


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

4. Соответствие ожиданиям


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

5. Свобода действий


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


Отмена действия на сайте

6. Уровень стандартизации


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

7. Логика сайта


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

8. Доступность информации


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

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

9. Эффективность использования


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

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

10. Принцип минимализма


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


Дизайн сайта

Анализ дизайна


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

11. Базовые правила


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

12. Дизайн хедера


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

13. Дизайн футера


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

14. Доступность элементов


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

15. Контрастность


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

16. Уникальный фавикон


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

17. Интерактивные элементы


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


Баннер на сайте

Анализ контента


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

18. Общее оформление


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

19. Текстовый контент


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

20. Изображения


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


Реалистичные фото на сайте

21. Таблицы


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

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

Анализ структуры


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

22. Гибкость навигации


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

23. Главное меню


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

24. Главная страница


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

25. Страницы категорий или разделы


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

26. Страницы товаров или услуг


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


Оформление карточки товара на сайте

27. Страницы корзины


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

28. Информационные страницы


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

Пользовательский функционал


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

29. Кликабельность элементов


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

30. Кнопки


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

31. Формы


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


Форма на сайте

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

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

32. Радиокнопки и списки


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

33. Ссылки


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

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

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

34. Чекбоксы


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

35. Выпадающие списки


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

36. Обратная связь


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

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

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

37. Модальные окна


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


Модальное окно на сайте

38. Корзина на сайте


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

39. Поиск на сайте


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

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

40. Пагинация


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

41. Доступность для всех групп пользователей


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

42. Регистрация


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

43. Помощь в распознавании ошибок


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

44. Документация


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

Технический аудит


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

45. Адаптивность


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


Адаптивная верстка

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


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

47. Демонстрация безопасности


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

48. Региональная принадлежность


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

49. Мета-теги


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

50. Страница ошибки


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

51. Платежный функционал


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

Отчет с выводами и рекомендациями


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

52. Формирование отчета


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

Профессиональный юзабилити-аудит


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

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Чистяков Илья
Как мне повезло, что я прочитал Вашу стать, все очень доступно написано с пошаговыми действиями, для меня очень актуальна эта тема. Сейчас работаю над сайтом скачиваемые приложения казино Вулкан https://vulkanapp.appspot.com/ где очень важно учитывать все пожелания пользователя и работать только на пользователя, а пошаговый аудит юзабилити поможет мне составить план по усовершенствованию сайта, улучшению его конкурентных позиций, устранению обнаруженных недостатков.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.