Что такое юзабилити сайта и как его улучшить

Юзабилити (от англ. usability) — это удобство интерфейса, свойство сайта, которое позволяет пользователю быстро и просто получить то, что он хочет. Юзабилити сильно влияет на продажи и бизнес. По словам известного онлайн-маркетолога Нила Пателя, половина пользователей ожидают, что сайт загрузится за 2 секунды или меньше. А 40% пользователей уйдут со страницы, если ее загрузка будет длиться дольше 3 секунд. Рассказываем, как настроить юзабилити на сайте и избежать ошибок.

Продумайте сценарии поведения пользователей

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

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

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

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

Важно охватить как можно больше задач — сначала предложить свои варианты, а затем попросить пользователей вспомнить прошлый опыт и дополнить им список типичных целей и сценариев.

За тем, как пользователи пробуют разобраться в интерфейсе, нужно следить, например, составляя пошаговый список их кликов (или тапов, если это мобильная версия). Пользователи должны комментировать свои действия в формате «Я хочу…» перед тем, как сделать следующий клик. Например, человек может сказать, что хочет положить товар в корзину, а затем попробовать это сделать.

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

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

Аналогичные действия стоит совершить на сайтах конкурентов или просто на успешных сайтах в этой же отрасли. Затем сравнить, где проще решить одни и те же задачи.

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

Проработайте над визуальной составляющей

Согласно данным отчета Digital 2022 Global Overview Report, мобильным телефоном пользуются 67,1% населения мира. В среднем человек тратит на это примерно пять часов в день. В России потребление мобильного трафика в январе 2022 года выросло на 35 % в сравнении с аналогичным периодом прошлого года. Люди все чаще пользуются интернетом с мобильного телефона, а значит, бизнесу нужно учитывать это, разрабатывая и улучшая сайты.

Проверьте, насколько сайтом удобно пользоваться со смартфона. Желательно учитывать разные размеры экрана — у пользователей может быть небольшой аппарат, а может быть большой фаблет или вовсе 10-дюймовый планшет.

Сделать это можно с помощью любого популярного браузера, включив режим разработчика. Обычно для этого нужно нажать сочетание клавиш Ctrl+Shift+C. Или кликнуть на свободное место на сайте правой кнопкой и выбрать «Посмотреть код элемента».

Затем нужно нажать Ctrl+Shift+M или найти значок, похожий на смартфон или на стоящие рядом смартфон и планшет. Откроется симуляция экрана мобильного. Можно выставить свое разрешение или выбрать эмуляцию экрана популярного устройства.

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

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

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

Изучите разные точки входа

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

• Пользователь искал какую-то информацию в Яндексе или Google, увидел сайт в выдаче и перешел на страницу.

• Попал на сайт после клика по рекламному объявлению.

• Открыл страницу по ссылке, которую ему отправил другой человек.

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

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

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

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

Прорабатывая сценарии использования, учитывайте, что путешествие может начаться с любой страницы сайта.

Распространенные ошибки в юзабилити сайтов

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

Посмотреть, как работает концепция, можно практически на любом сайте, сделанном в веб-конструкторе. Например, в Tilda.

Отсутствие поиска. Если на сайте больше 5—10 товаров, то не следует заставлять пользователя пролистывать весь каталог. Вместо этого нужно сделать поисковую строку, в которой клиент сможет набрать название нужного товара и получить ссылку на него.

Хорошо, когда в строке есть поисковые подсказки. Например, если человек начинает вводить «теле..», сайт подсказывает варианты: «телефон», «телевизор».

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

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

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

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

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

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

Стоит предусмотреть сохранение данных в случае обрыва связи или каких-то ошибок пользователя — и не заставлять клиентов лишний раз что-то печатать или выбирать.