Содержание показать ↓
Юзабилити – простота понимания и использования сайта.
С любой страницы посетитель понимает:
- Куда попал
- Что предлагают
- Как получить предложение (читать, заказать, сделать другое целевое действие).
Это не абстрактный термин, существует национальный стандарт по юзабитили ГОСТ Р ИСО 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х шрифтов.
- Текст отформатирован по правилам типографики. (короткие абзацы, нумерованные списки, контрастный цвет и т.д.)
Похожая тема
