버튼은 버튼에 설명된 작업을 하는 대화형 요소입니다.
버튼에 ‘저장’이라고 적혀 있다면, 클릭했을 때 ‘저장’할 가능성이 크고 모든 디지털 제품에서 가장 중요한 상호작용 요소 중 하나입니다.
버튼에는 여러 중요한 행동들이 있는데, 구매, 다운로드, 전송 등이 있고,
디지털 버튼은 TV리모컨, 레코드 플레이어, 게임 컨트롤러 같은 실제 버튼에서 유래되기도 했습니다.
가장 중요한 것은 버튼은 버튼처럼 보여야 하고, 디자인할 때 다른 요소들과 헷갈리지 않도록 눈에 띄어야 한다는것입니다.
(버튼에서 디자인요소를 제거할 수 록 버튼 보다는 일반 텍스트나 장식처럼 보여 버튼의 기능을 점점 잃어버리게 됩니다.)
1.친숙함=좋다
우리는 보통 행동과 관련된 모양과 형태에 익숙하고 버튼은 버튼처럼 보일 때 가장 좋습니다.
그래서 직사각형 (둥근 직사각형)이 항상 버튼에 가장 많이 사용하는 이유입니다.
(한 눈에 봐도 버튼이라고 알 수 있는 디자인)
다른 버튼 디자인은(EX. 삼각형, 원, 유기체) 사용자가 버튼이라고 인식하기 어렵습니다.
이부분을 주의해야 하고, 제품의 스타일이 표준에서 벗어나야 할 때만 사용해야합니다.
(실행 가능한 버튼으로 알아보는데 훨씬 더 오래 거리는 디자인)
2.버튼 분석
버튼 디자인을 할 때는 각 요소에 대해 현명하게 선택해야합니다.
브랜드나 스타일 가이드를 기준으로 해서 어떤 버튼이 브랜드와 일치하고 인터페이스에 맞는지 잘 생각해보아야합니다.
위의 예시 그림에서 수직 간격보다 왼쪽 간격이 두 배 크면 가독성이 높아지는 안전한 비율 선택이며,
그리드 번호를 사용해 공간을 설정해야합니다.
3.간격과 정렬
간격이 일정하지 않은 버튼은 인터페이스의 가장 일반적인 문제 중 하나입니다.
버튼이 수평, 수직으로 모두 중심에 있는지 확인해야하며 확실해야할 경우 가이드를 작성해야합니다.
그리드 작성 외에도 버튼 간격을 알 수 있는 안전한 방법은 대문자 “W”를 넣어보는 방법입니다.
버튼 양면에 “W”가 하나 이상 들어가면 되고 “W”가 두배로 들어가게 되면 가독성을 높일 수 있습니다.
버튼과 버튼 사이가 겹치지 않고 개별적인 공간이 있어야합니다.
4.적당한 크기
웹과 모바일 버튼은 모두 최소 크기를 가져야 합니다.
버튼이 너무 작으면 누르거나 클릭하기가 어렵고 사용자가 앱을 제거할 수도 있습니다.
모바일 장치의 요소를 44X44픽셀로 시작하는게 가장 좋은 방법입니다.
(모바일 버튼은 50px 정도가 가장 좋고, 커서 장치 같은 경우 32x32px 로도 작동해야 하며 데스크톱에서도 버튼이 클수록 더 좋습니다.)
5.모범 사례
중요한 버튼은 아이콘과도 잘 작동해야합니다.
“계산”이라는 단어는 장바구니나 카트 아이콘으로 빠르게 알 수 있지만, 아이콘만 있는 것 보단 “계산”이라는 단어가 포함되있을 경우
더욱 빠르게 알아 볼 수 있습니다.
(버튼과 옆에 있는 화살표는 버튼 메세지를 사용자가 ‘클릭’과 ‘진행’을 할 수 있도록 유도합니다.)
(버튼에 은은한 그림자를 넣어 배경에서 더 눈에 띄게 하면 그림자가 없는 버튼보다 훨씬 버튼이 눈에 띄게됩니다.)
6.둥근 모서리
직사각형 버튼보다 둥근 사각형의 버튼이 더 친근하고 긍정적이게 보여지며 주변 컨텐츠 디자인하는 것을 훨씬 더 어렵게 만듭니다.
버튼 바로 위에 왼쪽 정렬 텍스트가 있으면 모서리가 둥글수록 시각적으로 눈에 덜 띄게됩니다.
버튼이 약간 둥근 경우 왼쪽 여백에 들어맞는것처럼 보입니다.
조금 더 둥근 모서리는 시각적으로 약간 오른쪽으로 움직여 보입니다.
완전히 둥근 모서리는 시각적으로 정렬되어 보이지 않고, 그리드 외부에 있는 것처럼 보입니다.
7.아이콘 정렬
버튼의 아이콘 정렬이 가장 어려운 작업 중 하나입니다.
많은 경우 글꼴 무게와 아이콘 무게의 관계가 특정되는데 대부분의 경우 효과있고 유용한 규칙이있습니다.
버튼 코너 크기에 맞는 버튼 높이의 원이나 정사각형을 만듭니다.
그 안에 아이콘을 넣을 또 다른 모양을 만드는데 그 모양은 텍스트 높이와 같은 크기의 모양이여야 합니다.
그리고 생기는 작은 공간에 아이콘을 배치합니다.
8.모서리 균형
둥근 모서리 버튼을 사용할 때 화면의 모서리와 동일한 비율을 가지게 해야 합니다.
비율이 다를 경우 여백의 불균형이 생기게 됩니다.
(시선의 간격이 좌측과 하단의 간격과 동일해서 좋고, 더 빠른 결과를 보여줍니다.)
왼쪽 – 사선의 간격이 측면 간격보다 크다, 오른쪽 – 사선의 간격이 측면 간격보다 작다.
(위 사진 같은 간격은 화면 끝에 시선이 가서 버튼 자체에 눈길이 가지 않게 됩니다.)
#요약하자면
- 버튼을 버튼처럼 보이게 만드세요.
- 라벨이 수직 및 수평 방향으로 중앙에 오게하세요.
- 버튼 내부에 충분한 공간을 만드세요.
- 아이콘을 사용할 때 적당한 크기와 정렬을 선택하세요.
- 버튼 사용 위치에 따라 테두리 반지름을 설정하세요. 그런 다음 버튼 반지름이 화면 요소와 일치하는지 확인하세요.
- 버튼이 클수록 사용하기 쉽고 적당한 크기로 만드세요 (+데스크톱 포함)
