Юзабилити (usability)

Одобренно экспертом
Ирина Хафизова
Эксперт статьи
Ирина Хафизова
Дизайн-директор Mailfit
Автор статьи
Марина Ибушева

Юзабилити (usability) — это качественный показатель, который определяет, насколько просто и удобно пользоваться сайтом или приложением.

Юзабилити оценивают по пяти основным параметрам. Определяют, насколько:

  1. Новым пользователям легко ориентироваться на сайте или в приложении.
  2. Посетителю ресурса просто совершить целевое действие — прочитать статью или заказать товар — и не запутаться в интерфейсе.
  3. Пользователь быстро сможет сориентироваться на сайте спустя время.
  4. Посетитель часто совершает ошибки при работе с интерфейсом и быстро обнаруживает ошибочность своих действий.
  5. Пользователь в целом удовлетворен ресурсом.
результаты поиска Google с точки зрения юзабилити

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

Какую роль играет usability на сайте

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

Работа над юзабилити позволяет достичь нескольких целей:

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

Основные принципы юзабилити

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

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

Какую роль играет usability на сайте Если сайт неудобен, там сложно найти нужную информацию или товар, то посетитель уйдет с такого ресурса к конкурентам. Учитывая, что главная цель создания сайтов — получение прибыли, бизнесу важно соблюдать основные принципы юзабилити. Работа над юзабилити позволяет достичь нескольких целей: Повысить конверсию. Понятная структура и навигация положительно влияют на конверсию и подталкивают посетителей выполнить целевые действия — оформить заказ, заполнить форму, позвонить в компанию. Увеличить посещаемость. Пользователи возвращаются и активнее взаимодействуют с удобными сайтами. Если посетитель с первой секунды не разобрался с навигацией и интерфейсом, он пойдет туда, где проще и понятнее. Повысить лояльность аудитории. Сайт — лицо компании. Многие пользователи судят о бренде по его сайту. Улучшить ранжирование в поисковых системах. Ошибки в юзабилити приводят к высоким показателям отказов и возвратов в результаты поиска. Поисковые системы учитывают эти показатели при ранжировании сайтов. Неудобным ресурсам сложнее пробиться в топ выдачи, а значит, и получить трафик из поиска. Основные принципы юзабилити Большинство интерфейсов похожи друг на друга. Обычно ссылки в текстах выделены синим цветом, по клику на логотип пользователь переходит на главную страницу сайта, а закрыть всплывающий баннер можно, нажав на крестик, который расположен в верхнем углу. Знакомые и понятные структура и интерфейс упрощают посетителю взаимодействие с сайтом, повышают удовлетворенность.

Интерфейс «Яндекс Маркета» напоминает интерфейсы других маркетплейсов. Например, Ozon

главная страница сайта Ozon

У маркетплейсов похожее расположение элементов и ссылок навигации. Названия категорий тоже схожи

Главное правило юзабилити — чем проще и понятнее, тем лучше. Чтобы достичь простоты и удобства, необходимо соблюдать основные принципы юзабилити. 

Удобный и современный дизайн

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

дизайн главной страницы сайта Samsung

Минималистичный дизайн сайта Samsung позволяет сосредоточить внимание посетителей на продуктах компании

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

Норвежский сайт объявлений Arngren

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

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

Если на сайте есть кнопки, не стоит слишком креативить с их названием и расположением.

Сайт интернет-магазина детских товаров с неудачным расположением значка корзины

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

Простая и понятная навигация

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

Панель навигации социальной сети «ВКонтакте»

Основная панель навигации соцсети «ВКонтакте» расположена слева

Пример сайта, где панель навигации расположена сверху

В интернет-магазинах панель навигации обычно располагается сверху

Пример «подвала» сайта с контактной информацией

В «подвале» размещают ссылки на разделы и дополнительную информацию

Главное правило навигации — все элементы должны быть заметны и понятны. Пользователь должен иметь возможность перейти с любой страницы в нужный ему раздел.

Качественный и структурированный контент

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

Карусель изображений на сайте интернет-магазина

В карточке товара важно описать технические характеристики и добавить качественные изображения в большом разрешении

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

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

Пример неструктурированного текста, SEO-портянка

Малоинформативная текстовая «портянка», где не видно ни абзацев, ни заголовков, отпугнет посетителей. Не надо так

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

Пример хорошо структурированного текста

Длинные статьи на Adme легко читать, потому что они хорошо структурированы

Поддержка пользователей и обратная связь

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

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

Благодарность за покупку

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

 

У пользователя всегда должна быть возможность передумать — отменить заказ, изменить способ доставки, восстановить страницу после удаления, не обращаясь в службу поддержки.

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

Подсказки при оформлении заказа в интернет-магазине

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

Также можно заранее продумать возможные вопросы пользователей при работе с сайтом и ответить на них в разделах «Справка», «FAQ», «Помощь». 

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

Онлайн-консультант на юридическом сайте

Один из способов организовать на сайте общение с посетителями — внедрить онлайн-чат

Высокая скорость загрузки

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

Вес страниц увеличивают графические элементы, вставки, работающие на Flash.

Проверить скорость загрузки сайта можно с помощью специальных сервисов, например PageSpeed Insights от Google. Там же можно получить рекомендации, как ускорить страницы ресурса.

Страница PageSpeed Insights с результатами проверки сайта

Бесплатный инструмент PageSpeed Insights находит проблемы на сайте, влияющие на скорость, и дает рекомендации, как улучшить производительность ресурса

Адаптивность под разные типы устройств

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

ример сайта с плохой адаптацией под мобильные устройства

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

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

Эвристики юзабилити Якоба Нильсена

Известный специалист по интерфейсам Якоб Нильсен в конце XX века сформулировал 10 правил юзабилити сайта. Эти правила актуальны и сегодня. По сути, на них и основаны современные принципы юзабилити.

10 правил юзабилити Якоба Нильсена

  1. Видимость состояния системы. Пользователи всегда должны понимать, что происходит. Так они чувствуют себя в безопасности. После каждого действия на сайте необходима обратная связь. Например, если страница долго грузится, пользователь должен видеть значок загрузки.
  2. Совпадение между системой и реальностью. Сайт должен говорить на языке пользователя. Не стоит использовать язык роботов, внутренний жаргон или сложные формулировки.
  3. Свобода пользователя. Пользователи совершают некоторые действия по ошибке. Необходимо дать им возможность отменить их (например с помощью специальной кнопки).
  4. Согласованность и стандарты. Необходимо использовать общепринятые шаблоны для визуальных элементов, слов и действий, чтобы не путать посетителей. Например, принято, что значок корзины означает желание приобрести товар. Кликая на него пользователь точно не ждет, что попадет на страницу контактов.
  5. Предотвращение ошибок. Важно продумывать дизайн таким образом, чтобы при работе с интерфейсом свести ошибки пользователей к минимуму, например, если посетитель ввел неправильный адрес почты, сайт выдает подсказку, что что-то пошло не так и как это исправить.
  6. Распознавание, а не запоминание. При взаимодействии с сайтом пользователь не должен запоминать, где что находится. Все элементы и информация должны быть на виду.
  7. Гибкость и эффективность. Хороший сайт содержит функции, которые полезны как новичкам, так и опытным пользователям.
  8. Эстетичный и минималистичный дизайн. На сайте или в приложении не должно быть лишних деталей. Минимализм позволяет пользователю увидеть важное сразу и быстро решить свои задачи.
  9. Помощь с ошибками. Если пользователь совершил действие, которое привело к ошибке, необходимо указать ему на проблему и предложить варианты решения.
  10. Доступ к документации. При взаимодействии с системой у пользователя не должно возникать необходимости обращаться к документации, но если такая потребность появилась, нужно предоставить ему нужные справочные документы.

Как проверить юзабилити на сайте

Существует несколько способов проверить юзабилити.

Анализ показателей статистики

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

Посмотреть статистику можно в сервисах «Яндекс Метрика» и Google Analytics. 

На какие показатели обращать внимание:

  • процент отказов;
  • время пребывания на сайте и его отдельных страницах;
  • количество просмотренных страниц за сеанс;
  • конверсия;
  • скорость загрузки страниц.
Карта кликов в «Яндекс Метрике»

«Яндекс Метрика» предоставляет бесплатный доступ к инструменту «Карта кликов», с помощью которого можно увидеть, на какие области страницы пользователи кликают чаще всего

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

Недостатки: требует хотя бы минимальных знаний аналитики. Для обнаружения конкретных проблем с юзабилити требуется дополнительный анализ.

Фокус-группа

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

Этот способ подойдет как для оценки нового, еще не запущенного сайта, так и для тестирования давно работающего ресурса.

Преимущества способа: можно узнать мнение реальных посетителей сайта.

Недостатки: необходимо найти подходящих пользователей и прописать сценарии действий.

Отзывы

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

Преимущества способа: бесплатно и быстро реализовать. Можно узнать мнение реальных посетителей и клиентов.

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

Экспертный аудит юзабилити

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

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

Недостатки: самый дорогостоящий из всех описанных способов. 

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

Услуги по аудиту юзабилити и проектированию интерфейсов

Пример услуг, которые предлагает юзабилити-агентство

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

Услуга аудита юзабилити на фриланс-биржах

Анализ юзабилити на биржах фриланса стоит от 1000 рублей

Главные мысли

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

Вы нашли ответ?

30
1