Юзабилити различных элементов сайта

96 0

В статье рассматриваются типовые проблемы и варианты улучшения юзабилити различных элементов на сайте:

Содержание статьи:

  1. 1. Фавиконка.
  2. 2. Ошибка 404.
  3. 3. Регистрация на сайте.
  4. 4. Исходящие ссылки.
  5. 5. Меню.
  6. 6. Иерархическое меню / «хлебные крошки».
  7. 7. Поиск по сайту.
  8. 8. Внутренние ссылки.
  9. 9. Формы заказа и обратной связи.
  10. 10. Логотип сайта.
  11. 11. Не используемые элементы.

Фавиконка

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

Пример бледной фавиконки:

бледная favicon

которую заменили на яркую:

яркая favicon

Ошибка 404

  1. 1. 404-ошибка должна выводиться для ошибочных URL во всех разделах сайта.
  2. 2. Оформить страницу необходимо в текущем дизайне сайта (зачастую стоит оформление по умолчанию для данного хостинга).
  3. Пример страницы оформленной в текущем дизайне сайта:

    ошибка 404

    Пример оформления по умолчанию от хостинга:

    стандартная ошибка 404

  4. 3. Не должна происходить автоматическая переадресация при попадании на несуществующий URL.
  5. 4. В тексте 404 страницы желательно дать доп. полезную информацию пользователю, чтобы мог быстро найти нужную страницу на сайте (вывести основные ссылки, форму поиска).

Регистрация на сайте

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

Исходящие ссылки должны открываться в новой вкладке. Для этого к ссылке добавляется атрибут: target="_blank"

Количество пунктов

Меню должно быть слева и/или сверху в заметном месте (иногда размещают в правом сайдбаре). Ссылки должны быть текстовыми, а не графическими. Оптимальное количество пунктов или подпунктов в меню, которое легко воспринимается глазом, — не более 7. Если есть объективная потребность, можно делать больше. Однако, если пунктов (или подпунктов) значительно больше, их стараются сгруппировать по какому то признаку. Полученные группы образуют следующий уровень вложенности в меню.

Перемешивание разных по смыслу меню

Частая ошибка — перемешивание пунктов сервисного меню (содержит разделы "О компании", "Контакты" и т.д.) и меню товаров/услуг.

Пример, где перемешано:

перемешивание пунктов меню

Сервисное меню и меню товаров/услуг можно объединять, но тогда все товары на первом уровне вложенности меню должны быть объединены в раздел "Каталог товаров", а услуги — в раздел "Услуги":

пункты меню в норме

Соответствие структуре

Логика меню должна совпадать с фактической организацией разделов. Неправильно:

несоответствие структуре

Как должно быть:

соответствие структуре

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

Выделение текущего пункта меню

Выделение текущего пункта меню помогает пользователю дополнительно ориентироваться на сайт. Как неправильно (не выделяется):

пункт меню не выделяется

Как должно быть (все пункты и подпункты вплоть до текущего положения пользователя выделены):

пункт меню выделяется

Желательно наличие дополнительной навигационной строки, показывающей иерархию разделов и местоположение человека. Для различных CMS реализуется по разному: где-то установкой доп. плагинов/модулей, где-то работой программиста.

Частая ошибка — дублирование последним пунктом хлебных крошек заголовка страницы:

дублирование заголовка

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

заголовок не дублируется

Наличие актуально для больших сайтов, особенно интернет-магазинов. Как правило реализуется установкой дополнительного модуля данной CMS. Также возможно использование сторонних поисков, например, от Яндекса: https://site.yandex.ru/ При этом будут участвовать во внутреннем поиске только проиндексированные Яндексом страницы.

  1. 1. Не должно быть ссылок с текущей страницы на саму себя.
  2. 2. Желательно должны различаться цвета просмотренных и не просмотренных ссылок.
  3. 3. Внутренние ссылки должны открываться только в том же окне/вкладке браузера.
  4. 4. Ссылки в контенте должны быть подчёркнутыми.

Формы заказа и обратной связи

  1. 1. Количество полей в формах: чем меньше, тем лучше. Проверить, чтобы не было ненужных полей.
  2. 2. Капча в форме: в идеале не должно быть либо должна быть четко распознаваемой.
  3. 3. «Спасибо»: после заполнения формы пользователь должен четко понимать, что форма им заполнена верно и успешно отправлена. Должно выводится сообщение с благодарностью либо производится перенаправление на страницу с благодарностью.
  4. 4. Количество шагов для заказа товара/услуги: оптимально заказ в 1 шаг. Не более 3 шагов.
  5. 5. Если посадочная страница длинная, то на всей её протяженности должны быть либо формы, либо ссылки/кнопки на формы обратной связи или заказа. При прокрутке страницы при исчезновении из поля зрения одной формы, должна появляться следующая. Если на посадочной странице только текст, то это означает интервал между формами около 2 тыс. знаков (считать знаки не нужно, отмерять на глаз).

Логотип сайта

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

детализированный значок

Пример простого и хорошо запоминающегося значка в логотипе:

корректный значок

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

плохой шрифт

Не используемые элементы

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

лишние элементы

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

Комментировать