2. Button

Usage

Be clear

버튼 레이블은 명확하고 예측 가능해야합니다. 단어를 명확하고 간결하게 사용합니다.

Able to expect

버튼 레이블은 터치할 때 발생할 동작 action을 사용하여 버튼을 터치하면 어떤 작업이 발생할지 명확하게 알려야 합니다. 동작 action과 관련 없는 일반적인 언어를 사용하지 않습니다.

1. Primary Action

사용자의 행동을 유도(동기부여)하고 다음 단계로 연결하기 위한 action 버튼을 제공합니다. 사용자에게 핵심이 무엇인지, 버튼을 클릭하면 어떤 유용성이 있는지 알려줍니다. 맥락과 관련된 구체적인 copy를 사용합니다.

<action button>

✅ Do	❌ Don't
주소검색 센서 등록하러 가기 비밀번호 변경 재발송	확인 시도하기 시작
동기를 부여할만한 구체적인 copy 를 사용합니다.	모호하거나 지나치게 일반적인 copy는 사용자에게 혼란을 줄 수 있습니다.

2. Secondary Action

버튼 사용 시, 다음 행동으로 이어질 action 레이블을 우측에 배치합니다. 좌측 버튼은 '돌아가기', '취소' 등의 보조 action 레이블을 배치합니다.

<alert dialog>

✅ Do	❌ Don't
비밀번호를 변경하시겠습니까? 취소 / 변경	비밀번호를 변경하시겠습니까? 취소 / 확인
알림을 삭제하시겠습니까? 취소 / 삭제	알림을 삭제하시겠습니까? 취소 / 확인 아니

3. Tertiary Action

옵션으로 제공되는 기능은 Text button 또는 Icon 등을 활용합니다. Text button은 간결해야합니다. 불필요한 단어를 이어 붙이거나, 문장으로 이어지지 않도록 주의합니다.

<text button>

✅ Do	❌ Don't
상세보기 삭제 추가 수정	SMS 발송여부 상세보기 선택항목 삭제하
텍스트 버튼은 전달하고자하는 의도가 간결해야 합니다.	불필요한 단어나 문장으로 이어지지 않도록 합니다.