아래 내용은 버튼의 기본 원칙을 중심으로 주의해야 하는 내용을 중심으로 나열하였다. 디자이너가 버튼의 용도나 레이아웃에 필요한 위치에 효과적으로 적용할 수 있도록 다양한 방법을 알아보자.
Button, Link, Anchor 정의
Link : 페이지 “view all”, “Roger Wright” 프로필 등과 같은 다른 장소로 이동할 때 사용된다.
Anchor : 페이지 내에서 원하는 위치로 이동하는 방법을 제공한다.(예, 목차)
버튼의 상태(states)
버튼에 알아볼 수 있는 디자인 사용
사용자 인터페이스와 상호 작용할 때 사용자는 클릭할 수 있는 것과 클릭할 수 없는 것을 즉시 알아야 한다.
디자인은 우선순위와 관련되어야 한다.
버튼의 크기는 우선 순위를 반영해야 한다. 우선 순위가 더 높은 버튼에 더 큰 크기를 할당한다.
버튼 구조 이해
보조 요소 : Border radius, Padding, Gutter, Effects
색상 심리 적용
우선 순위가 높은 버튼을 강조 표시하려면 배경과 대조되는 색상을 사용한다.
사용자가 찾을 것으로 예상되는 위치에 배치
사용자가 버튼을 찾도록 유도 하지 말아야 한다.
Tip : 항상 접힌 부분 위에 버튼을 놓는다.
각 버튼의 기능을 명확하게 표시
일반적이거나 오해의 소지가 있는 레이블이 있는 버튼은 사용자에게 큰 불만의 원인이 될 수 있다.
스마트폰용 손가락 친화적인 버튼 만들기
이것은 10mm x 10mm가 적절한 최소 터치 대상 크기가 되도록 한다.
버튼을 적절하게 간격두기
이러한 크기는 사용자로부터 더 빠르고 정확한 반응을 이끌어낸다.