모달 창

Modal window

컴퓨터 응용 프로그램의 사용자 인터페이스 설계에서 모달 창은 응용 프로그램의 메인 창에 종속되는 그래픽 제어 요소입니다.

모달 창은 기본 창을 비활성화하지만 표시되도록 하는 모드를 만듭니다. 모달 창은 하위 창으로 앞에 표시됩니다.사용자는 상위 응용 프로그램으로 돌아가기 전에 모달 창과 상호 작용해야 합니다.이렇게 하면 기본 창의 워크플로우가 중단되지 않습니다.모달 창은 대화 상자를 표시하는 경우가 많기 때문에 무거운 창 또는 모달 대화 상자라고도 합니다.

사용자 인터페이스는 일반적으로 모드창을 사용하여 사용자 인식을 명령하고 긴급 상태를 표시합니다.다만, 인터랙션 설계자는,[1] 이러한 조작은 무효라고 주장하고 있습니다.모드 창에서는 모드 오류[1][2][3]발생하기 쉽습니다.

웹에서는 Lightbox 라이브러리에 의해 구현된 이미지나 호버 [4][5]광고에 사용되는 이미지 등 상세하게 표시되는 경우가 많습니다.

모달의 반대는 모델리스입니다.모델리스 창은 메인 창을 차단하지 않으므로 사용자는 창 사이를 전환하여 팔레트 창으로 취급할 수 있습니다.

관련성과 용도

사용 사례

모달 윈도우의 빈번한 사용은 다음과 같습니다.

  • 중요한 정보에 대한 주의를 환기합니다.사용자가 [6][7][8]너무 많은 대화 상자를 사용하여 메시지를 읽거나 이해하지 않고 "닫기", "취소" 또는 "확인"을 클릭하는 것에 익숙해져 있기 때문에 이 사용은 효과적이지 않다는 비판을 받고 있습니다.
  • 로그인 프로세스패스워드 등, 속행에 필요한 정보가 입력될 때까지 애플리케이션플로우를 차단합니다.다른 예로는 응용 프로그램에서 파일을 열고 저장하는 파일 대화상자가 있습니다.
  • 중앙 집중식 대화 상자에 응용 프로그램 구성 옵션 수집이러한 경우 일반적으로 대화상자가 닫힐 때 변경 내용이 적용되며 편집 중에는 응용 프로그램에 액세스할 수 없습니다.
  • 현재 작업의 효과를 되돌릴 수 없다는 경고입니다.이것은 모달 대화상자의 빈번한 상호작용 패턴이지만 일부 가용성 전문가들은 습관화로 인해 의도된 사용(파괴적 행동의 오류로부터 보호)에 효과적이지 않다고 비판한다.대신 [1]액션을 원래대로 되돌릴 것을 권장합니다('undo' 옵션 제공).

Mac OS X의 모달 시트

로 모델 과도 패널 맥 OSX의 창문에 비슷하게 창문 modal에 – 그들은 항상 부모 창의 위에 놓고 창 목록에 표시되지 않고 있어요의 행동"시트"[표창 필요한]이라는 일반적으로 모델 창으로 표시되게 될 것 많은 기능 있지만, 다른 창문들의 앱에 사용하는 사용하지 않아 추진하고 있다.lication.시트는 창의 제목 표시줄에서 미끄러져 나와 보통 사용자가 창에서 작업을 계속하기 전에 닫아야 하지만 나머지 애플리케이션은 사용 가능한 상태로 유지됩니다.따라서 이러한 모드는 창 내부에 생성되지만 나머지 애플리케이션에 대해서는 모델이 없습니다.

상호작용 흐름 제어

모달 창은 사용자 워크플로우를 안내하기 위한 GUI 툴킷에서 일반적입니다.Alan Cooper는 사용자에게 중요한 문제에 대한 주의를 요구하는 것이 사용자의 자유를 제한하는 것을 정당화하며, 그 대안은 사용자의 [9]불만을 가중시킬 것이라고 주장합니다.

예기치 않은 중단

예기치 않은 경보 대화상자모드오류[1] 특정 원인이며 잠재적으로 심각한 결과를 초래할 수 있습니다.사용 편의성 실무자는 가능한 한 위험한 조치는 실행 취소할 수 없도록 규정한다. 예기치 않게 나타나거나 습관화함으로써 무시되는 경보 상자는 위험한 [10]조치로부터 보호되지 않는다.무모형 인포바는 사용자의 활동을 방해하지 않고 오히려 사용자가 자신의 시간에 추가 정보를 읽을 수 있도록 하기 때문에 대화 상자보다 선호되는 것으로 점점 더 많이 보입니다.

제안된 접근법 중 하나는 모든 입력 요소를 애플리케이션 전체의 글로벌 상태가 아닌 자체 특정 요건에 의해 유도되는, 자급자족하고 작업 지향적인 상호작용으로 설계하는 것입니다.예를 들어 필수 요소 앞에 별표가 붙고 잘못된 데이터가 있는 요소가 빨간색 테두리를 획득하는 등의 작업을 수행할 수 있습니다.이 접근방식을 사용하면 사용자는 실제로 여러 입력 요소를 동시에 볼 수 있어 사전에 정의된 데이터 입력 시퀀스가 완료될 때까지 다른 모든 관련 없는 요소를 차단하지 않고 원하는 방식으로 데이터를 입력할 수 있습니다.

문제

모달 창은 사용자가 다른 [11]창으로 조작할 수 있는 모달창이 닫힐 때까지 최상위 프로그램의 다른 모든 워크플로우를 차단합니다.모달 창은 사용자의 주의를 [12]집중시키기 위한 것입니다.사용자는 모드창에 주의가 필요하여 메인창이 응답하지 않거나 메인창에 대한 사용자의 데이터 입력이 손실되는 것을 인식하지 못할 수 있습니다(모드오류 참조).심각한 경우, 모달 창이 같은 프로그램에 의해 제어되는 다른 창 뒤에 나타나며, 모달 창을 수동으로 찾을 때까지 전체 프로그램이 응답하지 않을 수 있습니다.

그러나 최근 많은 인터페이스 디자이너들이 창 뒤에 있는 배경을 어둡게 하거나 창 밖에서 마우스를 클릭하면 창이 닫히도록 함으로써 모달 창을 보다 선명하고 사용하기 쉽게 만들기 위한 조치를 취하고 있습니다(라이트박스라고[5] 불리는 디자인).이렇게 함으로써 이러한 문제를 완화시킬 수 있습니다.Jakob Nielsen은 모달 대화상자의 장점으로 사용자의 인식을 향상시킨다고 말합니다. "뭔가 수정이 필요할 때는 사용자가 확실히 알고 있는 것이 좋습니다."이 목적을 위해 Lightbox 디자인은 다른 비주얼에 비해 대화 상자의 강력한 시각적 대비를 제공합니다.Lightbox 기술은 이제 웹사이트 디자인에서 일반적인 도구가 되었습니다.

모달 창은 일반적으로 해당 창을 이동, 최소화, 아이콘화 또는 뒤로 밀 수 있는 가능성을 차단하는 방식으로 구현되며 입력 포커스를 잡기 때문에 시스템의 잘라내기, 복사 붙여넣기 기능을 사용할 수 없습니다.이것은, 같은 애플리케이션내의 다른 창이나 데이터에의 액세스를 차단하는 것에 의해서, 부모 애플리케이션의 사용을 방해할 가능성이 있습니다.특히 모달 창에서는 대상 창 중 하나에서만 이용 가능한 정보를 입력할 필요가 있습니다.

실제 화면보다 큰 가상 작업 영역을 사용하는 사용자에게 모달 창은 현재 디스플레이에 표시되지 않는 가상 화면의 일부에 모달(modal)을 생성하거나 사용자가 작업하던 화면에서 완전히 다른 섹션으로 갑자기 디스플레이를 전환하는 등 더 바람직하지 않은 동작을 일으킬 수 있습니다.

모달 창에서는 텍스트 입력, 특히 다른 프로그램용 입력이 갑자기 전환되는 경향이 있습니다.또한, 모델들은 일반적으로 입력(또는 붙여 넣은 입력에 새 이 있는 경우)의 작동을 입력을 받아들이고 처리하기 위한 신호로 해석한다. 또는 드문 경우, 갑자기 적용된 다른 애플리케이션을 위한 마우스 클릭을 가로채는 경우가 있다.포커스 도용(또는 포커스 도용)이라고 불리는 이러한 대행 수신은 사생활과 보안 관행을 해칠 수 있을 뿐만 아니라 모달 창을 생성한 프로그램에서 정의되지 않은 임의의 결과를 초래할 수 있는 부적절한 컨텍스트 외 입력을 캡처할 수 있습니다.

구현의 세부 사항에 따라 모달 윈도우는 놀랍다는 원칙을 위반할 수 있습니다.

추천 사항

모달 대화상자는 태스크흐름의 일부이며 해당 흐름의 포커스가 있는 위치에 배치하기 위한 권장사항이 제공됩니다.예를 들어 [13]창은 활성화를 트리거하는 그래픽 제어 요소 근처에 배치할 수 있습니다.

반투명 어두운 배경을 사용하면 메인 창의 정보가 가려질 수 있으므로 정보가 산만할 때만 사용합니다.반투명 배경은 배경 영역 전체가 닫힘 버튼처럼 기능함으로써 침입을 줄일 수 있습니다.이는 대부분의 모바일 운영체제에서 표준으로 사용자가 갇힌 느낌을 받지 않으며 모달창이 악의적인 팝업처럼 느껴지지 않습니다.

설계는 프로그램이 실행되고 있는 플랫폼의 일반적인 프랙티스에 따라야 합니다.Microsoft Windows 에서는, 모달 윈도우의 다이얼로그에 표준 컨트롤을 사용하고 있습니다.패널 우측 하단에 확인 액션버튼이 있습니다.Mac OS X는 가장 오른쪽 [14]명령어인 긍정 액션버튼이 있는 모달시트를 사용합니다.

「 」를 참조해 주세요.

레퍼런스

  1. ^ a b c d "Never Use a Warning When you Mean Undo". alistapart.com. Retrieved 2015-10-09.
  2. ^ Raskin, Jef (2000). The Humane Interface. United States: Addison Wesley. ISBN 0-201-37937-6.
  3. ^ "Nitpicker / The Humane Interface". nitpicker.pbworks.com. Rule 1a. Retrieved 2015-10-09.
  4. ^ Quince UX patterns explorer. "Modal Panel". Archived from the original on 2010-02-27. 널리 사용되는 Lightbox JavaScript 라이브러리는 이미지를 표시하기 위해 모달 패널 방식을 사용합니다.
  5. ^ a b Jakob Nielsen, Alertbox. "10 Best Application UIs".
  6. ^ Joel Spolsky, 프로그래머를 위한 사용자 인터페이스 설계:인생에서 더 나은 일을 하는 사람들을 위한 디자인
  7. ^ Raymond Chen, 오래된 새로운 것:모든 대화상자에 대한 기본 응답은 "취소"입니다.
  8. ^ Jeff Atwood, 코딩 호러:사용자에게 읽는 법을 가르치다
  9. ^ Cooper, Alan (March 17, 2003). About Face 2.0: The Essentials of Interaction Design. Wiley. ISBN 0-7645-2641-3.
  10. ^ Raskin, Jef (2000). The Humane Interface. Addison Wesley. ISBN 0-201-37937-6.
  11. ^ "How to Use Modality in Dialogs". Oracle Corporation.
  12. ^ Infragistics.com. "Modal Panel". Archived from the original on 2013-05-06. {{cite web}}:외부 링크 author=(도움말)
  13. ^ Infragistics.com. "Modal Panel - Implementation". Archived from the original on 2013-05-06. {{cite web}}:외부 링크 author=(도움말)
  14. ^ Inc., Apple. "Themes - macOS - macOS - Human Interface Guidelines - Apple Developer". developer.apple.com. Retrieved 18 September 2018.