피드백은 사용자와 시스템 간 상호작용 중에 발생하는 다양한 정보 제공의 패턴을 의미합니다.
Dialogs
사용자가 현재 진행 중인 작업에 대해 긴급한 정보를 전달하거나 사용자의 입력을 받아야 할 때 시스템에서 제공하는 패턴으로, 모달 형식의 대화상자를 사용합니다.
Pattern
현재 작업 중인 상황에 대해 긴급한 정보를 알리거나 입력 요소를 제공할 때는 페이지를 벗어나지 않고 모달 형식으로 dialog(이하 ‘대화창’으로 지칭)를 제공합니다.
현재 화면 위에 오버레이 상태로 모달 형식의 대화창을 띄워 사용합니다.
•
사용자의 시선을 대화창에 집중시키도록 기본 화면의 내용이 분간이 힘들 정도의 어두운 배경으로 오버레이 합니다. (예시 : backdrop 속성 : static, opacity=0.9)
•
배경을 클릭해도 대화창이 사라지지 않습니다.
•
이 상태에서는 반드시 대화창 내에서 제공하는 닫기, 취소, 진행 등의 액션을 통해서만 대화창을 닫을 수 있습니다.
When to use
•
사용자의 즉각적인 피드백이 필요한 경우
•
긴급하게 정보를 알려야 하는 경우
•
사용자의 결정을 확인해야 하는 경우
•
진행 중인 작업에 대해 사용자의 부가적인 컨트롤이 필요한 경우
Don’ts
•
기본 화면의 정보를 사용자가 참고해야만 하는 경우
•
복잡한 컨트롤 요소를 제공해야 하는 경우
•
모달창에서 또 다른 모달 형식의 창을 여는 경우
Related
Disclosures
현재 화면의 인터페이스에 속한 추가적인 정보나 컨트롤을 노출하는 패턴입니다.
Pattern
현재 화면의 구성요소 또는 콘텐츠에 대한 자세한 정보나 상호작용이 가능한 컨트롤 창을 사용자의 트리거 발동을 통해 제공합니다.
현재 화면 위에 팝오버 또는 드롭다운 형식의 대화창을 띄어 제공합니다.
•
반드시 사용자의 트리거 발동(버튼 클릭 등)을 통해서만 노출합니다.
•
사용자의 작업을 방해하지 않도록 제공 콘텐츠에 따라 합리적인 사이즈로 제공합니다.
•
한 번에 하나의 대화창만 열 수 있습니다.
•
대화창이 열린 상태에서 배경을 클릭하면 대화창이 닫힙니다. 대화창 내에서 작업 중인 정보는 저장하거나 적용하지 않지만 화면을 벗어나기 전까지는 입력 내용을 유지합니다.
When to use
•
UI 상에서 추가적인 정보나 컨트롤 요소를 제공하는 경우
•
현재 화면 내에서 영향을 미치는 상호작용 요소를 제공하는 경우
•
다른 화면으로 이동하는 네비게이션을 제공하는 경우
Don’ts
•
진행 중인 작업의 완료를 위해 중요한 정보를 제공하거나 사용자의 확인을 요구하는 경우
•
사용자 트리거가 없는 경우
Related
