Правила юзабилити

Элементы интерфейса сайта

Почитать позже

Если страницы не конвертируют, поведенческие показатели эффективности низкие, а потенциальные покупатели быстро закрывают сайт, нужно найти недостатки и исправить их. Интерфейс, как конструктор, состоит из деталей — каждая часть влияет на результаты. Поэтапно прорабатывая их, вы сможете улучшить коммерческие результаты. В этой статье мы разберем, из каких элементов состоит UI. Вы можете использовать ее как чек-лист для организации работы.

Элементы сайта

У каждого компонента интерфейса — своя задача. При проектировании страниц нужно учитывать пользовательские привычки. Новаторство в этих вопросах может привести к сложностям с навигацией и пониманием функций некоторых элементов.

Шапка сайта

Это верхняя часть страницы, иногда ее называют хедер. Главная задача — навигационная: здесь располагается логотип компании, меню, контакты, важные с точки зрения конверсии кнопки.

Хедер Альфа Банка.png

Хедер Альфа Банка

Футер (подвал)

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

Футер Альфа Банка.png

Футер Альфа Банка

Блоки с контентом

Содержательные элементы на сайте могут быть в виде:

  • Текстов.
  • Изображений.
  • Схем с короткими описаниями.
  • Видео.
  • Анимации.

Контентный блок на странице издательства МИФ.png

Контентный блок на странице издательства МИФ

Медиаплеер

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

Медиаплеер Кинопоиска.png

Медиаплеер Кинопоиска

Слайдер

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

Слайдер с офферами на главной странице интернет-магазина Золотое Яблоко.png

Слайдер с офферами на главной странице интернет-магазина Золотое Яблоко

Кнопки

Нажимая на кнопки, пользователь взаимодействует с интерфейсом. Их главная функция - управление. Клик на регистрацию открывает окно с формой, плюс в карточке товара - отправляет его в корзину и т.д.

Кнопки в карточке товара на Ozon.png

Кнопки в карточке товара на Ozon

Другие кликабельные блоки

Помимо кнопок на сайте могут быть другие зоны, на которые можно нажимать. Примеры:

  • по клику на вопрос в разделе FAQ разворачивается окно с ответом;
  • нажатие на блок с названием услуги переводит на ее страницу с детальным описанием;
  • баннер стимулирует переходы на раздел с рекламным предложением.

FAQ на Reg.ru.png

FAQ на Reg.ru

Поля форм

Поля позволяют посетителям отправить информацию в базу данных. Они используются в разных видах форм:

  1. Регистрации/авторизации — создать логин и пароль.

  2. Заявки — добавить имя, адрес, контакты.

  3. Обратной связи — отправить отзыв или вопрос и т.д.

Пароль обычно скрывается точками или звёздочками. Поля могут быть с функцией автозаполнения.

Вход в личный кабинет Альфа Банка.png

Вход в личный кабинет Альфа Банка

Чек-боксы

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

Чек-боксы в фильтрах на Ozon.png

Чек-боксы в фильтрах на Ozon

Радиокнопки в фильтрах на Ozon.png

Радиокнопки в фильтрах на Ozon

Выпадающие списки

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

Меню в виде выпадающего списка на Кинопоиске.png

Меню в виде выпадающего списка на Кинопоиске

Аккордеон

Ещё один способ оформления многоуровневых списков. По клику на заголовок открываются скрытые подзаголовки.

Меню в формате аккордеона в интернет-магазине Золотое Яблоко.png

Меню в формате аккордеона в интернет-магазине Золотое Яблоко

Всплывающие окна

Обычно на сайте используют три типа всплывающих окон:

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

Подсказка и всплывающее окно на Ozon.png

Подсказка и всплывающее окно на Ozon

Поиск

Поисковая строка помогает найти нужный контент — либо с помощью внутренних инструментов сайта, либо благодаря готовым решениям от Яндекса или Google.

Поисковая строка Ozon.png

Поисковая строка Ozon

Навигационные компоненты

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

  1. Хлебные крошки, которые позволяют проследить путь от главной страницы до внутреннего подраздела.

  2. Стрелка для быстрой прокрутки страницы наверх.

  3. Пагинация — разделение контента, чтобы избежать бесконечной загрузки.

  4. Кнопки «вперёд» и «назад».

  5. Сайдбары, где добавляются подсказки или содержание страницы для быстрого перехода к нужному блоку.

Пагинация Coursera.png

Пагинация Coursera

Теги

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

Теги в карточках курсов Нетологии.png

Теги в карточках курсов Нетологии

Элементы состояний

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

Кликабельные и некликабельные кнопки в каталоге Кинопоиска.png

Кликабельные и некликабельные кнопки в каталоге Кинопоиска

Чек-лист экспресс-проверки интерфейса

Изучив все детали, из которых строится интерфейс, вы можете точнее проверить его эффективность и найти направления для улучшения пользовательского опыта. Экспресс-аудит включает в себя 5 пунктов:

  1. Визуальная оценка: контрастность, цвета, видимость каждого компонента.

  2. Расположение: все элементы можно быстро найти.

  3. Простота восприятия: посетитель с первых секунд понимает, как он может выполнить нужные ему действия.

  4. Кнопки и формы: корректность работы функций.

  5. Адаптивность: сайт одинаково хорошо должен работать в разных веб-браузерах — на десктопе и на смартфонах.

Если нет времени на полноценное юзабилити тестирование, покажите user interface знакомым и попросите их выполнить какие-то задачи. Это поможет определить, как быстро человек, который впервые сталкивается с вашим UI, может разобраться в его функциях.


Узнайте, как увеличить конверсию на 41%!

Всего 3 шага и 5 минут вашего времени на пути к росту.

Выберите
ваш сайт
Укажите сайт и получите 7 точек роста.
Рассчитайте
стоимость
Контролируйте стоимость и состав услуги. Авторизуйтесь и выбирайте только то, что нужно вам.
Получите результат
и сопровождение
После оплаты и выполнения задания продолжайте получать регулярные советы и рост конверсий.
Читать также

Готовы узнать, что думают пользователи?

Тогда переходите на новый уровень и улучшайте ваш
продукт вместе с нами

Узнать