5 правил удобного сайта, или чек лист по юзабилити

Юзабилити – простота понимания и использования сайта.

С любой страницы посетитель понимает:

Куда попал
Что предлагают
Как получить предложение (читать, заказать, сделать другое целевое действие).

Это не абстрактный термин, существует национальный стандарт по юзабитили ГОСТ Р ИСО 9241-210-2012 «Эргономика взаимодействия человек-система. Часть 210. Человеко-ориентированное проектирование интерактивных систем.

Показатель с высокой значимостью, так как хорошее юзабилити переводит посетителя в покупателя.
Посетитель не будет обдумывать как работать с сайтом. Если пользователь не понял, «что делать» он закроет страницу и уйдет к конкурентам.

В итоге:

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

Почему я пишу о юзабилити

Как разработчик иногда ловлю себя на том что если я что-то считаю понятным для себя, то, пользователю будет понятно. Как выяснилось это не так. Что очевидно для меня, иногда не понятно пользователю.
Заказчик в ТЗ предлагает свое видение проекта, там ситуация еще хуже, чем в примере выше. На мои возражение что структура сайта не логична слышу ответы типа «Надо как у них…», «Хочу кататься на Марусе», «Сайт Мой имени Меня» , и т.п.

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

Если планируете рабочий проект для работы, следуйте дальнейшей информации.

Критерии юзабилити

Базовые критерии юзабилити:

Общее понимание системы. То, насколько легко неопытному пользователю совершать не сложные операции на сайте (понятен ли переход по навигации, мешают визуальные эффекты дизайна или нет, навязчивая реклама или формы призывы к действию и т.д.)
Эффективность – время, затрачиваемое на стандартные операции и количество шагов до получения результата.
Лояльность – удовлетворение потребности пользователя и возвращение на сайт повторно.
Адаптация посетителя – время, когда посетитель адаптируется к сайту (в первый раз, при повторном посещении).
Полезность – на сколько ресурс оправдал ожидания пользователя.

Посетитель должен получить нужный результат за минимум усилий.

Избегайте:

Перегружать сайт рекламой.
Быть излишне навязчивым (всплывающие окна которые трудно закрыть, навязчивые призывы купить / написать.)
Автоматическое воспроизведение аудио/видео.
Использовать «кислотные» цвета для фона или текста.
Длинные не форматированные простыни текста.

Чек лист по юзабилити сайта

При разработке сайтов с нуля, я ориентируюсь на этот чек лист, и стараюсь по возможности выполнить все пункты. Однако это не истина в последней инстанции и сайты должны соответствовать своей тематике. Например, чистый минималистичный сайт вряд ли подойдет для «шашлычной от Ашота». Поэтому рассматривайте информацию как общие базовые рекомендации и соблюдайте базовые принципы юзабилити.

Основные пункты

Адаптивная верстка, корректное отображение в мобильных устройствах.
Установка SSL сертификата. Сертификат безопасности, необходим для безопасного соединения. При его помощи вся информация между пользователем и сайтом шифруется и становится нечитаемой для третьих лиц.
Ненавязчивость – всплывающие окна, которые кроме этого еще перекрывают часть экрана, уже всем надоели. Интерактивные формы должны работать по клику на них.
Короткие и понятные формы заказа. Подсказки после завершенных шагов.
Простые капчи для форм отправки, по возможности лучше сделать невидимые.
Не перегружайте пункты меню (и др. блоки) больше 7 единиц. Особенность восприятия человека 7-/+2 ед
Увеличить скорость загрузки сайта. Подробнее проверяем на PageSpeed или Test My Site. Посетитель не будет ждать больше 2-3 секунд пока сайт грузится. Прежде чем ставить 2-3 слайдера на одну страницу или изображение весом с короткометражный фильм (и такое бывает) подумайте. Дождутся ли загрузки этой красоты?
Правило 3х кликов. Не заставляйте пользователя проходить квест. Сократите количество кликов до цели
Если элемент на сайте большой (заметный), не надо делать его еще больше.
Перевернутая пирамида Пользователь хочет сразу получить информацию, поэтому главную мысль (предложение, форму и т.п.) лучше разместить в начале страницы, а потом обоснование.
Дизайн – спокойный минималистичный дизайн. Часто возникает конфликт между минимализмом и желанием произвести впечатление крутым дизайном. Тут все зависит от тематики сайта, целевой аудитории. Поверьте, и минимализм бывает очень эффектным. О принципах минималистичного дизайна читайте здесь.
Текст написан буквами, т.е. это не изображение с текстом.
Иконки интуитивно понятны, в одном стиле.
Все страницы сайта тоже в одном стиле. Шапка и подвал неизменные (в некоторых случаях на главной выводят другую шапку, но тоже в контексте дизайна)
Стандартные элементы дизайна на привычных местах. логотип — сверху слева, иконка корзины — справа и т.п.
Интерактивные элементы интуитивно понятны, что с ними можно взаимодействовать. Имеют удобный размер, чтобы можно было попасть на них особенно в мобильных устройствах.Соблюдение правил типографики – цвета шрифтов фона, отступы, размеры и т.п.
Легко найти информацию (контакты, разделы и др.) Понятная логичная структура основных элементов сайта (меню, блоки, призывы к действию и т.п.). Вся важная информация на виду.
Наличие иконки сайта favicon
Функциональная страница 404 (имеет ссылки на главную, каталог или карту сайта или форму поиска по сайту)

Внутренняя оптимизация

Для каждой страницы прописаны метатеги title и description, описывающие ее содержание.
Наличие главного заголовка тега H1 (в единственном числе)
Отсутствие пустых страниц или с надписью «в разработке».
Наличие изображений в тексте ( с тегами alt и title)
Отсутствие дублей страниц

Логотип ведет на главную (кроме главной страницы)
Телефоны и почта кликабельные
В шапке основное навигационное меню. Меню не перегружено 5-7 ссылок на важные страницы.
Меню структурировано и логично подробнее о меню здесь.
На внутренних страницах – хлебные крошки
На длинных страницах обязательно кнопка «вверх». Наличие содержания в больших статьях.

Поиск по сайту

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

Кнопки, CTA

Кнопки призыва к действию (СТА) заметны, ненавязчиво привлекают внимание.
На каждой коммерческой странице сайта есть возможность совершить целевое действие.
Названия кнопок говорят пользователю о том, что произойдет по нажатию.
Названия кнопок в форме глагола в начальной форме (отвечает на вопрос «что сделать?»).

Ссылки

Ссылки визуально отличаются от кнопок СТА
Ссылки в тексте выглядят одинаково и заметно отличаются от основного текста — выделены цветом и подчеркнуты
Ссылка в тексте не очень резко выделяется, но в то же время хорошо заметна и понятна.
Ссылки не ведут на свою страницу (если это не якорь на другой раздел)
Если текстовая ссылка используется вместе с иконкой, оба элементы должны быть кликабельными.

Контакты и обратная связь

Номер телефона в правильном формате с кодом региона +7-ххх-ххх-….
Если контактов много, лучше их структурировать по отделам компании, должностям возможно даже с Ф.И.О. и фото ответственных лиц. С указанием времени работы.
Карта проезда. На странице контактов. Не надо размещать ее в подвале, сквозную на всех страницах это значительно замедляет загрузку страницы.
Форма обратной связи — вызывается по клику на кнопку в шапке сайта или находится на странице с контактами.

Текст

Информативные заголовки
Шрифты заголовков одинаковые, не использовать более 2х шрифтов.
Текст отформатирован по правилам типографики. (короткие абзацы, нумерованные списки, контрастный цвет и т.д.)