완벽한 링크 및 CTA를 설계하는 방법

게시 됨: 2021-07-19

웹사이트 통계를 보고 "사람들이 내가 원하는 곳으로 가지 않는 이유는 무엇입니까?"라고 생각한 적이 있습니까?

그들은 왜 당신의 제품 페이지를 방문하지 않습니까? 왜 그들은 구매를 하지 않습니까?

이 게시물에서는 방문자가 웹사이트를 통해 진행하는 방식을 제어하는 ​​데 도움이 될 수 있는 몇 가지 전문적인 팁을 공유합니다.

문제 식별

먼저 문제가 무엇인지 식별해야 합니다. Google Analytics와 같은 유용한 도구는 귀하의 사이트에 대한 많은 통계 정보를 제공할 수 있지만 Crazy Egg, Heatmap.com 및 Inspectlet과 같은 더 많은 시각적 도구는 귀하의 사이트 거짓말.

히트맵과 같은 시각적 참조 프레임이 있으면 청중의 관심을 끄는 것이 무엇인지 즉시 보여줄 수 있습니다. 페이지 방문자가 얼마나 아래로 보고 있는지 알려줄 수 있는 스크롤맵과 결합할 때 특히 유용합니다! 때로는 문제를 빠르고 쉽게 수정할 수 있지만 때로는 명확하지 않습니다. 이 팁이 사이트를 개선하고 더 많은 목표를 달성하는 데 도움이 되기를 바랍니다.

솔루션

명쾌함

얼토당토않게 들리지만 클라이언트가 링크로 구성되는 항목과 그렇지 않은 항목을 한 눈에 파악하지 못하는 것처럼 문제가 간단할 수 있습니다. 이것은 자신과 다른 사람들에게 명백해 보일 수 있지만 모든 사람이 다르게 작동하고 웹 사이트를 보는 방식이 다를 수 있음을 기억해야 합니다.

예를 들어 사이트의 홍보 이미지로 인해 방문자가 클릭해야 하는 위치를 결정하기 어려울 수 있습니다. 이것은 downloads.cnet 및 filehippo.com과 같은 웹사이트에서 매우 일반적인 문제입니다.

Filehippo 웹사이트 클릭 유도문안, 링크 디자인
올바른 다운로드 링크를 즉시 찾았습니까? 힌트, 오른쪽 상단의 검색 창 아래에 있는 녹색 버튼입니다. 혼란스럽죠?

download.cnet 클릭 유도문안, 링크 디자인

Download.cnet.com은 이것에 대해 filehippo만큼 나쁩니다. 다운로드 링크 또는 페이지 상단에 있는 크고 밝은 주황색 및 파란색 배너를 먼저 보셨습니까? 이 경우 회사의 웹사이트로 연결되지만 다른 웹사이트는 어디로든 연결될 수 있습니다.

그들은 어떻게 이것을 고칠 수 있었습니까? 단순히 더 명확하게 하면 이 문제가 즉시 해결됩니다. 사람들을 오도하려는 광고에서 링크를 분리해야 합니다. 한 가지 방법은 제목 및 후속 다운로드 링크 주위에 크고 노골적인 테두리를 추가하거나 제목과 다운로드 링크를 더욱 강조하기 위해 전체 배경색과 간격을 추가하는 것일 수 있습니다. 다운로드 링크를 가리키는 화살표와 같이 간단한 것조차도 놀라운 일이 될 것입니다! 링크를 나머지 부분과 빠르게 구별하여 "누락된 클릭"을 줄이기 위한 모든 것입니다.

스타일

또 다른 문제는 링크와 CTA의 스타일입니다. 이제 스타일링에 옳고 그름은 없습니다. 그것은 모두 귀하의 디자인 및 웹 사이트와 가장 잘 어울리는 것과 가장 멋지게 보이는 것, 청중에게 가장 잘 맞는 것에 달려 있습니다.

그렇긴 하지만, 당신은 지난 몇 년 동안 "공백"이라는 광대한 바다에서 크고 밝은 버튼이 크게 급증했음을 알아차렸을 것입니다. 이러한 경향에는 아주 좋은 이유가 있습니다. 연구 및 통계에 따르면 방문자는 다른 변형보다 이러한 종류의 링크에 더 많이 참여할 가능성이 높습니다.

클릭 유도문안을 디자인하는 방법 PayPal
Paypal은 이에 대한 좋은 예를 보여줍니다. 콘텐츠가 거의 없고 명확하고 명확한 클릭 유도문안이 있습니다.

근데 이게 왜? 사용자로서 탐색할 경로와 링크가 많은 웹 사이트보다 상호 작용할 요소가 거의 없는 사이트에 끌리는 이유는 무엇입니까?

간단합니다. 이렇게 하면 어수선한 것을 제거할 수 있을 뿐만 아니라 스타일을 지정하면 클릭할 수 있는 항목과 클릭할 수 없는 항목이 매우 명확하고 명확해집니다. CTA와 가입/로그인 버튼은 우리의 관심을 끌고 클릭하도록 초대합니다.

그러나 이것이 우리의 모든 링크가 크고 밝은 버튼이어야 한다는 것을 의미합니까?

전혀. 우리는 "행동 촉구", 즉 우리가 방문자가 참여하기를 원하는 링크를 강조하고 싶습니다. 판촉 판매 페이지 또는 최신 뉴스와 같이 그들과 우리에게 어떤 식으로든 이익이 될 것이라고 생각하는 것 이야기.

PayPal의 예로 돌아가서, 더 표준적인 링크나 덜 중요한 링크에 대해 일반 텍스트 링크를 사용해도 괜찮습니다. 과거에는 항상 밑줄이 그어진 텍스트로 표시되었으며 디자인에 맞는 한 오늘날에도 여전히 사용할 수 있습니다. 일부 사람들은 밑줄이 그어진 링크가 현대적인 디자인에서 거의 자리를 차지하지 않는다고 생각합니다.

예를 들어 PayPal의 "자세히 알아보기" 링크 아래에 있는 "PayPal 고객이 아니십니까? 시작하다. ” 마지막 두 단어를 단순히 대담하게 표현함으로써 방문자의 관심을 끌고 상호 작용하도록 미묘하게 권장합니다. "이 텍스트는 다릅니다."라고 그들은 생각합니다. “뭔가 있어? 왜 그 부분은 굵게 표시되고 나머지 부분은 그렇지 않습니까?” 이렇게 하면 사용자가 마우스를 가져가서 링크임을 알 수 있습니다!

단순한 차이지만 사용자의 관심을 1초도 놓치지 않으려고 싸워야 하는 세상에서는 클릭으로 이어질 수 있는 차이이며 구현하기가 매우 쉽습니다. 귀하의 웹사이트와 고객에게 가장 적합한 것이 무엇인지 확인하십시오.

화면상의 위치

사용자는 링크를 찾기 위해 사이트를 검색할 시간이 거의 없으며 시간을 더 많이 낭비하면 더 많은 사람들이 사이트를 떠나게 됩니다. 그렇다면 이것을 어떻게 피할 수 있습니까? 다시 한 번 사용자가 링크를 가능한 한 쉽게 식별할 수 있도록 간단하게 만듭니다.

여기에서 스크롤맵이 큰 도움이 될 수 있습니다. 내 경험에 따르면 페이지를 방문하는 거의 모든 방문자는 페이지 맨 위를 볼 수 있지만 20% 미만의 사람들이 맨 아래까지 스크롤합니다. 페이지가 길면 더 낮습니다. 그러나 80% 이상이 페이지의 처음 50%를 보게 됩니다.

화면 크기는 화면 해상도 및 장치 크기와 함께 큰 역할을 합니다. 그러나 이것은 디스플레이 하단 아래에 있는 모든 것이 방문자에게 보이지 않을 가능성이 있음을 의미합니다. 따라서 이상적으로는 소중한 CTA가 페이지의 높은 위치에 있도록 하고 싶습니다. 문제가 해결되었습니까?

이것은 경험의 법칙에 대해 고려하는 것이 좋으며 단일 제품 및 판촉에 특히 효과적입니다. 그러나 예를 들어 제품의 검색 결과를 비교할 때는 어떻습니까? 방문자의 관심을 끌기 위해 싸우는 많은 물건이 있을 것입니다.

여기에서 디자인에서 선명도, 스타일 및 위치의 세 가지를 함께 결합해야 합니다. 기억해야 할 핵심은 화면에 너무 많은 정보가 있으면 사용자가 빨리 흥미를 잃는다는 것입니다. 표시할 제품이 많은 경우 제공할 수 있는 최소한의 정보(이상적으로는 제목, 가격 및 "추가 정보/지금 구매" CTA)를 제공하는 것이 좋습니다.

무엇을 추가할지 결정하는 것은 사용자의 몫입니다. 그러나 디자인의 좋은 예는 Tesco와 같은 대형 슈퍼마켓 사이트를 참조하십시오.

Tesco Bread, 여러 CTA를 디자인하는 방법, 전자 상거래

"빵"을 간단히 검색하면 수백 가지의 다양한 제품이 생성되지만 Tesco는 모든 제품에 숨을 쉴 수 있는 충분한 공간을 허용하고 쇼핑 프로세스를 "수량?"으로 단순화했습니다. 및 "추가".

또한 버튼이 모든 규칙을 따른다는 것을 알 수 있습니다. 명확하고, 간격이 적절하고 스타일이 지정되어 있으며, 그리드, 제품 및 제품 설명 아래에 논리적으로 나타납니다.

다른 예를 검색하여 여러 CTA를 제시할 때 대형 전자상거래 사이트가 무엇을 하는지 알아보세요. 발견한 내용에 놀랄 수 있습니다!

요약

이 블로그가 웹사이트의 성공을 높이는 데 실제로 도움이 될 수 있는 간단한 트릭에 대한 통찰력을 제공했기를 바랍니다. 요약하면 링크와 CTA를 만들 때 기억해야 할 사항은 다음과 같습니다.

  • 선명도 . 특히 혼동을 일으킬 수 있는 다른 링크와 버튼이 있는 경우 CTA가 페이지의 다른 항목과 눈에 띄게 하세요. 진짜와 가짜를 즉시 구별할 수 있어야 합니다.
  • 스타일. 사람들은 크고 밝은 버튼에 매력을 느끼고 우리는 관심을 끄는 큰 텍스트 필드에 끌립니다. 사용자가 링크나 버튼을 식별하는 데 드는 노력이 적을수록 클릭할 가능성이 높아집니다. 이것은 작고 덜 중요한 링크에 적용됩니다. 텍스트나 이미지에서 링크를 잃지 않으려면 링크와 CTA를 디자인하는 방법에 대한 엄격한 지침을 설정하십시오. 굵은 글꼴, 다양한 색상 또는 다른 것을 사용하여 클릭할 수 있는 항목과 클릭할 수 없는 항목을 강조 표시하고 구별합니다. 일관되게 사용되는지 확인하십시오. 마찬가지로, 정말 합당한 이유가 없는 한 이미지에 이러한 요소가 포함되지 않도록 하십시오.
  • 위치, 위치, 위치 . 링크와 CTA를 어디에 두느냐가 중요합니다. 귀하의 매우 가치 있고 중요한 "지금 구매" 링크가 스크롤 없이 볼 수 있는 부분에 표시되지 않으면 50% 미만의 사용자가 여기까지 스크롤할 것이기 때문에 클라이언트가 이 링크를 클릭할 가능성은 50% 미만입니다.

이 조언이 도움이 되기를 바랍니다! 항상 주변을 검색하고 다른 사람들이 이 문제를 해결하기 위해 무엇을 하고 있는지 확인하고 그들의 사이트를 귀하의 사이트와 비교하여 귀하의 사이트가 어디에서 어떻게 더 개선될 수 있는지 확인하는 것을 잊지 마십시오.