Юзабилити — это показатель простоты и удобства использования сайта.
При высоком уровне юзабилити пользователь легко найдет нужную информацию, не потеряется в функционале и страницах и получит эстетическое удовольствие от работы с ресурсом.
Чем удобнее человеку пользоваться сайтом, тем больше вероятность того, что он совершит целевое действие (например, покупку). Поэтому юзабилити сайта напрямую влияет на прибыль компании.
Выделяют пять ключевых показателей:
- Ориентация. Простота перемещения по сайту и поиска нужных страниц.
- Эффективность. Число шагов, которые должен преодолеть пользователь для получения желаемого результата. Чем меньше лишних кнопок и длинных инструкций на пути пользователя – тем выше эффективность.
- Запоминаемость. Скорость, с которой пользователь может найти нужные разделы, даже если давно не заходил на сайт.
- Обучаемость. Интерфейс понятен на интуитивном уровне – без лишних пояснений.
- Удовлетворенность. Эстетическое удовольствие от дизайна сайта.
Основные правила юзабилити
Навигация по сайту должна быть понятной
Пользователю должно быть удобно переключаться между разделами сайта.
Создайте «Карту сайта» — список секций ресурса с ссылками на каждый из них.
Важно логически структурировать разделы по темам (например, на сайте салона красоты можно выделить «Стрижки», «Маникюр», «Окрашивание» и т.д.).
Гость должен иметь возможность перейти на главную или в корзину (если у вас интернет-магазин) с каждой страницы.
Также добавьте в верхнюю часть каждой страницы «хлебные крошки» – цепочку ссылок на вложенные друг в друга страницы. Они помогают пользователю ориентироваться. Чаще всего цепочки имеют следующий вид:
Главная страница ? Раздел ? Подраздел ? Подраздел ? Текущая страница.
На странице «Кроссовки» в интернет-магазине эта цепочка может выглядеть так:
Главная ? Каталог ? Мужчинам ? Обувь ? Кроссовки.
При формировании цепочек избегайте чрезмерной вложенности страниц. Так вы лишь запутаете гостя и вынудите его покинуть сайт.
Сайт должен корректно отображаться на всех устройствах
Посетители посещают ваш ресурс с компьютеров, ноутбуков, планшетов и смартфонов, поэтому важно, чтобы страницы сайта отображались на этих устройствах одинаково хорошо. Для этого самостоятельно протестируйте сайт с различных гаджетов и устраните найденные недочеты.
«Шапка» (верхнее, основное меню) сайта должна быть функциональной
Для того, чтобы при пролистывании сайта меню не пропадало из поля зрения, зафиксируйте «шапку» в верхней части страницы.
Помните, «шапка» должна быть небольшой по высоте (40-70 пикселей) и содержать:
- меню с ключевыми разделами ресурса (до 8 ссылок), выстроенных в порядке важности (например, главная → каталог → о нас → контакты);
- кнопку перехода на главную страницу;
- телефон и/или кнопку «Заказать звонок»;
- значок «Корзины» для быстрого оформления заказа (для интернет-магазинов);
- вкладку «О нас» / «О компании», включающую в себя историю компании, сертификаты, отзывы, адрес офиса.
«Футер» («подвал») должен быть информативным
«Футер» – дополнительное меню, которое отображается в нижней части сайта. Добавьте в него следующие элементы:
- Стрелку «Наверх», чтобы не прокручивать страницы вручную для возвращения в начало;
- Интерактивную карту с местоположением офиса компании;
- Ссылки на страницы фирмы в соцсетях;
- Сведения о политике конфиденциальности и защите персональных данных, если нужна регистрация на веб-ресурсе;
- Контакты, продублированные из верхнего меню;
- Облако тегов, специальный блок, где отображены ключевые слова, которые чаще всего используются на сайте (с его помощью легче найти нужную информацию);
- Возрастное ограничение.
«Сайдбар» (боковое меню) должен упрощать доступ к разделам сайта
Сайдбары облегчают перемещения пользователей по ресурсу, поэтому они должны отображаться на всех страницах. В состав бокового меню нужно включить: список разделов сайта, информационные блоки (например, популярные публикации), функциональные элементы (например, поиск, корзину).
Дизайн сайта не должен отвлекать от содержания
Не стоит заполнять страницы излишними картинками, использовать разноцветный текст или фон. Это затрудняет восприятие информации пользователем.
Сделайте активные элементы заметными и удобными
Чтобы посетитель понял, что на элемент (например, кнопку) можно нажать, не красьте его в серый цвет. Пользователи могут посчитать объект неработающим.
Добавьте функцию смены облика курсора со стрелки на палец при наведении на активные элементы (например, кнопку или баннер).
При нажатии на логотип сайта должна открываться главная страница.
Названия должны быть стандартизированными
Называйте идентичные элементы одинаково. Не стоит на главной странице называть кнопку «Корзина», а на другой — «Мой заказ».
Сделайте форму регистрации понятной
Если на сайте предусмотрена форма регистрации, визуально выделите обязательные к заполнению поля. Для этого поставьте рядом с ними звёздочку (*).
Убедитесь, что пользователь сможет перемещаться по полям формы с помощью клавиши Tab.
Встройте в строку для ввода номера телефона макет в формате +7 (***) — *** — ** — **.
Предусмотрите вариант регистрации через соцсети.
Текст должен быть правильно оформлен
Чтобы текст читался легко, отформатируйте его правильно:
- используйте крупные символы (для основного текста – минимум 16 пикселей) и помните, что для чтения с экрана предпочтительны шрифты без засечек (например, Arial, Helvetica);
- применяйте списки (с цифрами или точками, как в этом текстовом блоке);
- выделяйте ключевые слова (например, подчёркиванием);
- делайте большие промежутки между строками;
- делите текст на абзацы по 3-4 предложения;
- добавляйте заголовки и подзаголовки.
Если в текст встроены гиперссылки, выделите их цветом и подчеркните. Ссылки, по которым пользователь переходил ранее, должны менять окраску.
Статистику и числовые данные лучше представлять в виде инфографики – как информацию в форме картинок. К изображениям можно легко добавить текст, таблицы и схемы. Такое оформление лучше воспринимается пользователями, чем обычные абзацы.
Информация на страницах должна быть расположена по принципу F- и Z-паттернов
Большинство пользователей изучает текст на сайте по особым траекториям, напоминающим буквы F и Z. Ключевую информацию лучше размещать по форме данных символов.
Перед каждым текстом должно быть указано время на ознакомление
Это поможет пользователю понять, стоит ли ему читать материал сейчас или лучше отложить на потом, чтобы не прерываться.
Добавьте в статьи кнопки с предложением выслать материал пользователю на почту, чтобы он мог прочитать текст позже.
Сообщения об ошибках должны быть информативными
Если посетитель получает сообщение об ошибке без разъяснения причин сбоя, он может не понять, что именно сделал не так.
Сообщения об ошибках должны предлагать пользователю способы устранения возникшей проблемы и быть краткими.
При этом важно давать посетителю возможность исправить ошибку и отметить своё действие.
На сайте должна быть кнопка «Поиск»
Добавьте на сайт строку поиска – она облегчает перемещение по сайту и сокращает путь до необходимой информации.
Поиск должен автоматически выдавать варианты запроса, пока пользователь вводит текст.
Страницы «Не найдено» должны удерживать на сайте и помогать в поиске
Когда человек неверно формулирует запрос и попадает на страницу «Ничего не найдено», он может уйти с вашего ресурса. Чтобы удержать гостя, приведите на странице «Не найдено» ссылки на похожие разделы.
Например, если посетитель искал «летнюю рубашку в полоску» и ничего не нашёл, предложите ему ссылку на раздел «рубашки» с фильтром «лето».
При наличии у сайта службы поддержки, добавьте её номер на страницу «Не найдено».
При возвращении на предыдущую страницу параметры должны сохраняться
Если пользователь задавал на странице какие-то параметры (например, фильтры товаров), а потом перешёл на другую страницу, при нажатии кнопки браузера «Назад» данные должны восстанавливаться.
Сайту нужен уникальный значок
Уникальный значок (favicon), отображающийся на вкладке с вашим сайтом, позволяет легко найти его среди других открытых в браузере ресурсов.
Настройте автоопределение местоположения посетителей
Автоопределение города очень важно, так как цены, специальные предложения и акции на товары / услуги могут отличаться в зависимости от местоположения посетителей.
Как проверить юзабилити
Самым результативным способом проверки юзабилити считается трёхэтапное тестирование сайта.
Для проведения теста необходимо:
- Пригласить несколько человек (оптимально – пять), входящих в целевую аудиторию сайта;
- Поручить участникам выполнять наиболее распространённые операции на сайте (перемещение по страницам, регистрация и т.д.);
- Отмечать, что удалось и не удалось сделать у тестируемых, что повлияло на действия людей и какие сложности у них возникли. В этом вам помогут вебвизор, карты скроллинга и кликов.
Вебвизор – это инструмент для изучения поведения пользователей на сайте в режиме реального времени.
Карта кликов фиксирует количество нажатий на тот или иной элемент страницы (включая те, нажатие на которых не предусмотрено).
Карта скроллинга помогает определить, какой материал заинтересовал пользователя больше всего, а какой он просто промотал.
Все три функции можно настроить с помощью сервиса «Яндекс.Метрика».
Каждый участник должен тестировать сайт автономно, без вмешательства других людей. При этом наблюдателю нужно вести себя тихо и следить за деятельностью испытуемого, иначе тест будет неточным.
Юзабилити – переменчивая характеристика сайта. Чтобы поддерживать её на высоком уровне, регулярно проверяйте и улучшайте свой ресурс. Если вы сомневаетесь в юзабилити своего портала, обратитесь в Everland. Мы проведем проверку и устраним недочеты в кратчайшие сроки.