UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 4 метода визуального фидбека в интерфейсах
Редакція
Редакція

Опубліковано

4 метода визуального фидбека в интерфейсах

Наглядность состояния системы – одна из десяти эвристик Якоба Нильсена для проектирования пользовательского интерфейса. Сообщая о текущем состоянии системы, вы даете пользователям ощущение контроля над системой, а это чувство контроля помогает вам завоевать доверие.

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

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

Где я

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

Навигационный паттерн нижней панели Google — Мобильный UX дизайн отAurélien Salomon ➔

Сколько шагов для этого требуется

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

Приложение с тестами от SELECTO

2. Визуальный фидбек, подтверждающий действия пользователя

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

Важно показать, что система действительно улавливает тап/ клик.

Состояния наведения курсора и активации от Ali Ali

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

  • Нажатие на кнопку «Нравится».

Распространяйте любовь, а не вирусы, Charles Patterson

  • Включение / выключение чего-либо. Изменение цвета кнопки дает пользователям сигнал о текущем состоянии объекта.

Переключатель XLIV от Oleg Frolov

  • Добавление элемента в закладки

Добавление в закладки [SVG-анимация] от Oleg Frolov

  • Добавление объекта в корзину. В этом случае визуальный фидбек докажет, что товар был добавлен в корзину.

Анимация заказа кофе (Starbucks) от Nhat M. Tran

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

Показывает, что система что-то делает

Когда для загрузки системы требуется больше, чем несколько секунд, нужно дать пользователям немедленную обратную связь. В зависимости от времени ожидания рекомендуется использовать либо бесконечные индикаторы загрузки (обычно для операций, которые занимают менее 10 секунд):

Бесконечный индикатор загрузки от renatorena

Либо индикаторы выполнения (для операций, которые занимают больше 10 секунд):

Анимация от Allen Zhang

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

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

Экран заставка от Gleb Kuznetsov✈

Контент загружается

Когда для загрузки контента требуется время, рекомендуется использовать специальный тип контейнера – skeleton screen. Этот временный контент-контейнер используется для уменьшения времени ожидания и должен быть заполнен реальными данными, как только они станут доступны.

Skeleton Loader от Ginny Wood

Этот контейнер одинаково хорошо подходит для декстопных и мобильных продуктов.

Анимация Skeleton Loading от Shane Doyle

4. События

Уведомления / Индикаторы

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

Уведомления от Aleksei Kipin

Запрос действий пользователя

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

Встроенная проверка электронной почты от Derek Reynolds

Больше контроля означает лучший пользовательский опыт

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

Для получения дополнительной информации о дизайне пользовательского интерфейса, я рекомендую ознакомиться с курсом UI Design Patterns for Successful Software. Этот курс содержит важную информацию о паттернах дизайна интерфейса, а также о том, как их правильно использовать.


Перевод статьи uxplanet.org

Найстарші коментарі (0)