linkedin skeleton screen loading 800x440 - 4 метода визуального фидбека в интерфейсах

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

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

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

Где я

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Навигационный паттерн нижней панели Google — Мобильный UX дизайн отAurélien Salomon ➔

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Приложение с тестами от SELECTO

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Состояния наведения курсора и активации от Ali Ali

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

  • Нажатие на кнопку «Нравится».
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Распространяйте любовь, а не вирусы, Charles Patterson
  • Включение / выключение чего-либо. Изменение цвета кнопки дает пользователям сигнал о текущем состоянии объекта.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Переключатель XLIV от Oleg Frolov
  • Добавление элемента в закладки
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Добавление в закладки [SVG-анимация] от Oleg Frolov
  • Добавление объекта в корзину. В этом случае визуальный фидбек докажет, что товар был добавлен в корзину.
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Анимация заказа кофе (Starbucks) от Nhat M. Tran

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Бесконечный индикатор загрузки от renatorena

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Анимация от Allen Zhang

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Экран заставка от Gleb Kuznetsov✈

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Skeleton Loader от Ginny Wood

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Анимация Skeleton Loading от Shane Doyle

4. События

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Уведомления от Aleksei Kipin

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - 4 метода визуального фидбека в интерфейсах
Встроенная проверка электронной почты от Derek Reynolds

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

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

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

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: uxplanet.org

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Урок по созданию анимации в Figma, используя плагин Figmotion

Чтобы освоить Figma и Figmotion, я собираюсь воссоздать ряд микровзаимодействий из приложения Google Photos

Введение в новую систему Motion Material Design, паттерны переходов

Мы недавно опубликовали новое руководство по дизайну для наиболее важного типа анимации в приложениях: переходов в пользовательском интерфейсе

Полное руководство по правильному использованию анимации в UX

В этой статье я собрал все основные принципы и правила создания анимации воедино