По поисковым системам
Условия
CMS
По типам сайтов
По тематикам
По данным аналитической компании ThinkJar, 79% пользователей не вернутся на сайт, если во время первого взаимодействия они столкнулись с трудностями. То есть можно потерять почти 80% потенциального трафика и клиентов только из-за медленной скорости, неработающей кнопки, отталкивающего дизайна и других, казалось бы, незначительных мелочей, которых легко можно не допустить, если позаботиться о юзабилити. При этом маркетологи подчеркивают, что с каждым годом стоимость привлечения новых клиентов растет, сейчас она в среднем в 6–7 раз выше, чем стоимость удержания. Если вы не хотите терять рекламные бюджеты впустую и понимаете, что повышение конверсии даже на десятую долю процента может значительно увеличить прибыль, добавьте в планы проверку и исправление недостатков сайта, если они обнаружатся, по каждому из перечисленных далее пунктов.
Убедитесь, что ваша навигация ясна и понятна, чтобы пользователи могли быстро найти нужные им страницы, не заблудились и не запутались.
1. Пользователь может перейти на нужную страницу максимум за 3 клика.
2. Важные разделы доступны за 1 клик – корзина, каталог, контакты и т. д.
3. Главное меню есть на каждой странице. В нем предусмотрены все значимые для пользователя разделы (прайс для сайта услуг, доставка и оплата для интернет-магазина).
4. Основные пункты меню размещены в шапке сайта и футере, а у пользователя есть возможность перейти в меню, даже находясь в середине страницы.
5. В футере есть ссылки на соглашение о конфиденциальности, карту сайта, социальные сети.
6. Страница, на которой находится пользователь, подсвечивается или выделяется другим образом.
7. Есть активные «хлебные крошки».
8. Товары сгруппированы в разделы и подразделы.
9. При нажатии на логотип с любой страницы, кроме главной, осуществляется автоматический переход на главную.
10. Наличие кнопки «наверх», если на странице больше 3–4 экранов (проверяйте на всех устройствах).
11. В больших статьях в блоге есть оглавление с якорными ссылками.
12. На сайте нет тупиковых страниц. С любой страницы пользователь должен иметь возможность перейти дальше, узнать больше, посмотреть еще.
13. Есть форма поиска (желательно в шапке на видном месте). Позволяет посетителям быстро найти то, что они ищут, без необходимости просматривать каждую страницу.
14. Запускается как по клику на кнопку, так и нажатием на Enter.
15. В поисковой строке автоматически исправляются ошибки или предлагаются альтернативные варианты.
16. Если того, что ищет пользователь через поиск, нет на сайте, в результатах предложены альтернативные услуги или товары, семантически близкие.
17. Курсор меняется в зависимости от кликабельности элемента.
18. Ссылки оформлены корректно. Обычно гиперссылки выделяются синим цветом и подчеркиванием, но на сайте может быть и свой вариант выделения, главное, чтобы он был единообразен. При этом если ссылка не подразумевает переход, а, например, предполагает скачивание или вызов всплывающего окна с пояснением, она должна быть оформлена не так же, как гиперссылка.
19. Кликабельны не только слова, но и весь контейнер, соответствующие пункту иконки, картинки на страницах каталогов.
20. Ссылки, по которым пользователь уже переходил, выделены другим цветом.
21. Нет битых ссылок.
22. Названия кнопок понятны пользователю и предполагают от него действие – посмотреть, скачать, узнать, рассчитать, купить, заказать, вызвать, проверить, получить.
23. Наличие формы обратной связи, онлайн-чата или другого способа письменной связи с менеджерами или руководителем компании.
24. Наличие форм для быстрого совершения конверсионного действия – обратного звонка, покупки в 1 клик.
25. Минимум полей в форме заказа или регистрации. Если нужно получить много информации, разбейте на шаги/этапы.
26. Наличие пояснений или подсказок для заполнения.
27. Каждое поле мгновенно проверяется на корректность заполнения данных.
28. Некорректно заполненные или пропущенные обязательные строки выделяются.
29. Внесенные данные сохраняются при неправильном заполнении одной из ячеек. Не нужно заставлять пользователя заново все заполнять.
30. Есть возможность регистрации и авторизации в личном кабинете через СМС, социальные сети, Яндекс ID или аккаунт в Google.
31. При использовании чекбоксов кликабельны и окна, и текст.
32. Радиокнопки используются только там, где можно выбрать только один вариант.
33. В формах с радиокнопками нет выбранного по умолчанию пункта, например пол мужской или женский, чтобы не было ошибки из-за невнимательности посетителя.
34. Кнопки отмены или отказа отличаются от кнопок согласия и подтверждения, расположены на достаточном удалении друг от друга, чтобы пользователь случайно их не перепутал.
35. После покупки, оформления заявки на услугу, вызова замерщика, записи на консультацию появляется форма с благодарностью.
36. Наличие сортировки и возможности выбора представления списка товаров в категориях.
37. Наличие функционала для сравнения товаров на страницах интернет-магазинов.
38. В выпадающем списке самые популярные варианты расположены выше, а если список длинный, есть возможность поиска.
39. У всех фильтров есть пункт «Очистить/Сбросить».
40. При отправке товара в корзину пользователь понимает, что действие выполнено корректно. Как правило, это показывается анимацией, появлением всплывающего списка с добавленными товарами или надписи у иконки.
41. На странице оформления заказа нет лишнего, чтобы клиент не ушел и не забыл.
42. Можно удалить, добавить или изменить количество товаров.
Первое впечатление о компании на 94% связано с внешним видом сайта.
43. Дизайн современный, соответствует стилю компании.
44. Адаптивный дизайн. Сайт должен одинаково качественно работать на любом устройстве и в любом браузере, независимо от диагонали экрана и разрешения. Пользователю должно быть удобно заполнять форму заявки и нажимать на ссылки как на десктопе, так и на небольшом экране смартфона.
45. На страницах нет горизонтального скроллинга независимо от типа устройства, с которого их просматривает посетитель.
46. Акцент на важном. Например, делайте кнопки с призывом к действию контрастным цветом, оффер – крупным шрифтом, товары с высокой маржинальностью выделяйте стикерами «акция», «хит» или прочими.
47. Наличие фавикона. У сайта должен быть уникальный фавикон, по которому пользователь сможет найти его среди десятка других открытых вкладок.
48. Наличие «воздуха» на странице. Кроме грамотного расположения элементов, решить этот вопрос поможет правило «внутреннее меньше или равно внешнему», то есть расстояние между буквами меньше, чем расстояние между словами, интервалы между строками меньше, чем между абзацами, а те, в свою очередь, меньше, чем между разделами.
49. Видимый переход к следующему экрану. Пользователь должен понимать, что страница не ограничена видимой областью, что дальше будет следующий экран, где также есть информация. Реализовать эту задачу можно стрелками, буллитами, расположением контента (80% уделяется действующему экрану, 20% – началу следующего).
50. Сайт соответствует правилу «7 сущностей» – именно столько человек лучше всего запоминает и воспринимает. Старайтесь придерживаться этой цифры при определении количества пунктов меню, списка, подкатегорий.
51. В шапке есть логотип, название компании, дескриптор, до 7 пунктов меню, включая акции, сервисные страницы, каталог.
52. В шапке есть иконки входа в личный кабинет, корзины. Контакты и график работы могут быть или не быть в зависимости от типа сайта. Например, маркетплейсы не указывают номера телефонов, но обязательно указывают регион, так как от этого зависит выбор товаров и стоимость доставки.
53. Шапка фиксированная, всегда остается на странице, но обычно при скроллинге используется компактный вариант.
54. Соответствие F-паттерну. Россияне привыкли читать не просто слева направо и сверху вниз. Исследования показывают, что схема просмотра страницы пользователем напоминает букву F, поэтому самые важные элементы должны быть расположены в соответствии с этой схемой.
55. Полосы прогресса в формах не начинаются с 0% и не заканчиваются 100%, чтобы сначала пользователь понял, что часть уже выполнена и осталось уже меньше, а потом не завершил действие до полного завершения процесса.
56. Используется не больше 2–3 шрифтов.
57. Основной текст написан крупным шрифтом (12–16-й кегль) без засечек, контрастным цветом по отношению к фону.
58. Текст читается по диагонали: есть заголовки, списки, подзаголовки.
59. Текст выровнен по левому краю.
60. Изображения хорошего качества.
61. Расположение элементов соответствует правилу близости. Пункты меню одной категории должны быть расположены ближе друг к другу, заголовок ближе к тексту, к которому он относится.
62. В каждой категории показывается количество элементов: отзывов, товаров, страниц, результатов поиска и т. п.
63. Кнопка онлайн-консультанта, чата, отправки сообщения в мессенджер не перекрывает контент сайта, не мешает чтению и взаимодействию.
64. Есть разделы с акциями, условиями доставки, оплаты, возврата, правилами оформления заявки, если процесс сложный.
65. Есть страница о компании с фотографиями людей, офиса, склада или цеха.
66. Есть страница или блоки с отзывами на страницах услуг и карточках товара.
67. Контакты указаны в отдельном разделе, основные размещены в шапке. При этом они опубликованы не картинками, а текстом с возможностью автоматического набора номера или перехода в почтовый сервис для отправки письма.
68. Номер телефона указан с кодом региона.
69. На странице 404 опубликованы ссылки на важные разделы сайта и форма поиска.
70. В интернет-магазинах есть раздел или блок «просмотренное», чтобы пользователь мог быстро вернуться и найти нужное, когда решится на покупку.
71. В каталоге есть возможность быстрого просмотра без перехода в карточку товара.
72. В каталоге у каждого продукта есть фото, цена, кнопка «купить», название, стикер (если этот товар хит, продается по акции, новинка и т. п.).
73. В карточке товара цена заметна, указана валюта, есть фото с разных ракурсов, инфографика, видеообзор с демонстрацией использования, характеристики, описание. Видео помогает убедить в покупке или заказе услуг 73% пользователей.
74. В карточке товара есть сведения о доставке, оплате, возврате, гарантии, сопутствующих или похожих продуктах. На первом экране есть кнопки «купить» и «купить в 1 клик».
75. Фото в карточках товара можно масштабировать.
76. На страницах услуг есть цены, информация о гарантии, результате, призыв к действию. Если стоимость нельзя указать, можно использовать формулировку «от X рублей», примеры кейсов с указанием суммы по договору или добавить предложение рассчитать стоимость.
77. Статьи в блоге сгруппированы, указаны даты публикаций, теги, есть кнопки для репоста в соцсети.
78. В конце каждой страницы есть призыв к действию. В блоге это может быть список статей на эту же тему, предложение подписаться и т. д.
79. Быстрая загрузка. Убедитесь, что все страницы оптимизированы, быстро загружаются, чтобы пользователям не приходилось долго ждать, пока контент появится на их экранах. Среднюю скорость загрузки, медленнее которой ваш сайт точно не должен загружаться, можно оценить по конкурентам.
80. Интуитивно понятные иконки и названия разделов. Пользователи знают, что крестик означает отмену или отказ, иконка с корзиной – переход в корзину, раздел «Контакты» будет включать информацию как минимум об адресе, email и телефоне, а на странице «Команда» будут фотографии сотрудников.
81. Единообразие. Структура всех карточек товаров и детальных страниц должна строиться по одному принципу. Аналогичные требования к шрифтам, цветам, единицам измерения и т. п. Не нужно заставлять клиента после каждого перехода заново знакомиться с сайтом.
82. Соответствие ожиданиям. Переходя на сайт, клиент ожидает увидеть вверху шапку с логотипом, контактами и меню, а внизу – подвал. Он рассчитывает увидеть иконку входа в личный кабинет или перехода в корзину в правом верхнем углу. Если поле в форме выделено красным, значит, там ошибка, если кнопка серая, значит, неактивная и т. д.
83. Аскетичность. Не стоит размещать на одной странице больше 3 разных призывов к действию, способов связи.
84. Отсутствие автоматически загружающегося видео, минимум поп-ап окон, отсутствие большого количества рекламных блоков.
85. Пользователь понимает, куда он попал, в течение 1–3 секунд после перехода на страницу.
86. Автоматическое заполнение известных сайту параметров клиента. Например, если у пользователя включена геолокация, сайт должен автоматически выставлять правильный регион, добавлять его при заполнении адреса доставки с возможностью изменения.
87. Есть возможность отказаться от любого действия или отменить сделанное ранее.
88. Нельзя выбрать то, чего нет. Если какой-то товар распродан, кнопка «купить» должна быть неактивна. Если в каталоге сейчас нет красных футболок, значит, в фильтре не должно быть возможности выбора красного цвета и т. п. Но чтобы клиент понимал, почему он не может воспользоваться этим функционалом, нужно давать пояснение. То есть рядом с неактивной кнопкой должно быть написано «распродано» и желательно предложены альтернативные варианты или форма предзаказа. А у красного цвета, например, указано 0, в этом случае у остальных цветов цифры должен быть больше нуля.
89. Защита от копирования не распространяется на контакты.
90. У всех действий обозначен статус. Если страница грузится, пользователь должен видеть иконку загрузки, если форма успешно отправлена, он должен получить информацию об этом, и т. п.
91. Каждое указание сайта на ошибку пользователя сопровождается комментарием, почему это произошло или что нужно сделать.
92. Сообщения об ошибках и ожидаемых от пользователя действиях написаны на понятном ему языке без компьютерной терминологии или сокращений, известных только в узком кругу.
93. Перед окончательным удалением критически важных данных (аккаунта, собранной корзины, отредактированного макета для печати фотографии) появляется окно с вопросом, действительно ли пользователь хочет совершить это действие.
94. У всех всплывающих окон есть возможность их закрыть.
95. Для закрытия модального окна используются все способы, которые может предпринять пользователь (можно посмотреть по карте кликов и в «Вебвизоре»). Это может быть крестик, кнопка «Закрыть», клик по фону, нажатие клавиши Esc.
96. При появлении модального окна фон темнеет.
97. Основная информация, важная пользователю, на виду. То есть информация об акции должна быть не только на баннере на главной странице, но и в соответствующих карточках товаров.
98. На каждой продающей странице сайта есть возможность совершить целевое действие.
99. Используется отложенный фильтр и отложенное закрытие расширенного меню при переводе курсора на внутренние разделы.
100. В текстах нет орфографических, фактических, логических и других видов ошибок.
101. У сайта есть сертификат SSL.
Удобство использования сайта — важный момент для тех, кто заботится о конверсии, росте прибыли, хорошей репутации и высоких позициях в поиске. Если вы не готовы тратить свое время на улучшение юзабилити, обращайтесь в «Поисковую индустрию». Наши эксперты знают, как сделать так, чтобы пользователи полюбили ваш сайт и совершали больше целевых действий.
Если у вас есть вопрос
