Юзабилити: что это такое, как улучшить, принципы и методы оценки

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

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

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

Содержание
  1. Что такое
  2. Определение
  3. Цели и задачи
  4. А если по-русски
  5. А теперь простыми словами
  6. К чему применяется
  7. Юзабилити пользователя
  8. Юзабилити дизайна
  9. Юзабилити веб-сайта
  10. Юзабилити приложения
  11. Юзабилити продукта Enterprise
  12. Методы
  13. Принципы
  14. 10 эвристик Якоба Нильсена
  15. Как оценить
  16. Правила хорошего
  17. Писать, что происходит, и что будет дальше
  18. Писать простым понятным языком
  19. Вернуться на шаг назад и исправить действие
  20. Помнить о привычках и стандартах
  21. Использовать валидированные и преднастроенные поля
  22. Подсказывать и направлять
  23. Технологии для анализа
  24. Вебвизор в Яндекс Метрике
  25. Карты кликов и скроллинга
  26. Метки и события на элементах
  27. Как анализировать и тестировать
  28. Качественное тестирование
  29. Придумать легенду
  30. Пройти сценарий
  31. Отследить ошибки
  32. Идти исправлять
  33. Количественное тестирование
  34. Где теряют интерес при скроллинге
  35. На каких экранных формах падает конверсия
  36. А/В-тесты: цвета и расположение
  37. Как улучшить
  38. Изменить или адаптировать дизайн
  39. Изменить навигацию
  40. Снизить число шагов
  41. Помогать вводить адрес
  42. Ошибки юзабилити: примеры
  43. Слишком много шагов
  44. Непонятные сообщения об ошибке
  45. Кнопка есть, но непонятно, что она делает
  46. Интерфейс говорит на языке разработчика
  47. Нет возможности отменить действие
  48. Система заставляет вводить известные ей данные
  49. Слишком много элементов на одном экране
  50. Неочевидная обратная связь
  51. Чем отличается
  52. Чем юзабилити отличается от UI
  53. Чем юзабилити отличается от UX

Что такое

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

Определение

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

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

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

Цели и задачи

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

На практике работа с юзабилити решает несколько задач:

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

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

А если по-русски

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

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

А теперь простыми словами

Представим дверь. На ней две панели: одна большая зелёная с надписью «Толкнуть», вторая — маленькая сбоку. Человек толкает дверь и проходит. Всё понятно.

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

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

К чему применяется

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

Область Что оценивают Пример проблемы
Пользователь Насколько легко достичь цели Человек не понимает, куда нажать для оплаты
Дизайн Понятность элементов и структуры Главная кнопка визуально теряется
Веб-сайт Навигацию, формы, поиск, конверсию Посетители уходят на странице заказа
Приложение Сценарии, жесты, переходы, формы Частая функция спрятана в меню
Enterprise-продукт Работу сотрудников и сложные бизнес-сценарии Для одной операции нужно открыть пять разделов

Юзабилити пользователя

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

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

Цель пользователя:
получить стоимость страховки

Хороший сценарий:
1. Выбрать тип страховки
2. Указать необходимые данные
3. Получить расчёт
4. Перейти к оформлению

Плохой сценарий:
1. Найти раздел
2. Прочитать инструкцию
3. Скачать документ
4. Заполнить документ
5. Найти форму
6. Зарегистрироваться
7. Повторно ввести данные
8. Получить расчёт

Юзабилити дизайна

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

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

Юзабилити веб-сайта

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

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

Юзабилити приложения

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

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

Юзабилити продукта Enterprise

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

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

В Enterprise-системах юзабилити особенно важно для:

Методы

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

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

Метод Что показывает Когда применять
Юзабилити-тестирование Как человек выполняет задачу При проверке сценариев
Экспертная оценка Нарушения принципов интерфейса Для быстрой проверки
Веб-аналитика Поведение большой аудитории На работающем сайте
А/В-тестирование Эффект разных вариантов При сравнении решений
Интервью Мотивы и проблемы пользователей При исследовании потребностей

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

Принципы

Принципы нужны для того, чтобы оценивать интерфейс не только по принципу «мне кажется, здесь неудобно». Одним из наиболее известных наборов являются 10 эвристик Якоба Нильсена — общие правила взаимодействия человека с интерфейсом. Nielsen Norman Group описывает их именно как общие правила, а не как набор жёстких требований к каждому экрану.

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

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

  1. Видимость состояния системы. Пользователь должен понимать, что сейчас происходит. Если он нажал «Оплатить», система должна показать, что операция выполняется.
  2. Соответствие системы реальному миру. Интерфейс должен использовать понятные человеку слова, понятия и последовательности действий, а не внутреннюю терминологию разработчиков.
  3. Контроль и свобода пользователя. Если человек случайно открыл не тот раздел или выполнил ошибочное действие, у него должна быть возможность вернуться назад или отменить операцию.
  4. Последовательность и стандарты. Одинаковые элементы должны работать одинаково. Если синий текст в одном месте означает ссылку, не стоит использовать такой же синий текст для обычного заголовка.
  5. Предотвращение ошибок. Хороший интерфейс не только сообщает об ошибках, но и старается не допустить их.
  6. Узнавание вместо запоминания. Пользователь не должен помнить данные с предыдущего экрана, если система может показать их снова.
  7. Гибкость и эффективность. Опытный пользователь должен иметь возможность выполнять частые операции быстрее, например через горячие клавиши или сохранённые действия.
  8. Минималистичный дизайн. На экране должна находиться действительно нужная информация. Лишние элементы увеличивают когнитивную нагрузку.
  9. Помощь в распознавании и исправлении ошибок. Сообщение должно объяснять проблему человеческим языком и подсказывать способ её исправления.
  10. Справка и документация. Если продукт сложный, пользователю должна быть доступна понятная помощь.

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

Как оценить

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

Главный вопрос юзабилити-тестирования — не «нравится ли пользователю интерфейс», а «может ли он выполнить нужную задачу без лишних препятствий».

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

Показатель Что измерять Что может означать проблема
Время выполнения Сколько занимает сценарий Слишком длинный путь
Ошибки Количество неправильных действий Непонятные элементы или правила
Отказы Где пользователь прекращает сценарий Сложность, недоверие, ошибка
Подсказки Сколько помощи требуется Интерфейс недостаточно понятен
Конверсия Доля завершивших действие Проблема в сценарии или предложении

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

Правила хорошего

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

Писать, что происходит, и что будет дальше

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

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

Плохо:
[Отправить]

После нажатия:
ничего

Хорошо:
[Отправить]

После нажатия:
"Заявка отправляется..."
↓
"Заявка отправлена. Номер 48291"

Писать простым понятным языком

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

Особенно хорошо это видно на сообщениях об ошибках.

АДСКИЙ ВАРИАНТ:

HTTP 422. Validation failed.
Entity UserAddress has invalid state.
Field postalCode violates domain constraint.
Request processing aborted.

ПОЛЬЗОВАТЕЛЮ:

"Проверьте индекс.
Нужно указать 6 цифр, например 190000."

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

Вернуться на шаг назад и исправить действие

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

Если действие потенциально разрушительное, полезны подтверждение, отмена или возможность восстановления. Причём подтверждение должно быть понятным: «Удалить договор?» намного полезнее, чем загадочное «Вы уверены?», когда человек уже забыл, что именно собирается удалить.

Помнить о привычках и стандартах

Люди переносят опыт из одного продукта в другой. Корзина обычно выглядит как корзина, логотип часто ведёт на главную страницу, крестик закрывает окно, стрелка назад возвращает на предыдущий экран.

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

Использовать валидированные и преднастроенные поля

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

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

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

Подсказывать и направлять

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

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

Технологии для анализа

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

Вебвизор в Яндекс Метрике

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

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

При этом записи поведения пользователей нужно анализировать с учётом требований к приватности и настройки сбора данных. В Яндекс Метрике отдельно предусмотрены настройки записи содержимого и полей форм.

Карты кликов и скроллинга

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

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

Метки и события на элементах

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

Например, можно отдельно считать:

  • клики по кнопке «Купить»;
  • открытие фильтра;
  • выбор способа доставки;
  • начало заполнения формы;
  • ошибку в поле;
  • нажатие «Продолжить»;
  • открытие подсказки;
  • использование поиска.

Тогда команда видит не только «на странице было 100 000 посетителей», но и реальную последовательность действий: сколько начали сценарий, сколько дошли до каждого этапа и на каком шаге произошёл провал.

Как анализировать и тестировать

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

Качественное тестирование

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

Придумать легенду

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

Пользователь:
Иван, 42 года, работает менеджером по закупкам.

Ситуация:
Ему нужно создать заявку на закупку
офисной техники на 380 000 рублей.

Цель:
Создать заявку и отправить её
на согласование.

Пройти сценарий

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

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

Отследить ошибки

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

Идти исправлять

После тестирования команда формирует список проблем, определяет их приоритет и исправляет интерфейс. Затем сценарий проверяется повторно. Хорошее тестирование заканчивается не отчётом на 80 страниц, а изменениями в продукте.

Количественное тестирование

Количественный подход отвечает на вопрос: насколько часто возникает проблема и сколько пользователей она затрагивает.

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

Где теряют интерес при скроллинге

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

На каких экранных формах падает конверсия

Сложный сценарий можно разбить на этапы:

Открыли форму             100%
Начали заполнение          82%
Заполнили контакты         71%
Выбрали способ доставки    64%
Перешли к оплате           57%
Завершили заказ             51%

В этом примере особенно интересно изучить переход от 82% к 71% и от 64% к 57%. Там может находиться конкретная проблема: слишком сложное поле, неожиданные требования или недостаточно понятный следующий шаг.

А/В-тесты: цвета и расположение

А/В-тестирование позволяет сравнить два варианта интерфейса на реальной аудитории. Например, одной части пользователей показать кнопку справа, другой — слева. Или сравнить две формулировки действия.

Цвет тоже можно проверять, но важно не сводить А/В-тесты исключительно к «красная кнопка против зелёной». Иногда изменение текста, порядка полей или структуры страницы влияет сильнее, чем цвет.

Как улучшить

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

Изменить или адаптировать дизайн

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

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

Изменить навигацию

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

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

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

Снизить число шагов

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

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

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

Помогать вводить адрес

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

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

Похожий принцип применяется и к персональным данным. Например, в интерфейсах Т-Банка встречаются формы, где ФИО собирается в одном поле с понятным форматом «Фамилия Имя Отчество», вместо того чтобы заставлять пользователя разбираться в трёх отдельных полях.

Ошибки юзабилити: примеры

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

Слишком много шагов

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

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

Задача:
купить товар за 2 000 ₽

Неудачный путь:
товар → регистрация → e-mail →
телефон → профиль → адрес →
подтверждение → доставка → оплата

Возможный упрощённый путь:
товар → адрес → доставка → оплата

Непонятные сообщения об ошибке

Сообщение «Ошибка выполнения операции» практически бесполезно. Пользователь не знает, что именно произошло и что делать.

Гораздо лучше написать: «Не удалось загрузить документ. Проверьте размер файла — он должен быть не больше 20 МБ». Здесь есть причина и конкретное действие.

Кнопка есть, но непонятно, что она делает

Кнопки «Продолжить», «Далее», «Выполнить» и «Подтвердить» иногда используются без контекста. Пользователь вынужден угадывать, что произойдёт после клика.

Если можно написать действие конкретно, лучше написать его конкретно: «Перейти к оплате», «Отправить заявку», «Скачать договор», «Сохранить изменения».

Интерфейс говорит на языке разработчика

Пользователь видит «объект не прошёл валидацию». Разработчик понимает всё. Пользователь — нет.

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

Нет возможности отменить действие

Человек случайно удаляет документ, а система сообщает: «Удаление выполнено». Всё. Документ исчез.

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

Система заставляет вводить известные ей данные

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

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

Слишком много элементов на одном экране

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

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

Неочевидная обратная связь

Пользователь нажал «Сохранить», но экран никак не изменился. Он не понимает, сохранились данные или нет. Через несколько секунд нажимает кнопку ещё раз.

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

Чем отличается

Юзабилити, UI, UX, User Story и Use Case описывают разные стороны создания цифрового продукта, но связаны между собой в одном процессе.

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

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

Упрощённо цепочка выглядит так: User Story → Use Case → UI → юзабилити → UX, хотя на практике эти направления постоянно влияют друг на друга и дорабатываются итеративно.

Чем юзабилити отличается от UI

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

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

UI Юзабилити
Цвет кнопки Понятно ли, что кнопка делает
Шрифт Легко ли читать текст
Иконка Понятно ли её значение
Отступы Легко ли ориентироваться
Анимация Помогает ли она понять состояние системы

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

Чем юзабилити отличается от UX

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

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

Понятие Главный вопрос Пример
UI Как выглядит и работает интерфейс? Кнопки, цвета, поля, меню
Юзабилити Насколько легко им пользоваться? Можно ли быстро оформить заказ
UX Каким в целом оказался опыт пользователя? Удобно ли, понятно ли, вызывает ли доверие

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

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

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

CIO-NAVIGATOR