4 способа сообщить о состоянии системы в UI

Видимость состояния системы обеспечивает лучший пользовательский опыт. В этой статье предоставлено 4 эффективных метода визуальной обратной связи.

Оригинал статьи

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

Ниже предоставлено четыре метода визуальной обратной связи:

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

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

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

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

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

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

- Добавление в «Закладки».

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

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

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

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

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

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

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

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

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

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

Больше интересной и новой информации у нас в блоге и телеграм-канале.