😼 Выбор редакции 22 мая 2020 Design Glory 1 391 0 В избр. Сохранено Авторизуйтесь Вход с паролем 4 способа сообщить о состоянии системы в UI Видимость состояния системы обеспечивает лучший пользовательский опыт. В этой статье предоставлено 4 эффективных метода визуальной обратной связи. Нравится 0 Share 0 Tweet 0 Send Больше интересной и новой информации у нас в блоге и телеграм-канале.Видимость состояния системы — одна из десяти эвристик Якоба Нильсена для проектирования в мире UI. Сообщая о текущем состоянии системы, вы предоставляете пользователям ощущение контроля над системой, и, в свою очередь, это чувство помогает вам завоевать их доверие.Ниже предоставлено четыре метода визуальной обратной связи:1. Визуальная обратная связь, которая показывает местоположение пользователяМестоположениеИнформирование пользователей о том, где они находятся в приложении, важно для создания хорошего навигационного опыта. И приложения, и веб-сайты должны выделять выбранный в данный момент параметр навигации, чтобы помочь пользователям понять их текущее местоположение. Навигационная модель Google Bottom Bar — дизайн мобильного UX от Aurélien SalomonКоличество шагов к определённому действиюЗнание того, сколько шагов требуется для выполнения определённой операции поможет пользователю оценить время, необходимое для завершения процедуры.Приложение для проверки знаний опроса от SELECTO2. Визуальная обратная связь, подтверждающая действия пользователяНемедленная визуальная обратная связь подтвердит, что приложение получило пользовательское действие, усилит чувство прямой манипуляции и предотвратит ошибку пользователя (например, дважды нажав одну и ту же кнопку).Кнопка наведения и активные состояния Ali AliВ некоторых случаях также важно изменить состояние самой кнопки для видимого результата взаимодействия, делая его как видимым, так и понятным. Вот несколько примеров таких случаев:— Нажимая на кнопку «Нравится».— Включение/выключение. Изменение цвета кнопки даёт пользователям сигнал о текущем состоянии объекта.Switcher XLIV от Oleg Frolov— Добавление в «Закладки».Взаимодействие с закладками [SVG animation] от Oleg Frolov— Добавление объекта в корзину. В этом случае визуальная обратная связь показывает, что товар был добавлен в корзину.Анимация заказа кофе (Starbucks) от Nhat M. Tran3. Визуальная обратная связь, которая показывает состояние системыКогда для загрузки системы требуется более нескольких секунд, пользователям следует предоставить немедленную обратную связь. В зависимости от времени ожидания рекомендуется использовать либо бесконечные индикаторы загрузки (обычно для операций, которые занимают менее 10 секунд):Бесконечный цикл загрузки от RenatorenaИли индикаторы выполнения (для операций, которые занимают более 10 секунд):Анимация загрузки от Allen ZhangЭти показатели сообщают, что система работает и снижают уровень неопределённости.Для мобильных приложений также можно использовать анимированные заставки во время начальной загрузки. Хорошо продуманная заставка создаст позитивное впечатление для начинающих пользователей и переключит их внимание с факта ожидания.Загрузка контентаКогда для загрузки контента требуется некоторое время, рекомендуется использовать специальный тип контейнера — скелетный экран. Этот временный контейнер содержимого используется для уменьшения времени ожидания и должен быть заполнен реальными данными, как только они станут доступны.Скелетная загрузка от Ginny WoodЭтот контейнер одинаково хорошо работает для настольных и мобильных продуктов.Скелетная анимация загрузки от Shane Doyle4. Запущенные событияУведомления / ИндикаторыЦель эффективного уведомления — привлечь внимание пользователя к факту нового события. Для уведомлений рекомендуется использовать тонкую анимацию, потому что анимированные эффекты естественным образом привлекают внимание пользователя — человеческий глаз сосредоточен на движущихся объектах.Требования к действиям пользователяСуществует много случаев, когда система может запрашивать данные для действий пользователя. Например, когда пользователи заполняют форму с неверными данными: недостаточно надёжный пароль, неверный адрес электронной почты и т. д. Всегда лучше заранее сообщить пользователям о проблеме, используя соответствующую визуальную обратную связь.Встроенная проверка электронной почты от Derek ReynoldsЗаключениеНаличие контроля предполагает лучший пользовательский опыт. Когда люди взаимодействуют с UI, они ожидают предсказуемости и лаконичности и именно поэтому UI-дизайнеры должны обеспечивать эффективную визуальную обратную связь.Оригинал статьи 0 Авторизуйтесь В избр. Сохранено Авторизуйтесь Вход с паролем Нравится 0 Share 0 Tweet 0