Юзабилити показывает, насколько удобно пользоваться сайтом. Этот показатель напрямую влияет на посещаемость и доходность веб ресурса. Мы составили чек-лист улучшения юзабилити сайта и подборку инструментов для оптимизации.
Для чего нужно улучшать юзабилити
Usability в переводе с английского языка значит «удобство использования». Чтобы сайт работал и приносил прибыль, он должен быть простым и понятным. Пользователь должен сразу видеть, где найти нужную информацию, как выбрать товары по параметрам, где получить ответы на вопросы.
Оформление должно мягко подводить к целевому действию:
- указанию контактного номера;
- исходящему телефонному звонку;
- заказу товаров через Корзину.
Если сайт долго загружается или выглядит непонятным, то пользователь закроет страницу и уйдет к конкурентам. Проблемы с поиском товара, неудачные визуальные решения, отсутствие номеров на видном месте и другие недоработки приводят к тому, что пользователь закрывает вкладку.
После повышения юзабилити пользователи начинают проводить больше времени на страницах. В результате покупателям становится легче выбрать и заказать товар. Сайт организации начинает приносить больше дохода, вложения в рекламу лучше окупаются.
Поэтапный чек-лист по аудиту
Мы подготовили базовый чек-лист для повышения удобства сайта. В нем перечислены типичные ошибки, которые делают начинающие веб мастера. Индивидуальная стратегия должна учитывать опыт клиентов вашего бизнеса. Вы можете провести опрос, чтобы узнать, какие моменты следует доработать на основе комментариев.
Анализ технических характеристик
При проверке технических параметров следует обратить внимание на:
- Скорость загрузки данных.
- Определение местоположения и языка посетителей.
- Наличие адаптации для мобильных устройств.
- Установку фавикона и сниппета.
- Шаблон оформления страницы 404.
Скорость загрузки страниц влияет на посещаемость сайта. Исследования Google показывают, что 90% пользователей закрывают вкладку, если страница не загрузилась за 15 секунд. Оптимальное время загрузки не более 1−2 секунд. Ускорить загрузку помогает оптимизация кода, снижение веса картинок, анимаций, аудиофайлов и видеороликов.
Автоматическое определение языка и месторасположения повышает лояльность пользователей. Компания, которая работает в регионах и за рубежом, может создавать поддомены для каждого филиала. Наличие поддоменов помогает настроить рекламу для привлечения трафика, повышает рейтинг в поисковой системе. Для регионов следует указать контакты филиала и главного офиса.
Большая часть людей пользуется интернетом с мобильных телефонов. Чтобы сайт приносил доход, мобильная часть должна работать настолько же хорошо, как и десктопная. При проведении аудита можно оценить, как выглядит платформа на смартфонах и планшетах, удобно ли с ней работать. Для проверки можно использовать сервис «I love adaptive» или аналоги.
На открытой вкладке с сайтом присутствуют фавикон и сниппет. Фавикон — это маленький логотип компании или онлайн платформы. Сниппет — это краткое описание, которое помогает определить нужную вкладку среди многих. Иконка и надпись должны выделять ваш сайт на верхней панели в браузере.
Страница 404 появляется на экране, когда при обработке запроса возникает ошибка. В 2022 году многие веб мастера делают страницу креативной, чтобы проблема не расстроила пользователя, и он остался на сайте. Удержать посетителя помогают ссылки на окно поиска, главные разделы и стартовую страницу, а также раздел с контактами.
Оценка дизайна
На визуальное восприятие платформы влияет несколько пунктов:
- Цветовая палитра.
- Свободное пространство.
- Паттерны сканирования.
- Кликабельные элементы.
У веб мастеров есть негласные правила по использованию цвета. Голубой указывает на активную ссылку, а серый — на неактивную. Зеленый цвет указывает на правильное заполнение контактной формы и кнопки, которые можно нажать. Красный цвет выделяет сообщения об ошибках и кнопку отмены. Не стоит использовать цветовую палитру, отличную от стандартной, чтобы не оттолкнуть пользователей.
В шаблоне должно быть достаточно свободного места. Большие изображения и видео делают оформление перегруженным. Цвет заголовков и текстов должен выделяться на фоновом цвете. Для оформления лучше выбрать нейтральные офисные шрифты без украшений.
При выборе расположения блоков на странице следует учитывать паттерны сканирования. Люди читают информацию слева направо, как книгу. Многие пользователи оценивают сайты по модели F (траектория движения взгляда похожа на букву). Ключевые элементы должны быть установлены там, где их точно заметят.
Кликабельные элементы важно выделять с помощью цвета, расположения и формы. Посетитель должен понимать, что есть возможность нажать на кнопку или ссылку.
Проверка контента
На продающем сайте должно быть достаточно информации о продукте. В первую очередь следует заполнить основные разделы:
- карточки товаров;
- описания услуг;
- сроки выполнения заказов;
- условия доставки товаров;
- ответы на частые вопросы;
- реквизиты и контакты организации;
- контакты службы поддержки.
На каждой странице может быть несколько кнопок для целевого действия. В описаниях требуется использовать лаконичные формулировки: «Купить», «Заказать», «В Корзину», «Перезвоните мне»
Важную информацию о товарах следует публиковать текстом, а не объяснять с помощью видео и фотографий. У пользователя может не быть времени на просмотр видеоролика и пролистывание фото инструкции. Если номер телефона и email указаны текстом, пользователь может позвонить или начать писать письмо за 1 клик.
На сайте обязательно указать информацию о юридическом лице: реквизиты, контактные данные, время работы. На странице с контактами можно разместить интерактивную карту, показывающую расположение филиалов. При большом количестве адресов можно поставить фильтр по району и ближайшей станции метро.
Проверка навигации
Процесс перехода между страницами должен быть максимально удобным для пользователей. На какие пункты необходимо обратить внимание:
- Расположение поиска по материалам.
- «Хлебные крошки»: маршрут по разделам.
- Быстрый доступ к форме регистрации.
- Наличие виртуального помощника.
- Форма отправки заявки с контактами.
Окно для поиска следует расположить на видном месте в верхней части страницы. Пользователь должен понимать, как найти нужный товар в каталоге. Чем больше возможностей вы добавите для сортировки каталога, тем удобнее покупателям делать заказы.
«Хлебные крошки» — это маршрут посетителя по разделам сайта. Пользователь должен видеть пройденный маршрут и иметь возможность вернуться в любой просмотренный раздел.
Открытие формы для создания аккаунта должно быть доступно с любой страницы сайта. Разделы формы должны быть интуитивно понятными. Упростить процедуру помогает функция авторизации через социальные сети.
Уменьшить нагрузку на консультантов позволяет чат-бот, отвечающий на стандартные вопросы и комментарии. При сложной задаче должна включаться переадресация на специалиста поддержки. Окно чат-бота и диалога с консультантом должно быть заметным, но не отвлекать пользователя от просмотра контента.
На каждой странице должно присутствовать окно для сбора заявок. Интерфейс окна должен быть простым: достаточно попросить пользователя ввести номер для связи. Существуют приложения, предлагающие ввести номер по триггеру. Например, инструмент Ловец Лидов срабатывает, если пользователь или долго просматривает страницу.
Инструменты для веб мастера
Вебвизор — инструмент, разработанный компанией Яндекс. Он помогает собирать информацию о том, что люди делают на страницах. Программа создает видео для показа кликов, выделения текста мышкой, ввода данных. Видео показывает, что делал пользователь и что он пытался найти, когда решил покинуть сайт. Вебвизор помогает исправить недочеты и сделать интерфейс удобнее.
Карта кликов показывает, на какие области часто кликают пользователи. Можно получить данные по одной странице, разделу или площадке. Программа подсвечивает области нажатия мышкой с помощью цветов. Чем ярче выделение, тем больше кликов приходится на указанную область.
Карта скроллинга помогает выбрать длину страницы и выбрать оптимальное расположение для блоков. Инструмент показывает, сколько времени люди проводят на каждом участке странице. Он помогает исправить недочеты, связанные с версткой.
На платформе UsabilityHub можно тестировать платформу с помощью реальных людей. Система помогает достигнуть цели по оптимизации площадки. UsabilityHub предлагает несколько категорий тестов:
- Five Second Test. Оценка первого впечатления от площадки за 5 секунд.
- Click Test. Тепловая карта кликов на указанной странице.
- Navigation Test. Проверка маршрутов пользователей по разделам.
- Preference Test. Сравнение вариантов интерфейса для выбора одного результата.
Работать на UsabilityHub можно в бесплатном и платном режиме. При оплате подписки откроются выбранные способы проверки. В бесплатной версии можно зарабатывать баллы, оценивая сайты других веб мастеров, и оплачивать рейтингом аудит площадки.
Работа по улучшению usability увеличивает прибыль с сайта. Исправление технических ошибок и обновление верстки делает проект привлекательным для целевой аудитории. Простой и быстрый поиск товаров, удобное оформление заказа мотивируют клиентов совершать покупки на сайте. Предложенный чек-лист и перечень инструментов помогут вам оптимизировать ресурс и повысить конверсию.
