Старт

Лилия Голикова

Лилия Голикова

Автор статей на TexTerra

Юзабилити в элементах дизайна и управления сайтом

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

 

Структура сайта

  1. Кликабельные «хлебные крошки».
    Благодаря им посетитель всегда понимает, в каком подразделе сайта он находится, и может в один клик перейти в вышестоящие разделы.
  2. Понятный и релевантный h1.
    На всех страницах есть заголовок, который полностью соответствует ее содержанию. Имеется в виду заголовок h1 (видимое посетителями название страницы), а не title (название страницы для поисковых систем), так как при множестве открытых вкладок в браузере title просто не виден.
  3. Кнопка возврата.
    На всех страницах сайта работает кнопка «Назад» в браузере. Сайт должен корректно с ней взаимодействовать: возвращать пользователя на предыдущую просмотренную им страницу, с теми пользовательскими параметрами сортировки или фильтрации, которые там были.
  4. Раздел «Недавно вы смотрели».
    Он доступен на любой странице сайта, чтобы пользователь мог легко найти просмотренный ранее товар. Такой прием часто используется в карточках товаров. О нем и о других приемах вы можете прочитать в статье об оформлении страниц товара.
  5. Продуманная сеть внутренних ссылок.
    Все страницы на сайте имеют ссылки на другие страницы — ни одна их них не должна быть «тупиковой».

 

Общие элементы дизайна

  1. Умеренность.
    Яркие цвета, крупный цветной текст, анимация — используются минимально или вовсе не используются.
  2. Учет особенностей восприятия цвета.
    Цвета кнопок, заливки полей используются с учетом их стандартного восприятия. Например, красный цвет заливки поля оформления заказа подсознательно воспринимается пользователем, как цвет ошибки. А кнопка серого цвета, скорее всего, будет воспринята как неактивная.
  3. Отсутствие лишней анимации.
    Технология flash используется по минимуму или вовсе не используется. Для воспроизведения flash-элементов требуется программа-расширение Adobe Flash Player, которая уже несколько лет не поддерживается браузерами по умолчанию.
  4. Отсутствие нагромождения элементов.
    Элементы и их блоки чередуются с пустым пространством; нет чувства нагромождения, пестроты на страницах.
  5. Оптимальный размер кликабельных элементов.
    Все кнопки, ссылки, баннеры достаточно длинные и крупные, чтобы пользователю не приходилось «целиться» для клика. При этом удобный размер не превышается из соображений «сделаем побольше, с запасом».
  6. Подстройка курсора под «кликабельное / некликабельное».
    При наведении на кликабельные элементы иконка курсора «стрелка» меняется на иконку «рука». При наведении на некликабельные элементы курсор не меняется.
  7. Деактивация лишних элементов.
    Ссылки и кнопки, которые по какой-либо причине сейчас недоступны пользователю, становятся неактивными. Не нужно их совсем скрывать — это приведет посетителя в замешательство.
  8. Пояснения для деактивированных элементов.
    При наведении на неактивную кнопку или ссылку появляется краткое пояснение, почему кнопка/ссылка неактивна.
  9. Подстройка под способы работы пользователей со страницами сайта.
    Наиболее значимый контент размещается слева, так как наш взгляд скользит слева направо.
  10. Соблюдение F-образца при просмотре страницы пользователями.
    В данном случае наиболее важные элементы сайта (уникальное торговое предложение, строка поиска, контакты, подзаголовки статей) располагаются на странице по схеме в виде буквы F. Именно так скользит взгляд пользователя, согласно многочисленным исследованиям. Самое заметное место — верхний левый угол страницы.
  11. Продуманное расположение блоков.
    Их располагаем на первом экране таким образом, чтобы посетитель видел, что ниже тоже есть что-то интересное. В этом случае посетитель прокрутит страницу вниз. Если же, к примеру, разместить по краю первого экрана пустую полосу, посетитель решит, что ниже ничего нет.
  12. Отсутствие широких горизонтальных полос в дизайне.
    Они могут быть восприняты как барьер, и пользователь не станет прокручивать страницу ниже.

 

Кнопки

  1. «Честные» кнопки.
    Стандартный функционал любой кнопки — выполнение какого-либо действия, а не переход на другую страницу, если кнопка явно этого не подразумевает.
  2. Удобство клика по кнопке.
    Кликабельна сама кнопка, а не надпись на ней. Можно также сделать кликабельной небольшое пространство вплотную к ней (но не в том случае, если рядом расположена другая кнопка).
  3. Четкий однозначный CTA.
    Текст на кнопке говорит о действии, которое будет совершено при клике. Оптимально это глагол в инфинитивной форме (купить, заказать, скачать, продолжить оформление). Он конкретен, информативен и не допускает различных толкований. Плохо — кнопки с подобными названиями:

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

 

Ссылки

  1. «Честные» ссылки.
    Стандартный функционал обычной ссылки — переход на другую страницу или открытие другой страницы в новой вкладке, но не запуск какого-либо действия.
  2. Стандартизация взаимодействия.
    Все ссылки оформлены в привычном посетителю стиле — синим цветом, подчеркнутые, курсор при наведении на ссылку меняет свой вид на кликабельный (иконка руки). После клика ссылка меняет свой цвет (стандарт — фиолетовый). Тем не менее, цвета можно поменять таким образом, чтобы они соответствовали цветовой гамме на сайте.
  3. Заметные отличия «особых» ссылок.
    Если ссылка предусматривает разворачивание скрытого контента, а не переход на другую страницу, она оформлена пунктирным подчеркиванием. Ссылка на скачивание файла тоже отличается от обычной ссылки — в ней есть слово «скачать», а также указаны размер скачиваемого файла и его формат.
  4. Понятный текст ссылки.
    В тексте явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке.
  5. Удобство клика по ссылке.
    Текст ссылки достаточно длинный, чтобы посетитель мог легко по ней кликнуть (к примеру, ссылка с текстом «тут» не слишком удобна).

 

Главное меню

  1. Сквозное главное меню сайта.
    Разделы контактов, доставки и оплаты, каталога товаров, услуг или другие основные разделы должны быть в главном меню сайта. Так посетитель, попав на любую страницу, за 2 секунды найдет основную интересующую его информацию.
  2. Доступность главного меню.
    Главное меню располагается в шапке сайта или сразу под ней, а также дублируется в футере .
  3. Стандартизация.
    Пункты меню названы привычным для посетителя образом (принцип «Не заставляйте меня думать») — «Контакты», «О компании», «Доставка» и т. д., без лишнего креатива.
  4. Выделение пункта, где находится пользователь.
    Такой пункт всегда выделен и неактивен — не перезагружает страницу при нажатии.
  5. Простая структура главного меню.
    В главном меню не более двух подуровней.
  6. Заметность подуровней.
    Пункты меню, в которых есть подуровни, визуально отличаются от остальных пунктов.

 

Поиск

  1. Поиск на сайте.
    Он обязательно есть — но надеяться только на него, и тем более — перекладывать задачи навигации нельзя. Наличие поиска на сайте, пусть даже и очень продуманного, не решает проблем с навигацией. Пользователи часто предпочитают самостоятельно искать товар с помощью разделов и фильтров, и только потом прибегают к поиску.
  2. Стандартизация.
    Поле поиска находится там, где его привык видеть пользователь на подобных сайтах — обычно это слева вверху или вверху по центру страницы.
  3. Единственное поле поиска.
    Не заставляйте пользователя думать «Зачем второе? Какое из них важнее?» и застревать на этом моменте.
  4. Удобное взаимодействие с поиском.
    Он запускается как нажатием кнопки рядом с полем ввода запроса, так и нажатием клавиши Enter. В запросах пользователя автоматически исправляются опечатки, орфографические ошибки, неправильная раскладка клавиатуры (или предлагаются исправления), в результаты поиска подбираются синонимы. Визуальная длина поля поиска — не менее 30 символов, фактическая длина запроса при этом не ограничивается. Предусмотрено простое редактирование запроса в поле поиска (без необходимости перехода куда-то и дополнительных кликов).
  5. Использование «живого» поиска.
    По мере набора запроса в поле поиска, под ним выдается релевантный список результатов. Список меняется «на лету», по мере набора. Если при до-наборе пользователем запроса живой поиск уже не находит подходящих вариантов, список не очищается, а остаются последние подобранные релевантные значения.
  6. Подробная информация о результатах поиска.
    Посетитель должен увидеть:

    • Количество найденных результатов
    • Тип сортировки результаты поиска (с возможностью изменить эту сортировку)
    • Основную краткую информацию о каждом найденном товаре/статье.
  7. Помощь при отсутствии результатов.
    В том случае, если ничего не найдено, мы не показываем посетителю мало-утешительную пустую страницу «По вашему запросу ничего не найдено». На странице результатов:

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

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

Задание к выполнению
Аудит удобства пользования элементами сайта
Проверьте сайт на соответствие указанным в статье пунктам
Предыдущая статья
Следующая статья

Хватит просто читать!

Зарегистрируйся в Cybertrassa и научись реально управлять интернет-бизнесом!
Полный доступ ко всем материалам
30% материалов доступно только зарегистрированным пользователям.
Читайте статьи и выполняйте задания
До 80% процентов прочитанного материала забывается, если теория не применяется на практике.
Копите бонусы и меняйте на услуги для бизнеса
Экономьте до 10 тысяч рублей ежемесячно.
Начать обучение