CityHost.UA
Помощь и поддержка

Юзабилити сайта и чеклист по ним

 402
25.09.2019
article

В предыдущей публикации мы уже рассматривали, что такое юзабилити сайта и как оно влияет на ранжирование. Теперь же разберем, как правильно анализировать веб-ресурс на удобство пользования.

Специально для этого ниже приведен чек лист юзабилити сайта. Следуя ему, вы сможете понять, насколько веб-ресурс удобен для пользователей и обнаружите недочеты, которые надо исправить.

Что такое чек лист юзабилити сайта? Это список пунктов, на которые надо обращать внимание. Или, иначе говоря, пошаговая инструкция – простая и понятная даже новичкам.

Основные требования к юзабилити сайта

  1. Быстрая загрузка страниц. Пользователи не будут долго ждать открытия сайта. Всего пару секунд – и они покинут его. Проверить скорость загрузки веб-ресурса можно с помощью любого специализированного сервиса. Например, PageSpeed Insights от Google.
  2. Кроссбраузерная верстка. Сайт должен нормально отображаться в любом браузере. И на любом мониторе вне зависимости от его разрешения.
  3. Адаптивность под мобильные устройства. Сайт должен корректно отображаться на любом смартфоне или планшете. Ведь доля мобильных пользователей составляет свыше 50% (то есть, пользователи чаще посещают сайты со смартфонов, чем с ПК).
  4. Одинаковый стиль. Интерфейс веб-ресурса (шапка, меню, подвал) сделан в одном стиле.
  5. Перезагрузка странички при выборе языка. Откажитесь от перенаправления на главную при выборе другого языка на мультиязычном сайте. Страничка должна просто перезагружаться в том же окне.
  6. Расположение логотипа фирмы. Оптимальное место размещения – верхний левый угол. Причем логотип должен быть кликабельным.
  7. Структура страниц. Каждая страничка должна быть заполнена так, чтобы пользователи определяли тематику сайта по первому экрану (по слогану, изображениям, заголовкам).
  8. Контакты компании. Они обязательно указываются в шапке и футере сайта.
  9. Запоминающийся фавикон. Он отображается не только во вкладке браузера, но и в выдаче Яндекса.
  10. Легкое закрытие всплывающих окон. Это минимизирует раздражение пользователей.
  11. Отсутствие музыки в фоне. Откажитесь от автоматического воспроизведения музыки. Это только раздражает.
  12. Кнопка «Вверх». Она обязательно должна быть на сайте – для возможности быстрой прокрутки вверх.
  13. Настроенная страничка 404. Чем лучше она оформлена – тем выше вероятность, что пользователь продолжит изучение сайта.

Оценка визуального восприятия

Оценка удобства сайта для пользователей выполняется следующим образом:

    1. Определите общее впечатление о веб-ресурсе. Дизайн должен быть приятным, не вызывающим отторжения.
    2. Проверьте, нет ли слишком ярких цветов. Их использование разрешается, но в умеренном количестве.
    3. Убедитесь, что страницы не загромождены различными элементами. Но при этом и не пустые.
    4. Проверьте отображение блоков. Убедитесь, что они не съезжают, не вылезают за рамки и расположены примерно на одном уровне по отношению друг к другу.
    5. Проверьте, что между блоками отсутствует пустое пространство. Особенно в нижней части. Иначе посетители решат, что страница закончилась, и прокручивать ее дальше нет смысла.
  • Убедитесь, что кнопки и блоки имеют оптимальный размер.
  1. Проверьте количество анимированных элементов. От анимации рекомендуется отказаться (либо использовать ее по минимуму).
  2. Убедитесь, что вся важная информация находится в верхнем левом углу. Согласно статистике именно туда чаще всего смотрят пользователи.

Анализ юзабилити веб-ресурса по навигационным инструментам и поиску

Чек лист по оценке юзабилити кнопок и линков:

  1. Если навести курсор на активный элемент, он изменится на «руку».
  2. Каждая кнопка кликабельная, имеет понятное описание.
  3. Кнопки отмены действия находятся на расстоянии от подтверждающих кнопок (чтобы исключить случайное нажатие).
  4. Пользователь должен понимать, куда ведет конкретная ссылка (за счет ее анкора или текста рядом с ней).
  5. Ссылки должны иметь оптимальную длину и стандартный внешний вид (синий цвет, после клика – меняется на фиолетовый).

Чек-лист по проверке юзабилити веб-ресурса по навигации:

  1. Меню доступно с любой страницы. И расположено оно всегда в одном месте.
  2. В мобильной версии сайта меню скрытое, и появляется при щелчке на специальную иконку.
  3. На сайте есть «хлебные крошки», по которым пользователи поймут, где находятся. И при необходимости смогут вернуть на предыдущие уровни.
  4. Страницы «Условия оплаты», «Условия доставки», «Контакты» легко доступны.
  5. Пункты меню лаконичные и начинаются с большой буквы.
  6. По названию заголовка H1 посетители должны понять, о чем страница.
  7. Внутренняя перелинковка продумана грамотно, без тупиков. На каждой страничке должны быть минимум 2-3 ссылки, ведущие на другие товары, разделы, статьи.

Чек-лист по проверке юзабилити формы поиска:

    1. Поисковое поле всего одно. И размещено оно в правом верхнем углу.
    2. При нажатии ЛКМ, поле станет активным. А внутри него отображается курсор.
    3. Поиском удобно пользоваться (он начинается при нажатии специальной иконки или кнопки Enter; запросы с ошибками исправляются автоматом и т.п.).
    4. При вводе первых букв отображается перечень релевантных запросов.
    5. Показывается полная информация о результатах (количество страниц и т.п.).
    6. При отсутствии результатов поиска посетителю предлагаются альтернативные решения (ввести иной запрос и т.п.).
    7. На сайте имеется расширенный поиск (если он нужен).

Чек-лист для проверки юзабилити текстового контента

  1. Текст разделен на абзацы, имеет подзаголовки, маркированные или нумерованные списки. В общем, легко читается. Отдельным плюсом является наличие картинок и таблиц.
  2. Цвет шрифта не сливается с фоном и отчетливо виден.
  3. Текст написан не ради SEO, а для людей. Содержит максимум полезной информации.
  4. Числа в тексте пишутся цифрами. А слишком большие – разделяются пробелами для лучшего восприятия (например, 1 200 500).
  5. Заголовки лаконичные, понятные, передают суть странички.
  6. Если в блоге публикуется разнообразный контент, его надо разделять по темам.
  7. После текста имеется блок с другими статьями, чтобы заинтересовать пользователей остаться на сайте.
  8. В тексте проставлены линки на другие статьи или товарные карточки, категории, подкатегории.
  9. Для всех страничек применяется одинаковый шрифт (в идеале 12-16 пикселей).
  10. Шрифт удобно читается при любом масштабе страницы.

Чек-лист по проверке юзабилити изображений и видеороликов:

  1. Используются только качественные картинки.
  2. Фото подбираются под содержимое страницы и несут определенную смысловую нагрузку.
  3. Картинки должны быть одинаковыми (по размеру, фону, ракурсу).
  4. Фото можно смотреть в полном разрешении (при необходимости).
  5. Видеороликами на сайте можно управлять на свое усмотрение: включать, ставить на паузу, выключать звук.

Узнайте также: Как создать сайт с помощью бесплатного конструктора сайтов.

Анализ юзабилити средств обратной связи и коммуникации с покупателями

  1. Контактные данные указываются в текстовой форме, а не в виде изображения (чтобы их можно было скопировать при необходимости).
  2. На странице «Контакты» разрешено копировать информацию (т.е. отсутствует защита от копирования).
  3. Контактные данные размещаются в шапке и подвале (чтобы они были видны на любой странице).
  4. Обязательное наличие средств для быстрой связи (online-консультант, форма обратного звонка, мессенджеры).

Также надо убедиться, что на странице «Контакты» есть:

  • точный адрес;
  • номера телефонов (в идеале – разных операторов);
  • почтовый адрес;
  • рабочий график;
  • ссылки на соцсети;
  • форма обратной связи;
  • место расположения компании на карте;
  • карта проезда и фото здания (особенно, если офис находится в труднодоступном месте).

Юзабилити формы обратной связи

  1. Форма находится в удобном месте на страничке «Контакты».
  2. Для отправки сообщения не надо регистрироваться – достаточно указать почту или номер телефона, куда придет ответ. Если пользователь случайно закроет форму – текст должен сохраняться.
  3. На почту/телефон приходят оповещения об ответе пользователя.

Online-консультант

  1. Иконка чата заметная, но при этом не закрывает основной контент.
  2. Отправлять сообщение можно в любое время суток (пользователь видит, в сети консультант или нет).
  3. Если консультанта нет в сети, пользователю предлагается оставить свои данные для связи с ним в рабочее время.
  4. В онлайн-чате отображается реальное фото сотрудника магазина.

Комментирование

  1. У пользователей должна быть возможность комментировать статьи и другие отзывы без регистрации. При случайном закрытии странички набранное сообщение сохраняется.
  2. Во избежание ложных отзывов можно добавить быструю авторизацию через соцсети.

Анализ юзабилити товарных категорий онлайн-магазина

  1. На страничке отображается не более 15-20 товаров.
  2. У посетителя есть возможность выбрать количество товаров, которые будут отображаться в списке.
  3. Рекомендуется наличие отдельных разделов с популярными/новыми моделями.
  4. Товар должен содержать фото, название, цену, кнопку «Заказать» и иконку распродажи, если таковая имеется.

Дізнайтеся також: Як створити сайт за допомогою безкоштовного конструктора сайтів.

Проверка юзабилити фильтров

  1. Посетитель может выбирать разные параметры фильтрации, а потом смотреть результат.
  2. Кнопка «Отобразить» или «Применить» хорошо заметна.
  3. Взаимозависимые фильтры синхронизируются предельно быстро. И без перезагрузки странички.
  4. Фильтры, по которым нет результатов, неактивные (чтобы исключить нулевой результат).
  5. Пользователь видит количество товаров, подходящих под выбранные фильтры.
  6. URL страницы динамически меняется при выборе фильтров.
  7. Обязательно имеется кнопка «Сбросить все» (чтобы отобразить стандартный перечень товаров).

Корректность сортировки

  1. Популярные товары отображаются первыми в списке, отсутствующие – последними.
  2. Пользователь может создавать индивидуальную сортировку (от дешевых к дорогим, новинки и т.п.).
  3. Посетитель должен видеть, какая сортировка применяется в данный момент.

Для реализации всех этих моментов нужен нормальный движок. О том, какую выбрать CMS для интернет-магазина мы рассматривали ранее.

Проверка юзабилити регистрационных форм и корзины

Чек-лист по проверке удобства формы заказа:

  1. Количество обязательных для заполнения полей должно быть минимальным (и все они размещаются в одну колонку).
  2. Обязательные для заполнения поля должны выделяться на фоне остальных.
  3. В поле ввода пароля должно отображаться количество введенных символов.
  4. Заполнение формы должно быть удобным (переходить на другие поля можно курсором или клавишами, заполненные строки внешне отличаются от незаполненных).
  5. Все пункты подробно описаны, при необходимости имеются подсказки.
  6. Обязательно проверяется введенная пользователем информация. При неверном заполнении какого-то поля выводится сообщение, где и какая ошибка допущена.
  7. При наличии ошибок введенные в других полях данные не удаляются.
  8. До отправки формы пользователь имеет возможность редактировать любое поле.

Юзабилити регистрационной формы

  1. Пользователь должен понимать, какие плюсы дает регистрация на сайте.
  2. Идеально, если вместо логина будет автоматически «запоминаться» e-mail пользователя.
  3. Обязательно должна быть возможность авторизации через популярные социальные сети.
  4. Отказ от почтовой рассылки осуществляется за пару кликов.
  5. Можно автоматически пройти регистрацию при оформлении покупки (чтобы не вводить одинаковые данные 2 раза).
  6. После регистрации и оформления покупки на e-mail приходит соответствующее письмо.

Оценка юзабилити корзины

  1. Корзина имеет хорошо заметную иконку и находится в привычном для всех месте.
  2. При добавлении продукции в корзину – она изменяется, появляется цифра, отображающая количество добавленных в нее товаров.
  3. На странице «Корзина» нет никакой лишней информации.
  4. Показывается вся необходимая информация о продукции: наименование, фотографии, описание, количество единиц, цена и итоговая стоимость к оплате.
  5. Наименования каждой модели кликабельны. Клиент может прямо из корзины открыть любую товарную карточку.
  6. Пользователь может изменять количество товаров прямо в корзине, а не добавляя каждый из них поштучно.
  7. Посетителю предоставляется возможность добавить или удалить товар. Итоговая стоимость пересчитывается без перезагрузки странички.
  8. После оформления покупки корзина очищается.

Заключение

Теперь вы наверняка понимаете, почему так важно придерживаться чеклиста юзабилити сайта. Да, интернет-магазину нужен надежный и недорогой хостинг сайтов, удобный дизайн, грамотно разработанная структура и т.д. Но важность юзабилити сайта для поисковой оптимизации трудно переоценить. Если пользователи будут заходить и сразу выходить – то не имеет значения, насколько крутым является интернет-магазин. Поведенческие факторы окажутся плохими, и поисковики будут выводить веб-ресурс далеко за пределами ТОП-10. Чтобы этого не допустить, пройдитесь по всем чеклистам и постарайтесь исправить максимум недочетов на вашем сайте.

Публикация была познавательной? Тогда поделитесь ней в социальных сетях и добавляйтесь в наш Telegram канал. Напомним, что заказать дешевый хостинг вы можете у хостинг-компании CityHost. По техническим вопросам обращайтесь в онлайн чат или воспользуйтесь одним из номеру телефона ☎️ 0 800 219 220.


Понравилась статья? Расскажите о ней друзьям: