Школа дизайна Абрамовой Марины

Bottom Sheet

Bottom Sheets: Определение и рекомендации по пользовательскому опыту (UX)

Bottom Sheet - это компонент (составной элемент) интерфейса, широко используемый в мобильных приложениях для предоставления контекстной информации или элементов управления в нижней части экрана.
Автор: Пейдж Лаубхаймер
Обеспечение заметной и удобной доступности контекстных элементов управления на мобильных устройствах является сложной задачей. Маленькие экраны заставляют нас скрывать некоторую информацию или элементы управления до тех пор, пока они не понадобятся.
Bottom Sheets - это частичные оверлеи (наложения на основной интерфейс), особенно подходящие для мобильных устройств, которые обеспечивают доступ к важной информации, которая может быть временно необходима, но также может быть закрыта.
Определение: Bottom Sheet - это оверлей, прикрепленный к нижнему краю экрана мобильного устройства, который отображает дополнительные сведения или действия.
Для упрощения интерфейса, используется постепенное раскрытие информации, чтобы перенести второстепенные параметры на вспомогательный экран. Это фокусирует внимание пользователей на основных параметрах, которые отображаются по умолчанию. Bottom Sheets представляют собой такую форму постепенного раскрытия - они обычно вызываются пользовательским взаимодействием и предоставляют дополнительные детали. Поскольку они намеренно затемняют часть экрана, они не подходят для отображения информации или инструментов нужных всегда.
Они используются для предоставления дополнительной информации, контекстных элементов управления или того и другого. Преимущество Bottom Sheet заключается в том, что, в отличие от отдельной страницы (которая требует пространственной ориентации для пользователей и может заставить их удерживать информацию в памяти), он сохраняет только текущий контекст пользователя.
Bottom Sheets имеют много общего с диалогами и оверлеями (что неудивительно, так как они являются разновидностью оверлея). Однако особенностью Bottom Sheets по сравнению с другими оверлеями является то, что они сохраняют значительную видимость основной информации. Поэтому Bottom Sheets особенно полезны, когда пользователи, взаимодействуя с информацией или опциями, представленными в Bottom Sheet, будут нуждаться в обращении к основной фоновой информации.
Распространенное (но в значительной степени неверное) обоснование использования Bottom Sheets состоит в том, что они повышают доступность для пользователей мобильных устройств (то есть, часто предполагается, что элементы в нижней части экрана легче нажимать). К сожалению, это не всегда верно - поскольку пользователи держат мобильные устройства разными способами (одной рукой, двумя руками и с различных точек захвата), нижняя часть экрана часто не является наиболее доступной областью экрана (центр экрана представляет наиболее удобную для нажатий область для различных способов держания мобильных устройств).

Модальные и немодальные Bottom Sheets

Bottom Sheets могут быть модальными или немодальными.
Модальные Bottom Sheets работают аналогично классическим модальным всплывающим окнам - они заставляют пользователей взаимодействовать с ними (или закрывать их) до того, как они смогут выполнить другие действия в приложении. Модальный Bottom Sheet блокирует любое взаимодействие с фоновым контентом. Обычно над фоновым контентом, который заблокирован, размещается полупрозрачный темный слой, сигнализирующий, что этот контент временно недоступен.
Немодальные Bottom Sheets не требуют взаимодействия - они остаются в нижней части экрана и позволяют пользователю взаимодействовать с фоновым контентом. Они подходят для представления детальной информации или опций параллельно с основной информацией на экране.
Некоторые Bottom Sheets можно расширять. Пользователи могут нажать или провести по нижнему листу вверх, чтобы расширить его в полноэкранный (или почти полноэкранный) модальный вид. Обычно Bottom Sheets начинаются в немодальном состоянии, когда они свернуты, но становятся модальными, когда развернуты.

Рекомендации по использованию Bottom Sheets

В наших исследованиях мы заметили, что пользователи сталкиваются с похожими проблемами при использовании Bottom Sheets, как и с другими оверлеями. Это обычно вызвано:
  1. Отсутствием явного способа закрытия Bottom Sheet.
  2. Накладывание нескольких Bottom Sheets друг на друга.
  3. Скрытие важной фоновой информации.

Ниже приведены рекомендации для устранения этих проблем.

  1. Разрешить использование кнопки "Назад" для закрытия Bottom Sheet: Особенно когда Bottom Sheet развернут в полноэкранный режим, пользователи могут ошибочно принять его за обычную страницу и ожидать использования стандартных элементов навигации (таких как кнопка "Назад" на телефоне или жест "Назад") для возврата к предыдущему экрану. Однако не все Bottom Sheets поддерживают этот механизм. Чтобы предотвратить такую путаницу, следует разрешить использование кнопки "Назад" для закрытия Bottom Sheet и обеспечить плавный переход к предыдущему виду.
  2. Включить кнопку "Закрыть": Хотя большинство Bottom Sheets можно закрыть свайпом вниз (или нажатием) на верхнюю ручку, этот элемент может быть легко пропущен пользователями или они могут не знать о его функциональности. Кроме того, вертикальный свайп также может вызывать неоднозначность: в зависимости от того, с какого места он инициируется, он может закрыть Bottom Sheet, открыть панель уведомлений или панель управления телефоном. Чтобы обеспечить надежное закрытие Bottom Sheet, рекомендуется добавить на экран видимую кнопку "Закрыть" (обычно представленную в виде "X" или слова "Закрыть") в верхней части Bottom Sheet. Это также облегчит доступ пользователей с ограниченными возможностями зрения или тех, кто не может свайпать по экрану.
  3. Не накладывать Bottom Sheets друг на друга: Одной из основных проблем с Bottom Sheets является их накладывание друг на друга. Пользователям приходится запоминать, на каком из множества листов они находятся, и различать закрытие только последнего листа и закрытие всего стека. Поэтому настоятельно рекомендуется не использовать Bottom Sheet для замены типичных переходов от страницы к странице. Bottom Sheet представляет собой временный элемент пользовательского интерфейса и не предназначен для стабильного места, куда пользователи могут возвращаться или тратить значительное время. Он предназначен для временных прерываний или ветвей в пользовательском опыте, а не для ожидаемого "главного пути", который пользователи обычно выбирают. Например, не следует использовать Bottom Sheet для отображения страницы с подробной информацией о продукте в электронной коммерции: пользователи могут переходить к связанным продуктам, отзывам или детальным характеристикам с этого листа, и использование Bottom Sheet нарушит стандартные правила навигации от страницы к странице.
  4. Использовать Bottom Sheets только для коротких взаимодействий: Наконец, не рекомендуется использовать Bottom Sheet, когда пользователи будут тратить значительное время на рассмотрение информации (или опций), отображаемой в нем. Bottom Sheet представляет собой временный элемент пользовательского интерфейса и предназначен для поддержки быстрых взаимодействий, а не для отображения сложного контента.
Выводы: Bottom Sheets - это шаблон пользовательского интерфейса для мобильных приложений, предназначенный для предоставления временной контекстной информации, сохраняя доступ к основному контенту. При использовании для нескольких опций или дополнительной информации Bottom Sheet обеспечивает быстрый доступ к элементам управления, однако его не следует накладывать на другие Bottom Sheets или использовать для отображения длинного контента.
2023-07-28 19:32