Юзабилити различных элементов сайта
Опубликовано: 14.03.2018. Обновлено: 08.10.2022 346 0
В статье рассматриваются типовые проблемы и варианты улучшения юзабилити различных элементов на сайте:
Содержание статьи:
- 1. Фавиконка.
- 2. Ошибка 404.
- 3. Регистрация на сайте.
- 4. Исходящие ссылки.
- 5. Меню.
- 6. Иерархическое меню / «хлебные крошки».
- 7. Поиск по сайту.
- 8. Внутренние ссылки.
- 9. Формы заказа и обратной связи.
- 10. Логотип сайта.
- 11. Не используемые элементы.
- 12. Агрессивные поп-апы.
Фавиконка
У сайта должна быть яркая фавиконка, чтобы запоминалась и бросалась в глаза в результатах поиска. Если её нет или бледная, ставим задачу на разработку дизайнеру. Обычно фавиконка делается на основе логотипа. Должна соответствовать общей цветовой гамме и стилистике сайта.
Пример бледной фавиконки:
которую заменили на яркую:
Актуальные требования к фавиконке от Яндекса
Ошибка 404
- 1. 404-ошибка должна выводиться для ошибочных URL во всех разделах сайта.
- 2. Оформить страницу необходимо в текущем дизайне сайта (зачастую стоит оформление по умолчанию для данного хостинга).
-
Пример страницы оформленной в текущем дизайне сайта:
Пример оформления по умолчанию от хостинга:
- 3. Не должна происходить автоматическая переадресация при попадании на несуществующий URL.
- 4. В тексте 404 страницы желательно дать доп. полезную информацию пользователю, чтобы мог быстро найти нужную страницу на сайте (вывести основные ссылки, форму поиска).
Регистрация на сайте
Это в основном касается интернет-магазинов. Регистрация не должна быть обязательной (или заметной) для пользователя при совершении покупки. Мотивация на регистрацию делается заметным явным указанием преимуществ, которые получит посетитель.
Исходящие ссылки
Исходящие ссылки должны открываться в новой вкладке. Для этого к ссылке добавляется атрибут: target="_blank"
Меню
Количество пунктов
Меню должно быть слева и/или сверху в заметном месте (иногда размещают в правом сайдбаре). Ссылки должны быть текстовыми, а не графическими. Оптимальное количество пунктов или подпунктов в меню, которое легко воспринимается глазом, — не более 7. Если есть объективная потребность, можно делать больше. Однако, если пунктов (или подпунктов) значительно больше, их стараются сгруппировать по какому то признаку. Полученные группы образуют следующий уровень вложенности в меню.
Перемешивание разных по смыслу меню
Частая ошибка — перемешивание пунктов сервисного меню (содержит разделы "О компании", "Контакты" и т.д.) и меню товаров/услуг.
Пример, где перемешано:
Сервисное меню и меню товаров/услуг можно объединять, но тогда все товары на первом уровне вложенности меню должны быть объединены в раздел "Каталог товаров", а услуги — в раздел "Услуги":
Соответствие структуре
Логика меню должна совпадать с фактической организацией разделов. Неправильно:
Как должно быть:
Такая организация помогает пользователю ориентироваться на сайте. Решение о переделывании структуры сайта в соответствии с этой логикой должно приниматься в зависимости от текущего трафика, т.к. при таких изменениях есть риск просадки. Если трафик маленький, рисковать нечем, то можно делать, но при этом всё равно ставить редиректы со старых адресов страниц на новые.
Выделение текущего пункта меню
Выделение текущего пункта меню помогает пользователю дополнительно ориентироваться на сайт. Как неправильно (не выделяется):
Как должно быть (все пункты и подпункты вплоть до текущего положения пользователя выделены):
Иерархическое меню / «хлебные крошки»
Желательно наличие дополнительной навигационной строки, показывающей иерархию разделов и местоположение человека. Для различных CMS реализуется по разному: где-то установкой доп. плагинов/модулей, где-то работой программиста.
Частая ошибка — дублирование последним пунктом хлебных крошек заголовка страницы:
Правильный вариант — убирать этот последний пункт, оставляя стрелочку или другой символ, обозначающий вложенность:
Поиск по сайту
Наличие актуально для больших сайтов, особенно интернет-магазинов. Как правило реализуется установкой дополнительного модуля данной CMS. Также возможно использование сторонних поисков, например, от Яндекса: https://site.yandex.ru/ При этом будут участвовать во внутреннем поиске только проиндексированные Яндексом страницы.
Внутренние ссылки
- 1. Не должно быть ссылок с текущей страницы на саму себя.
- 2. Желательно должны различаться цвета просмотренных и не просмотренных ссылок.
- 3. Внутренние ссылки должны открываться только в том же окне/вкладке браузера.
- 4. Ссылки в контенте должны быть подчёркнутыми.
Формы заказа и обратной связи
- 1. Количество полей в формах: чем меньше, тем лучше. Проверить, чтобы не было ненужных полей.
- 2. Капча в форме: в идеале не должно быть либо должна быть четко распознаваемой.
- 3. «Спасибо»: после заполнения формы пользователь должен четко понимать, что форма им заполнена верно и успешно отправлена. Должно выводится сообщение с благодарностью либо производится перенаправление на страницу с благодарностью.
- 4. Количество шагов для заказа товара/услуги: оптимально заказ в 1 шаг. Не более 3 шагов.
- 5. Если посадочная страница длинная, то на всей её протяженности должны быть либо формы, либо ссылки/кнопки на формы обратной связи или заказа. При прокрутке страницы при исчезновении из поля зрения одной формы, должна появляться следующая. Если на посадочной странице только текст, то это означает интервал между формами около 2 тыс. знаков (считать знаки не нужно, отмерять на глаз).
Логотип сайта
Значок, используемый в логотипе должен быть простым. Слишком сложный и мелкий объект будет требовать концентрации внимания, и, как следствие, игнорироваться. Пример логотипа со слишком детализированным значком:
Пример простого и хорошо запоминающегося значка в логотипе:
Тексты на логотипе должны быть максимально четкими. Вытянутый шрифт обычно используют, чтобы избежать прочтения текста пользователем:
Не используемые элементы
Блоки, которые не содержат полезной информации и не являются обязательными элементами дизайна, необходимо удалять с сайта. Пример:
На этом сайте существует только один тип постов и у всех — один автор, поэтому в первых двух блоках слева в красной рамке нет нужды. Поскольку комментарии для всех постов закрыты, и открывать не планируется, то и крайний правый блок также нужно удалить.
Агрессивные поп-апы
Вот почему Ник Джордан считает, что показатель отказов является фактором ранжирования
Он проводил этот тест (случайно) несколько раз за его карьеру:
1. Разверните агрессивный поп-ап через 1 секунду после того, как ваш посетитель попадет на страницу.
1a. Следите за значительным увеличением показателя отказов в GA.
2. Следите за тем, как органический трафик начинает снижаться день ото дня и неделя за неделей.
3. Уменьшите агрессивность поп-апа (например, через 120 секунд).
4. Наблюдайте, как органический трафик снова начинает расти
Какие еще есть теории, если не показатель отказов?