buttons

Basic principles

Findable

다른 UI 요소(버튼 포함)들 틈에서도 쉽게 찾을 수 있어야 합니다.

Clear

사용자가 버튼을 통해 어떤 액션을 할 수 있을지, 버튼은 어떤 상태인지 파악할 수 있어야 합니다.

Identifiable

사용자가 버튼을 통해 뭔가 액션을 취할 수 있음을 인지할 수 있어야 합니다.

Findable

버튼은 사용자가 쉽게 찾을 수 있어야 합니다.  특히나, 사이트나 앱 전 화면에 거쳐 버튼의 위치를 일관성 있게 유지하는 것은 매우 중요합니다.

버튼과 힌트

버튼은 사용자가 쉽게 찾을 수 있어야 합니다.

Don’t

스크롤해서 볼 수 있는 추가 버튼이 있다는것을 파악할 수 없습니다.

숨어있는 버튼의 일부를 노출하여 추가 버튼이 있음을 알려줍니다.

버튼의 배치와 디자인 일관성

사용자가 불필요한 학습을 하지 않도록 앱의 전 화면에 거쳐 버튼 위치를 일관성 있게 유지해야합니다.

Don’t

메인버튼과 서브 버튼의 위치와 디자인이 페이지마다 다르게되어있어 사용자가 직관적으로 액션하기 어렵습니다.

Clear

사용자가 앱이나 사이트에서 취하고자 하는 액션을 파악하기 위해서는 버튼의 액션과 상태가 모두 명확해야합니다. 명확한 버튼을 위해서는 색상, 라벨, 상태를 제대로 디자인해야 합니다.

Color

어떤 색상은 사용자에게 특정한 의미를 전달하곤합니다. (빨간색: 경고, 돌이킬 수 없는 액션 수행, 오류 / 초록색 : 액션 수행 성공) 통상적으로 쓰이는 색상을 사용하면 버튼의 액션이나 상태를 이해하는데 큰 도움을 줄 수 있습니다.

text

버튼 라벨은 사용자가 어떤 액션을 취할 수 있는 지를 명확하게 기술해주어야 합니다. 또한, Readability를 높이기 위해 한줄로 유지할 것을 권장합니다.

State

버튼은 다양한 상태를 가질 수 있습니다. 사용자가 버튼이 어떤 상태인지 직관적으로 구분할 수 있도록, 기존의 틀을 유지하여 디자인합니다. 비활성화 버튼과 중요도가 낮은 버튼의 디자인은 명확하게 구분되어야합니다.

버튼 상태, 버튼 중요도에 따른 UI 구분

비활성화 버튼과 중요도가 떨어지는 버튼은 명확히 구분되도록 디자인해야 합니다.

Don’t

버튼의 상태를 파악할 수 없는 상황이 발생하지 않도록 덜 중요한 버튼(자막/음성 옵션)과 비활성화 상태의 버튼(쿠폰 등록) 디자인은 다르게 디자인합니다.

버튼 상태 (활성화/비활성화, On/Off) 에 따른 UI 구분

비활성화 버튼과 OFF 상태의 버튼은 명확히 구분되도록 디자인해야 합니다.

Don’t

‘스피커'는 OFF 상태 ‘블루투스'는 비활성화 상태이나 구분이 불가하여 사용자의 불필요한 액션을 유도합니다.

ON / OFF 상태와 비활성화 상태의 디자인을 명확히 구분합니다.

버튼 활성화 조건

버튼은 필수 입력 필드가 모두 기입된 후에 활성화되어야합니다.

Don’t

다음 플로우로 넘어갈 수 있는 버튼은 해당 단계에서 요청하는 필수 정보가 모두 입력된 후에 활성화되어야 합니다.

필수 정보가 입력되지 않은 상태에는 다음 플로우로 넘어갈 수 있는 버튼은 비활성화 처리합니다.

버튼 클릭 영역

텍스트 버튼의 클릭 영역은 앱 내 동일하게 유지해야합니다.

Don’t

텍스트 버튼의 클릭 영역은 앱 내 동일하게 유지되어야합니다.

Identifiable

식별가능한 버튼이라면, 사용자는 버튼을 통해서 뭔가 액션을 수행할 수 있다는 것을 바로 눈치챌 수 있습니다. 모바일 디바이스라면 터치하고 싶은, PC라면 클릭하고싶은 형태여야합니다. 모바일에서는 PC와는 달리 버튼이 인터랙티브한지 확인하기위해 hover해 볼수가 없기때문에, 특히나 더 인터랙티브한 아우라를 뿜어내도록 디자인되어야합니다.

Don’t

버튼이 텍스트 안에 묻혀서 인지가 어렵습니다.

타 컨텐츠와 색상으로 구분되어 인터랙티브한 요소로 쉽게 확인이 가능합니다.

UX Writing

버튼은 사용자가 원하는 행동을 수행할 수 있게 하는 UI Component 입니다. 사용자는 버튼 터치 하나로 삭제, 탈퇴, 해지와 같이 서비스에 있어서 중대한 의사 결정을 할 수 있습니다.

Text label

짧고 간결하게 클릭 시 발생할 액션에 대해 명확하게 알려줍니다. 구체적이고 정확한 동사를 사용합니다. (‘취소/확인’, ‘아니요/네’ 와 같은 동작성 없는 버튼 사용 금지) 영문의 경우 첫 글자는 대문자로 사용합니다. (나머지는 소문자) 텍스트 버튼은 가독성을 위해 한줄로만 사용합니다. (줄바꿈 금지)

버튼 텍스트 라벨

버튼 라벨은 사용자가 취할 수 있는 액션을 명확히 설명해야합니다.

Don’t

선택 시 어떤 액션이 일어날 지 확신할 수 없는 불명확한 ‘확인' 버튼 대신, ‘URL로 이동’ ,‘창 닫힘’, ‘앱 종료' 등 액션을 명확하게 표시하도록 합니다.

버튼 디자인이 타 요소와 명확히 구분되며, 구체적인 라벨링을 통해 다음 액션(URL 이동)을 예측할 수 있습니다.