Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

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

Существует всего два типа экранов

1. Модальные экраны
2. Немодальные экраны

Вот и все. Позвольте мне объяснить. (Почти) Каждый экран попадает в одну из этих двух категорий. Чтобы понять, что отличает модальный экран от немодального, мы сначала должны дать определение значения модальный экран.

Что такое «Модальный экран»?

Примеры модальных экранов Модальные экраны могут быть разных форм и размеров:

• Полноэкранные модальные представления (1)
• Всплывающие окна (Popups) (2)
• Вспомогательные экраны (Popovers) (3)
• Лайтбоксы (Lightboxes) (4)
• Предупреждения / Уведомления
•  (Многошаговые) диалоги окна
• …

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

«Модальное окно создает режим, который отключает главное окно, но оставляет его видимым вместе с модальным окном, как дочерним окном перед ним. Пользователи должны взаимодействовать с модальным окном, прежде чем смогут вернуться в родительское приложение» — Wikipedia

Большинство модальных экранов, особенно в десктопных приложениях, можно легко идентифицировать, поскольку они визуально перекрывают главное окно: тоже самое со всплывающими окнами, которые исчезают из основного окна в фоновом режиме, всплывающих меню и всплывающих диалоговых окон, лайтбоксов, оповещений… Однако пространство экрана на мобильных устройствах ограничено, поэтому многие модальные экраны на мобильных устройствах занимают весь экран. Теперь они закрывают основное окно, скрывая его, следовательно, их труднее отличить от немодальных экранов: Пример iOS: модальные экраны на мобильных устройствах часто полностью скрывают главное окно приложения Основное отличие заключается в том, как вы можете взаимодействовать с каждым экраном. В то время, как немодальный экран позволяет пользователям просто вернуться к родительскому экрану, модальный экран требует, чтобы пользователи завершили действие, прежде чем вернуться в главное окно («сохранить» в нашем примере) или отменили текущее действие. Наиболее ярким визуальным индикатором немодальных экранов является видимость навигации (панель вкладок в нашем примере). Немодальные экраны позволяют пользователям переходить назад и вперед на основном уровне навигации, даже если они находятся на под странице. С другой стороны, модальный экран требует, чтобы пользователи закрыли окно, прежде чем они снова смогут использовать основную навигацию («Сохранить» или «Отмена» в нашем примере). Это различие является одной из причин, по которой я написал статью «Панель вкладок – это новое гамбургер-меню?»: https://ux.pub/panel-vkladok-eto-novoe-gamburger-menyu/

Почему следует использовать модальность?

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

«Модальность фокусирует внимание на том, что люди не могут заниматься другими делами, пока не выполнят задачу или не отклонят сообщение или представление» — Apple

Когда следует использовать модальность?

Теперь, когда мы знаем, как выглядит модальный экран, чем отличается от немодального и какова его цель, мы должны спросить себя: «В какой ситуации мы должны его использовать?» Я обещал вам котят, так что приступим: давайте представим, что мы создаем гениальное и инновационное приложение: «Purrrfect» – база данных о котятах, которая позволяет пользователям загружать, просматривать и комментировать GIF-изображения симпатичных кошек. Гениальная концепция. (Упрощенный) юзерфлоу нашего приложения может выглядеть следующим образом: пользователь открывает приложение, он входит в одну из нескольких доступных вкладок (наша база данных о котятах), нажимает на одного из котят (заходит на страницу подробностей об одном котенке), а затем нажимает на раздел комментариев (входит в раздел комментариев). Кроме того, пользователь может выполнять дополнительные действия на каждом этапе. Например, он может добавить другого котенка в базу данных на экране базы данных котят. Или он может редактировать данные на экране подробностей котенка. Хорошая вещь. Теперь, какой из этих экранов является модальным, а какой нет? Классификация вовсе не простая – это мое личное эмпирическое правило:

Используйте модальные экраны для автономных процессов, а немодальные экраны для всего остального.

«Автономный процесс» – это любое действие, которое имеет четкую начальную и конечную точку. В течение ограниченного периода времени этого действия он выводит пользователя из общего юзерфлоу, позволяет ему сосредоточиться на действии и затем возвращает его туда, откуда он начал. Google формулирует это следующим образом: используйте модальные экраны (диалоговые окна) для…

 «Критически важной информации, которая требует конкретной пользовательской задачи, решения или подтверждения» —  Google

В случае нашего приложения Purrrfect это означает, что основной юзерфлоу (используемый для исследования приложения) не является модальным. Однако специальные ограниченные по времени действия, такие как добавление котят, редактирование котят и написание комментариев, являются модальными. < Все модальные действия могут быть отменены или успешно завершены, прежде чем пользователь вернется к основному процессу. По этой причине модальные экраны используют кнопки «Отмена» и «Сохранить» (или другие подобные действия) вместо кнопки «Назад». Если ваша кнопка «Назад» одновременно запускает действие сохранения на немодальном экране, вы можете рассмотреть возможность перехода на модальный экран с помощью кнопок «Отмена» и «Сохранить». Часто встречаемое противоречие: если два разных действия, таких как «Отмена» и «Сохранить», не имеют смысла на вашем модальном экране (потому что они вызовут одно и то же действие), вы можете переключиться на немодальное представление. В этом случае основная навигация (например, панель вкладок) также должна оставаться видимой на экране. Давайте вернемся к нашему приложению: возможный интерфейс для Purrrfect может выглядеть следующим образом:

Возможный интерфейс приложения Purrrfect В реальном мире различие между модальными и немодальными экранами часто менее очевидно. Например, вид «изображение на весь экран» является модальным в большинстве приложений, хотя это не процесс или диалог. Модальный экран может также иметь смысл в других особых ситуациях, чтобы генерировать фокус. Если бы экран информации о котенке (в центре) был видом конечной точки без других действий, таких как редактирование или комментарии, мы могли бы использовать модальность (полноэкранный просмотр). Но поскольку он позволяет пользователям глубже переходить в информационную архитектуру и выполнять различные дополнительные действия (показать комментарии, редактировать...), у него больше нет четкой конечной точки, и поэтому он является частью основного юзерфлоу. Следовательно, это немодальный экран. Дизайнер обязан оценить, является ли действие автономным или частью общего процесса исследования приложения, и решить, имеет ли модальность смысл или нет. В случае сомнений помните слова Apple:

Минимизируйте использование модальности. Обычно люди предпочитают взаимодействовать с приложениями нелинейным образом. Рассматривайте возможность создания модального контекста только в тех случаях, когда важно привлечь чье-либо внимание, когда задача должна быть завершена или оставлена ​​для продолжения использования приложения или для сохранения важных данных. —  Apple

Дисклеймер: Конечно, интерфейс может прекрасно работать без строгого различия между модальным и немодальным представлениями. Тем не менее, концепция модальности глубоко встроена в интерфейс экосистем Apple, Google, Microsoft и других компаний, и пользователей, которые разработали соответствующие ожидания. Apple не была бы Apple, если бы время от времени не нарушала свои собственные правила: например, новый App Store открывает вкладки «Сегодня» в виде модального экрана, но все же позволяет пользователям переходить к дальнейшим рекомендациям в нижней части модального экрана (без четкой конечной точки). Таким образом, пользователи перемещаются глубже внутри модального экрана, не имея фиксированной конечной точки. В этом процессе они теряют возможность менять вкладки и больше не могут закрывать модальное представление на под страницах. Открытие того же экрана приложения не из рекомендации, приводит к тому, что экран отображается, как немодальный. Это сохраняет панель вкладок и возможность вернуться назад (снова кликните по иконке текущей панели вкладок, чтобы перейти к ее главному экрану). Непоследовательный интерфейс Apple Непоследовательность слева может быть исправлена с помощью ...

• A:… открытие рекомендаций на немодальном дочернем экране с помощью кнопки «Назад» и сохранение панели вкладок
• B:… закрытие модального экрана, как только пользователь нажимает на ссылку внутри модального экрана, и продолжение работы с немодальным дочерним экраном на родительском уровне приложения.

Как следует использовать модальные окна?

Теперь у нас должно быть общее понимание того, когда использовать модальность. Остается только один вопрос: «Как мы ее спроектируем?». Вот быстрый контрольный список для модальных экранов:

• Всегда показывайте кнопку закрытия (или «отменить» / «отклонить» / «свернуть» /…) в верхней части панели навигации. Когда пользователь теряется, он может легко закрыть оверлей и вернуться на верхний уровень приложения.
• Кнопки «Отмена» на iOS и Android чаще всего располагаются в верхней левой части панели навигации. Android предпочитает значок закрытия / «X», в то время как iOS предпочитает слово «Отмена». Тем не менее, иконки кнопок также довольно распространены и в iOS.
• Кнопки «Сохранить» на iOS и Android по умолчанию расположены в верхней правой части панели навигации. Тем не менее, это размещение недоступно на больших устройствах. Поэтому фиксированное floating размещение внизу экрана или встроенное в конце страницы является альтернативой, которую я лично рекомендую.

Многошаговые модальные окна

Все становится сложнее, если модальный диалог состоит из нескольких шагов или дочерних экранов. По умолчанию кнопка продолжения отображается в правом верхнем углу. Экран второго шага не откроет новый модальный экран, но вместо этого остается внутри модального экрана и отображается как немодальный дочерний экран существующего модального оверлея. При размещении основного действия («сохранить», «применить» или «продолжить») в нижней части экрана (как было рекомендовано ранее) в верхней правой области второго шага модального экрана освобождается место для дополнительной кнопки отмены. Хотя он перемещается слева направо, это размещение все же лучше, чем отсутствие возможности закрыть модальный экран на дочерних экранах.

Анимации

Пока что iOS и Android очень похожи в том, как они используют модальные экраны. Однако все меняется, как только вы смотрите на анимацию.

• iOS: анимация в iOS очень стандартизирована. Немодальные экраны выталкиваются на фрейм справа. Панель вкладок остается неизменной в нижней части экрана. Панель навигации вверху также остается на месте, но ее содержимое исчезает в результате пользовательского перехода. Эта анимация также обеспечивает основу для жеста смахивания с края, используемого для возврата назад на экран, на котором размещена кнопка «Назад». Модальные экраны, с другой стороны, скользят от нижней части фрейма и перекрывают весь интерфейс (новая верхняя панель навигации). Они не используют жест смахивание с края, но жест «потяните, чтобы закрыть» может помочь, если ничего не надо сохранять.
• Android: анимации на Android гораздо разнообразнее. Google рекомендует использовать «значимые переходы» в рекомендациях Material Design. «Дочерний элемент раскрывается при нажатии», в то время, как верхняя панель навигации скрывает свое содержимое. Тем не менее, Android не различает модальные и немодальные анимации.

Вердикт

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

---

Перевод статьи Fabian Sebastian