버튼 디자인 가이드: 변환하는 버튼을 디자인하는 방법

버튼 디자인 가이드를 작성하는 이유는 무엇입니까? 버튼이 그렇게 중요합니까? 사용자 인터페이스의 작은 부분에 왜 그렇게 많은 에너지를 소비합니까?

버튼은 웹 디자인에서 매우 일반적이고 단순해 보이지만 그 중요성을 과소평가해서는 안 됩니다. 그들은 매우 중요한 임무를 수행하는 중요한 사이트 요소입니다.

특히 주요 클릭 유도문안 및 전자 상거래 사이트에서 버튼은 말 그대로 수익에 영향을 미칩니다. 그러나 소셜 공유 버튼인 이메일 가입 및 양식 제출 버튼도 웹사이트 성공의 핵심입니다.

이러한 이유로 이 기사에서는 이 자주 간과되는 디자인 요소와 WordPress 웹사이트를 위한 전환율이 높은 버튼을 만드는 방법에 대해 자세히 이야기하고자 합니다. CTA(클릭 유도문안)에 초점을 맞추는 동안 버튼 디자인과 관련하여 일반적인 조언에 대해서도 이야기할 것입니다.

그 주제가 당신의 버튼을 눌렀습니까? 그런 다음 계속 읽으십시오.

시작하기 전에 A/B 테스트에 대한 간략한 설명

아래에서 버튼을 만들고 사용하기 위한 몇 가지 명확한 지침을 살펴보겠습니다. 이러한 원칙은 사이트에 있는 모든 버튼의 디자인, 위치 지정 및 기타 중요한 속성을 생각하는 데 도움이 됩니다.

그러나 동시에 이는 전환율 향상을 위한 기반일 뿐이라는 점을 명심하는 것이 중요합니다. 디자인 원칙을 통해 무엇이 효과가 있을지에 대한 교육적인 추측을 할 수 있지만 방문자를 구독자, 구매자로 전환하는 데 핵심이 되는 버튼이 무엇인지 진정으로 알 수 없거나 테스트에 놓여 있습니다. A/B 테스트를 실행하면 방문자가 가장 잘 반응하는 버튼 색상, 복사, 위치 및 기타 마커가 무엇인지, 사이트에 진정으로 효과적인 것이 무엇인지 파악할 수 있습니다.

모든 것이 중요하기 때문입니다. 아주 작은 변화라도 긍정적이든 부정적이든 전환율에 놀라울 정도로 큰 영향을 미칠 수 있습니다. 내가 말하는 내용을 이해하려면 이 예를 살펴보세요.

따라서 버튼 디자인 가이드가 모범 사례를 이해하는 데 도움이 되지만 사이트의 성공에 가장 적합한 조합을 찾기 위해 건전한 실험을 통해 보완하는 것이 가장 좋습니다.

사용자가 실제로 클릭하는 버튼을 디자인하는 방법

이 경고 이후에 우리는 클릭 유도문안을 개선하고 전환율을 높일 수 있는 우수한 성능의 버튼을 만드는 방법에 대해 알아보겠습니다. 즐기다!

브랜드 또는 사이트에 맞게 디자인

기능적 디자인을 시작하기 전에 버튼이 표시될 컨텍스트에 대해 생각하는 것이 중요합니다. 사이트가 엉망이라면 완벽한 버튼을 만들어도 소용이 없습니다.

이러한 이유로 아래 지침이 중요하지만 결과가 표시되는 컨텍스트와 잘 통합되는 것도 중요합니다. 즉, 버튼이 사이트의 색상 팔레트, 스타일 및 전체 디자인 지침에 맞습니다.

행동을 유도하기 위해 버튼이 눈에 띄기를 원하지만 목표는 긍정적인 방식으로 눈에 띄도록 하는 것입니다. 이는 전체적인 디자인과 조화를 이루며 훼손되지 않는 것을 의미합니다.

동시에 약간의 실험을 두려워하지 마십시오. 때로는 대조적인 색상의 버튼이 단조로운 디자인을 돋보이게 하는 데 필요한 것입니다.

버튼을 버튼처럼 보이게 만들기

클릭되는 버튼을 디자인하는 첫 번째 단계는 실제로 버튼처럼 보이도록 만드는 것입니다. 클릭 유도문안 및 공유 옵션은 사용자가 이를 활용해야 한다는 점을 이해하지 못한다면 아무 소용이 없습니다.

사용자는 버튼 디자인과 관련하여 특정 기대치를 가지고 있습니다. 그것들을 전혀 이행하지 않으면 원하는 행동을 하는 데 어려움을 겪을 것입니다. 따라서 이해를 돕는 시각적 단서를 포함하는 것이 중요합니다.

첫 번째 단서는 모양입니다. 버튼의 가장 일반적인 모양은 모서리가 둥근 직사각형 또는 직사각형입니다. 컴퓨터 사용자는 오랫동안 이 디자인에 노출되어 왔으며 매우 익숙합니다.

출처: Wikipedia Microsoft의 허가를 받아 사용

물론 정사각형, 원, 삼각형 또는 사용자 정의 모양을 포함한 다른 모양도 가능합니다. 사실, 드리블과 같이 기발하고 특이한 버튼의 예가 많이 있습니다.

사이트 디자인을 일관성 있게 유지하려면 덜 전통적인 모양을 사용하는 것이 좋습니다. 그러나 Apple의 iOS가 둥근 사각형으로 입증되었듯이 이것이 작동하지 않는다는 의미는 아닙니다.

Ienjoyeverytime/Shutterstock.com의 이미지.

무엇을 선택하든 일관성을 유지하십시오. 다른 버튼에 다른 디자인을 사용하지 마십시오. 이는 훨씬 더 나은 UI를 만들 뿐만 아니라 사용자가 전체 사이트에서 버튼을 식별할 수 있도록 합니다.

또 다른 중요한 디자인 큐는 그림자와 하이라이트입니다. 그림자는 요소를 클릭할 수 있거나 탭할 수 있음을 보여주는 보편적인 신호가 되었습니다. 그렇지 않은 경우에도 평면 디자인은 기능에 대한 신호로 사용합니다.

출처: Material.io

명확한 레이블 제공

기본 디자인 외에도 명확한 레이블은 버튼 사용에 중요합니다. 레이블이 없으면 사용자가 자신이 하는 일을 결정할 방법이 없습니다.

레이블은 반드시 작성해야 하는 것은 아니며 아이콘도 작동합니다(소셜 공유 버튼 참조). 특히 전자 상거래와 관련된 버튼에서 두 가지를 함께 사용하는 것은 또 다른 가능성입니다.

이미지 제공: Prixel Creative/Shutterstock.com.

중요한 것은 사용자가 버튼을 클릭하는 행동이 어떤 영향을 미칠지 이해할 수 있다는 것입니다. 그렇지 않은 경우 처음부터 그렇게 하는 것을 피할 수 있습니다.

다음은 명확한 레이블에 대한 몇 가지 지침입니다.

• 구체적이고 구체적이어야 합니다.
• 동작 동사 사용, 예: 가입하기 , 양식 제출 , 계정 만들기
• 사용자에게 직접 주소 지정
• Now 또는 Today 와 같은 단어로 긴박감을 조성하십시오.
• 간단하고 명확하게 유지

라벨은 CTA와 관련하여 특히 중요합니다. 몇 단어만 변경해도 버튼 성능에 큰 영향을 미칠 수 있습니다. 예를 들어 Unbounce는 버튼 문구를 "무료 30일 평가판 시작"에서 "내 무료 30일 평가판 시작"으로 변경하기만 하면 클릭률이 90% 증가했습니다.

네, 한 마디의 힘이 될 수 있습니다.

사용자가 찾을 수 있는 위치에 버튼 배치

이것은 정말 당연합니다. 사용자가 버튼을 찾을 수 없으면 클릭하기가 어렵습니다. 이러한 이유로 효율성의 또 다른 요소는 위치입니다.

몇 가지 규칙이 있습니다. 예를 들어, 기본 CTA는 일반적으로 스크롤 없이 볼 수 있는 부분에 표시될 수 있습니다. 이것은 의미가 있으며 현재 사용자가 예상하고 있습니다.

출처: 넷플릭스

사용자가 특정 위치를 기대하도록 훈련된 다른 유형의 버튼도 마찬가지입니다. 예를 들어, 이전 및 다음 버튼은 일반적으로 서로 왼쪽과 오른쪽으로 정렬됩니다.

이것이 대중의 의식 속에 깊이 뿌리박혀 있기 때문에, 순서를 바꾸면 방문객이 좌절하고 퇴장할 수 있습니다. 그리고 그것이 당신이 원하는 마지막 것입니다.

그러나 소셜 공유 버튼과 같이 위치가 더 유연한 버튼의 경우에도 버튼을 어디에 둘지 생각하는 것이 가장 중요합니다. 예를 들어 기사 끝에 소셜 버튼을 배치하는 것이 좋다고 생각할 수 있습니다. 이렇게 하면 사용자가 게시물을 완료한 후 공유할 수 있습니다. 그렇죠?

그러나 대부분의 독자는 게시물을 끝까지 읽지 않습니다. 결과적으로 읽기 경험의 어느 지점에서나 액세스할 수 있는 위치에 버튼을 배치하는 것이 좋습니다. 그러한 예 중 하나는 모나크 플로팅 사이드바입니다.

확실하지 않은 경우 버튼 배치에 대한 좋은 경험 법칙은 사용자가 다음에 볼 위치를 자문하는 것입니다. 디자인은 사용자의 길을 안내해야 하므로 버튼은 사이트 전체의 경로에 대한 논리적 결론이 될 수 있습니다.

크기와 간격에 주의

이제 모바일 디자인에서 특히 중요한 주제에 도달했습니다. 터치를 통해 사이트와 상호 작용하는 사람들은 마우스를 사용하는 사람들보다 행동이 덜 정확합니다. 그렇기 때문에 문제나 잘못된 버튼을 누를 위험 없이 버튼을 사용하고 도달할 수 있도록 해야 합니다.

출처: 애플

첫 번째 단계는 버튼이 충분히 큰지 확인하는 것입니다. 인간의 평균 손가락 끝은 8-10mm입니다. 결과적으로 Apple은 터치로 사용할 요소를 최소 44픽셀 x 44픽셀로 만들 것을 제안합니다(레티나 디스플레이의 경우 픽셀 대신 포인트 사용). 다른 제조업체의 권장 사항도 10mm 표시를 중심으로 합니다. 물론 데스크탑 사용을 목적으로 하는 웹 디자인의 경우 크기가 약간 줄어들 수 있습니다.

동시에 버튼 사이의 간격을 고려해야 합니다. 의도하지 않은 것을 실수로 밀어서 사용자를 좌절시키고 싶지 않습니다. 또한 충분한 공간은 요소를 더 쉽게 식별할 수 있도록 하며 이는 기본 클릭 유도문안에서 중요합니다.

피드백을 제공하다

버튼이나 사이트를 식별할 수 있고 사용할 수 있게 되면 실제로 실행에 옮겨지는 순간에 대해 생각할 때입니다. 버튼은 다음과 같은 여러 상태를 가질 수 있습니다.

• Normal — 버튼으로 식별 가능, 클릭 가능 신호
• Focused — 마우스를 가져가면 변경, 사용자가 작업 가능 여부 확인
• 누름 — 조치를 취한 사용자에게 보상을 제공하고 무언가가 일어나고 있음을 확인하는 추가 변경 사항
• Busy — 백그라운드에서 작업이 진행 중일 때 버튼이 이를 반영할 수 있습니다.
• 비활성화됨 — 현재는 아니지만 다른 작업이 가능함을 나타냅니다.

출처: Material.io

사용자에게 버튼 사용에 대한 시각적 피드백을 제공함으로써 상호 작용을 보다 명확하고 즐겁게 만들 수 있습니다. 다른 유사한 아이디어에 대해서는 마이크로 인터랙션에 대한 기사를 확인하십시오.

대비를 잘 활용하십시오

모든 버튼이 동일하게 생성되는 것은 아닙니다. 방문 페이지에 클릭할 링크가 여러 개 있을 수 있지만 실제로 중요한 것은 하나만 있어야 합니다.

방문자에게 색상, 대비 및 위치를 명확하게 하는 도구입니다. 효과적으로 사용하여 주의를 끌고 사용자가 클릭하도록 합니다.

나머지 인터페이스의 버튼을 대조하여 더 눈에 띄게 만듭니다. 그 외에도 다른 요소들 사이에서 길을 잃는 것을 방지합니다.

색상에 관해서는 최고의 옵션이 없습니다. 다시 말하지만 여기에서 많은 부분이 자신의 디자인에 달려 있습니다. 경험의 좋은 규칙은 대비되는 색상으로 이동하여 거기에서 가져오는 것입니다. 해당 주제에 대한 자세한 내용은 색상 일치 기술에 대한 기사를 확인하십시오.

색상 외에도 크기, 타이포그래피 및 공백을 비롯한 다양한 방법을 사용하여 대비를 도입할 수 있습니다. 버튼 색상과 텍스트의 대비는 효과를 더욱 향상시키고 사본을 더 읽기 쉽게 만들 수 있습니다. 눈에 띄는 위치와 결합하면 버튼이 정말 튀어 나옵니다.

출처: 프레지

귀하의 클릭 유도문안이 눈에 띄는지 알아보려면 오래된 "squint test"를 사용하십시오. 디자인을 적용하고 화면에서 몇 걸음 떨어져서 눈을 가늘게 뜨고 버튼이 눈에 띄는지 확인하십시오. 나는 그것이 매우 전문적으로 들리지 않는다는 것을 알고 있지만 작동합니다!

#CTA를 가늘게 테스트하고 있습니까? 클릭 유도문안이 눈에 띄는지 알 수 있는 가장 좋은 방법입니다. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTERD2

— 디자인 피클 (@designpickle) 2015년 7월 25일

대조되는 버튼은 또한 그들 사이의 순서를 설정하는 데 중요합니다. 두 가지 이상의 선택지가 주어졌을 때 더 강한 색상은 당신이 선호하는 것을 의미하거나 방문자에게 선택하도록 조언할 수 있습니다.

출처: 퀵스프라우트

합산

버튼은 웹 디자인의 핵심이지만 종종 무시되는 요소입니다. 당연히 그렇습니다. 특히 클릭 유도문안의 형태로 전환, 클릭률 및 기타 중요한 성공 지표에 막대한 영향을 미칠 수 있습니다.

그렇기 때문에 버튼 디자인과 배치에 대한 주제를 가볍게 여겨서는 안 됩니다. 요약하자면 효과적인 버튼을 만들기 위해:

• 전체 디자인에 맞는지 확인
• 사용자가 버튼으로 식별할 수 있도록 합니다.
• 명확한 라벨 제공
• 사용자가 찾을 수 있는 위치에 배치
• 크기와 간격에 주의
• 사용 시 피드백 제공
• 사이트의 나머지 부분에서 눈에 띄게 만듭니다.

이 가이드라인은 사용자가 클릭하지 않을 수 없는 버튼을 설정하는 데 도움이 됩니다. 그러나 처음에 언급했듯이 이러한 모범 사례는 시작점으로 간주됩니다. 귀하의 사이트에 어떤 버튼이 작동하고 전환을 개선하는 방법을 실제로 파악하려면 버튼 디자인은 항상 철저한 A/B 테스트와 함께 진행되어야 합니다. 다행히도 그 주제에 대한 기사도 있습니다.

버튼 디자인에 대한 경험은 무엇입니까? 위에 추가해야 할 중요한 사항이 있습니까? 아래 의견 섹션에 알려주십시오!

BerryCat/Shutterstock.com의 기사 썸네일 이미지