Проблемы с навигацией, недочеты в визуальном оформлении или текстовом контенте, неправильная работа функционала – всё это можно выявить с помощью юзабилити-аудита.
Результатом станет документ, в котором будут подробно расписаны проблемы сайта и предложены их решения. Это может быть дополнено примерами удачного решения аналогичных проблем.
Выявленные проблемы стоит распределить по их приоритетности, для повышения эффективности дальнейших этапов их исправления.
Что нужно проверить в первую очередь
Яндекс.Метрика и Google Analitics – на сегодняшний день наиболее популярные системы аналитики, которые могут помочь выявить множество проблем.
Наиболее полезной информацией в нашем случае будет список самых популярных страниц сайта, способы перехода на них, используемые устройства, а так же список проблемных страниц с высоким уровнем отказов, и пути пользователей на сайте.
Анализ путей пользователей, нахождение проблем и поиск решения по их преодолению. Сами пути вы сможете найти среди данных в системах аналитики, а вот проанализировать их и разработать новый оптимальный путь пользователя на сайте вы сможете как сами, так и с помощью специалистов.
Проверка соответствия сайта 10-ти эвристикам Нильсона. Это не конкретные правила для каждого, это больше рекомендации, подходящие ко всем системам, с которыми взаимодействуют пользователи.
Экспертная оценка. Нельзя недооценивать консультации специалистов, которые могут предложить решение на основе своего опыта. Но в целом вы и сами можете провести аудит юзабилити, имея базовые знания в этой области.
В данной статье мы не будем подробно рассматривать эвристики Нильсона – по ним много информации в интернете. Мы рассмотрим этапы проведения анализа и моменты, на которые стоит обратить внимание.
Внимательно пройдитесь по пунктам, и ваш ресурс станет значительно удобней для будущих клиентов.
Основное
Адаптивность сайта. Он должен корректно отображаться на мобильных устройствах и на больших экранах компьютеров. Важно, чтобы отсутствовала горизонтальная полоса прокрутки, так как ею неудобно пользоваться, а многие люди её вообще не замечают и могут пропустить важный функционал.
Какие разрешения экранов нужно учесть именно в вашем случае помогут определить системы аналитики.
Быстрая загрузка сайта. Оптимальное время загрузки 1-2 секунды. Если сайт загружается более 3 секунд, то более половины пользователей его покидают – это доказано. Измерить скорость загрузки вы можете не только «на глаз», существует множество онлайн сервисов, которые помогут вам, например PageSpeed или Test My Site.
SSL-сертификат. Он должен быть установлен. Это базовая безопасность пользователей сайта и к его установке критично относится большинство поисковых систем, снижая рейтинг вашего сайта при его отсутствии.
Понятная главная страница. Попадая на первую страницу сайта, пользователь должен чётко понимать, чем занимается компания, какие услуги она предоставляет, поможет она пользователю или нет.
Корректный регион. Если компания работает в нескольких регионах и информация меняется при выборе одного из них, то пользователь должен быстро ориентироваться с переключением, а при попадании на сайт должен быть уже выбран его регион.
Фавикон. Миниатюра логотипа среди вкладок поможет без труда найти открытую страницу, а так же придаст вашему сайту большую узнаваемость.
Вход с помощью социальных сетей. Он значительно облегчает использование сайта, для которого требуется личный кабинет. Большинство клиентов не любит регистрироваться на сервисах, а иметь возможность быстрого доступа к их функционалу с помощью входа через соц. сети создает у них приятное впечатление.
Карта сайта и страницы ошибок. Если ваш сайт столкнулся с какой-либо проблемой, пользователь должен четко понимать, что дело не в нём, просто идут какие-то работы, страница снята с публикации или иные причины. При попадании на такую страницу пользователь должен иметь возможность быстро перейти на другой раздел сайта или вернуться на предыдущую страницу, не забывайте, что одна страница с ошибкой не должна стать концом посещения всего ресурса.
Основные разделы и страницы. Навигация по разделам должна быть предельно удобной, интуитивно понятной. Облегчить эту задачу может поиск по сайту и карта сайта. Еще стоит отметить, что не должно быть пустых страниц.
Меню, шапка и подвал
Логотип должен открывать главную страницу сайта.
Электронная почта и телефоны должны иметь разметку ссылок с параметрами для совершения соответствующего действия: звонка или отправки письма.
Главное меню должно содержать основные разделы, которые дублируются в подвале сайта.
Рекомендуемое число пунктов главного меню – 7-8.
Последний и первый пункт меню запоминаются лучше всех, поэтому порядок пунктов должен быть осмысленным – от более важного к менее важному.
Положение пользователя на сайте должно быть выделено активным пунктом.
Постраничная навигация
Хлебные крошки обязательны для размещения на каждой странице сайта, они значительно облегчают ориентирование по разделам.
Кнопка назад должна работать во всех браузерах и переносить пользователя на предыдущую просмотренную страницу.
Если на сайте много длинных страниц, то желательно размещение кнопки скролла «в начало».
Каждая страница начинается с заголовка уровня H1.
Не должно быть тупиковых страниц. С каждой страницы пользователь имеет возможность перейти в другие разделы или похожие материалы.
Поиск
Поиск размещен в шапке и может быть продублирован на отдельной странице при необходимости.
Желательно, чтобы поиск предлагал результаты уже во время введения пользователем поисковой фразы в строку.
Для сайтов с большим количеством информации поиск должен предлагать исправления для поисковой фразы.
Приветствуется сортировка результатов поиска.
Запуск поиска происходит по клику на специальную кнопку или нажатию кнопки Enter.
При отсутствии результатов должно появляться предупреждение, нельзя показывать совершенно пустую страницу.
Дизайн и UI
Многие графические дизайнеры изучают юзабилити сайта и применяют его на практике. Чтобы выбрать грамотного специалиста, оценить его работу или внести в неё корректные правки стоит и самим изучить этот вопрос хотя бы поверхностно.
Существуют основные правила для удобного и понятного оформления страниц.
Внутреннее расстояние всегда должно быть меньше внешнего. Если это слова то имеется в виду интервал между букв и интервал между отдельными словами. Аналогично интервал между словами и между строками, между строками и абзацами и вокруг текста.
Близко расположенные объекты воспринимаются как один.
Все страницы должны быть единообразны – шапка и подвал повторяются, навигация однотипная.
Иконки и различные элементы сайта находятся в одном стиле и интуитивно понятны.
Стоит соблюдать привычное расположение для некоторых элементов. Например, логотип слева, корзина справа в шапке сайта. Кнопка «да» правее, кнопка «нет» левее.
Значимость контента слева-направо, как мы привыкли читать.
Между элементами достаточно места, отсутствует нагроможденность, информация легко читается.
Кликабельные элементы очевидны, пользователь знает, что может с ними взаимодействовать. При этом каждый элемент имеет три состояния: неактивное, при наведении и при нажатии на него.
Текстовое наполнение должно быть текстовым, не стоит заменять его на изображение текста.
Текст структурирован по смыслу и разделен на абзацы, списки и т.д.
На первом экране видно, что дальше присутствует еще контент.
Доступность
Особо важно для массовых сервисов или интернет магазинов соблюдать доступность ресурса для всех категорий пользователей.
Контрастность позволяет лучше воспринимать текстовую и графическую информацию.
Размер шрифта должен быть удобным для чтения.
Перемещение с помощью клавиатуры должно сопровождаться фокусом элементов на экране.
Упрощенный режим или версия для слабовидящих могут быть обязательными для некоторых видов ресурсов, например, медицинская тематика, государственные порталы и т.д.
Кнопки, ссылки, CTA
Ключевые элементы должны быть хорошо заметны и контрастны по отношению к остальному контенту страницы.
Используйте ссылки для перехода между страницами, а для конкретного действия лучше использовать кнопку.
Если действий предложено несколько, стоит выделить ключевое из них.
Кнопки должны однозначно говорить о том, какое действие они совершают. Чтобы не формулировать сложные названия кнопок, лучше добавить рядом подсказку.
На всех коммерческих страницах должна быть возможность совершить покупку или другое целевое действие.
Оформление ссылок должно быть единым на всём сайте, причем ранее использованные ссылки выделяются другим цветом.
Для действия без перезагрузки ссылка выделяется пунктирным подчеркиванием.
Ссылка, ведущая на страницу с альтернативным действием, открывается в новой вкладке и имеет иконку обозначения открытия в новом окне.
Когда ссылка сопровождается иконкой, то они обе должны быть кликабельны.
Ссылки не должны вести на текущую страницу, исключение – якоря, используемые в навигации по странице.
Элементы выбора
Рекомендуется размещать в один столбец, в строку они воспринимаются как единое целое.
Иконка выбора и текст должны быть оба кликабельны как для установки, так и для снятия выбора.
При наличии более пяти вариантов, рекомендуется для чекбоксов добавить кнопку снятия всех выбранных вариантов, для радиобатонов – оформить их в виде выпадающего списка.
Не должно быть выбрано по умолчанию никакого варианта, если выбор пользователя не очевиден или нет варианта «затрудняюсь ответить», «любой», «все» или иного похожего по смыслу.
В выпадающем списке не должно быть более 20 ответов, если их больше, то лучше разместить комбинированный список.
Если в выпадающем списке ничего не выбрано по умолчанию, то должен быть размещен вспомогательный текст, например, «выберите категорию».
Значения в списках выбора должны быть структурированы по смыслу или отсортированы по алфавиту.
Контактные данные
У телефона необходимо указывать полный формат с кодом города.
Большая страница контактов должна быть разделена на смысловые блоки, например, по отделам организации.
Если офисов несколько, то на карте можно отобразить главный, или офис, который занимается напрямую работой с клиентами.
Информацию о нескольких офисах на карте, стоит продублировать текстовым списком.
Контакты сотрудников обязательно необходимо сопровождать их ФИО, должностью и желательно фотографией.
Формы обратной связи должно быть легко найти.
При наличии онлайн-консультанта, он не должен перекрывать контент сайта.
Формы
Структура, содержание, заполнение
Форма собирает минимум полей, которые обязательны для формирования заявки.
Порядок полей должен быть организован в логическом порядке от общего к частному.
Длинные поля в форме обязательно размещаются в один столбец, даже короткие поля лучше размещать в один столбец.
Большие формы с множеством действий следует разделять на отдельные шаги.
Оповестите пользователя о том, что произойдет после отправки данных.
Обязательные поля стоит выделить среди необязательных, либо добавить подпись, что все поля обязательны к заполнению.
Чтобы помочь пользователю правильно заполнить форму, разместите в поле ввода подсказку о допустимом формате данных, добавьте маску.
При неверном заполнении полей, необходимо выводить оповещение с перечнем полей, либо явно подсвечивать их в форме.
После отправки должно появиться сообщение об успешной отправке.
Модальные окна должны иметь заметную кнопку закрытия окна, и возможность закрыть окно кликом вне его области.
Наполнение
Заголовки отображают смысл дальнейшего текста.
Текст должен быть понятен и интересен, помогать пользователю найти решение его задачи.
Лучше сделать краткий структурированный текст, чем написать статью с множеством «воды».
Орфографические и грамматические ошибки должны отсутствовать.
Важную информацию можно выделить жирным начертанием.
Длинные числовые значения разбиваются пробелом на порядки для лучшего восприятия.
Таблицы должны иметь корректное выравнивание.
Не стоит дублировать в каждой ячейке таблицы единицы измерения, лучше вывести их в первый столбец или строку.
Все изображения должны иметь хорошее качество.
Ко всем изображениям должны быть прописаны читаемые alt и title.
При возможном увеличении картинки, стоит открывать её в модальном окне, а не в новой или текущей вкладке браузера.
В заключении хотелось бы отметить, что это не конечный список.
У каждого сайта своя аудитория и свои требования, и подходить к ним стоит индивидуально.
Человек, проверяющий сайт на юзабилити должен быть компетентен в базовых вопросах сайтостроения.
В любом случае профессиональное мнение специалиста или заинтересованный взгляд собственника бизнеса на удобство сайта, может быть не совсем актуален для аудитории. Поэтому стоит обратить внимание на возможность проведения A/B-тестирования.
