Dialogs

Basic principles

Focused

사용자의 주의를 끌어 콘텐츠를 확실하게 어필합니다.

Direct

특정 작업을 마치는 데에 집중하고 직접적인 정보 전달을 해야합니다.

Helpful

사용자가 액션의 결과로 나타나야 하며, 액션과 관련이 있거나 맥락에 맞는 정보를 제공해야합니다.

Anatomy

- Dialog는 모달 윈도우의 일종으로, 다른 모든 UI는 비활성화되어야 합니다.
- Dialog의 뒤편은 scrim으로 덮여있어야 합니다.
- 확정(confirming) 액션 : 팝업에서 제안하는 액션을 수행할 수 있게 합니다. 화면의 우측에 위치합니다.
- 거절(dismissive) 액션 : 팝업에서 제안하는 액션을 거절하고 원래 사용자가 있던 화면으로 돌아오도게 합니다. 확정 액션의 좌측에 위치합니다.

1. Container
2. Title (optional)
3. Supporting text
4. Buttons (confirming, dismissive)
5. Scrim

Behavior

Dialog는 다음의 경우 닫힐 수 있습니다.
 : ‘취소' 버튼 선택
 : 키보드의 ‘esc’ 키 선택
 : Scrim (음영) 영역 선택 
: Android back 버튼 선택 

팝업 외 영역 비활성화

사용자가 팝업창의 콘텐츠 에만 집중할 수 있도록 팝업창 이외의 다른 UI는 비활성화되어야 합니다.

Don’t

팝업창 이외의 영역은 모두 비활성화되어야 합니다.

하단 navigation을 포함한 전 영역을 비활성화합니다.

음영 영역 및 device back button 선택 시 팝업 동작

Scrim 영역 선택 시와 device back button 선택 시 동작은 일관성 있게 유지합니다.

Don’t

앱 내 scrim 터치 시에는 무반응으로 일관성이 유지되고 있으나, device back button 선택 시에는 이전페이지로 돌아가는 경우와 무반응인 경우가 섞여있어 사용자에게 혼란을 줍니다.

팝업 내 링크

팝업에서 진행되고 있는 태스크를 종료하지 않고 화면을 벗어날 수 있는 버튼이나 링크는 두지 않습니다. 
추가적인 정보를 줘야하는 경우라면, 팝업 내에서 더보기로 처리하거나, 팝업을 띄우기 전에 제공합니다.

Caution

상세 약관 확인을 위한 링크를 선택하게되는 경우 현재 팝업의 작업이 끝나지 않은 상태에서 새로운 팝업이 발생하여 사용자가 현재 flow에 집중할 수 없습니다.

UX Writing

Title

- 간결하고 명확한 문장이나 질문이어야 합니다.
- 직접적인 사과의 문구는 배제합니다. (ex. ‘죄송합니다. 찾을 수 없습니다.’)
- 경고 문구는 배제합니다. (ex. ‘경고!’, ‘위험!’)
- 모호한 문구는 사용하지 않습니다. (ex. ‘확실합니까?’)

Buttons

- 확정형 응답은 우측, 취소 응답은 좌측에 배치합니다.
- 텍스트 길이가 길어 두 개 이상의 버튼을 상하 배치해야하는 경우, 확정 응답을 취소 응답의 위에 배치합니다.
- 확정형 응답은 ‘확인', ‘네' 등이 아닌 사용자의 액션을 구체적으로 설명하는 문구를 사용합니다.

팝업 타이틀 문구 - 모호한 문구

타이틀에 모호하거나 의미없는 문구는 사용하지 않습니다.