행동 촉구버튼 지침, 모범 사례 및 예
웹 사이트의 클릭 유도 문안 버튼은 종종 무시됩니다.. 설계자는 때로는 매력적이면서도 전반적인 디자인에 잘 어울리는 것을 뛰어 넘는 액션 버튼을 만드는 것을 정확히 이해하지 못합니다. 그러나 클릭 유도 문안 버튼은 무엇이 효과적인지에 대한 이해 없이는 설계하기에는 너무 중요합니다. 결국 클릭 유도 문안 버튼의 핵심은 방문자를 해야 할 것 어떤 것.
색상, 크기, 언어 및 기타 요소가 클릭 유도 문안 버튼의 전환율에 미치는 영향에 대한 기본적인 이해를 얻는 것이 중요합니다. 여기에있는 개념은 복잡하지 않지만 주어진 디자인 내에서 가능한 가장 효과적인 작업 버튼 호출을 만들기 위해 약간의 사전 고려 및 계획을 취합니다. 각 요점에 대한 자세한 정보는 다음을 참조하십시오..
"행동 촉구"버튼의 목적
클릭 유도 문안 버튼은 다양한 기능을 제공 할 수 있습니다. 아무튼, “행동을 요구하다” 정말 조금 막연합니다. 그것이 의미하는 바는 방문자의 사이트 방문자를 얻는 것이 주된 목적이라는 것입니다. 뭔가해라.. 무언가가 장바구니에 제품을 추가하거나, 무언가를 다운로드하거나, 정보를 요청하거나, 다른 것에 대해.
클릭 유도 문안 버튼은 다양한 용도로 사용되기 때문에 버튼이 목표로하는 것을 고려해야합니다. 사이트 유형, 타겟 시장 및 원하는 액션은 모두 클릭 유도 문안 버튼을 가장 효과적으로 디자인하는 방법에서 중요한 역할을 할 수 있습니다.
"클릭 유도 문안"버튼의 유형
클릭 유도 문안 버튼에는 몇 가지 유형이 있습니다. 각 유형은 방문자가 특정 행동을 수행하는 것을 목표로하지만 그 행동은 상당히 다를 수 있습니다. 다음은 가장 일반적인 유형의 클릭 유도 문안 버튼입니다..
1. 장바구니에 추가 버튼
전자 상거래 사이트는 일반적으로 많은 클릭 유도 문안 버튼을 사용하지만 가장 널리 사용되는 것은 “장바구니에 담기” 단추. 이 단추는 일반적으로 개별 제품 페이지에 나타납니다. 그들의 목적은 고객이 물품을 구입하도록 유도하는 것입니다. 장바구니 버튼에 추가 된 일반적인 디자인 요소에는 간단한 문구 (예 : “장바구니에 담기” 또는 “가방에 추가하다” 또는 “지금 구입“) 및 아이콘 (일반적으로 가방이나 카트).
2. 다운로드 버튼
다운로드 버튼은 방문자가 항목을 소유하도록 유도한다는 점에서 장바구니에 추가 버튼과 유사합니다. 다운로드 버튼의 경우 많은 디자이너가 다른 유형의 버튼 (예 : 버전 정보 또는 다운로드 크기)보다 많은 정보를 포함하기로 선택합니다..
3. 평가판 버튼
일부 사이트는 일반적으로 무료 평가판 형태로 방문자에게 제품을 사용해 볼 것을 유도합니다. 이것은 특정 사이트에 따라 무료 다운로드 또는 무료 계정이 될 수 있습니다. 일부 사이트에서는 “덜 - 더 - 더 -” 철학을 유지하고 버튼에있는 언어를 최소한으로 유지하면서 다른 사람들이 재판 내용에 대한 정보를 더 많이 제공하는 것을 좋아합니다..
4. 자세히 알아보기 버튼
자세히 알아보기 버튼은 일반적으로 티저 정보 블록 끝 부분 (종종 홈 페이지)에서 사용됩니다. 이 버튼은 일반적으로 간단하지만 방문자의 관심을 끌기 위해 종종 크기가 커집니다..
5. 가입 버튼
가입 버튼은 두 가지 버전으로 가장 일반적으로 표시됩니다. 첫 번째 유형은 일반적으로 가입 양식과 직접 연관됩니다. 두 번째 유형은 일반적으로 다음과 유사한 방식으로 사용됩니다. “장바구니에 담기” 사용자가 실제로 가입 양식에 도달하기 전에 서비스 또는 계정을 구매하거나 가입하는 방법 인 버튼.
다른 유형의 클릭 유도 문안 버튼이 있지만 가장 많이 사용됩니다. 위에 제시된 지침은 설계중인 다른 유형의 클릭 유도 문안 버튼에도 적용될 수 있습니다..
부정적인 공간을 효과적으로 사용하기
귀하의 클릭 유도 문안 버튼이 주변 콘텐츠에서 눈에 띄게하고 사이트 방문자의주의를 끌기를 원합니다. 이를 위해, 당신은 그 버튼들 주위에 음의 공간을 사용할 필요가 있습니다. 콘텐츠와 클릭 유도 문안 버튼 사이에 공백을 넣으세요. 장바구니 버튼에 추가하는 것과 같이 일부 버튼에서는 중요하지 않지만 (더 일반적이지는 않지만), 더 많은 것을 배우고 더 많은 공간을 사용하여 더 잘 작업 할 수 있습니다..
버튼 주변에있는 음의 공간의 양과 버튼 자체의 크기의 균형을 맞추는 것이 중요합니다. 그것은 비율에 관한 것입니다. 크기가 다른 경우에도 버튼, 주위 공간 및 주변 콘텐츠가 모두 모양처럼 보이기를 원합니다. 당신은 그저 제대로 보이게하기 위해 약간의 것들을 가지고 주위를 둘러 봐야 할 수도 있습니다..
몇 가지 지침 :
- 버튼 주위에 충분한 공간이있어 어수선하지 않도록하십시오.
- 포함 할 공간을 결정할 때 3 분의 1 규칙 또는 황금 비율과 같은 원칙을 고려하십시오.
- 네거티브 공간은 다른 콘텐츠에서 눈에 띄기 위해 클릭 유도 문안 버튼 룸을 제공하고 별개로 설정합니다.
크기 및 색상
클릭 유도 문안 버튼의 크기는 매우 중요합니다. 너무 큰 단추는 주위의 모든 것을 압도합니다. 버튼이 너무 작 으면 페이지의 다른 모든 콘텐츠가 섞여서 길을 잃을 수 있습니다. 당신은 디자인을 압도하지 않고도 눈에 띄기에 충분하도록 버튼을 크게하고 싶습니다..
색상을 사용하면 버튼 크기의 균형을 조정하는 데 도움이됩니다. 큰 버튼의 경우 디자인에서 눈에 잘 띄지 않는 색상을 선택하십시오 (그러나 여전히 배경이 두드러집니다). 작은 버튼의 경우 밝고 대조적 인 색상을 선택하여 실제로 버튼을 터뜨릴 수 있습니다. 두 경우 모두 사용하는 색상이 사이트의 전체 디자인과 충돌하지 않고 버튼을 구분하는지 확인하십시오.
몇 가지 지침 :
- 클릭 유도 문안 버튼은 주어진 페이지에서 가장 큰 버튼이어야 이상적입니다.
- 대조적 인 색상을 사용하여 더 작은 버튼을 더 돋보이게 만드십시오.
- 덜 특화된 색상을 사용하여 특 대형 버튼을 더 잘 맞출 수있게하십시오.
- 작업 버튼을 클릭하면 디자인을 압도하지 않고주의를 기울여야합니다.
언어
클릭 유도 문안 버튼에 사용하는 정확한 단어는 전환에 큰 영향을 줄 수 있습니다. 비교 “지금 구입” 와 “장바구니에 담기“. 하나는 다른 하나보다 훨씬 더 긴급합니다. 아니면 어때? “무료로 사용해보기” 와 “무료 시험판“? 하나는 다른 것보다 훨씬 펀치하고 더 두드러진다..
클릭 유도 문안 버튼에 사용하는 언어는 가능한 간단하고 간단해야합니다. 방문자가 버튼을 클릭 할 때 얻는 정보를 한 눈에 알 수 있기를 원합니다. 고객이 질문을하면 일시 중지되어 전환율이 낮아질 수 있음을 의미합니다..
글꼴 크기도 잊지 마세요. 클릭 유도 문안 버튼의 텍스트는 크고 굵게 표시되어야하며 버튼 자체의 크기와 색상에 적합해야합니다. 충분한 대비가 있어야하고 텍스트를 읽기 쉽도록하십시오..
몇 가지 지침 :
- 단순하고 직접적인 언어 사용
- 본문의 버튼에 크고 굵은 글꼴을 사용하십시오.
- 언어가 명확하게 특정 행동을 요구하는지 확인하십시오.
긴급 성 창출
사이트의 방문자가 가능한 한 생각하지 않고 원하는 작업을 수행하기를 원합니다. 방문자를기만하고 싶지 않을 때, 방문자에게 그들이하는 일을 중단하고 고려할 기회가 많을수록 더 많은 기회가 주어집니다. “아니”.
단추를 사용하여 즉시 행동해야한다는 인상을 주길 원합니다. 당신은 그들이 순간적으로 결정을 내리도록 격려하고 싶습니다. 이 기능은 모든 클릭 유도 문안 버튼 (특히 고액 물품을 구매하는 버튼)에서 작동하지 않지만 저렴한 비용이나 자유로운 행동을 위해서는 방문객이 적은 사전 고려 사항으로 클릭하는 것이 바람직합니다..
몇 가지 지침 :
- 방문자가 즉시 행동하도록 권장하십시오.
- 방문자에게 일시 중지 할 이유를주지 마십시오.
- 긴박감이 중요하지만 어떤 식 으로든 방문자를 오도하지 마십시오.
추가 정보 제공
적절한 경우 클릭 유도 문안 버튼을 사용하여 방문자가 버튼을 클릭하면 얻을 내용에 대한 추가 정보를 제공 할 수 있습니다. 이것은 시험 버전 단추 또는 다운로드 단추에서 가장 일반적으로 볼 수 있습니다. 추가 정보의 일반적인 예에는 무료 평가판 기간 또는 파일 다운로드 크기가 포함됩니다. 버전 정보도 일반적으로 표시됩니다..
추가 정보를 포함 할 때는 실제 클릭 유도 문안에 집중해야합니다. 행동을 유도하는 언어의 텍스트가 가장 눈에 잘 띄고 다른 정보는 눈에 잘 띄지 않도록해야합니다..
몇 가지 지침 :
- 사용자 경험에 추가 할 때만 추가 정보 포함
- 추가 정보는 일부 유형의 클릭 유도 문안 버튼, 특히 다운로드 또는 시험판 버튼에서만 적합합니다
- 주요 클릭 유도 문안이 여전히 버튼에 가장 눈에 띄는 텍스트인지 확인하십시오.
우선 순위 지정
하나 이상의 페이지가있는 경우 페이지의 클릭 유도 문안 버튼의 우선 순위를 정하는 것이 중요합니다. 이 작업은 여러 가지 방법으로 수행 할 수 있지만 가장 일반적인 방법은 색상과 크기를 사용하는 것입니다..
색상을 사용하여 페이지에서 가장 중요한 버튼을 강조 표시하거나 덜 중요한 버튼을 눈에 잘 띄지 않게 만듭니다. 또는 크기를 사용하여 가장 중요한 단추를 눈에 띄게 만들고 (덜 크게하여) 덜 중요하게 강조하는 단추를 강조합니다.
아이콘 및 이미지
클릭 유도 문안 버튼에 시각적 단서를 포함 시키면 전환율을 높일 수 있습니다. 장바구니의 아이콘이 “장바구니에 담기” 버튼 또는 다운로드 버튼의 화살표가 좋은 예입니다. 사용할 고유 한 아이콘을 생각해도 아이콘이 버튼의 용도를 명확히하여 사용자 경험에 추가되고 혼동을주지 않도록하십시오..
몇 가지 지침 :
- 사용하는 아이콘이 도움이되는지 확인하여 혼동하지 말고 버튼의 의미를 분명히하십시오.
- 쉽게 인식 할 수있는 아이콘은 방문자에게 의미를 즉시 나타낼 수 있습니다.
- 그들의 의미가 아직 명확한 한 덜 일반적으로 사용되는 아이콘을 사용하는 것을 두려워하지 마십시오.
예제들
다음은 몇 가지 예입니다. 훌륭한 클릭 유도 문안 버튼의 예. 위의 가이드 라인을 모두 완벽하게 따르지는 않지만 위대한 것으로 간주되는 기준을 충분히 충족합니다..
실시간 스트리밍 - "지금 구매"(유료 옵션)와 "가입"(무료 옵션) 버튼을 구분하는 것이 좋은 전략입니다.
윈도우 7 - 크고 녹색 인 "Get Windows7"버튼은 방문자가 쉽게 발견 할 수 있습니다..
Fileshare HQ - 여기에 밝은 녹색 버튼이 실제로 흰색 배경과 대비됩니다..
항공 일지 - "다운로드"및 "구입"버튼에 다른 색상을 사용하면 색상을 다르게 설정하고 "구입"버튼을 우선적으로 사용합니다..
TasteBook - 이 버튼은 아이콘을 잘 사용하고 대담한 텍스트를 사용하여 눈에 띄게 만듭니다..
굿 배리 - 또 다른 밝은 초록색 클릭 유도 문안 버튼.
Lifetree 크리 에이 티브 - 본문과 동일한 서체를 계속해서 클릭 유도 문안 버튼에 계속해서 결합 감을 생성합니다..
Resumator - 대담한 유형의 밝은 빨간색 통화 버튼이 파란색 배경에 돋보입니다..
메모장 - 클릭 유도 문안 버튼에 추가 정보를 포함하는 좋은 예.
잉크 - 크기가있는 버튼 우선 순위 지정의 좋은 예.
우아한 테마 - 주변 디자인 요소와 충돌하지 않고 눈에 띄는 색상을 사용하는 또 다른 우수 사례.
젠 데스 크 - 색상을 사용하여 버튼을 돋보이게하는 또 다른 훌륭한 예.
Storenvy - 둥근 버튼은 예기치 않은 것이고 특히 흰색 테두리로 둘러싸인 경우에는 두드러집니다..
바라 메일 - 때로는 작업이 덜 긴급 할 때 블렌드되는 버튼이 전체 사이트 디자인에서 더 잘 작동하는 경우가 있습니다..
추가 리소스
- 클릭 유도 문안 버튼 : 사례 및 모범 사례 - Smashing Magazine
- 좋은 클릭 유도 문안 버튼 - UX 부스에서
- 전화 버튼 : 크기가 중요합니까? - 탄력성 확보
- 효과적인 10 가지 기술 “행동을 요구하다” - Boagworld에서
- 효과적인 클릭 유도 문안 작성을위한 5 가지 팁 - SitePoint에서