버튼은 사용자가 '탭' 또는 '터치'를 했을 때 어떠한 액션을 할 수 있음을 예측하게 하여 중요한 동작을 수행하게하는 요소이다.
버튼 설계 시 유의할 점은 누를 수 있다는 시각적인 힌트가 충분히 드러나야 한다. => 어포던스
버튼의 구성요소
1. 버튼라벨/레이블 (Button Label)
: 버튼을 누를 때 실행되는 명령에 대해 안내하는 글자. 사용자가 라벨만 보고도 무엇이 실행될지 알 수 있어야 함.
2. 컨테이너(Container)
: 안에 있는 요소들을 감싸고 있는 프레임으로 버튼의 높이는 컨테이너 상하 여백과 안에 있는 요소의 높이로 정해진다.
3. 아이콘
: 그 자체로 레이블이 될 수 있으며, 단독 사용시 아이콘 버튼이 되며, 버튼의 중요도에 따라 레이블과 아이콘을 같이 사용하기도 함.
리딩엘리먼트 (Leading Element)
: 아이콘이 버튼 라벨보다 앞에 있으면 앞쪽에서 이끈다는 뜻으로 리딩 엘리먼트라함.
트레일링 엘리먼트 (Trailing Element)
: 아이콘이 버튼 라벨보다 앞에 있으면 앞쪽에서 이끈다는 뜻으로 트레일링 엘리먼트라함.
4. 라운드(Round)
: 버튼 컨테이너의 모서리 부분에 라운드를 준 것을 의미함. 기능적인 의미는 없지만 시각적인 측면에서 중요하며,
아이콘과 색과 함께 결정하는 요소임.
5. 아웃라인 (Outline)
: 버튼의 컨테이너에 색을 채우지 않고 아웃라인에만 색을 사용함.
6. 그림자 (Shadow)
: 버튼의 어포던스를 높일수 있는 그래픽 요소로 주로 컨테이너 버튼에 또는 CTA버튼에 사용하는 편이다.
버튼의 종류
1. 솔리드 버튼(Solid Button)
가장 일반적인 버튼의 형태. 배경이 색으로 채워져 다른 버튼보다 시각적으로 눈에 잘띈다. 브랜드 컬러를 이용해 Brand Button이라고도하며 Contained Button(컨테인디드 버튼)이라고도 함.
2. 고스트 버튼(Ghost Button)
하얀색 배경에 버튼 레이블과 아웃라인으로 된 버튼. 레이블과 아웃라인 색은 액션색으로 채운다.
3. 밝은 솔리드 버튼(Light Solid Button)
솔리드 버튼과 같이 버튼 레이블을 컨테이너가 감싸는 형태이지만 밝은 회색 배경에 액션 색 텍스트로 되어있다. 아웃라인버튼과 같은 시각적인 계층을 가짐.
4. 아웃라인 버튼(Outline Button)
텍스트 레이블을 아웃라인으로 감싼 구조, 고스트 버튼보다 중요도가 떨어진 버튼에 사용.
5. 텍스트 버튼(Text Button)
컨테이너나 아웃라인 없이 텍스트 레이블만 있는 버튼. 액션컬러를 사용해서 하이퍼링크와 같아 보임.
액션 컬러에 볼드 텍스트, 액션 컬러에 레귤러 텍스트, 진회색 볼드 텍스트가 있음.
💡 UX 관점에서의 사용 기준을 정리해보면
- 버튼 스타일은 단순한 시각 디자인이 아닌, '사용자에게 어떤 행동이 중요한지 알려주는 신호'
✅ 버튼 타입을 고를 때 스스로에게 던지는 질문
- 이 행동이 화면에서 가장 중요한가 ?
- 사용자가 망설이면 안되는 액션인가 ?
- 실수 클릭을 방지해야 하는가 ?
-> yes가 많다면 : solid Button
-> 보조 행동이라면 : Ghost / Text Button
버튼의 상태
1. Default
버튼의 활성화 상태에서 사용자가 터치하기 전 상태. 콘텐츠와 구분되게 디자인되어 사용자에게 상호작용이 가능함을 알림.
2. Hover
사용자가 버튼 위에 마우스나 손가락을 올렸을 때 상태 변화를 통해 상호작용이 가능함을 알림.
3. Focus
사용자가 버튼을 탭 하기 전 준비단계로 보면 됨. 키보드 또는 기타 방향 입력 장치를 통한 탐색이 가능하게 함.
4. Pressed
사용자가 액션 실행을 위해 버트을 탭하여 눌렀을 때의 상태. 돌출된 버튼이 눌리면서 안으로 들어가는 느낌으로 표현하고자 디볼트 상태보다 어두운색상을 사용함.
5. Disabled
사용자가 작업을 완료하기 전에는 버튼을 누를 수 없는 상태라는 것을 알려줌.
6. Progress/Loading
버튼을 눌렀을 때 버튼 내에 진행상태를 알리기 위해 사용됨. 다운로드, 저장과 같은 버튼에 주로 사용됨.
버튼 디자인 팁
1. 버튼은 버튼임을 사용자에게 알려야함
버튼은 다른 컨트롤과 다르게 어포던스(행위를 유발하는 특징)가 있다.
우리는 사용자에게 버튼임을 쉽게 알려줄 수 있어야하기 때문에 직사각형의 모양생긴점을 암묵적인 룰으로 이용하여 버튼임을 나타내는 디자인을 해야한다.
2. 누르기 쉬운 버튼 크기로 만들기
버튼디자인을 고려할 때 '터치포인트'를 고려해야한다. MIT의 터치 연구 결과에 따르면 사람들의 평균적인 손가락패드 크기는 10~14mm이고 평균적인 손가락 끝은 8~10mm이므로, 최소 터치 대상크기는 10mm x 10mm가 적합하다고 한다.
버튼의 최소크기
ios : 44 x 44pt로 권장 (애플디자인가이드,pt to px)
android : 36 x 64 (px,pt,dp)로 권장 (dp to px)
-> 작성이 더 필요함 ,,
https://uxmag.com/articles/excerpt-from-the-new-book-the-mobile-frontier
3. 레이블을 잘 사용해라
버튼 레이블 정렬
버튼 레이블을 중앙에 잘 맞춰주어야하며, 영문의 경우에는 첫 번째 대문자에 정렬맞추기, 기준선 사용,하강문자(y,j,g 등의 아래로 늘어지는 문자)무시 등이 있다.
읽히기 쉽게 여백을 이용
버튼 레이블을 중앙에 위치하는 것뿐만 아니라, 읽을 수 있을 만큼 충분한 호흡공간이 필요하다. 텍스트 주위에 여백이 거의 없는 버튼은 피하는 것이 좋음!!!
명확하고 예측 가능해야 함
동작과 사용자의 의도가 관련 없는 "OK","네","아니오" 같은 일반적인 언어가 아닌 "저장","취소","닫기" 등 처럼 일반적인 작업을 제외하고는 <명사>+<동사> 형식을 사용해야함.
💡 ' CTA와 연결되는 내용으로 버튼은 사용자에게 버튼을 누른 뒤 벌어질 일을 예측하게 한다!!
참고/예시링크
버튼 디자인 12가지 팁
