На каждое действие в Сети должна быть реакция. Обратная связь может сообщить пользователю, было ли действие успешным или нет, но в идеале она расскажет им больше, например, что делать дальше или почему действие занимает так много времени.
Вы, вероятно, сталкивались с ситуацией, когда вы отправили форму. После нажатия кнопки отправки ничего не происходит. Форма отправлена? Возможно, отправка формы не удалась.
Это отличный пример того, как обратная связь может развеять любые сомнения или страхи, которые могут возникнуть у пользователя. Простой индикатор выполнения решит эту проблему. Это визуально сообщает пользователю, что сервер получил форму и активно ее обрабатывает.
Отсутствие обратной связи может вызвать много проблем. Например, мы отправили форму, но не получили ответа. Возможны следующие сценарии:
Пользователи обновляют страницу, поскольку считают, что отправка формы не удалась. Этот сценарий может привести к двойной отправке данных, что повлияет на качество ваших данных.
Пользователи ищут альтернативные способы связи с вами, такие как Twitter, LinkedIn или Facebook.
Пользователи отправляют данные с помощью других средств связи, таких как адрес электронной почты, который они находят на
Пользователи покидают сайт, не заполнив форму.
Как видите, такая простая вещь, как отображение индикатора прогресса, может сэкономить организации много накладных расходов. В наихудшем сценарии этого примера вы теряете потенциального клиента, так как он не дождется завершения отправки формы.
В этой статье рассматривается важность обратной связи, общие элементы пользовательского интерфейса для предоставления обратной связи, а также хорошие и плохие примеры обратной связи.
Что такое обратная связь в
Пользовательский интерфейс реагирует на действия. Это то, что мы определяем как обратную связь. Обратная связь используется для вовлечения, объяснения и устранения страха или замешательства, что повышает удовлетворенность пользователей.
Большинство отзывов, с которыми вы сталкиваетесь, являются визуальными для пользовательских интерфейсов. Для игр или других типов контента обратная связь с пользователем может принимать форму слуховой обратной связи. Давайте сосредоточимся на визуальной обратной связи.
Визуальная обратная связь преследует три основные цели, подробно описанные ниже.
1. Чувствительность сигнала
Часто неясно, доступен ли элемент для кликов. Таким образом, кнопки реализуют визуальную обратную связь, когда вы наводите на них курсор.
Эта форма обратной связи необходима, чтобы сообщить пользователю, что он может взаимодействовать с элементом. Без этого пользователю придется угадывать, какие элементы разрешают взаимодействие. Но помните, что пользователи сенсорных устройств не смогут воспользоваться эффектами наведения.
Источник видео
2. Увеличьте вовлеченность
Обратная связь не просто сигнализирует о результате действия. Он также может направлять пользователя. Визуальный эффект привлекает внимание пользователя к определенному элементу пользовательского интерфейса и побуждает пользователя щелкнуть его. Таким образом, вы можете использовать визуальную обратную связь, чтобы сообщить пользователю, что делать дальше.
Допустим, вы хотите увеличить количество пользователей, подписавшихся на вашу рассылку. Как насчет добавления небольшой визуальной подсказки в форму регистрации? Например, сделайте так, чтобы кнопка «Зарегистрироваться» ненадолго покачивалась, чтобы привлечь внимание пользователя, когда форма информационного бюллетеня отображается визуально. Это простая, но эффективная техника для повышения вовлеченности.
Источник видео
3. Сигнальная активность
Наконец, обратная связь наиболее полезна, чтобы сообщить пользователю,
Это самая важная форма обратной связи! Действие всегда требует противодействия. Отсутствие обратной связи является основным источником путаницы или страха для пользователей, взаимодействующих с приложениями. Кроме того, обратная связь улучшает взаимодействие с пользователем, устраняя путаницу.
Источник видео
Каковы наиболее распространенные примеры
Вот список общих
Индикатор загрузки или индикатор выполнения: этот элемент обеспечивает визуальную обратную связь, сообщая пользователю, что процесс запущен. Индикатор загрузки удерживает внимание пользователя, если процесс занимает больше одной секунды. Нет необходимости в индикаторе загрузки для процессов менее одной секунды, так как мы
Метки интерактивной формы: метки интерактивной формы немедленно предоставляют пользователю обратную связь о его вводе. Например, поле пароля должно соответствовать определенным критериям.
Если введенный пароль не соответствует критериям, мы сразу сообщаем пользователю, что не так, и сигнализируем об этом визуально.
Форма регистрации MailChimp реализует критерии, которые меняют цвет при выполнении. В этом примере я забыл включить хотя бы один специальный символ для ввода пароля.
Критерии формы при изменении цвета ввода при удовлетворении
(Источник: регистрационная форма MailChimp)
Колокольчик уведомлений: одна из наиболее распространенных форм обратной связи для повышения вовлеченности — это колокольчик уведомлений. Дизайнеры часто сочетают колокольчик уведомлений с небольшим кругом, который отображает количество непрочитанных уведомлений. Многие
Эффект наведения: чаще всего вы видите эффект наведения для ссылок и кнопок.
Всплывающее сообщение / баннер / закусочные: эти типы уведомлений позволяют вам делиться временными сообщениями, которые приходят и уходят без участия пользователя. Чаще всего они предоставляют контекстную информацию о процессах приложения.
Вы часто видите предупреждающее сообщение о том, что определенные функции находятся на обслуживании или временно недоступны. Некоторые дизайнеры предпочитают, чтобы они автоматически появлялись и исчезали, в то время как другие дизайнеры предпочитают, чтобы пользователь отбрасывал их, чтобы убедиться, что он видел содержимое сообщения.
Пример предупреждающего баннера
(Источник: Atlassian.design)
Навигация по цепочкам: навигация по цепочкам предоставляет пользователям информацию о состоянии, чтобы они знали, где они находятся в процессе и какие действия еще требуются. Этот тип обратной связи повышает вовлеченность, поскольку пользователь точно знает, сколько шагов ожидать.
Строка хлебных крошек, показывающая три шага до оформления заказа
Источник изображения
Вывод: должны ли мы сосредоточиться на UX?
Обеспечение отличного пользовательского опыта является ключевым моментом. Пользовательский опыт часто стимулирует продажи. Например, сообщите пользователю, на каком этапе он находится в процессе оформления заказа. Хлебные крошки — отличный инструмент для быстрой обратной связи с пользователем.
Опять же, обратная связь помогает устранить путаницу или опасения по поводу того, сколько времени займет процесс. В приведенном выше примере пользователь знает, что ему нужно выполнить три шага, чтобы эффективно купить продукт. Он обеспечивает душевное спокойствие.
В этой статье показана важность обратной связи и стандартных элементов пользовательского интерфейса, которые можно реализовать для обеспечения обратной связи с пользователем. Одним из самых элементарных элементов обратной связи пользовательского интерфейса является индикатор прогресса. Это отличный инструмент для устранения любого страха или путаницы в отношении процесса.
Помните, что вы можете использовать обратную связь
