UXUI 케이스 스터디 - 닫기/뒤로가기/취소 버튼
https://youtube.com/shorts/eNZ9gvtz_1E?feature=share
▼ 이슈
“이 페이지에서는 닫기 버튼을 쓰는데, 다른 페이지에서는 뒤로가기 버튼을 사용하고 있고, 또 다른 페이지에서는 취소 버튼을 사용하고 있어서 사용자가 헷갈릴 것 같도. 언제 어느 버튼을 사용해야 할지에 대한 명확한 기준이 필요하다”
“팝업 창에 ‘닫기’를 뜻하는 X 버튼과 Cancel 버튼이 함께사용되고 있다. 둘 다 간은 기능을 하는 버튼이므로 하나를 빼는게 좋을 것 같은데 어떤걸 빼야할지 모르겠다.”
▼ 이렇게 사용하세요.
한 뎁스 들어온 경우 (대부분의 경우) → Back 버튼 사용하기
이유: 한 뎁스 들어왔다가 다시 뒤로 돌아간다는 느낌을 주는 것이 사용자 입장에서 볼 때, 흐름상 자연스럽고 직관적이다. 맨탈모델에도 부합한다.
바텀 시트에서 → 바텀 시트 좌측 상단에 아래쪽을 향한 화살표 모양의 아이콘 넣기
이유: 이 경우 X 모양 아이콘보다는 아래쪽 방향 화살표 아이콘이 더 맥락상 적절하고 직관적이다.
모달 팝업창에서 → ‘취소’ 텍스트 버튼 사용하기. (X 모양의 닫기 버튼 사용하지 말고)
이유: 안드로이드, iOS 시스템 UI와의 통일성을 위해. 시스템 UI에서는 모달 팝업을 닫을 때 모달 하단의 닫기/취소 등의 텍스트 버튼을 탭해야 한다.
기타: 모달 팝업 외부를 클릭해도 닫히게 할 것인가? → 사용자가 모달 외부 영역을 탭하는 동작을 모달의 취소 버튼과 동일한 것으로 간주하기.
토스트 팝업에서 → 우측 상단에 닫기 버튼 넣기
이유: 토스트 팝업은 몇 초 후 자동으로 사라지긴 하지만 그 시간마저 길게 느껴질 때가 있다. 짧은 시간이지만 그 시간 동안 해당 영역이 가려져서 보이지 않기 때문에 상당히 불편하다.
참고
Cancel vs Close: Design to Distinguish the Difference (nngroup.com)
NNgroup에서는 X 모양의 버튼은 그 의미가 애매하다고 하면서 되도록이면 사용을 권장하지 않고 있다. 따라서 앞으로도 이 X버튼이 점점 없어질 것이라고 전망하고 있다.
하지만 개인적인 생각으로는, 그 의미가 애매하다고 생각되지 않는다. 해당 화면을 닫게 해주는 버튼이라는 것은 누구나 다 잘 알고 있다. 그리고 윈도우 시스템 UI (브라우저 및 폴더 탐색창), Mac의 시스템 UI에서 이미 오랫동안 이 아이콘을 사용해왔고 따라서 많은 사람들에게도 친숙한 맨탈모델이다. 시스템 UI에서 계속 이 X 모양의 버튼을 사용하는 한, 모바일 앱에서도 X버튼은 사라지지 않을 것 같다.
