더 나은 버튼 디자인을 하는 법

위픽레터

2021-12-16

버튼은 버튼에 설명된 작업을 하는 대화형 요소입니다.

버튼에 ‘저장’이라고 적혀 있다면, 클릭했을 때 ‘저장’할 가능성이 크고 모든 디지털 제품에서 가장 중요한 상호작용 요소 중 하나입니다.

버튼에는 여러 중요한 행동들이 있는데, 구매, 다운로드, 전송 등이 있고,

디지털 버튼은 TV리모컨, 레코드 플레이어, 게임 컨트롤러 같은 실제 버튼에서 유래되기도 했습니다.

가장 중요한 것은 버튼은 버튼처럼 보여야 하고, 디자인할 때 다른 요소들과 헷갈리지 않도록 눈에 띄어야 한다는것입니다.

(버튼에서 디자인요소를 제거할 수 록 버튼 보다는 일반 텍스트나 장식처럼 보여 버튼의 기능을 점점 잃어버리게 됩니다.)

1.친숙함=좋다

우리는 보통 행동과 관련된 모양과 형태에 익숙하고 버튼은 버튼처럼 보일 때 가장 좋습니다.

그래서 직사각형 (둥근 직사각형)이 항상 버튼에 가장 많이 사용하는 이유입니다.

(한 눈에 봐도 버튼이라고 알 수 있는 디자인)

다른 버튼 디자인은(EX. 삼각형, 원, 유기체) 사용자가 버튼이라고 인식하기 어렵습니다.

이부분을 주의해야 하고, 제품의 스타일이 표준에서 벗어나야 할 때만 사용해야합니다.

(실행 가능한 버튼으로 알아보는데 훨씬 더 오래 거리는 디자인)

2.버튼 분석

버튼 디자인을 할 때는 각 요소에 대해 현명하게 선택해야합니다.

브랜드나 스타일 가이드를 기준으로 해서 어떤 버튼이 브랜드와 일치하고 인터페이스에 맞는지 잘 생각해보아야합니다.

위의 예시 그림에서 수직 간격보다 왼쪽 간격이 두 배 크면 가독성이 높아지는 안전한 비율 선택이며,

그리드 번호를 사용해 공간을 설정해야합니다.

3.간격과 정렬

간격이 일정하지 않은 버튼은 인터페이스의 가장 일반적인 문제 중 하나입니다.

버튼이 수평, 수직으로 모두 중심에 있는지 확인해야하며 확실해야할 경우 가이드를 작성해야합니다.

그리드 작성 외에도 버튼 간격을 알 수 있는 안전한 방법은 대문자 “W”를 넣어보는 방법입니다.

버튼 양면에 “W”가 하나 이상 들어가면 되고 “W”가 두배로 들어가게 되면 가독성을 높일 수 있습니다.

버튼과 버튼 사이가 겹치지 않고 개별적인 공간이 있어야합니다.

4.적당한 크기

웹과 모바일 버튼은 모두 최소 크기를 가져야 합니다.

버튼이 너무 작으면 누르거나 클릭하기가 어렵고 사용자가 앱을 제거할 수도 있습니다.

모바일 장치의 요소를 44X44픽셀로 시작하는게 가장 좋은 방법입니다.

(모바일 버튼은 50px 정도가 가장 좋고, 커서 장치 같은 경우 32x32px 로도 작동해야 하며 데스크톱에서도 버튼이 클수록 더 좋습니다.)

5.모범 사례

중요한 버튼은 아이콘과도 잘 작동해야합니다.

“계산”이라는 단어는 장바구니나 카트 아이콘으로 빠르게 알 수 있지만, 아이콘만 있는 것 보단 “계산”이라는 단어가 포함되있을 경우

더욱 빠르게 알아 볼 수 있습니다.

(버튼과 옆에 있는 화살표는 버튼 메세지를 사용자가 ‘클릭’과 ‘진행’을 할 수 있도록 유도합니다.)

(버튼에 은은한 그림자를 넣어 배경에서 더 눈에 띄게 하면 그림자가 없는 버튼보다 훨씬 버튼이 눈에 띄게됩니다.)

6.둥근 모서리

직사각형 버튼보다 둥근 사각형의 버튼이 더 친근하고 긍정적이게 보여지며 주변 컨텐츠 디자인하는 것을 훨씬 더 어렵게 만듭니다.

버튼 바로 위에 왼쪽 정렬 텍스트가 있으면 모서리가 둥글수록 시각적으로 눈에 덜 띄게됩니다.

버튼이 약간 둥근 경우 왼쪽 여백에 들어맞는것처럼 보입니다.