Как превратить 4 вложенных модальных окна в одно

Одно модальное окно для управления всеми операциями

Управление несколькими окнами на экране — задача не из лёгких. Люди часто сталкиваются с этим при использовании операционных систем. Однако эта проблема может возникнуть при взаимодействии с интерфейсами — там, где есть вложенные модальные окна.

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

Когнитивные усилия

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

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

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

Физические усилия

Чтобы вернуться к родительскому окну, пользователям нужно нажать кнопку «Отмена» (“Cancel“) в каждом модальном окне. Это требует значительных физических усилий с участием рук и зрения.

Во-первых, людям нужно увидеть кнопки «Отмена» (“Cancel“). У этих кнопок нет фиксированного положения, поскольку размеры модальных окон отличаются и находятся на разных X- и Y-осях. Когда люди наконец найдут эту кнопку, им нужно будет на неё нажать. Для этого им понадобится переместить и направить курсор мыши на цель.

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

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

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

Несколько модальных окон превращаются в одно

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

Ниже вы видите первое модальное окно в потоке. Пользователь хочет добавить новый документ, поэтому он нажимает на кнопку «Добавить документ» (“Add Document”) в левом нижнем углу.

Текущее модальное окно меняется на окно «Добавить документ» (“Add Document”), соединяя их в цепочку. Визуальной подсказкой того, что это связанное модальное окно, служит кнопка «Назад» (“Back”) вместо кнопки «Отмена» (“Cancel“). Теперь, если пользователи хотят вернуться назад, необходимости в нажатии на кнопку «Отмена» (“Cancel“) больше нет.

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

Например, обычно клик по кнопке «Прикрепить файл» (“Attach a File”) открывает ещё одно модальное окно. Однако это действие взаимоисключающее с полем «Ссылка на документ» (“Document Link”). Другими словами, пользователи могут добавлять документ двумя способами: или с помощью ссылки, или используя функцию прикрепления файла. Им не нужно делать и то, и другое.

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

Переключатель отображает два варианта: либо поле для вставки ссылки на документ, либо блок для прикрепления файла. Теперь пользователь не будет видеть их одновременно. Модальное окно будет вертикально расширяться, чтобы вместить более крупные элементы в случае выбора варианта «Прикрепить файл» (“Attach a File”).

Ещё один случай избыточного применения дополнительных модальных окон — когда операции дополняют друг друга. Например, модальные окна «Прикрепить файл» (“Attach a File”) и «Добавить описание» (“Add a Description”) могут существовать на одном и том же экране, поскольку эти процессы не влияют друг на друга. Следовательно, нет необходимости заставлять пользователей вводить описание в отдельном модальном окне.

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

Пользователям гораздо проще вернуться к родительскому окну через окно, где все окна связаны между собой, чем когда они вложенные. Людям не нужно искать и нажимать кнопку «Отмена» (“Cancel“) в каждом модальном окне. Всё, что им нужно сделать, — нажать кнопку “X” в правом верхнем углу, и модальное окно закроется.

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

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

Перевод статьи How to Simplify 4 Nested Modals into Only 1 из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!