В предыдущей публикации мы уже рассматривали, что такое юзабилити сайта и как оно влияет на ранжирование. Теперь же разберем, как правильно анализировать веб-ресурс на удобство пользования.
Специально для этого ниже приведен чек лист юзабилити сайта. Следуя ему, вы сможете понять, насколько веб-ресурс удобен для пользователей и обнаружите недочеты, которые надо исправить.
Что такое чек лист юзабилити сайта? Это список пунктов, на которые надо обращать внимание. Или, иначе говоря, пошаговая инструкция – простая и понятная даже новичкам.
Основные требования к юзабилити сайта
- Быстрая загрузка страниц. Пользователи не будут долго ждать открытия сайта. Всего пару секунд – и они покинут его. Проверить скорость загрузки веб-ресурса можно с помощью любого специализированного сервиса. Например, PageSpeed Insights от Google.
- Кроссбраузерная верстка. Сайт должен нормально отображаться в любом браузере. И на любом мониторе вне зависимости от его разрешения.
- Адаптивность под мобильные устройства. Сайт должен корректно отображаться на любом смартфоне или планшете. Ведь доля мобильных пользователей составляет свыше 50% (то есть, пользователи чаще посещают сайты со смартфонов, чем с ПК).
- Одинаковый стиль. Интерфейс веб-ресурса (шапка, меню, подвал) сделан в одном стиле.
- Перезагрузка странички при выборе языка. Откажитесь от перенаправления на главную при выборе другого языка на мультиязычном сайте. Страничка должна просто перезагружаться в том же окне.
- Расположение логотипа фирмы. Оптимальное место размещения – верхний левый угол. Причем логотип должен быть кликабельным.
- Структура страниц. Каждая страничка должна быть заполнена так, чтобы пользователи определяли тематику сайта по первому экрану (по слогану, изображениям, заголовкам).
- Контакты компании. Они обязательно указываются в шапке и футере сайта.
- Запоминающийся фавикон. Он отображается не только во вкладке браузера, но и в выдаче Яндекса.
- Легкое закрытие всплывающих окон. Это минимизирует раздражение пользователей.
- Отсутствие музыки в фоне. Откажитесь от автоматического воспроизведения музыки. Это только раздражает.
- Кнопка «Вверх». Она обязательно должна быть на сайте – для возможности быстрой прокрутки вверх.
- Настроенная страничка 404. Чем лучше она оформлена – тем выше вероятность, что пользователь продолжит изучение сайта.
Оценка визуального восприятия
Оценка удобства сайта для пользователей выполняется следующим образом:
-
- Определите общее впечатление о веб-ресурсе. Дизайн должен быть приятным, не вызывающим отторжения.
- Проверьте, нет ли слишком ярких цветов. Их использование разрешается, но в умеренном количестве.
- Убедитесь, что страницы не загромождены различными элементами. Но при этом и не пустые.
- Проверьте отображение блоков. Убедитесь, что они не съезжают, не вылезают за рамки и расположены примерно на одном уровне по отношению друг к другу.
- Проверьте, что между блоками отсутствует пустое пространство. Особенно в нижней части. Иначе посетители решат, что страница закончилась, и прокручивать ее дальше нет смысла.
- Убедитесь, что кнопки и блоки имеют оптимальный размер.
- Проверьте количество анимированных элементов. От анимации рекомендуется отказаться (либо использовать ее по минимуму).
- Убедитесь, что вся важная информация находится в верхнем левом углу. Согласно статистике именно туда чаще всего смотрят пользователи.
Анализ юзабилити веб-ресурса по навигационным инструментам и поиску
Чек лист по оценке юзабилити кнопок и линков:
- Если навести курсор на активный элемент, он изменится на «руку».
- Каждая кнопка кликабельная, имеет понятное описание.
- Кнопки отмены действия находятся на расстоянии от подтверждающих кнопок (чтобы исключить случайное нажатие).
- Пользователь должен понимать, куда ведет конкретная ссылка (за счет ее анкора или текста рядом с ней).
- Ссылки должны иметь оптимальную длину и стандартный внешний вид (синий цвет, после клика – меняется на фиолетовый).
Чек-лист по проверке юзабилити веб-ресурса по навигации:
- Меню доступно с любой страницы. И расположено оно всегда в одном месте.
- В мобильной версии сайта меню скрытое, и появляется при щелчке на специальную иконку.
- На сайте есть «хлебные крошки», по которым пользователи поймут, где находятся. И при необходимости смогут вернуть на предыдущие уровни.
- Страницы «Условия оплаты», «Условия доставки», «Контакты» легко доступны.
- Пункты меню лаконичные и начинаются с большой буквы.
- По названию заголовка H1 посетители должны понять, о чем страница.
- Внутренняя перелинковка продумана грамотно, без тупиков. На каждой страничке должны быть минимум 2-3 ссылки, ведущие на другие товары, разделы, статьи.
Чек-лист по проверке юзабилити формы поиска:
-
- Поисковое поле всего одно. И размещено оно в правом верхнем углу.
- При нажатии ЛКМ, поле станет активным. А внутри него отображается курсор.
- Поиском удобно пользоваться (он начинается при нажатии специальной иконки или кнопки Enter; запросы с ошибками исправляются автоматом и т.п.).
- При вводе первых букв отображается перечень релевантных запросов.
- Показывается полная информация о результатах (количество страниц и т.п.).
- При отсутствии результатов поиска посетителю предлагаются альтернативные решения (ввести иной запрос и т.п.).
- На сайте имеется расширенный поиск (если он нужен).
Чек-лист для проверки юзабилити текстового контента
- Текст разделен на абзацы, имеет подзаголовки, маркированные или нумерованные списки. В общем, легко читается. Отдельным плюсом является наличие картинок и таблиц.
- Цвет шрифта не сливается с фоном и отчетливо виден.
- Текст написан не ради SEO, а для людей. Содержит максимум полезной информации.
- Числа в тексте пишутся цифрами. А слишком большие – разделяются пробелами для лучшего восприятия (например, 1 200 500).
- Заголовки лаконичные, понятные, передают суть странички.
- Если в блоге публикуется разнообразный контент, его надо разделять по темам.
- После текста имеется блок с другими статьями, чтобы заинтересовать пользователей остаться на сайте.
- В тексте проставлены линки на другие статьи или товарные карточки, категории, подкатегории.
- Для всех страничек применяется одинаковый шрифт (в идеале 12-16 пикселей).
- Шрифт удобно читается при любом масштабе страницы.
Чек-лист по проверке юзабилити изображений и видеороликов:
- Используются только качественные картинки.
- Фото подбираются под содержимое страницы и несут определенную смысловую нагрузку.
- Картинки должны быть одинаковыми (по размеру, фону, ракурсу).
- Фото можно смотреть в полном разрешении (при необходимости).
- Видеороликами на сайте можно управлять на свое усмотрение: включать, ставить на паузу, выключать звук.
Узнайте также: Как создать сайт с помощью бесплатного конструктора сайтов.
Анализ юзабилити средств обратной связи и коммуникации с покупателями
- Контактные данные указываются в текстовой форме, а не в виде изображения (чтобы их можно было скопировать при необходимости).
- На странице «Контакты» разрешено копировать информацию (т.е. отсутствует защита от копирования).
- Контактные данные размещаются в шапке и подвале (чтобы они были видны на любой странице).
- Обязательное наличие средств для быстрой связи (online-консультант, форма обратного звонка, мессенджеры).
Также надо убедиться, что на странице «Контакты» есть:
- точный адрес;
- номера телефонов (в идеале – разных операторов);
- почтовый адрес;
- рабочий график;
- ссылки на соцсети;
- форма обратной связи;
- место расположения компании на карте;
- карта проезда и фото здания (особенно, если офис находится в труднодоступном месте).
Юзабилити формы обратной связи
- Форма находится в удобном месте на страничке «Контакты».
- Для отправки сообщения не надо регистрироваться – достаточно указать почту или номер телефона, куда придет ответ. Если пользователь случайно закроет форму – текст должен сохраняться.
- На почту/телефон приходят оповещения об ответе пользователя.
Online-консультант
- Иконка чата заметная, но при этом не закрывает основной контент.
- Отправлять сообщение можно в любое время суток (пользователь видит, в сети консультант или нет).
- Если консультанта нет в сети, пользователю предлагается оставить свои данные для связи с ним в рабочее время.
- В онлайн-чате отображается реальное фото сотрудника магазина.
Комментирование
- У пользователей должна быть возможность комментировать статьи и другие отзывы без регистрации. При случайном закрытии странички набранное сообщение сохраняется.
- Во избежание ложных отзывов можно добавить быструю авторизацию через соцсети.
Анализ юзабилити товарных категорий онлайн-магазина
- На страничке отображается не более 15-20 товаров.
- У посетителя есть возможность выбрать количество товаров, которые будут отображаться в списке.
- Рекомендуется наличие отдельных разделов с популярными/новыми моделями.
- Товар должен содержать фото, название, цену, кнопку «Заказать» и иконку распродажи, если таковая имеется.
Дізнайтеся також: Як створити сайт за допомогою безкоштовного конструктора сайтів.
Проверка юзабилити фильтров
- Посетитель может выбирать разные параметры фильтрации, а потом смотреть результат.
- Кнопка «Отобразить» или «Применить» хорошо заметна.
- Взаимозависимые фильтры синхронизируются предельно быстро. И без перезагрузки странички.
- Фильтры, по которым нет результатов, неактивные (чтобы исключить нулевой результат).
- Пользователь видит количество товаров, подходящих под выбранные фильтры.
- URL страницы динамически меняется при выборе фильтров.
- Обязательно имеется кнопка «Сбросить все» (чтобы отобразить стандартный перечень товаров).
Корректность сортировки
- Популярные товары отображаются первыми в списке, отсутствующие – последними.
- Пользователь может создавать индивидуальную сортировку (от дешевых к дорогим, новинки и т.п.).
- Посетитель должен видеть, какая сортировка применяется в данный момент.
Для реализации всех этих моментов нужен нормальный движок. О том, какую выбрать CMS для интернет-магазина мы рассматривали ранее.
Проверка юзабилити регистрационных форм и корзины
Чек-лист по проверке удобства формы заказа:
- Количество обязательных для заполнения полей должно быть минимальным (и все они размещаются в одну колонку).
- Обязательные для заполнения поля должны выделяться на фоне остальных.
- В поле ввода пароля должно отображаться количество введенных символов.
- Заполнение формы должно быть удобным (переходить на другие поля можно курсором или клавишами, заполненные строки внешне отличаются от незаполненных).
- Все пункты подробно описаны, при необходимости имеются подсказки.
- Обязательно проверяется введенная пользователем информация. При неверном заполнении какого-то поля выводится сообщение, где и какая ошибка допущена.
- При наличии ошибок введенные в других полях данные не удаляются.
- До отправки формы пользователь имеет возможность редактировать любое поле.
Юзабилити регистрационной формы
- Пользователь должен понимать, какие плюсы дает регистрация на сайте.
- Идеально, если вместо логина будет автоматически «запоминаться» e-mail пользователя.
- Обязательно должна быть возможность авторизации через популярные социальные сети.
- Отказ от почтовой рассылки осуществляется за пару кликов.
- Можно автоматически пройти регистрацию при оформлении покупки (чтобы не вводить одинаковые данные 2 раза).
- После регистрации и оформления покупки на e-mail приходит соответствующее письмо.
Оценка юзабилити корзины
- Корзина имеет хорошо заметную иконку и находится в привычном для всех месте.
- При добавлении продукции в корзину – она изменяется, появляется цифра, отображающая количество добавленных в нее товаров.
- На странице «Корзина» нет никакой лишней информации.
- Показывается вся необходимая информация о продукции: наименование, фотографии, описание, количество единиц, цена и итоговая стоимость к оплате.
- Наименования каждой модели кликабельны. Клиент может прямо из корзины открыть любую товарную карточку.
- Пользователь может изменять количество товаров прямо в корзине, а не добавляя каждый из них поштучно.
- Посетителю предоставляется возможность добавить или удалить товар. Итоговая стоимость пересчитывается без перезагрузки странички.
- После оформления покупки корзина очищается.
Заключение
Теперь вы наверняка понимаете, почему так важно придерживаться чеклиста юзабилити сайта. Да, интернет-магазину нужен надежный и недорогой хостинг сайтов, удобный дизайн, грамотно разработанная структура и т.д. Но важность юзабилити сайта для поисковой оптимизации трудно переоценить. Если пользователи будут заходить и сразу выходить – то не имеет значения, насколько крутым является интернет-магазин. Поведенческие факторы окажутся плохими, и поисковики будут выводить веб-ресурс далеко за пределами ТОП-10. Чтобы этого не допустить, пройдитесь по всем чеклистам и постарайтесь исправить максимум недочетов на вашем сайте.
Публикация была познавательной? Тогда поделитесь ею в социальных сетях и добавляйтесь в наш Telegram канал. Напомним, что заказать дешевый хостинг вы можете у хостинг-компании CityHost. По техническим вопросам обращайтесь в онлайн чат или по телефону ☎️ 0 800 219 220.
Понравилась статья? Расскажите о ней друзьям: 
