[기획할때 뒤섞이는 Component] 제 1탄. 확인/완료/저장 버튼

0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×

아래 화면에서 모든 정보를 저장하고 이 화면을 닫으려면
우리는 우측 상단에 있는 [완료] 버튼을 누르면 됩니다.

그런데 항상 이럴 때 [완료] 버튼만이 쓰이는 것은 아닙니다.
[완료] 버튼 대신 [확인]이나 [저장]이라는 레이블을 가진 버튼은 어떨까요? 전혀 이상하지 않을 것 같습니다.

이런 탓인지 실제로 직접 기획 작업을 할 때 어떤 화면에는 [확인] 버튼을 넣고,

어떤 화면에서는 [저장] 버튼을 넣는 등 같은 기능의 버튼을 다른 레이블로 넣어버리는 경우가 많습니다.
그리고 나중에 그걸 알아차린 후에야 이런 케이스를 모아놓고 버튼 명을 정리하게되죠.

 

솔직히 사용자 입장에서는 어떤 버튼이든 별 신경 쓰지 않을 수도 있겠지만,
사용자가 알아차리게 된다면, 일관적이지 않은 서비스에 대하여 그 신뢰도가 떨어질 것입니다.

또한 UI기획자로서 나의 소중한 문서의 완성도가 떨어졌다는 생각에 마음이 너무나 찜찜해 집니다.

그래서 매번 뒤늦게 정리하는 것 대신, 같은 액션을 수행하는 버튼들의 레이블 기준을 정하고
패턴을 만들어야 겠다는 생각이 들었습니다. 그래서 아래와 같은 조사를 시작했습니다

 

1. 확인, 완료, 저장의 사전적 의미

  • 확인 : 틀림없이 그러한가를 알아보거나 인정함. 또는 그런 인정 (Confirm)
  • 완료 : 완전히 끝마침 (Done)
  • 저장 : 물건이나 재화 따위를 모아서 간수함. (Save)

→ 저장에 비하여 확인이나 완료는 모든 화면에 쓰일 수 있는 레이블임

2. OS 별 사용 패턴

[iOS]

→ 대부분의 기본 APP에서 ‘완료’ 버튼 사용

 

→ 내용을 변경하더라도, 텍스트 변경이 아니라면 ‘완료’ 버튼 없음

 

 

 → ‘저장’ 버튼의 경우 ‘완료’와 구분되는 기준 알 수 없음

 

[Android OS]

 

 

 

→ ‘저장’ 버튼을 사용하는 경우가 많으며, 가능하다면 버튼 주어지지 않음. 전송, 설정 등 특정 Action을 지칭하는 경우 많음

 

3. 주요 App. 사용 패턴

[Evernote / Dropbox / Facebook]

 → 모두 제각각이지만, 서비스에 걸맞는 레이블을 사용하고 있음

위와 같은 조사 끝에 제가 내린 결론은 아래와 같습니다.

[나만의 기준]

  1. 꼭 필요하지 않은 경우라면, [완료]/[확인]/[저장] 버튼을 생략한다. 특히 선택만 하는 화면이라면 선택 직후에 화면에서 빠져나갈 수 있어야 하겠다.
  1. [완료]나 [확인]의 의미는 너무 광범위하므로 웬만하면 지양하고, [저장]이나 [보내기], [설정] 등 최대한 상황에 걸맞는 Specific한 단어를 선택한다.
  1. 어떤 레이블의 버튼을 사용하건, 통일한다.
  1. 경우에 따라서는 Depth나 화면의 형태  패턴에 따라서 다르게 설정할 수 있다.

 

이렇게 결론을 냈지만, 결국 제 생각을 따라가다가 내린 결론이기 때문에 누구나 자신만의 결론을 다르게 내릴 수 있을 것 같습니다. 중요한 것은 저렇게 내린 결론이 나의 기획에 실용되고, 이로 인해 사용자의 혼란을 최소화 할 수 있어야 한다는 것 같습니다.

천 윤서 (29 Posts)


0 Flares Twitter 0 Facebook 0 Filament.io 0 Flares ×