Юзабилити сайта: что это такое и как его улучшить

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

В этой статье мы разберемся, что такое юзабилити и как его улучшить.

Юзабилити – что это?

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

При оценке юзабилити опирайтесь на 5 основных компонентов:

• Усваиваемость. Насколько легко новым пользователям выполнять простые действия на сайте. 
• Эффективность. Как быстро посетители могут сориентироваться на сайте после того, как они с ним познакомились. 
• Запоминаемость. Насколько легко пользователям взаимодействовать с сайтом после длительного отсутствия.  
• Ошибки. Как часто пользователи ошибаются при работе с сайтом и как просто они находят решение.  
• Удовлетворенность. Насколько посетители довольны пребыванием на сайте. 

При соблюдении этих принципов юзабилити вы сможете увеличить как конверсию, так и посещаемость сайта. Исследование Creative Good показало, что интуитивно понятный путь оформления заказа увеличивает количество покупателей на 40%, сумма заказа в среднем повышается на 10%. А маркетологи Staples.com с помощью юзабилити-тестирования достигли следующих результатов: количество повторных покупок выросло на 67%, отток снизился на 31-45%, трафик увеличился на 80%.

Как улучшить юзабилити сайта

Продумываем навигацию

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

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

Размещаем оффер на первом экране

Оффер – это конструкция, которая отвечает на вопросы: «Что этот бизнес предлагает?» и «Какую выгоду я получу от взаимодействия с ним?». Если пользователь не сможет найти на них ответы в первые 5-10 секунд, то с большой вероятностью он закроет вкладку браузера.

Для понимания посмотрите на лендинг ниже: 

На первом экране наблюдаем, что компания Birka «создает мягкое настроение». Что это такое и как расшифровывается, будет понятно только тем, кто уже знаком с брендом, но никак не новому посетителю. Если проскроллить страницу, то становится еще непонятнее – информации много, но представляет она из себя набор «штампов». Только на четвертом экране мы видим фотографии диванов и догадываемся, что Birka производит мягкую мебель. 

Такой формат лендинга не будет привлекать клиентов – большинство из них уйдут, потому как не поймут о чем сайт. В первую очередь это связано с тем, что на первом экране нет оффера. Как можно исправить ситуацию? Например, слоган «Создаем мягкое настроение» можно представить в виде дескриптора, размещенного под логотипом. А вместо него разместить заголовок «Производство мебели на заказ» и дополнить его сильным преимуществом, скажем, «Привезем заказ уже через 10 дней». С таким набором информации пользователю будет понятно о чем сайт. Все это и есть оффер: мы показываем, какой продукт предлагает компания и чем она может помочь клиенту. Пользователю не нужно скроллить до четвертого экрана, чтобы об этом узнать. 

Рассмотрим еще пару примеров. Компании ниже сразу рассказывают, чем они занимаются и с какой проблемой к ним можно обратиться:

Первый экран из шаблона «Помещения в аренду» в Craftum 

Первый экран из шаблона «Клининговая компания» в Craftum

В составлении оффера помогают различные методы, например 4U – о нем мы рассказали в статье «Создаем на Craftum: сайт-визитка для бизнеса».

Удаляем лишнее

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

Вот один из сайтов, который переполнен информацией:

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

На первом экране есть оффер, но информация «разбросана» по экрану. Если переместить логотип, контактные данные и почту в шапку, то страница будет выглядеть «чище». А еще нам не хватило кнопки, чтобы оставить заявку, ведь кликнуть и оставить контакты проще, чем набирать номер телефона или писать письмо. 

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

Делаем контрастные кнопки

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

Взгляните на пример сайта ниже – из-за высокой прозрачности кнопку сложно заметить: 

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

А теперь посмотрите на другой пример. На нем кнопка выделена ярким цветом – так и хочется нажать и скорее выбрать часы!

Пример из шаблона «Магазин часов» в Craftum

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

Убираем навязчивые предложения

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

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

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

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

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

• используйте не более двух шрифтов;
• ограничьте длину строк – размещайте около 60 символов в строке, чтобы ваш текст легко читался;
• делите на абзацы крупный текстовый контент;
• придерживайтесь оптимального межстрочного расстояния: для обычного текста в 16-18 пикселей используйте интервал от 140 до 160%;
• не используйте межбуквенное расстояние для наборного текста – такой подход лучше применять в заголовках, которые написаны капсом.

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

Читайте также: «Чек-лист по дизайну для недизайнеров».

Бонус: F-паттерн

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

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

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

Такой подход особенно актуален для сайтов с большим количеством контента: блогов, медиа и других.

Вывод

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