Обратная связь в интерфейсах

Введение

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

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

Что такое обратная связь в интерфейсах

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

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

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

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

Польза обратной связи

Мы поговорили про общее значение обратной связи, теперь рассмотрим некоторые моменты более конкретно:

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

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

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

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

Типы обратной связи

Поговорим о том, каких типов может быть обратная связь:

Визуальная связь

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

Звуковая связь

Звуковой сигнал при нажатии на какой-либо элемент, появление уведомления или завершении действия.

Тактильная связь

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

Какой должна быть обратная связь

При разработке обратной связи для любого интерфейса нужно учитывать следующее:

1. Ответ от системы должен быть мгновенным и непрерывным

Каждое действие пользователя сопровождается немедленной реакцией интерфейса.

2. В течение какого времени пользователь будет видеть ответ

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

3. Условные обозначения и иконки

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

4. Что происходит с экраном сайта или приложения

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

5. Предложите пользователю следующее действие

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

О чем сообщает обратная связь в интерфейсе

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

Местоположение и прогресс пользователя

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

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

Хлебные крошки: Главная / Женщинам / Одежда — *lamoda.ru*

2. Обратная связь показывает, на каком этапе определенной операции находится пользователь

Это помогает ему понять, насколько он близок к завершению.

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

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

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

Вот несколько примеров того, что относится к таким действиям:

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

При наведении курсора на ссылку ее цвет меняется — *aim.obys.agency*

Состояние системы

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

Существуют различные варианты такого вида обратной связи, например:

Бесконечный индикатор загрузки (подходит для ситуаций, когда ожидание составляет меньше 10 секунд).
Анимация прелоадера (поможет удержать внимание пользователя даже во время загрузки страницы).

Загрузка контента тоже требует фидбека от интерфейса.

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

События

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

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

Состояния элементов интерфейса

Default (normal)

Основной вид элемента в спокойном состоянии.

Hover

Вид элемента при наведении мыши (для десктопных экранов).

Active (pressed)

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

Disabled

Указывает на то, что в данный момент с элементом нельзя взаимодействовать (например, нельзя нажать кнопку «Оформить заказ», если корзина пуста).

Error

Показывает, что при выполнении действия произошла ошибка.

Progress/Loading

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

Visited

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

Обратная связь при возникновении ошибок

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

Кроме того, хорошо продуманные сообщения об ошибках помогут:

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

Провести пользователя по воронке продаж до завершения сделки, даже если в процессе возникли какие-то проблемы.

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

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

Советы по проектированию сообщений об ошибках:

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

Сама ошибка должна быть выделена, например, цветом.

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

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

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

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

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

Заключение

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

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

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

Введение Что такое обратная связь в интерфейсах О чем сообщает обратная связь в интерфейсе Состояния элементов интерфейса Обратная связь при возникновении ошибок Заключение