팝업은 어떤 경우에 닫을 수 있게 해야할까?(X버튼은 언제 보여줘야 할까?)— 헤이딜러 UX 스터디
- 팝업은 어떨때는 닫을 수 없고, 어떨때는 닫을 수 있을까요?
- 팝업에 X버튼은 보여주는게 맞을까요?
- 팝업마다 달랐던 동작에 대한 기준을 명확하게 정한 UX스터디를 공유해드립니다.
안녕하세요.
헤이딜러 안드로이드팀 박상권입니다.
앱을 개발하다보면
기획자/디자이너/개발자가 팝업과 관련된 아래와 같은 대화를 자주 나누게 됩니다.
- “이 팝업은 바깥쪽 누르면 닫히나요??”
- (안드로이드) “뒤로가기 버튼 누르면 닫히나요?”
- “저 팝업에서는 X버튼이 있었는데 이 팝업에서는 없는건가요?”
팝업마다 달랐던 동작들을 헤이딜러 제품팀에서는 UX스터디를 통해 어떻게 정의했는지 공유해드립니다.
다른 UX스터디 주제들도 궁금하시다면 아래 목차에서 확인해보세요
이 내용은 지난 드로이드나이츠 2023 행사에서도 발표된 내용입니다.
YouTube영상으로도 확인하실 수 있습니다.
먼저!
Material Design의 BottomSheet에 대해 알아봅시다
BottomSheet의 종류
- Standard bottom sheets
- Modal bottom sheets
Standard bottom sheets
- 화면의 주요 컨텐츠를 보완하는 기능
- 화면에서 항상 보여지도록 남아 있음
Modal bottom sheets
- 하단에 Dialog처럼 보여지는 형태
- 헤이딜러에서는 주로 이 Bottom sheet를 팝업으로 사용
Modal bottom sheets 규칙
뒤에 깔리는 컨텐츠는 항상 Scrim(dim)처리 되어야 합니다.
아래 경우에 해당한다면 종료(dismiss) 되어야 합니다.
- UI에서 특정 버튼을 누르거나 action을 완료했을때
- 화면 바깥쪽(scrim)을 클릭했을때
- Swipe로 내렸을때
- (상단 AppBar가 있다면) X버튼을 클릭했을때
헤이딜러 제품팀의 기준
Modal 과 Non-Modal 정의📌📌
헤이딜러 제품팀에서는 위의 MaterialDesign과 비슷한 개념으로
Model과 Non-Modal이라는 개념으로 정의해서 사용하기로 했습니다.
Modal
- 정보성 메세지를 강하게 전달하거나
- 특정 응답을 요구해야할 때 사용된다.
- 사용자는 task를 완료하거나 취소하기 전까지는 이전 화면을 볼 수 없다.
- 기존 작업을 일시 중단 시키고 해당 task에만 집중시켜야 하므로
배경에 항상 dim 처리를 한다
Non-Modal
- 기존 화면을 볼 수 있음은 물론이고
- 상황에 따라 기존화면의 task를 동시에 수행할 수도 있다.
- 기존 화면과 상호작용이 가능하므로 배경에 dim처리를 하지 않는다.
닫을 수 있는 인터랙션 기준
Modal
- 사용자에게 요구하는 응답의 강제여부에 따라 결정된다.
- Strong: 응답을 필수로 요구하므로, 닫기 불가능
- Weak: 응답이 필수가 아니므로, 닫기 가능
Non-Modal
- Modal이 아니므로 액션을 강요하지 않는다.
‘ 응답을 필수로 요구한다’는 것은 무엇일까요?
- 사용자가 언젠가는 필수로 완료해야하는 과업일 때 ❌
- 사용자에게 이 과업을 확실히 인지시키고, 그에 따른 확실한 리액션을 응답받고 싶을 때 ✅
응답이 필수인 경우라면,
- 강하게 인지시켜야하기 때문에
쉽게 닫히지 않도록 당겨서 닫기/ 딤 클릭 을 불가능하도록 합니다. - 확실한 리액션을 해야하기 때문에
과업을 종료시킬 수 있는 모든 버튼들은 ‘의사표시로 대체될 수 있는’ 텍스트를 포함합니다.
: 예시) strong에서 과업을 취소하기 위해서는 X버튼이 아니라 [취소] or [나중에 하기] 와 같은 텍스트 버튼을 클릭해야함
Modal에서 Strong과 Weak의 동작 정리
Strong / Weak 구분 방법
디자인 UI만보고 이 Modal이 Strong인지 Weak인지 판단하는 방법은 아주 간단합니다.
- X 아이콘이 있는가?
이 구분방법만 알면 디자이너에게 Strong인지 Weak인지를 물어보지 않아도 됩니다.🎉🎉
Modal 위에 Modal이 뜨는 경우라면?
무조건 발생하면 안된다. ❌
최대한 안나오게 UX를 기획해야 하겠지만
불가피한 경우가 존재할 수 있다고 생각하고 제품을 만들고 있습니다.
지금까지 헤이딜러 제품팀에서 고민하고 UX스터디를 진행했던
‘팝업의 사용기준’ 에 대해서 공유해드렸습니다.
여러분들의 팝업/Modal에 대한 기준은 어떠신가요?
회사에서 정하신 기준이 있으시다면 공유해주시면 좋을것 같습니다.
저희와 함께 헤이딜러 서비스를 발전 시켜나가실 분들을 기다리고 있습니다.
감사합니다.
