snackbar 800x440 - Проблема снэкбаров и, что использовать вместо них

Снэкбары (Snackbars) – также известные, как toast-сообщения – это маленькие сообщения, отображаемые в верхней части интерфейса, чтобы дать пользователям фидбек в ответ на только что выполненное действие.

Они предназначены для того, чтобы сосредоточить внимание пользователей на том, что они делают, поэтому они маленькие и автоматически исчезают через несколько секунд.

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

1. Они исчезают автоматически

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

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

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

2. Их трудно использовать посредством клавиатуры

Когда снэкбары появляются, они не получают фокус клавиатуры.

Это затрудняет пользователям, использующим для навигации клавиатуру, выбор доступных действий. Потому что в плане последовательности вкладок снэкбар находится далеко и, вероятно, исчезнет к тому времени, когда пользователь доберется до него.

3. Они могут беспорядочно менять состояние

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

Например, когда вы отправляете электронное письмо в Gmail, статус снэкбара меняется 3 раза:

Письмо отправляется

Во-первых, он сообщает, что электронное письмо отправляется. Пользователь может отменить отправку или закрыть сообщение.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проблема снэкбаров и, что использовать вместо них
Снэкбар Gmail при отправке электронного письма

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

Письмо было отправлено, но вы можете отменить отправку

Снэкбар обновляется, сообщая, что электронное письмо отправлено. Пользователь может отменить отправку, просмотреть сообщение или закрыть снэкбар.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проблема снэкбаров и, что использовать вместо них
Снэкбар Gmail, когда письмо только что отправили

Письмо было отправлено, и вы не можете отменить отправку

Через 5 секунд «Отмена» исчезает, что оставляет пользователю возможность просмотреть сообщение или закрыть снэкбар.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проблема снэкбаров и, что использовать вместо них
Снэкбар Gmail, когда письмо было отправлен и прошло 5 секунд

Он остается видимым в течение 10 секунд, прежде чем исчезнуть.

Эта неустойчивая природа делает снэкбары сложными в использовании.

4. Они отвлекают и могут перекрывать экран

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

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

5. Их трудно заметить

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

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

6. По сравнению с другими типами сообщений, они расположены непоследовательно

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

Поскольку разные сообщения будут появляться в разных местах, пользователям необходимо следить за двумя областями экрана, что увеличивает когнитивную нагрузку.

Что использовать вместо них

Краткий ответ:

  • показать заметное сообщение в верхней части страницы
  • привлечь внимание к сообщению
  • держать сообщение на экране, пока пользователь не покинет экран (или отклонит его)

Длинный ответ заключается в том, что предупреждения и уведомления должны учитывать конкретный контекст. Подробнее об этом в конце статьи.

Постоянный фидбек

Иногда вам нужно давать пользователям постоянную обратную связь.

Например, при работе с Google-документом, файл постоянно переключается между сохраненным и несохраненным состояниями.

Хотя пользователь должен знать, сохранен ли файл или нет, он не хочет, чтобы его постоянно прерывали во время работы.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Проблема снэкбаров и, что использовать вместо них
Google-документ, показывающий область состояния в шапке

Google-документы помещают сообщение о состоянии рядом с меню в верхней части экрана, что хорошо работает в данном контексте, потому что оно:

  • не мешает
  • не привлекает внимание пользователя
  • его можно мгновенно увидеть
  • можно кликнуть по нему, чтобы увидеть, что произошло ранее

Вывод

Уведомления предназначены для того, чтобы вселить в пользователей уверенность в отношении выполняемых ими действий.

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

Если пользователь работает над чем-то, что требует почти постоянный фидбек, например, над Google-документом, то добавьте в интерфейс постоянную область состояния, которую пользователи смогут мгновенно проверить.

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

Спасибо Amy Hupe за редактуру этой статьи.

Свежие вакансии
                        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 Удаленно Москва
Все вакансии

Оригинал: adamsilver.io

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

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

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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