80+ пунктов для проверки юзабилити сайта
Юзабилити-аудит помогает проверить, насколько удобно пользоваться вашим сайтом. Ведь красивый дизайн и невероятные функции ещё не гарантия того, что ресурс понравится пользователям. Иногда бывает, что человека устраивает продукт и цена, но он всё равно уходит без покупки. Почему так происходит? Во многих случаях дело именно в юзабилити сайта.
Зачем и когда нужен юзабилити-аудит?
Давайте начнём с того, что такое юзабилити. Простыми словами — это удобство использования сайта. Аудит помогает проверить, так ли удобно целевой аудитории пользоваться вашим ресурсом, как вы думаете. Легко ли находить нужную информацию? Не всплывают ли непонятные ошибки? Быстро ли можно разобраться, как вообще работать с функционалом?
При этом анализ юзабилити сайта — это не то, что обязательно нужно проводить каждый месяц. Но вот несколько случаев, когда он точно нужен:
· Сайт новый. Если вы только разрабатываете ресурс, не стоит полагаться на свои субъективные ощущения удобства. Особенно, если вы не целевая аудитория продукта. Вам может казаться, что всё просто и понятно: особенно, если вы видите сайт уже в сотый раз. А вот у новых пользователей мнение может быть другим.
· Вы обновляете функции или дизайн сайта. Если до внесения изменений людям было удобно пользоваться вашим ресурсом, главное ничего не испортить нововведениями. Думаю, у всех была ситуация, когда программа, которой вы постоянно пользуетесь, выкатывала обновление, и вы полдня разбирались, где теперь найти нужную функцию.
· На сайт приходит трафик, но уровень конверсии не такой, как вы ожидаете. В этом случае есть шанс, что дело именно в юзабилити. Например, интерфейс перегружен, главная страница не отражает основных преимуществ компании, важные кнопки не работают и т. д. В итоге привлечение клиентов работает хорошо, но до покупки доходит только небольшая часть людей.
Пример юзабилити-аудита сайта выглядит, как документ со списком проблем и рекомендаций, которые нужно применить для увеличения показателей. Вот каких конкретных результатов можно ждать после проведения аудита и внедрения на сайт всех улучшений:
· Рост конверсии.
· Увеличение объёма продаж.
· Рост поведенческих факторов ранжирования, которые очень влияют на успешность SEO-продвижения.
· Увеличение лояльности аудитории.
Анализировать юзабилити сайта можно разными способами. Например:
· Привлекать для тестирования реальных людей.
· Анализировать статистику поведения пользователей на сайте с помощью специальных сервисов.
· Самостоятельно проходиться по чек-листам.
· Заказывать аудит у экспертов.
В этой статье мы в основном пройдёмся по чек-листу, но немного затронем и другие моменты.
Сервисы для юзабилити-аудита
Начнём с полезных сервисов, которые помогают сделать бесплатный аудит юзабилити сайта. Некоторые из них можно использовать, только когда у вас уже есть поток трафика, а некоторые подойдут и для новых ресурсов.
· Яндекс.Метрика. Это один из основных инструментов, который очень важен для получения данных для анализа юзабилити. С помощью Метрики можно следить за поведением пользователей на ресурсе и таким образом искать его слабые места.
· UsabilityHub. Программа даёт возможность удалённо протестировать юзабилити на реальных людях. То есть аудит с его помощью можно провести до того, как на сайт придут первые посетители.
· Feng-GUI. Инструмент для айтрекинга. С его помощью можно понять, какие области экрана будут привлекать наибольшее внимание людей, а какие вообще останутся незамеченными. В зависимости от этого можно понять, где стоит разместить более важную информацию. Реальные посетители тут не используются: программа анализирует всё автоматически.
· Usabilla. Ещё один сервис, где в тестировании участвуют живые люди, за счёт чего можно быстро провести анализ юзабилити сайта онлайн. В бесплатной версии для аудита можно задействовать 10 респондентов и попросить их оценить не более двух страниц.
Пошаговый план юзабилити-аудита
А теперь поговорим про основные блоки, которым стоит уделить внимание, если вы решили самостоятельно провести аудит.
Разделы сайта:
· Шапка ресурса. Самая верхняя часть сайта, которая остаётся доступной на любой странице. В ней должны быть все необходимые элементы: лого, телефон, адрес, меню и т. д.
· Первый экран. Часто это первое, что видит пользователь, когда оказывается на вашем ресурсе. Плюс, это страница, на которую человек должен легко попадать из любого раздела сайта. Поэтому главное, что здесь должно быть — основная информация о компании (чтобы было понятно, чем вы вообще занимаетесь) и элементы навигации, которые помогут перейти в другие разделы.
· Подвал (футер). Это самая нижняя часть любой страницы, где должна находиться привычная для пользователей информация.
· Блог. Этого раздела может и не быть, но часто его добавляют для более успешного SEO-продвижения.
Для интернет-магазинов также важно оценить:
· Корзину.
· Каталог.
· Товарные карточки.
А вот что важно для проверки юзабилити сайта в целом:
· Структура. Это один из самых важных элементов юзабилити, потому что если человек не может что-то найти, он нервничает, злится, а потом просто закрывает сайт и по возможности на него не возвращается. Если ресурс небольшой, с этим обычно не возникает проблем. А вот если страниц и разделов много, очень легко сделать структуру запутанной.
· Дизайн. Он не должен быть устаревшим или слишком вычурным. Ведь посетители хотят не просто наслаждаться красотой или уникальностью ваших дизайнерских решений, а ещё и решить конкретную проблему.
· Наполнение. Это то, ради чего люди в принципе приходят на сайт. Поэтому на страницах должна быть максимально исчерпывающая информация, которая закрывает все потребности целевой аудитории. Например, схема проезда, фотографии товаров, важные технические характеристики и т. д. Иначе человек может пойти искать дополнительную информацию на другой ресурс и просто забыть о вас.
· Интерактивные элементы. Прежде всего, на кнопки должно быть удобно нажимать. А другие более сложные элементы (например, калькулятор, формы обратной связи, планировщики) должны работать корректно.
· Технические моменты. Конечно же, для удобства пользователей важно, чтобы на ресурсе не было никаких ошибок и он нормально работал.
Чек-лист юзабилити сайта
А теперь перейдём к конкретным моментам, которые важны для удобства пользователей.
Разделы сайта
Шапка
1. Есть кнопка меню.
2. Есть кнопка перехода в личный кабинет (если это актуально для вашего ресурса).
3. Есть логотип компании, на который можно кликнуть и из любого места вернуться на главный экран.
4. Есть кликабельный номер телефона организации.
5. Адрес компании можно скопировать (то есть он в виде текста, а не картинки).
Первый экран
6. В течение первых нескольких секунд становится понятно, чем занимается ваша компания.
7. Есть кнопка призыва к действию (связаться, перейти в каталог, заказать услугу и т. д.).
Подвал (футер)
8. Есть кнопка, чтобы быстро вернуться наверх.
9. Содержит контакты (кликабельный телефон и адрес в текстовом формате).
10. Содержит ссылку на документ с политикой конфиденциальности.
11. Содержит ссылки для быстрого перехода к основным разделам.
12. Содержит ссылки на соцсети.
13. Есть ссылка на карту сайта.
Блог
14. Тексты разбиты на абзацы, содержат подзаголовки и списки.
15. Статьи дополнены фото, видео, инфографикой и т. д.
16. Статьи разбиты на категории.
17. Каждая статья помечена подходящими тегами.
18. Есть кнопка, чтобы поделиться статьёй в соцсетях.
19. В конце каждой статьи есть раздел, где предлагается почитать другие материалы на эту тему.
Дополнения для интернет-магазинов
Корзина
20. Раздел “Корзина” находится в шапке сайта.
21. Если положить товар в корзину, это отображается на значке в шапке.
22. В корзине пользователь видит цену каждого продукта и итоговую сумму.
23. Товары в корзине кликабельные. То есть оттуда человек может сразу перейти в товарную карточку.
24. Можно удалить товар, уменьшить или увеличить его количество.
25. Есть рекомендации дополнительных товаров, которые могут заинтересовать человека.
26. Кнопка “Очистить корзину” находится не слишком близко к кнопке подтверждения заказа, чтобы пользователь не смог нажать на неё случайно.
27. Кнопка “Назад” не обнуляет заполненные поля. То есть если человек уже заполнил адрес и выбрал способ оплаты, но вспомнил, что забыл добавить что-то в корзину и вернулся в каталог, поля в форме заказа не должны очиститься.
28. Форма заказа включает в себя только самые нужные поля. Например, не нужно просить указать индекс, если эта информация не нужна для доставки.
29. После покупки появляется страница благодарности.
Товарные карточки
30. Каждая карточка содержит ёмкое описание товара.
31. Есть несколько фото каждого товара в разных ракурсах, которые можно увеличить.
32. Цена находится на видном месте.
33. Кнопка “Купить” достаточно большая и контрастная.
34. Характеристики товаров представлены в одном виде. Как пример: диагональ телевизора везде указана только в сантиметрах.
35. Есть кнопка “Купить в один клик”.
36. Есть актуальная информация о наличии или отсутствии товара.
37. Есть информация о сроках доставки и её стоимости (или ссылка на раздел, где всё это описано).
38. Есть раздел с похожими товарами. Плюс, они должны быть не рандомными, а реально похожими.
39. Есть раздел с недавно просмотренными товарами, чтобы человек мог быстро вернуться к понравившемуся продукту.
40. Есть кликабельные хлебные крошки. По ним человек может понять, где он находится и быстро перейти на раздел или несколько назад.
Каталог товаров
41. К товарам можно применить фильтры.
42. Есть кнопка для быстрого сброса фильтров.
43. Товары можно отсортировать по цене, по алфавиту, по популярности, по рейтингу и т. д.
44. В каталоге видна основная информация о каждом товаре так, чтобы человеку не нужно было обязательно переходить в карточку.
Оценка сайта в целом
Структура
45. В главном меню не слишком много пунктов с понятными названиями без лишнего креатива.
46. На ресурсе нет пустых разделов и страниц.
47. Есть поисковая строка (особенно актуально для каталогов интернет-магазинов и блогов).
48. Если поиск не дал результатов, человек видит подсказку, как всё-таки найти то, что ему нужно. Например, список разделов, в которых может быть интересная ему информация.
49. Поиск выдаёт результаты, даже если человек допустил ошибку или опечатку.
50. Важные разделы вроде доставки, оплаты, контактов и каталога в один клик доступны с любой страницы сайта.
Дизайн
51. Текст везде читабельный (не сливается с фоном и нормального размера).
52. Используется ограниченное количество цветов, которые сочетаются между собой.
53. Используется не больше 2-3 видов шрифтов. Для текста одного уровня они должны быть одинаковыми.
54. Все страницы оформлены в одном стиле.
55. Дизайн не устаревший.
56. Стандартные элементы сайта оформлены привычно и находятся в ожидаемых местах. Например, чтобы закрыть окно, используется крестик, а кнопку меню можно найти в левом верхнем углу.
57. Нет лишней анимации. Она отвлекает и увеличивает скорость загрузки.
58. Нет переизбытка в элементах, достаточно пустого пространства.
59. Все изображения хорошего качества.
Наполнение
60. В текстах нет орфографических и пунктуационных ошибок.
61. Тексты написаны на языке, понятном целевой аудитории.
62. Есть раздел с контактами.
63. Есть раздел “О компании”.
64. Нет устаревшей информации.
Интерактивные элементы (кнопки, баннеры, формы)
65. Кнопки нормального размера, по ним легко попасть курсором.
66. На кнопках кликабелен не только текст, но и вся остальная область.
67. Попапы легко можно скрыть.
68. Всплывающие окна не появляются слишком часто.
69. Курсор меняется, если навести его на кликабельный элемент (из стрелки становится рукой).
70. Кликабельные элементы визуально отличаются от некликабельных.
71. Если какой-то элемент сейчас неактивен, пользователя визуально об этом предупреждают (например, кнопка становится серой). Опционально можно также добавить пояснения, почему именно элемент нельзя использовать.
72. Форма регистрации содержит только минимум самых необходимых полей.
73. Есть проверка правильности введённых данных.
74. В полях форм используются подсказки и автозаполнение.
75. При некорректном заполнении одного поля остальные заполненные данные не сбрасываются.
76. На веб-сайте возможно авторизоваться через соцсети.
Технические моменты
77. Нет битых ссылок.
78. Ресурс адаптирован под разные устройства, браузеры и размеры экранов.
79. Оформлена страница 404. С неё можно перейти на другую рабочую страницу (например, в каталог).
80. У ресурса есть сертификат безопасности (SSL). Иначе при каждом посещении пользователи будут видеть уведомление, что ресурс небезопасный.
81. У ресурса настроен фавикон.
82. Скорость загрузки сайта не дольше трёх секунд.
83. На страницах нет аудиоконтента, который воспроизводится автоматически.
84. Сообщения об ошибках написаны понятным языком и предлагают варианты решения проблемы.
В заключение: несколько советов
· Вся самая важная информация должна находиться не больше чем в трёх кликах от главной страницы. Ведь чем меньше действий нужно сделать для получения нужной информации, тем проще ваш сайт становится для пользователей.
· После того как вы получили результаты аудита, обязательно нужно внедрять на ресурс полученные рекомендации. Без этого вы просто потратите впустую деньги или время, а никаких реальных результатов в конверсиях и продажах не увидите.
· Хотя бы раз в месяц анализируйте поведение пользователей с помощью той же Яндекс.Метрики. Это нельзя назвать полноценным аудитом, но зато так вы будете в курсе, если с удобством использования вашего сайта что-то пойдёт не так.
· Если вы только приступаете к разработке ресурса и боитесь промахнуться с юзабилити, откройте поисковик и найдите там 3-5 сайтов конкурентов, которые стоят на первых местах выдачи. Посмотрите, какие функции они предлагают, как у них расположены основные элементы, какую информацию они публикуют и т. д. В большинстве случаев не нужно изобретать велосипед — все рабочие решения уже придуманы за вас. При этом тупо копировать никого не стоит. Но вдохновиться и обратить внимание на важные моменты никто не запрещает.
· Перед релизом сайта полезно пройтись не только по чек-листу, который мы дали выше, но и привлечь к экспертизе юзабилити реальных людей из целевой аудитории. Им можно давать конкретные задания: например, найти и заказать электрический чайник серебристого цвета с управлением по bluetooth. Если несколько людей довольно быстро, без подсказок и затруднений справились с заданием — это знак, что и остальным пользователям всё будет понятно.
Комментарии