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

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

• Что такое юзабилити
• Основные правила и принципы юзабилити
• На что влияет юзабилити сайта
• Как анализировать юзабилити
• Как улучшить юзабилити сайта
• Главное о юзабилити

Юзабилити — это показатель того, насколько легко и удобно пользователю взаимодействовать с интерфейсом сайта. С английского usability так и переводится — удобство использования.

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

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

А на этом сайте после поиска открываются название, цена и кнопка «Купить». Чтобы узнать подробности о товаре, придётся открыть карточку, а информация о доставке есть только в верхнем меню

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

Здесь от выбора до покупки буквально три шага: ввести телефон, выбрать способ получения и вариант оплаты

На этом сайте сначала нужно зайти в «Корзину» и кликнуть «Оформить заказ», а затем заполнить поля в четырёх разделах

Чтобы сайт был удобным и приводил, а не уводил клиентов, дизайнеры интерфейсов следуют правилам юзабилити сайта. Их сформулировал в 1994 году Якоб Нильсен — всемирно известный консультант по UX. Получилось 10 принципов, которые применяют дизайнеры, когда разрабатывают сайты и мобильные приложения. Принципы юзабилити Якоба Нильсена — базовое руководство для всех, кто создаёт или совершенствует продукт.

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

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

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

Заказ оформлен, но есть ли товар в наличии, сколько ждать звонка и когда хотя бы примерно будет доставка — непонятно

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

Из этого описания непонятно, что такое «зональная поддержка свода стопы и пятки» и какие преимущества у сетчатой подкладки

А вот в описании ботинок уже есть преимущества, например: «Язычок с сильфоном предотвращает попадание мусора»

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

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

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

На сайте известного онлайн-гипермаркета «Корзина» на привычном месте: вверху справа

В этом интернет-магазине «Корзину» разместили нестандартно: слева

А здесь «Корзины» нет вообще

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

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

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

Рядом с фото и названием товара есть информация о вариантах, сроках и стоимости доставки, условиях рассрочки

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

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

Минималистичный дизайн сайта агентства контент-маркетинга

На этой странице компании по разработке сайтов непонятно, куда смотреть, где здесь важное, а где — второстепенное

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

Попытались отправить форму с незаполненными полями, но ничего не вышло: система предупредила об обязательных разделах

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

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

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

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

Для примера ввели запрос «купить кроссовки конверс» и открыли два сайта: самый первый в выдаче и с четвёртой страницы. На первом сразу оказались в нужном разделе с удобным фильтром, чтобы быстро найти нужные модели.

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

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

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

Пробуем заказать кеды. На первом сайте можно сразу найти нужный размер и перейти на страницу товара. Быстрый заказ не подводит: в магазине его можно забрать уже сегодня.

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

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

Если соблюдать правила и требования юзабилити, заработает «сарафанное радио» — о бизнесе узнает больше людей. Это подтверждает статистика: 23% клиентов, у которых был положительный опыт взаимодействия с сайтом, расскажут о нём 10 и более людям. При этом 62% клиентов отмечают, что делятся негативным опытом использования сайта с другими людьми.

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

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

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

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

Красная зона на карте скроллинга показывает, где посетители сайта находятся дольше всего

Затем проводят качественное и количественное исследование юзабилити с пользователями.

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

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

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

Тестирование и оценка юзабилити помогают выявить три важных момента:

1. Определить барьеры, которые мешают пользователям достичь конкретной цели, например купить на сайте стиральную машину.
2. Понять, что нужно сделать, чтобы улучшить юзабилити, например отказаться от всплывающих окон или сократить форму обратной связи.
3. Проанализировать поведение и предпочтения пользователей, например выяснить, что посетителям больше нравятся синие, а не красные кнопки «Купить».

Информацию, которую получают во время тестирования, анализируют и переходят к следующему этапу — вносят изменения в интерфейс.

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

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

Уменьшить время загрузки страниц. В идеале страница должна открываться за полсекунды, оптимально — за 2–3 секунды. Если пользователь тратит больше времени, велика вероятность, что он вообще закроет сайт.

Изменить дизайн. Лаконичное оформление не раздражает и не отвлекает пользователя от покупки или другого целевого действия.

Адаптировать дизайн для мобильных устройств. 67% пользователей заходят в интернет с мобильных устройств. Сайт, не адаптированный под смартфоны, быстро закроют. Проверять, как выглядят страницы на мобильных устройствах, удобно на сервисе Google Mobile Friendly.

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

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

● Юзабилити — показатель того, насколько удобно посетителям пользоваться сайтом: находить информацию, регистрироваться или делать заказ.

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

● Чтобы проанализировать юзабилити сайта, руководствуются принципами Нильсена, проводят качественные и количественные тестирования с участием пользователей.

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