Юзабилити в элементах дизайна и управления сайтом
Цвета, шрифты, кнопки, ссылки являются лишь частью дизайна на сайте. Каждый из таких элементов должен нести смысловую нагрузку и вписываться в общий внешний вид страницы и сайта в целом. О том, как сделать эти элементы удобными для посетителей и вписать в общую структуру, рассказано ниже.
Структура сайта
- Кликабельные «хлебные крошки».
Благодаря им посетитель всегда понимает, в каком подразделе сайта он находится, и может в один клик перейти в вышестоящие разделы. - Понятный и релевантный
h1
.
На всех страницах есть заголовок, который полностью соответствует ее содержанию. Имеется в виду заголовокh1
(видимое посетителями название страницы), а неtitle
(название страницы для поисковых систем), так как при множестве открытых вкладок в браузереtitle
просто не виден. - Кнопка возврата.
На всех страницах сайта работает кнопка «Назад» в браузере. Сайт должен корректно с ней взаимодействовать: возвращать пользователя на предыдущую просмотренную им страницу, с теми пользовательскими параметрами сортировки или фильтрации, которые там были. - Раздел «Недавно вы смотрели».
Он доступен на любой странице сайта, чтобы пользователь мог легко найти просмотренный ранее товар. Такой прием часто используется в карточках товаров. О нем и о других приемах вы можете прочитать в статье об оформлении страниц товара. - Продуманная сеть внутренних ссылок.
Все страницы на сайте имеют ссылки на другие страницы — ни одна их них не должна быть «тупиковой».
Общие элементы дизайна
- Умеренность.
Яркие цвета, крупный цветной текст, анимация — используются минимально или вовсе не используются. - Учет особенностей восприятия цвета.
Цвета кнопок, заливки полей используются с учетом их стандартного восприятия. Например, красный цвет заливки поля оформления заказа подсознательно воспринимается пользователем, как цвет ошибки. А кнопка серого цвета, скорее всего, будет воспринята как неактивная. - Отсутствие лишней анимации.
Технология flash используется по минимуму или вовсе не используется. Для воспроизведения flash-элементов требуется программа-расширение Adobe Flash Player, которая уже несколько лет не поддерживается браузерами по умолчанию. - Отсутствие нагромождения элементов.
Элементы и их блоки чередуются с пустым пространством; нет чувства нагромождения, пестроты на страницах. - Оптимальный размер кликабельных элементов.
Все кнопки, ссылки, баннеры достаточно длинные и крупные, чтобы пользователю не приходилось «целиться» для клика. При этом удобный размер не превышается из соображений «сделаем побольше, с запасом». - Подстройка курсора под «кликабельное / некликабельное».
При наведении на кликабельные элементы иконка курсора «стрелка» меняется на иконку «рука». При наведении на некликабельные элементы курсор не меняется. - Деактивация лишних элементов.
Ссылки и кнопки, которые по какой-либо причине сейчас недоступны пользователю, становятся неактивными. Не нужно их совсем скрывать — это приведет посетителя в замешательство. - Пояснения для деактивированных элементов.
При наведении на неактивную кнопку или ссылку появляется краткое пояснение, почему кнопка/ссылка неактивна. - Подстройка под способы работы пользователей со страницами сайта.
Наиболее значимый контент размещается слева, так как наш взгляд скользит слева направо. - Соблюдение F-образца при просмотре страницы пользователями.
В данном случае наиболее важные элементы сайта (уникальное торговое предложение, строка поиска, контакты, подзаголовки статей) располагаются на странице по схеме в виде буквы F. Именно так скользит взгляд пользователя, согласно многочисленным исследованиям. Самое заметное место — верхний левый угол страницы. - Продуманное расположение блоков.
Их располагаем на первом экране таким образом, чтобы посетитель видел, что ниже тоже есть что-то интересное. В этом случае посетитель прокрутит страницу вниз. Если же, к примеру, разместить по краю первого экрана пустую полосу, посетитель решит, что ниже ничего нет. - Отсутствие широких горизонтальных полос в дизайне.
Они могут быть восприняты как барьер, и пользователь не станет прокручивать страницу ниже.
Кнопки
- «Честные» кнопки.
Стандартный функционал любой кнопки — выполнение какого-либо действия, а не переход на другую страницу, если кнопка явно этого не подразумевает. - Удобство клика по кнопке.
Кликабельна сама кнопка, а не надпись на ней. Можно также сделать кликабельной небольшое пространство вплотную к ней (но не в том случае, если рядом расположена другая кнопка). - Четкий однозначный CTA.
Текст на кнопке говорит о действии, которое будет совершено при клике. Оптимально это глагол в инфинитивной форме (купить, заказать, скачать, продолжить оформление). Он конкретен, информативен и не допускает различных толкований. Плохо — кнопки с подобными названиями:- «Продолжить» (Что подразумевается под «Продолжить»? Что произойдет по нажатию кнопки?).
- «Назад» (Куда именно назад? Пользователь уже может не помнить, что было на предыдущей странице).
- «Дальше», «Готово» и тому подобными.
- Продуманные кнопки удаления и очистки форм.
Кнопки, отменяющие действия, или очищающие заполненные данные, располагаются на достаточном удалении от кнопок отправки или подтверждения, и отличаются от них. Это необходимо, чтобы посетитель не кликнул по ним по ошибке.
Ссылки
- «Честные» ссылки.
Стандартный функционал обычной ссылки — переход на другую страницу или открытие другой страницы в новой вкладке, но не запуск какого-либо действия. - Стандартизация взаимодействия.
Все ссылки оформлены в привычном посетителю стиле — синим цветом, подчеркнутые, курсор при наведении на ссылку меняет свой вид на кликабельный (иконка руки). После клика ссылка меняет свой цвет (стандарт — фиолетовый). Тем не менее, цвета можно поменять таким образом, чтобы они соответствовали цветовой гамме на сайте. - Заметные отличия «особых» ссылок.
Если ссылка предусматривает разворачивание скрытого контента, а не переход на другую страницу, она оформлена пунктирным подчеркиванием. Ссылка на скачивание файла тоже отличается от обычной ссылки — в ней есть слово «скачать», а также указаны размер скачиваемого файла и его формат. - Понятный текст ссылки.
В тексте явно указывается объект, на который ведет ссылка (название статьи, товара). То есть пользователь точно знает, что он открывает по ссылке. - Удобство клика по ссылке.
Текст ссылки достаточно длинный, чтобы посетитель мог легко по ней кликнуть (к примеру, ссылка с текстом «тут» не слишком удобна).
Главное меню
- Сквозное главное меню сайта.
Разделы контактов, доставки и оплаты, каталога товаров, услуг или другие основные разделы должны быть в главном меню сайта. Так посетитель, попав на любую страницу, за 2 секунды найдет основную интересующую его информацию. - Доступность главного меню.
Главное меню располагается в шапке сайта или сразу под ней, а также дублируется в футере . - Стандартизация.
Пункты меню названы привычным для посетителя образом (принцип «Не заставляйте меня думать») — «Контакты», «О компании», «Доставка» и т. д., без лишнего креатива. - Выделение пункта, где находится пользователь.
Такой пункт всегда выделен и неактивен — не перезагружает страницу при нажатии. - Простая структура главного меню.
В главном меню не более двух подуровней. - Заметность подуровней.
Пункты меню, в которых есть подуровни, визуально отличаются от остальных пунктов.
Поиск
- Поиск на сайте.
Он обязательно есть — но надеяться только на него, и тем более — перекладывать задачи навигации нельзя. Наличие поиска на сайте, пусть даже и очень продуманного, не решает проблем с навигацией. Пользователи часто предпочитают самостоятельно искать товар с помощью разделов и фильтров, и только потом прибегают к поиску. - Стандартизация.
Поле поиска находится там, где его привык видеть пользователь на подобных сайтах — обычно это слева вверху или вверху по центру страницы. - Единственное поле поиска.
Не заставляйте пользователя думать «Зачем второе? Какое из них важнее?» и застревать на этом моменте. - Удобное взаимодействие с поиском.
Он запускается как нажатием кнопки рядом с полем ввода запроса, так и нажатием клавиши Enter. В запросах пользователя автоматически исправляются опечатки, орфографические ошибки, неправильная раскладка клавиатуры (или предлагаются исправления), в результаты поиска подбираются синонимы. Визуальная длина поля поиска — не менее 30 символов, фактическая длина запроса при этом не ограничивается. Предусмотрено простое редактирование запроса в поле поиска (без необходимости перехода куда-то и дополнительных кликов). - Использование «живого» поиска.
По мере набора запроса в поле поиска, под ним выдается релевантный список результатов. Список меняется «на лету», по мере набора. Если при до-наборе пользователем запроса живой поиск уже не находит подходящих вариантов, список не очищается, а остаются последние подобранные релевантные значения. - Подробная информация о результатах поиска.
Посетитель должен увидеть:- Количество найденных результатов
- Тип сортировки результаты поиска (с возможностью изменить эту сортировку)
- Основную краткую информацию о каждом найденном товаре/статье.
- Помощь при отсутствии результатов.
В том случае, если ничего не найдено, мы не показываем посетителю мало-утешительную пустую страницу «По вашему запросу ничего не найдено». На странице результатов:- Клиенту предлагается несколько ближайших к его запросу вариантов товаров или разделов сайта, где, возможно, есть то, что он ищет.
- Клиенту рекомендуется, как можно отредактировать запрос, чтобы он был более релевантным.
- Опционально: предлагается воспользоваться расширенным поиском.
- Расширенный поиск (опционально).
Дополнительно предоставляется возможность расширенного поиска с выбором нескольких параметров.
Помочь с настройкой всех вышеуказанных элементов вам может графический дизайнер. Вы также можете заимствовать идеи с различных сайтов в интернете, которые лично вам нравятся.
Задание к выполнению
Аудит удобства пользования элементами сайта
Проверьте сайт на соответствие указанным в статье пунктам