Модальное окно
В пользовательского интерфейса дизайне модальное окно — это графический элемент управления, приложения подчиненный главному окну .
Модальное окно создает режим , который отключает взаимодействие пользователя с главным окном, но сохраняет его видимым, при этом модальное окно выступает в качестве дочернего окна перед ним. Пользователи должны взаимодействовать с модальным окном, прежде чем они смогут вернуться в родительское окно. Это позволяет избежать прерывания рабочего процесса в главном окне. Модальные окна иногда называют тяжелыми окнами или модальными диалогами, поскольку они часто отображают диалоговое окно .
Пользовательские интерфейсы обычно используют модальные окна для управления осведомленностью пользователя и отображения аварийных состояний, хотя дизайнеры взаимодействия утверждают, что они неэффективны для этого использования. [ 1 ] Модальные окна склонны к ошибкам режима . [ 1 ] [ 2 ] [ 3 ]
В Интернете они часто подробно отображают изображения, например, реализованные библиотекой Lightbox , или используются для наведения рекламы . [ 4 ] [ 5 ]
Противоположностью модального является немодальный . Немодальные окна не блокируют главное окно, поэтому пользователь может переключать фокус между ними, рассматривая их как окна палитр .
Актуальность и использование
[ редактировать ]Варианты использования
[ редактировать ]Частое использование модальных окон включает в себя:
- Привлечение внимания к важной информации. Такое использование подверглось критике как неэффективное, поскольку пользователи засыпаны слишком большим количеством диалоговых окон и привыкли просто нажимать «Закрыть», «Отменить» или «ОК», не читая и не понимая сообщения. [ 6 ] [ 7 ] [ 8 ]
- Блокировка потока приложения до тех пор, пока не будет введена информация, необходимая для продолжения, например пароль в процессе входа в систему . Другим примером являются файловые диалоги для открытия и сохранения файлов в приложении.
- Сбор параметров конфигурации приложения в централизованном диалоге. В таких случаях обычно изменения применяются после закрытия диалога, а доступ к приложению отключается на время внесения изменений.
- Предупреждение о том, что последствия текущего действия необратимы. Это частый шаблон взаимодействия для модальных диалогов, но некоторые эксперты по юзабилити критикуют его как неэффективный для использования по прямому назначению (защита от ошибок при деструктивных действиях) из-за привыкания . Вместо этого они рекомендуют сделать действие обратимым (предоставив возможность «отменить»). [ 1 ]
Модальные листы в Mac OS X
[ редактировать ]Многие функции, которые обычно представляются модальными окнами, реализованы в виде модальных переходных панелей, называемых «Листами». [ 9 ] в Mac OS X. Временные окна ведут себя аналогично модальным окнам – они всегда находятся поверх родительского окна и не отображаются в списке окон, но не отключают использование других окон в приложении. Листы выдвигаются из строки заголовка окна, и обычно их необходимо закрыть, прежде чем пользователь сможет продолжить работу в окне, но остальная часть приложения остается пригодной для использования. Таким образом, они создают режим внутри окна, которое их содержит, но являются немодальными по отношению к остальной части приложения.
Контроль потока взаимодействия
[ редактировать ]Модальные окна часто используются в наборах инструментов графического пользовательского интерфейса для управления рабочим процессом пользователя. Алан Купер утверждает, что необходимость требовать от пользователя внимания к важным вопросам оправдывает ограничение свободы пользователя и что альтернатива усилит разочарование пользователя. [ 10 ]
Неожиданные перерывы
[ редактировать ]Неожиданные диалоговые окна с предупреждениями являются основной причиной ошибок режима. [ 1 ] с потенциально тяжелыми последствиями. Специалисты по юзабилити предписывают, чтобы опасные действия были отменяемы везде, где это возможно; окно предупреждения, которое появляется неожиданно или закрывается по привычке, не защищает от опасного действия. [ 11 ] Немодальная информационная панель все чаще рассматривается как предпочтительнее диалогового окна, поскольку она не прерывает деятельность пользователя, а позволяет пользователю читать дополнительную информацию в свободное время.
Один из предлагаемых подходов заключается в разработке каждого элемента ввода как автономного, ориентированного на задачу взаимодействия, руководствующегося собственными конкретными требованиями, а не глобальным состоянием всего приложения. Например, обязательным элементам может предшествовать звездочка , элементы с недопустимыми данными могут иметь красную рамку и т. д. При таком подходе пользователи получают выгоду от одновременного просмотра множества входных элементов — они могут вводить данные так, как им удобно, вместо того, чтобы блокировать все другие несвязанные элементы до тех пор, пока не будет завершена предопределенная последовательность ввода данных.
Проблемы
[ редактировать ]Модальное окно блокирует все остальные рабочие процессы в программе верхнего уровня до тех пор, пока модальное окно не будет закрыто, в отличие от немодальных диалоговых окон, которые позволяют пользователям работать с другими окнами. [ 12 ] Модальные окна предназначены для того, чтобы привлечь все внимание пользователя. [ 13 ] Пользователи могут не осознавать, что модальное окно требует их внимания, что приводит к путанице в том, что главное окно не отвечает, или к потере вводимых пользователем данных, предназначенных для главного окна (см. Ошибка режима ). В тяжелых случаях модальное окно появляется за другим окном, управляемым той же программой, что потенциально может привести к тому, что вся программа перестанет отвечать на запросы до тех пор, пока модальное окно не будет найдено вручную.
Однако многие дизайнеры интерфейсов недавно предприняли шаги, чтобы сделать модальные окна более заметными, затемнив фон за окном или разрешив любому щелчку мыши за пределами модального окна заставить модальное окно закрыться – конструкция, называемая лайтбоксом . [ 5 ] – тем самым облегчая эти проблемы. Якоб Нильсен называет преимуществом модальных диалогов то, что они повышают осведомленность пользователя: «Когда что-то действительно требует исправления, лучше убедиться, что пользователь знает об этом». Для этой цели дизайн лайтбокса обеспечивает сильный визуальный контраст диалога с остальными визуальными элементами. Техника лайтбокса теперь является распространенным инструментом в дизайне веб-сайтов.
Модальные окна обычно реализуются таким образом, что блокируют возможность перемещения, минимизации, отображения значков или возврата этого окна назад, а также захватывают фокус ввода, что часто препятствует использованию системных средств вырезания, копирования и вставки . Это может помешать использованию их родительских приложений, блокируя доступ к другим окнам и данным в том же приложении, особенно в тех случаях, когда модальное окно требует от пользователя ввода информации, доступной только в одном из окон, которые оно закрывает.
Для пользователей, использующих виртуальные рабочие области, размер которых превышает их реальные экраны, модальные окна могут вызвать дальнейшее нежелательное поведение, включая создание модальных окон на части виртуального экрана, которая в данный момент не отображается на дисплее, или резкое переключение отображения с того, над чем работал пользователь, на то, над чем работал пользователь. совсем другой раздел.
Модальные окна имеют тенденцию резко перенаправлять ввод текста, особенно вводимый, предназначенный для других программ, на себя. Кроме того, модальные окна обычно интерпретируют нажатие клавиши ввода (или, в редких случаях, наличие новой строки во вставленном вводе) как сигнал принять ввод и обработать его — или, в редких случаях, могут перехватить щелчок мыши, предназначенный для другого приложение, которое внезапно было накрыто. Такой перехват, называемый кражей фокуса (или кражей фокуса), может поставить под угрозу конфиденциальность и безопасность, а также перехватить неуместные, внеконтекстные входные данные, которые могут привести к неопределенным, произвольным результатам в программе, сгенерировавшей модальное окно.
В зависимости от особенностей реализации модальные окна могут нарушать принцип наименьшего неожиданности .
Рекомендации
[ редактировать ]Модальные диалоги являются частью потока задач, и даются рекомендации по их размещению в тех местах этого потока, которые находятся в центре внимания. Например, окно можно разместить рядом с графическим элементом управления , вызывающим его активацию. [ 14 ]
Использование полупрозрачного темного фона может скрыть информацию в главном окне, поэтому его лучше использовать только тогда, когда эта информация может отвлекать. Полупрозрачный фон можно сделать менее навязчивым, если вся область фона будет функционировать как кнопка закрытия: это стандартно для большинства мобильных операционных систем, позволяет избежать ощущения пользователя в ловушке и делает модальные окна менее похожими на вредоносные всплывающие окна.
Дизайн должен соответствовать общепринятым практикам платформы, на которой работает программа. Microsoft Windows использует стандартные элементы управления для диалоговых окон модальных окон с кнопками утвердительных действий в правом нижнем углу панели. В Mac OS X используются модальные листы , в которых кнопки утвердительных действий являются самой правой командой. [ 15 ]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Перейти обратно: а б с д «Никогда не используйте предупреждение, когда хотите отменить действие» . alistapart.com . Проверено 9 октября 2015 г.
- ^ Раскин, Джефф (2000). Гуманный интерфейс . США: Эддисон Уэсли. ISBN 0-201-37937-6 .
- ^ «Придирки / Гуманный интерфейс» . nitpicker.pbworks.com . Правило 1а . Проверено 9 октября 2015 г.
- ^ Обозреватель UX-паттернов Quince. «Модальная панель» . Архивировано из оригинала 27 февраля 2010 г. Популярная JavaScript-библиотека Lightbox использует модальную панель для отображения изображений.
- ^ Перейти обратно: а б Якоб Нильсен, Alertbox. «10 лучших интерфейсов приложений» .
- ^ Джоэл Спольски , Дизайн пользовательского интерфейса для программистов: проектирование для людей, у которых есть более интересные занятия в жизни
- ^ Рэймонд Чен , Старая новая вещь: ответ по умолчанию в каждом диалоговом окне — «Отмена».
- ^ Джефф Этвуд, Ужас кодирования: учим пользователей читать
- ^ «Таблицы — Презентация — Компоненты — Рекомендации по пользовательскому интерфейсу — Дизайн — Разработчик Apple» . Разработчик Apple . Проверено 7 сентября 2022 г.
- ^ Купер, Алан (17 марта 2003 г.). О Face 2.0: основы интерактивного дизайна . Уайли. ISBN 0-7645-2641-3 .
- ^ Раскин, Джефф (2000). Гуманный интерфейс . Эддисон Уэсли. ISBN 0-201-37937-6 .
- ^ «Как использовать модальность в диалогах» . Корпорация Оракл .
- ^ «Модальная панель» . айва.infragistics.com . Архивировано из оригинала 6 мая 2013 г.
- ^ «Модальная панель — Реализация» . айва.infragistics.com . Архивировано из оригинала 6 мая 2013 г.
- ^ Инк., Apple. «Темы — macOS — macOS — Рекомендации по пользовательскому интерфейсу — Разработчик Apple» . разработчик.apple.com . Проверено 18 сентября 2018 г.
{{cite web}}:|last=имеет общее имя ( справка )