취소, 닫기, 나가기, 버튼명이 다 다른거라구요?! (버튼 레이블 UX writing)

취소(Cancle) 버튼 : 잠깐만! 

사전적으로는 '예정된 일을 없애버린다'는 의미이지만

실제 인터페이스에서는 아래와 같이 좀 더 다양하게 사용된다. 

- 내가 원하던게 아니야, 하려뎐 행동을 번복하거나

- 그만할래, 작업을 중단하거나

- 이전으로 돌아갈래, 이미 한 작업을 되돌릴때 

 

그래서 '취소'라는 단어가 상황에 따라 조금씩 다르게 해석될수 있다.

 

취소버튼은 보통 왼쪽.

오른쪽은 순방향, 긍정적인 동작을, 왼쪽은 역방향, 부정적 동작을 수행한다는 UI 관행이 있다.

그러다보니 취소버튼은 일반적으로 왼쪽에 존재한다.

그러나, 사용자가 예약을 취소하고 싶을때 '예약 취소' 는 '취소'하는 행위가 순행이 된다. 

 

+ 사실 [확인-취소] 였는데, [취소-확인] 으로 점점 선호하게 되었다.

통상적으로 긍정을 말한 다음 부정을 말한다. "할거야? 안할거야?'처럼 반대로 "안할거야?할거야?"는 어색하다.

그래서 긍정적인 의미를 가진 확인버튼이 먼저 나와야 자연스러워서 확인버튼을 왼쪽에 배치하기도 했다. 

 

그리고 사용자에게 확인차 물어보는 다이얼로그이기 때문에, 대부분 확인을 누르기 위해 존재한다.

일반적으로 왼쪽에서 오른쪽으로 글을 읽기 때문에 확인버튼이 왼쪽에 있었다. 

 

그러나,  점점 취소버튼이 점점 왼쪽에 있게 되었다. 맥북의 취소버튼은 왼쪽에 있다.(윈도우는 오른쪽)

시선이 비효율적이기 떄문이다. 사람들은 왼쪽에서 오른쪽으로 읽고, 시선이 버튼에서 끝나는데 확인->취소->확인 으로 향한다. 그리고 취소버튼을 누르면 작업으로 돌아가겠다는 뜻이고, 확인을 누르면 다음작업을 진행하는 뜻이다. 이전-다음과 같은 맥락이기 때문이다.

 

실제로 취소를 했을때 어떤일이 일어날지 명확히 알려줘야한다.

취소는 단순히 되돌리기 이상의 역할을 하기 떄문에

취소를 하게 되면, 입력중인 내용을 잃게 되는지, 아니면 저장이 되는지 분명하게 알려줘야한다. 

그리고 실수로 잘못 누르는 일이 없도록 취소버튼을 시각적으로 구분하거나 위치를 떨어뜨려놔야한다. 

 

취소버튼의 목적은 사용자가 불안하지 않게, 실수 없이 원하는 선택을 할수 있게 만드는 것.

 

닫기(Close) 버튼 : 지금 이 창 '만' 닫을래

사용자가 이전에 열었던 것을 닫는 명확한 의미이다. 

현재 열려있는 창이나 대화상자를 단순히 종료하는 기능에 불과해서, 변경사항을 저장하지 않는 의미도 전달한다. 

 

그러나 단지 X 아이콘으로 닫기 버튼을 사용한다면, 사실 모호한 신호일수 있다.

단순히 창을 닫는건지, 뒤로가는건지, 저장하는건지

그래서 닫기버튼과 완료(저장)버튼을 한 화면에 두면 혼란스럽다.

둘다 창을 닫는다는 점에선 비슷하지만, 닫기는 저장하지 않고 닫고 완료는 저장하고 닫기 때문이다.

 

닫기버튼은 보통 오른쪽상단.

팝업이나 모달같은 임시창에서 사용된다.

사용자가 실수로 닫기 버튼을 눌렀을때 중요한 정보가 사라지지 않도록, 닫기전에 저장 여부를 묻기도 한다.

 

닫기버튼의 목적은 사용자가 부담없이 현재 열려 있는 창을 정리하는 것.

 

 

나가기(Exit) 버튼 : 진짜 안녕!

나간다는 것은 이탈한다는 것이다. 

단순히 한 화면이나 팝업을 닫는다는게 아니라

전체 애플리케이션을 종료하거나 주요영역을 완전히 벗어난다는 의미다.

 

영어에서는 Exit와 Quit가 비슷하게 사용되지만,

Exit는 장소나 공간을 떠난다는 의미가 강하고, Quit는 무언가 그만두거나 포기한다는 의미다.

 

사용자의 행동에 확실한 결정을 요구하는 경우 등장한다. 

예를 들어 게임에서 나가기를 누르면, '모든 내용이 종료되고 다시 돌아오려면 처음부터 시작합니다. 그럼에도 정말 종료하시겠습니까?'

처럼 추가 확인 메세지를 안내하기도 한다.  그리고 나가기를 누르면, 저장되지 않은 데이터가 사라질수도 있다는 안내도 있다.

 

나가기와 닫기, 취소버튼이 혼동되지 않도록 각각의 기능과 결과를 명확하게 구분해서 레이블링해야한다. 

사용자가 실수로 전체 앱을 종료하는 일을 막을수 있다.

 

 

효과적인 버튼 레이블 작성 UX Writing

1. 동사 활용.

버튼 레이블은 사용자가 즉시 행동을 이해할수 있는 동사로 시작할것.

단순히 확인 대신, 제출하기, 저장하기, 작성취소하기 처럼

실제로 어떤 일이 일어나는지, 버튼을 눌렀을때 기대할 수 있는 결과를 명확하게 표현해야한다. 

 

2.짧고 간결하게 

버튼공간은 제한적이라 핵심만 2~3단어로 전달.

불필요한 수식어나 반복적인 단어는 생략해야한다.

 

3.이중부정은 혼란

부정이 반복되면 사용자는 혼란을 느낀다.

'예약 취소를 취소할까요?' 보다는 '예약을 유지할까요?' 처럼 긍정적이고 단순한 문장.

 

+ 언어도 코드와 같다. 이중부정을 코드로 비유하면 이렇다. (참고글)

if (fasle (false)) { .. } 같은 난해한 코드는 사실 단순히 if(true) {..}와 같은 말이고 훨씬 가독성이 좋다.

상대를 배려하기 위해 완곡한 표현을 쓰거나, 강조하기 위해 사용할수 있지만 이중부정은 CPU를 100%로 만들어버린다. 

그리고 긍정/단문/직진이 훨씬 효율적으로 소통할수 있고, 이게 상대를 배려해주는 방법이다.

 

4.버튼을 누르면 무슨일이 생길지 전달.

결과를 구체적으로 써주면, 사용자는 버튼을 누르기 전부터 다음 행동을 예측할수 있다.

 

5. 일관성은 지키되, 맥락에 맞게 조정

동일한 기능에는 같은 레이블을 사용해서 일관성을 유지한다. 

상황에 따라 취소가 애매하다면, '작성취소' '예약취소' 처럼 구체적으로 바꿔야한다. 

 

 

출처 

https://brunch.co.kr/@1dayliterature/728