Юзабилити сайта – что это, и как его использовать

Юзабилити сайта – что это, и как его использовать
Юзабилити сайта – как его использовать

Сайт должен быть удобным для пользователей, иметь качественный контент, привлекательный дизайн и хорошую техническую оснащённость. Все эти факторы непосредственно влияют на эффективность посадочной страницы и уровень доверия аудитории. Если сайт непригоден для использования, то бюджет, потраченный на его создание, будет потерян, так как пользователь не сможет найти и купить то, что ему нужно.

В этой статье мы рассмотрим, что такое юзабилити (usability - удобство использования) сайта и как его улучшить.

Что такое юзабилити?

Удобство использования сайта - это его способность быть удобным и понятным для пользователей.

Его главное предназначение заключается в обеспечении лёгкого доступа посетителей к необходимой информации, избегая запутанности в функционале и страницах и обеспечивая приятные визуальные впечатления от взаимодействия с ресурсом. Если на странице с информацией покупка или поиск нужного раздела затруднительны, то это указывает на недостаточную проработку юзабилити. И наоборот, когда удобство использования на высоком уровне, пользователи возвращаются на сайт и активно взаимодействуют с ним.

При оценке юзабилити следует опираться на 5 основных составляющих:

Лёгкость освоения. Насколько будет легко новым посетителям выполнять действия на сайте.

Эффективность сайта измеряется скоростью ориентирования посетителей после ознакомления с ним.

Запоминаемость определяется лёгкостью взаимодействия с сайтом после долгого отсутствия. Ошибки пользователей и их способность находить решения влияют на наработку опыта использования сайта.

Удовлетворенность посетителей отражает их удовольствие от пребывания на сайте.

Соблюдение этих принципов юзабилити приведёт к увеличению конверсии и посещаемости сайта. Исследования Creative Good показало, что интуитивно понятный процесс оформления заказа увеличивает процент покупателей на 40%, а сумма заказа увеличивается в среднем на 10%.

Маркетологи Staples.com с помощью тестирования юзабилити достигли следующих результатов: количество повторных покупок увеличилось на 66%, отток снизился на 30-45%, трафик вырос на 75%.

Как улучшить удобство использования сайта

Разрабатываем стратегию навигации

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

  • Избегайте использования необычных дизайнерских решений в навигации сайта. Например, пользователи привыкли к тому, что логотип всегда находится в верхнем левом углу страницы, и нажатие мышкой по нему автоматически возвращает их на главную страницу. Это стандартное поведение, поэтому лучше оставить логотип на привычном месте и не перемещать его. Исследования показали, что, когда логотип был в привычном месте, посетители в шесть раз чаще успешно попадали на главную страницу, чем, когда он был в центре или справа. Перемещение логотипа в правую сторону приводило к ещё большему количеству ошибок.
  • Не нагромождайте меню. Включайте только самые важные элементы, а остальные группируйте в подменю. Например, разделы с курсами, вебинарами и видеоинструкциями можно объединить в один пункт "Обучение". Важно не переборщить - слишком много выпадающих списков меню может создать впечатление беспорядка.
  • Располагайте менее важные пункты меню в центре, учитывая, что пользователь прочитывает текст слева-направо и обращает внимание на первые и последние пункты.
  • Используйте перекрёстные ссылки. Перелинковка помогает пользователю попасть на нужные ему страницы в процессе изучения материала. Увидев нужную ему ссылку, посетитель сайта перейдёт на новую страницу, тем самым увеличив количество посещённых страниц.
  • Регулярно проверяйте правильность ссылок и кнопок. Будет неприятно, если посетитель не сможет получить доступ к каталогу товаров просто из-за того, что вы переместили каталог и забыли обновить ссылку.

Размещаем оффер на главной странице

Оффер - это структура, которая отвечает на вопросы: "Что предприятие предлагает?" и "Какую пользу я получу от сотрудничества с ним?". Если пользователь не сможет найти ответы на эти вопросы в первые 4-7 секунд, то есть большая вероятность, что он закроет этот сайт.

Рассмотрим образный пример: на главной странице одного из сайтов мы можем прочитать заголовок: "Наша компания создаёт сладкую атмосферу". Что это значит и как это можно понять, будет понятно только тем, кто уже знаком с брендом, но не новому посетителю. Если пролистать страницу, то становится ещё более непонятно - информации много, но она представляет собой набор "штампов". Только на четвёртом блоке мы видим фотографии конфет и догадываемся, что данная компания занимается производством сладостей.

Такой тип лендинга не будет привлекательным для потенциальных клиентов - большинство из них просто уйдут, так как не смогут понять, о чём идёт речь на сайте. Главная проблема заключается в отсутствии оффера на первом экране. Как можно справиться с этой ситуацией? Например, можно заменить слоган "создаёт сладкую атмосферу" заголовком "Производство кондитерских изделий" и дополнить его сильным преимуществом, например, "Доставим ваш заказ через 2 дня". С такой информацией пользователю будет сразу понятно, о чём речь на сайте. Всё это является оффером: мы показываем, какой продукт предлагает компания и как она может помочь клиенту. Пользователю не придётся пролистывать до четвёртого экрана, чтобы узнать об этом.

Вот один из примеров для рассмотрения. Компания предоставляют информацию о своей деятельности и проблемах, с которыми можно обратиться к ним:

Пример предложения на сайте
Пример предложения на сайте.

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

Убираем лишнее

Избавление от лишней информации - ещё один способ улучшить юзабилити лендинга, многостраничного сайта или интернет-магазина. Старайтесь писать только о существенном и о том, что имеет ценность для клиента.

Есть один из веб-сайтов, который переполнен информацией. Здесь более 10 блоков, и каждый содержит текст и картинку. Это изобилие информации может запутать посетителя и отвлечь его от основной цели. Блоки повторяются так часто, что на них перестаёшь обращать внимание.

Пример загромождения информации на сайте

Используя методы удаления лишней информации и структурирования, мы поможем пользователям сфокусироваться на существенном.

Создаём кнопки с ярким контрастом

Эффективность кнопок на веб-странице зависит от их контрастности по отношению к фону. Кнопка должна быть легко заметной.

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

Посмотрите на пример-картинку чуть выше (Оффер - офисные помещения в аренду), где кнопка выделяется ярким цветом и привлекает внимание. Чтобы создать аналогичный эффект на своём сайте, можно использовать цветовой круг и выбрать два противоположных контрастных цвета. Если кнопка будет размещена на белом фоне, необходимо убедиться, что она не будет тусклой.

Пример комплементарных цветов
Пример комплементарных цветов

Избавляемся от навязчивых предложений

Иногда на сайте может быть слишком много всплывающих окон, призывающих связаться с компанией.

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

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

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

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

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

Работа с типографикой

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

  • используйте не более двух-трёх различных шрифтов;
  • ограничьте длину строк - рекомендуем размещать около 80 символов в строке для обеспечения легкочитаемости вашего текста;
  • разбивайте длинный текстовый контент на отдельные абзацы.
  • соблюдайте оптимальное расстояние между строками: для обычного текста в 16-18 пикселей используйте интервал около 22-25 пикселей (line-height: 1.4).
  • не меняйте межбуквенное расстояние для основного текста - такой подход лучше использовать в заголовках, написанных заглавными буквами.

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

Читайте также: "Навыки дизайна сайтов для новичков".

Бонус: F-образный паттерн

F-образный паттерн – один из наиболее часто встречающихся схем визуального восприятия. Он демонстрирует, как пользователь изучает содержание на веб-сайте. Сначала он сканирует верхнюю часть страницы горизонтально, а затем вертикально просматривает левую сторону экрана. Когда пользователь находит что-то интересное, он останавливается и затем снова обращается к горизонтальному сканированию информации. Таким образом, образуется тепловая карта, напоминающая букву F.

F-паттерн сайта

Как улучшить юзабилити сайта, используя F-паттерн:

  • Ставьте в начале страницы самое важное.
  • Распределите контент по приоритетности, разместив на "горячих точках" тепловой карты ключевые элементы.
  • Применяйте интересный контент в соответствии с F-паттерном: вставляйте ключевые слова в начало нового параграфа, а призывы к действию размещайте слева или справа, где пользователь начинает или заканчивает изучение контента.

Этот подход особенно полезен для сайтов с обширным контентом, таких как блоги, медиа и другие.

Заключение

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

Отзывы, комментарии к статье

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}