버튼 디자인 기본 원칙

아래 내용은 버튼의 기본 원칙을 중심으로 주의해야 하는 내용을 중심으로 나열하였다. 디자이너가 버튼의 용도나 레이아웃에 필요한 위치에 효과적으로 적용할 수 있도록 다양한 방법을 알아보자.

Button, Link, Anchor 정의

Button : “submit”, “merge”, “create new”, “upload” 등과 같은 작업을 수행할 때 사용된다.
Link : 페이지 “view all”, “Roger Wright” 프로필 등과 같은 다른 장소로 이동할 때 사용된다.
Anchor : 페이지 내에서 원하는 위치로 이동하는 방법을 제공한다.(예, 목차)

버튼의 상태(states)

버튼에 대한 올바른 상호 작용과 스타일을 만드는 것은 프로세스에서 가장 중요한 부분 중 하나이다. 각 상태에는 다른 상태 및 주변 레이아웃과 구별되는 명확한 어포던스(Affordance)가 있어야 하지만 구성 요소를 크게 변경하거나 많은 시각적 노이즈를 생성해서는 안 된다.

버튼에 알아볼 수 있는 디자인 사용

사용자 인터페이스와 상호 작용할 때 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 즉시 알아야 한다.

디자인은 우선순위와 관련되어야 한다.

버튼의 크기는 우선 순위를 반영해야 한다. 우선 순위가 더 높은 버튼에 더 큰 크기를 할당한다.

버튼 구조 이해

기본 구조 요소 : Text label, Border, Background, Icon
보조 요소 : Border radius, Padding, Gutter, Effects

색상 심리 적용

색상은 버튼의 용도와 상대적 중요성을 나타내는 효과적인 도구이다.
우선 순위가 높은 버튼을 강조 표시하려면 배경과 대조되는 색상을 사용한다.

사용자가 찾을 것으로 예상되는 위치에 배치

버튼은 사용자가 쉽게 찾을 수 있거나 볼 것으로 예상되는 위치에 있어야 한다.
사용자가 버튼을 찾도록 유도 하지 말아야 한다.

Tip : 항상 접힌 부분 위에 버튼을 놓는다.

각 버튼의 기능을 명확하게 표시

일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다.

스마트폰용 손가락 친화적인 버튼 만들기

MIT Touch Lab* 연구에 따르면 손가락 패드의 평균은 10-14mm이고 손가락 끝은 8-10mm이다.
이것은 10mm x 10mm가 적절한 최소 터치 대상 크기가 되도록 한다.

버튼을 적절하게 간격두기

이러한 크기는 사용자로부터 더 빠르고 정확한 반응을 이끌어낸다.