Главное Свежее Вакансии Образование
😼
Выбор
редакции
1 391 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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


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

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

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


Местоположение


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


Навигационная модель Google Bottom Bar — дизайн мобильного UX от Aurélien Salomon

Количество шагов к определённому действию


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


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

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


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


Кнопка наведения и активные состояния Ali Ali

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

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


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


Switcher XLIV от Oleg Frolov

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


Взаимодействие с закладками [SVG animation] от Oleg Frolov

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


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

3. Визуальная обратная связь, которая показывает состояние системы


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


Бесконечный цикл загрузки от Renatorena

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


Анимация загрузки от Allen Zhang

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

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

Загрузка контента


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


Скелетная загрузка от Ginny Wood

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


Скелетная анимация загрузки от Shane Doyle

4. Запущенные события


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


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


Требования к действиям пользователя


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


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

Заключение


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

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

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

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.