Что означает слово usability?

Юзабилити сайта: что это?

Юзабилити, с точки зрения дизайна пользовательского интерфейса (UI), означает общую простоту, с которой пользователь может научиться работать с продуктом, а также эффективность, удовлетворенность и общее впечатление от взаимодействия.

Концепт строится на следующих принципах:

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

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

• Запоминаемость: если человек не будет заходить в приложение в течение нескольких недель, вспомнит ли он, как им пользоваться, когда вернется? Или ему придется изучать все с нуля?

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

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

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

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

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

5 причин работать над улучшением юзабилити

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

Почему каждому бизнесу нужно проработать UX?

1. Рост удовлетворенности клиентов: удобство влияет на пользовательский опыт. Если продукт или услуга просты и понятны, это приводит к росту удовлетворенности, повышению лояльности клиентов.

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

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

4. Конкурентное преимущество: если продукт обеспечивает лучший пользовательский опыт, они выберут вас. Обычно этот фактор работает сильнее ценовых стимулов, поскольку он формирует доверие и повышает лояльность аудитории.

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

Какие элементы сайта влияют на его удобство

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

Шапка, панель навигации

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

• Логотип: возвращает на главную страницу, показывает посетителю бренд.

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

• Поиск: обязательный элемент для интернет-магазинов или контентных проектов, где легко потеряться или запутаться.

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

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

• Доступ к корзине/аккаунту: для интернет-магазинов или маркетплейсов важно, чтобы у аудитории был легкий доступ к корзине или учетной записи.

Футер

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

Пример: футер маркетплейса Lamoda

Типографика

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

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

«Воздух»

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

Пример хорошей верстки с учетом принципов «воздуха» и типографики — статья в блоге Lamoda

Кнопки призыва к действию

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

1. Кнопки должны быть заметными, четко идентифицируемыми.

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

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

Пример заметной контрастной CTA-кнопки в интернет-магазине Lacoste

Формы и поля ввода

Три главных принципа, которые помогают улучшить юзабилити этого компонента:

• Упрощайте, сокращайте, делайте удобными формы для пользователя.

• Четко обозначьте все поля ввода.

• Предоставьте сообщения об ошибках, если пользователь вводит неверную информацию.

Графика

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

Функции каталога

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

• Фильтры;

• Сортировка;

• Поиск;

• Бегунки;

• Кнопка «Наверх»;

• Добавление в избранное;

• Лейблы с отметками и т.д.

Как провести анализ юзабилити: пошаговая инструкция

Шаг №1. Определите цели

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

Шаг №2. Составьте профили пользователей

Определите целевые сегменты. Проанализируйте их потребности, запросы, типичное поведение.

Шаг №3. Опишите задачи

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

Шаг №4. Проанализируйте пользовательские пути

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

• насколько интуитивно понятны функции интерфейса;

• быстро ли пользователи могут выполнять задачи после освоения системы;

• могут ли они вспомнить, как пользоваться системой после периода простоя.

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

Шаг №5. Проверьте, как обрабатываются ошибки

Помогает ли сайт предотвратить ошибки при вводе данных или других взаимодействиях? Легко ли людям понять, что случилось и как это исправить? Достаточно ли простые слова используются в сообщениях от системы?

Шаг №6. Проанализируйте содержание

На этом этапе опирайтесь на следующие параметры:

• простота восприятия;

• актуальность текстов;

• ценность контента с точки зрения потребностей.

Шаг №7. Оцените навигацию и информационную архитектуру

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

Подробнее об информационной архитектуре — в этом материале.

Шаг №8. Проверьте адаптивность и отзывчивость

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

Шаг №9. Проведите юзабилити-тестирование на реальных пользователях

Записывайте взаимодействия с интерфейсом и собирайте отзывы об их опыте. В организации тестов вам поможет сервис AskUsers.

Шаг №10. Проанализируйте результаты и внедрите улучшения

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

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

ТОП ошибок, которые ухудшают юзабилити

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

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

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

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

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

5. Медленное время загрузки: аудитория нетерпелива и ожидает, что страницы будут загружаться быстро.

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

7. Отсутствие объяснения ошибок: когда у человека что-то не получается, просто показать, что ошибка произошла — не поможет. Вместо этого объясните, что именно пошло не так и как это исправить.

8. Скрытый призыв к действию: если CTA незаметный или не направлен на стимулирование действия, пользователи игнорируют его.

О том, как правильно составить призыв к действию мы писали в этом материале.

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

Выводы

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