[UX설계] Back버튼? Close 버튼? 뭘 넣지?

"기획할 때 Back버튼과 Close 버튼은 어떻게 구분해야 할까요?"

이런 질문을 받았는데 얼렁뚱땅 설명을 해주긴 했으나
명확한 용어로 말이 나오지 않아서 정리해보는 내용!

알고는 있는데 🐶떡같이 답변하는 스스로에게 놀라워하며
알고 있는 것을 잘 설명하는 것이 얼마나 어려운 일인지 새삼 깨닫는 순간이었다.

 

출처: Photo by Gilles Lambert on Unsplash

 

Back 버튼? X버튼?

먼저 Back 버튼이 있는 페이지에서 Back 버튼의 역할은 이전 페이지로 돌아가는 것이다.

앱 내 이동 흐름에 따라 히스토리를 쌓고 히스토리에 따라 이전 단계로 이동하는 것이다.

X(Close)버튼은 현재 창을 닫는 역할이다.

팝업, 모달, 외부 링크 등에 많이 사용하며 앱 흐름과는 독립적으로 뜨는 화면에 사용한다.

따라서 Back버튼은 사용자의 기대 행동이 '이전 단계로 돌아가는 것'일 때,
X(Close)버튼은 '해당 창을 닫고 원래 화면으로 가는 것'일 때 적용하면 된다.

그럼에도 '살짝 애매한데?'
'뒤로 가든, 닫든 어차피 이전 화면이 보이는 거 아닌가?' 라고 생각할 수 있다.

이걸 알려면, 먼저 정보 구조(IA)와 사용자 흐름(UX Flow)을 작성해 보고
그에 따라 정리하면 된다.

사용자의 예상 이동 흐름에 해당할 경우 Back, 아닐 경우 X버튼이라고 이해하면 쉬울 것 같다.

1. Back 버튼 화면

• 사용자가 이전 화면으로 돌아가는 흐름인가?
  - (예) 회원 가입 후 인증번호 입력화면, 비밀번호 찾기 결과 안내 등
• 페이지 이동 흐름 안에 포함된 스텝인가?
  - (예) 홈 > 상품 리스트 > 상품 상세
• 기존 서비스와는 독립적인 플로우를 가지는가? 
  - 로그인/회원가입/인증 등 (일부 예외)

2. Close 버튼 화면

• 페이지 이동 흐름에 해당하지 않고 기존 화면 위에 뜨는 일시적(별도의) 화면인가?
  - (예) 공지사항 모달, 로그인 화면 위에 띄운 약관 보기,
  화면 이용 중 도움말, 필터 설정, 일정 보기 등
• 닫은 뒤 특정 위치로 돌아갈 필요가 없는가?
  - '어디로 돌아가는지'보다 '화면을 없애는' 게 목적일때
• 페이지 이동 흐름에 해당하지 않고 덧붙임인가?
  - (예) 팝업, 모달, 옵션 수정이나 할인 쿠폰 선택 등
• 웹뷰, 외부 콘텐츠 등 독립적인 화면인가?
  - (예) 이벤트 배너 클릭하여 열린 웹뷰 페이지, 이미지 전체 보기 등

 

정리하자면, 

위와 같은 기준을 염두에 두되, IA와 고객 여정을 항상 기본으로 생각해야 한다.
사용자 입장에서 '이걸 닫으면 나는 어디로 가는 걸 기대할까?'를 먼저 생각해 보고 적용하되,
사용자 경험을 위해 같은 서비스 내에서는 기준을 세우고 일관성 있게 적용할 수 있도록 해야겠다.