page title

버튼이 그룹으로 제공될 때 모든 버튼의 크기를 동일하게 제공한다.

버튼의 크기가 동일하다는 것은 그룹 내 선택지가 동질적임을 암시한다. 특정 버튼을 강조해야 할 필요가 있다면 크기가 아닌 다른 스타일을 통해 정보의 위계를 구분해야 한다.

버튼과 관련된 사용자 과업, 플로우의 중요도에 따라 버튼 간 위계를 명확하게 구분한다.

일반적으로 서비스의 주조색(Main color)을 배경색으로 채운 버튼은 강조 버튼으로 사용자로부터 중요한 행동을 유도하고자 할 때 사용한다.
윤곽선 버튼은 기본 버튼으로 중간 수준의 강조가 필요한 경우에 사용한다. 버튼과 관련된 행동의 중요도가 낮거나 한 페이지 또는 한 개의 뷰에서 중요도가 동일한 여러 개의 기능이 제공되어야 하는 경우에 적합하다.
텍스트 버튼이 가장 낮은 수준의 강조를 가지며 다양한 기능이 제공되어야 할 때 사용하기 적합하다.

한 페이지에 최상위 수준의 강조 버튼은 한 번만 사용한다.

채운 스타일의 버튼은 시각적으로 매우 현저하기 때문에 사용자가 빠르게 인지할 수 있도록 도와준다. 하지만 한 페이지에 채운 버튼을 여러 개 사용할 경우 사용자는 인지적 부담이 증가해 가장 중요한 행동 관련 버튼을 발견하는 데 많은 시간이 걸릴 수 있다.

버튼 그룹을 수직으로 배열할 때 최상위 수준의 강조 버튼을 첫 번째로 배치한다.

일반적으로 버튼 그룹은 수평 방향으로 나란히 배치된다. 그러나 버튼이 패널, 모바일 디바이스처럼 좁은 영역에 제공되어야 하는 경우 공간의 제약으로 인해 버튼을 수직으로 배치할 수 있다. 이 경우 버튼의 중요도 순으로 위쪽에 배치하여 사용자의 시선이 중요도가 높은 버튼에 먼저 도달할 수 있도록 구현해야 한다.

버튼의 텍스트 레이블은 버튼을 통해 실행되는 기능을 예측할 수 있는 명확한 내용을 동사형으로 제공한다.

버튼은 어떤 기능이나 동작을 실행시키는 요소이므로 사용자가 수행하는 작업을 동사로 표현하는 것이 적절하다. 명사나 형용사 레이블은 버튼의 용도나 목적을 명확하게 전달하지 못할 수 있으므로 ‘완료’, ‘닫기’, ‘취소’, ‘추가’, ‘삭제’와 같은 일반적인 작업인 경우와 동사를 사용했을 때 버튼 길이에 문제가 발생하거나 해석이 모호해지는 경우를 제외하고 항상 동사형 레이블을 제공해야 한다.

아이콘은 중요한 작업에 그리고 반드시 필요한 경우에 사용한다.

아이콘은 가장 핵심적인 동작을 수행하는 버튼에 사용해야 하며, 아이콘은 버튼의 텍스트 레이블과 의미적으로 높은 관련성이 있어야 한다. 텍스트 레이블이 없는 아이콘 버튼은 대부분의 사용자가 다른 서비스/시스템에서의 학습을 통해 의미를 명확하게 이해하고 있는 경우 (예 - 설정, 닫기, 공감 등)가 아니라면 사용하지 않는 것이 바람직하다.
아이콘이 있는 버튼은 아이콘이 없는 버튼보다 강조 수준이 높아야 한다. 버튼 그룹에서 가장 중요한 작업에 아이콘이 없으면 나머지 하위 수준 작업에서 아이콘을 사용해서는 안 된다.

사용자가 실수로 버튼을 두 번 이상 누르는 상황을 고려한다.

인터넷 환경이 느리거나, 시스템의 반응이 즉각적이지 않거나, 사용자가 손떨림이 있는 경우 실수로 버튼을 두 번 이상 누를 수 있다. 그러므로 버튼이 데이터를 전송하는 용도로 사용되는 경우에는 사용자의 두 번째 인터랙션이 무시되도록 구현해야 한다.