버튼은 모든 인터페이스에서 찾을 수 있는 요소로 사용자가 조치를 취하고 선택을 할 수 있게 해준다.
그들이 볼 수 있는 것처럼 간단하게 잘 설계된 버튼을 전달하기 위해 따라야 할 규칙이 있다.
이 글에서는 잘 디자인된 버튼을 위해 따라야 할 기본 규칙을 설명할 것이다.
버튼 유형(Buttons Types)
일반적으로 모든 인터페이스에는 사용자 경험을 향상시키기 위해 하나 이상의 버튼 유형이 포함되어 있다. 버튼 유형은 사용자가 중요성과 그 사이의 차이를 만드는 데 도움을 주며, 다른 버튼 유형은 덜 관심을 끌 수 있다.
버튼 해부학(Buttons Anatomy)
버튼 디자인을 시작하기 전에 해부학을 이해해야 한다. 해부학은 사용자의 언어에 따라 구조를 따르는 것이 좋지만 영어가 왼쪽에서 오른쪽으로 작성되므로 아이콘이 먼저 나오고 텍스트가 온다.
버튼 크기(Button size)
여기에 있는 아이디어는 버튼을 모바일 사용자에게 손가락 친화적으로 만들고 PC에서 클릭할 수 있게 하는 것이다. 이 경우 항상 버튼을 누르고 그 근처에 있는 버튼을 눌러야 한다. 여기서 우리는 잘못 설계된 버튼을 직면하고 있다.
또한 버튼이 클수록 우선순위가 높아진다.
색상 및 대비(Color & Contrast)
다른 색상의 버튼은 부트스트랩에서 왔으며 요즘에는 주로 기본 및 보조 버튼을 사용하므로 다른 색상을 사용할 필요가 없지만 버튼의 메시지가 색상을 사용하는 인터페이스보다 더 중요한 대시보드 또는 인터페이스와 같은 인터페이스에서는 문제가 없다.
너비와 안쪽 여백(Width and Padding)
이것에 대한 규칙이나 완벽한 숫자는 없지만 이 예를 보면 비율에 대한 아이디어를 얻을 수 있다.
버튼 간격(Button spacing)
버튼 간격은 특히 휴대 기기에서 특히 중요하다. 이 연구에 따르면, 고령자를 위한 터치스크린 사용자 인터페이스: 버튼 크기 및 간격 버튼이 너무 멀리 떨어져 있으면 사용자가 터치 대상으로 이동하는 속도가 훨씬 느려진다. 또한 버튼이 너무 가까웠을 때 사용자가 터치 정확도가 가장 낮다.
버튼 상태(Button States)
상태는 구성 요소의 상태를 통신하는 데 사용된다. 잘 설계된 버튼은 사용자가 상호 작용할 때 상태를 변경해야 한다. 잘못 설계된 버튼은 잘못된 동작을 오도할 수 있으며, 예를 들어 필드가 버튼처럼 설계된 경우 다른 동작으로 착각할 수도 있다.
게재 위치 및 주문(Placement & Order)
일반적으로 버튼은 중요한 순서대로 배치된다. 게다가, 이 글의 좋은 예가 로그인 폼이다. 로그인 버튼이 가장 주목을 받고 나서, 덜 중요한 액션에 일반적으로 사용되는 텍스트 버튼이 있다.
