Дизайн
Glory Mlory
3493

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-дизайнеры должны обеспечивать эффективную визуальную обратную связь.

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

{ "author_name": "Glory Mlory", "author_type": "self", "tags": [], "comments": 10, "likes": 52, "favorites": 279, "is_advertisement": false, "subsite_label": "design", "id": 129082, "is_wide": false, "is_ugc": true, "date": "Fri, 22 May 2020 18:01:40 +0300", "is_special": false }
Трибуна
ApiX-Drive — онлайн-коннектор разных сервисов и приложений между собой без программистов
Рассказываем, как запустили аналог Zapier за три месяца.
Объявление на vc.ru
0
10 комментариев
Популярные
По порядку
Написать комментарий...
8

При постоянном наблюдении этих милисекунд анимации в приложениях просто надоедает ожидать завершения показухи...

Ответить
7

Забивать на контекст - любимое занятие дизайнеров с Дриббла

Просто взять и выкинуть панель навигации iOS

Такой жест, как в примере корзины Starbucks нафиг закроет приложение

Ответить
4

Я видимо уже старый - но ни один из приведенных примеров с ходу не является понятным или очевидным. 
Скелетная загрузка? Чтоб ее сделать в том виде что приведен и чтобы оно реально работало так - нужно перепахивать приложение неслабо, насколько это актуально если вы не фейсбук - вопрос.

Ответить
1

Для ios на гитхабе есть гибкий фреймворк «skeleton», настройка занимает 15-20 минут.

Ответить
4

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

Ответить
0

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

Ответить
2

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

Ответить
2

Отлично статья, спасибо. Добавил в закладки!

Ответить
2

А много ещё таких статей капитанов очевидностей будет на VC? Это все уже обмусолено сто раз, а большинство вещей даже в документации, например, Material Design указано.

Ответить
0

это же vc а VC по английски=уборная :)
тут 99% статей это рекламный мусор.
Пора привыкнуть, что это площадка где сортировки нет и не будет, пиши что хочешь и как хочешь.
А статья хоть и "старая" но полезнее чем 99% здешних.

Ответить

Прямой эфир