Если вы попадете на веб-ресурс, а он «кривой», навигация оставляет желать лучшего, и вообще, находиться на нем даже не удобно - это значит, что у него плохое юзабилити.
Например, вы приходите в театр, чтобы насладиться представлением. Но оказывается, что в партере сидит оркестр, справа и слева от оркестра - костюмеры, на сцене - зрители, а труппа бегает по амфитеатру, пытаясь что-то изобразить. Кроме того, не настроен звук, а вместо больших светильников по стенам развешены догорающие свечки. Мало того, что вы ничего не слышите, так еще ничего не видно. Какое желание у вас возникает? Конечно же, сразу встать и уйти.
Основная цель юзабилити - достижение веб-ресурсом коммерческого успеха и, следовательно, увеличение прибыли. Удобство пользования сайтом влияет на улучшение поведенческих факторов (увеличение количества просмотренных страниц, задержка пользователя на странице и т.п.), побуждение потенциального клиента к действию, улучшение лояльности поисковых систем.
Исследования говорят о том, что в ⅔ случаев посетители не могут найти информацию на сайте. Они теряют время, снижается производительность, растет раздражение, и люди на такие горе-сайты не возвращаются.
Анализ и оценка юзабилити
- Анализ счетчиков статистики - точки входа, выхода, время на странице и т.п.
- Работа с отзывами. Установите форму обратной связи или голосование. Многие посетители не ленятся указывать на недостатки, если обнаруживают их.
- Тестирование. Google предлагает сервисы “Оптимизатор сайтов” и фокус-группы. Подбираются группы людей, каждой группе дается свой вариант веб-ресурса. Каждому дается задание - к примеру, совершить покупку 3 товаров из разных категорий. По результатам работ делается вывод: какой вариант удобен для пользователя.
- Наблюдение за посетителями. В этом вам поможет Вебвизор в Яндекс.Метрике, который записывает действия посетителей.
- Самостоятельная экспертиза. Начните с определения основных задач, которые необходимо решить с помощью веб-ресурса. Пройдите по путям, который предлагает ваш веб-ресурс и посмотрите, будут ли возникать ошибки и сложности.
- Оценка удобства сайта базируется на психологии и привычках. Опираясь на стандарты в области создания сайтов Рунета, можно легко выявить ошибки в usability.
Виды ошибок usability
- Технические ошибки.
- Ошибки в дизайне.
- Ошибки при наполнении контентом.
Рассмотрим основные параметры, которым должен удовлетворять ваш портал. Если вы поставите плюсы в каждой графе - то ваш веб-ресурс идеален для посетителей. Если вы отметите не все пункты - значит, у вас есть, куда расти.
Чек-лист для повышения юзабилити
- Хорошая скорость загрузки страниц.
- Оптимизация под каждый регион.
- Простое переключение на другой язык (при необходимости).
- Адаптивная верстка. Правильное отображение на мобильных устройствах.
- Мобильная версия веб-ресурса.
- Избавление от горизонтальной прокрутки.
- Кнопки заказа - в видимой части.
- Понятные иконки.
- Один стиль дизайна на всех документах.
- Ясность тематики веб-ресурса в любом месте навигации.
- Нахождение популярных элементов на привычных местах (лого - слева вверху и т.п.).
- Активный логотип, ссылка ведет на главную.
- Наличие карты сайта, желательно в футере.
- Запоминающийся фавикон.
- Призывы к действию выделены.
- Русский язык на кнопках в меню. Только понятные термины.
- Полная страница “О нас”: фото сотрудников компании, офиса, рабочего процесса.
- Обработка 404 страницы.
- Контент - по желанию. Не запускается принудительно музыка или видео.
- Нет всплывающих окон, или они имеют ярко выраженную кнопку закрытия.
- Быстрый возврат наверх. Кнопка быстрого скроллинга на длинных страницах.
- Минимум действий от пользователя. Почти все делается скриптами (к примеру, город доставки выставляется по указанному индексу и т.п.).
Дизайн и навигация
- Нет - ярким цветам, огромным или мизерным шрифтам, навязчивой анимации.
- Стандарты восприятия. Цвета применяются с учетом их восприятия. К примеру, красная заливка или цвет - это по умолчанию сообщение об ошибке. Серый текст на светло-серой кнопке - неактивность.
- Нет перегруженности анимацией.
- Нет нагромождения элементов.
- Оптимальные размеры. Все кликабельные элементы не должны рассматриваться под микроскопом. Но переусердствовать тоже не нужно.
- Кликабельность/некликабельность. При наведении на активный элемент курсор видоизменяется на руку.
- Избавление от лишних элементов.
- Всплывающее окно с пояснениями для неактивных элементов.
- Главный контент - слева, потому что мы читаем слева направо.
- Соблюдение F-схемы. Все важные элементы расположены в виде литеры F на странице. Самая главная точка – левый верхний угол страницы.
- Удобное расположение блоков. Они должны говорить посетителю, что под прокруткой тоже есть интересные блоки.
- Нет больших горизонтальных полосок. Они воспринимаются как барьер для дальнейшей прокрутки.
- Правильные честные кнопки и ссылки. Если ссылка “Заказать” отправляет клиента на “О компании” - это плохо.
- Нет ссылок с непонятными названиями: “Продолжить”, “Далее”, “Назад” и т.п.
- Отменяющие кнопки. Размещаются в отдалении от кнопок подтверждения, заметно отличаясь от них.
- Стандартизация ссылок. Все активные ссылки подчеркнутые, выделенные цветом, который меняется после клика.
- Ссылки на скрытый контент - оформляются подчеркиванием пунктиром.
- Анкоры ссылок. В тексте гиперссылки явно указано название объекта.
- Удобство кликов. Короткие ссылки и кнопки неудобны для клика.
- Кликабельная строка навигации «хлебные крошки» - в верхней контентной части документа.
- Заголовок на каждой странице.
- Раздел «Вы смотрели» предусмотрен.
- Грамотная внутренняя перелинковка.
- Главное меню должно быть сквозным и доступным.
- Стандартные названия пунктов меню.
- Выделение того пункта меню, который открыт.
- Простая структура меню (максимум 2 заметных подуровня).
Поиск
- Обязателен простой поиск на сайте, стандартное его размещение.
- Одно поле для ввода искомой информации.
- Подробные результаты поиска.
- Если ничего не найдено - скрипт должен выдать ближайшие варианты, рекомендации по редактированию запроса, расширенный поиск.
Коммуникация
- Контакты - только в текстовом формате, без защиты от копирования.
- Все контактные данные размещаются на всех страницах в одном месте.
- Форма обратной связи - есть.
- Быстрые заказы предусмотрены.
- Полные контакты каждой торговой точки - отдельно. Возможен выбор контактов на карте.
- Печать контактов.
Обратная связь с посетителями
- Можно оставлять сообщения без регистрации.
- Можно входить через соцсети.
- Рабочая защита от спама.
- Форма обратной связи не требует регистрации. Позволяет вводить и просматривать объемное сообщение.
- После нажатия кнопки “Отправить” посетитель получает уведомление с примерным временем ожидания ответа.
- Онлайн-чат с консультантом расположен на заметном месте, но не скрывает контентное поле. Окно доступно круглосуточно. Предоставление точного времени ожидания ответа.
- В чате общается настоящий сотрудник, а не бот.
- Тексты и картинки на сайте
- Читабельные и лаконичные.
- Фокусировка на целевых посетителях.
- Текст разбит на абзацы, списки, заголовки. В конце заголовков не ставятся точки.
- Единообразие шрифтов и их стандартизация.
- Оптимальный размер шрифта.
- Картинки
- Качественные.
- Единообразие изображений.
- Возможность увеличения фото.
Интернет-магазин и его особенности
- На одной странице - около 15 товаров. Пользователь может изменить данное количество и “играть” с типом отображения. Показ товаров из разных категорий при поиске.
- Есть скидки, распродажи и акции в отдельных разделах.
- Нет пустых разделов.
- На странице товара представлена наиболее полная информация вплоть до его количества на складе.
- Заметные и удобные фильтры (размеры, цены и т.п.).
- Мгновенное снятие фильтров.
- Можно сравнивать товары.
- Предусмотрены действия внутри корзины.
- Минимум необходимых действий для заказа.
В Интернете удобство пользования - условие для выживания. Если с веб-ресурсом работать тяжело, то посетители с ним не работают. В Интернете много других сайтов, поэтому первый порыв посетителя - уйти с проблемного сайта. Поэтому работайте над улучшением юзабилити. Если уж вы привлекли трафик (а это довольно сложно), то и удержать, и побудить посетителя к действию - вполне в ваших силах!
