앵커 태그가 랜딩 페이지 사용자 경험을 개선하는 방법

게시 됨: 2017-05-31

닻을 물에 떨어뜨리면 어떻게 될까요?

닻은 배를 제자리에 고정시켜 줍니다. 맞죠? 앵커 포인트에서 어떤 방향으로든 특정 거리를 자유롭게 이동할 수 있지만 어느 방향으로 가든지 특정 반경으로 제한됩니다.

이는 웹 페이지에서 앵커 태그가 작동하는 방식과 유사합니다. 방문자가 페이지의 다양한 위치로 이동할 수 있지만 페이지에는 계속 유지됩니다 .

마케터는 이 웹 디자인 기법을 좋아합니다. 특히 클릭 후 방문 페이지가 액션을 유도하는 것이 목표인 특정 관심 지점을 강조할 수 있기 때문입니다. 이를 위해서는 최적화된 요소로 설득력 있는 클릭 후 방문 페이지를 디자인해야 합니다. 우리의 새로운 전자책인 설득력 있는 클릭 후 방문 페이지 구축을 위한 궁극적인 가이드는 이에 대해 자세히 설명합니다.

앵커 태그 전자책 가이드

그러나 오늘의 게시물에서는 마케터가 앵커 태그를 사용하여 특정 페이지 요소에 관심을 끌고 궁극적으로 페이지에서 전환하는 방법을 보여줍니다.

앵커 태그를 사용하여 특정 요소에 주의를 집중하되 변환할 페이지에 그대로 두십시오.

트윗하려면 클릭

앵커 태그란 무엇입니까?

앵커 태그 또는 앵커 링크는 동일한 페이지의 다른 위치로 연결되는 웹 페이지 요소입니다. 일반적으로 방문자가 스크롤을 많이 하지 않고도 페이지의 특정 부분으로 이동할 수 있도록 길거나 텍스트가 많은 페이지에 사용됩니다.

앵커 링크를 클릭하면 많은 노력 없이 방문자가 원하는 곳으로 이동하므로 전반적인 사용자 경험이 향상되어 전환 프로세스에 도움이 됩니다. 방문자가 페이지를 빠르고 쉽게 탐색할 수 있을 뿐만 아니라 시각적 신호 역할을 하여 전환 목표에 필수적인 요소로 사람들을 안내할 수 있습니다.

정적 또는 애니메이션이 될 수 있다는 점은 언급할 가치가 있습니다. 애니메이션이 적용되면 앵커 태그가 페이지에서 움직이는 유일한 요소일 가능성이 높기 때문에 더 많은 관심을 끌 수 있습니다. 그리고 애니메이션과 여백을 결합하면 원하는 곳에서 사람들의 관심을 끄는 강력한 조합을 얻을 수 있습니다.

아래의 앵커 태그 예에서 이 디자인 기법이 다양한 방식으로 사용될 수 있음을 알 수 있습니다.

클릭 후 방문 페이지에서 앵커 태그가 강조할 수 있는 것은 무엇입니까?

중요한 사본

제품이나 서비스의 장점이 카피를 통해 전달되기 때문에 특정 카피에 대한 앵커 링크를 사용하는 것이 이상적입니다. Constant Contact는 페이지 중간에 클릭 후 방문 페이지에서 이 작업을 수행합니다. 방문자가 아래쪽 화살표를 클릭하면 페이지가 스크롤됩니다.

SocialMediaCompanies.com은 방문자를 스크롤 없이 볼 수 있는 곳으로 안내하는 앵커 링크가 있는 또 다른 브랜드입니다. 이 예에서는 방문자가 회사가 평가하고 검토하는 주요 영역을 알 수 있기를 바랍니다.

각 예는 앵커 태그 대상으로 제안에 대한 이점 또는 중요한 세부 정보를 강조 표시함으로써 방문자가 사본을 읽을 가능성이 더 높다는 것을 보여줍니다.

고객 성공 사례

고객 성공 사례와 평가를 제공하는 것은 방문자에게 강력한 사회적 증거를 제공할 수 있는 좋은 방법입니다. 그들은 귀하의 제품이나 서비스에 대한 신뢰와 확신을 구축하고 전환으로 안내하는 데 도움이 됩니다.

고객의 성공 사례가 간과되지 않도록 Dynamic Yield는 튀는 앵커 태그 화살표를 제공하여 방문자의 관심을 끌고 올바른 방향으로 안내합니다. 잠재 고객이 화살표를 클릭하면 브랜드 로고를 건너뛰고 성공 사례 동영상으로 바로 이동합니다.

이런 종류의 고객 리뷰는 종종 페이지의 다른 어떤 것보다 더 효과적으로 제품을 판매할 수 있기 때문에 잠재 고객이 리뷰를 건너뛸 위험이 있는 이유는 무엇입니까?

사용 사례

Boardvantage는 이전 예제와 약간 다른 작업을 수행합니다. 여기에서 화살표 앵커 태그 옆에 있는 "사용 사례 탐색"이라는 대상을 식별합니다. 눈에 띄도록 충분한 여백으로 둘러싸여 있는지 확인하십시오. 클릭하면 방문자는 스크롤 없이 볼 수 있는 섹션으로 이동하여 회사에서 최소한의 사본, 짧은 비디오 및 스크린샷으로 MeetX의 주요 기능과 이점을 강조 표시합니다.

이 특정 섹션에는 주요 제품 판매 포인트가 포함되어 있으므로 방문자가 그것을 보았는지 확인하고 싶었습니다. Boardvantage의 스마트한 움직임.

제품 추가 기능

이 Lyft 클릭 후 방문 페이지에서 메뉴 탐색 링크는 모두 앵커 태그로 방문자를 페이지의 다양한 위치로 안내합니다. "Get Yours" 링크를 클릭하면 페이지가 중간 근처로 스크롤되어 자신의 Amp를 얻는 방법에 대해 자세히 알아볼 수 있습니다.

사용자가 FAQ 탐색 링크를 클릭했다면 페이지 하단 근처에 있는 "알아야 할 모든 것" 섹션으로 이동하게 됩니다. 이 기사에서 언급한 다른 요소와 비교할 때 FAQ 섹션은 클릭 후 방문 페이지에서 흔하지 않습니다. 그러나 특히 회사가 자신의 브랜드에 특정한 것을 판매하려는 경우에는 여전히 중요한 목적을 수행합니다.

리드 캡처 양식

이 Salesgenie 클릭 후 방문 페이지는 방문자가 페이지에 더 많이 참여하도록 하는 것을 목표로 하는 앵커 태그로 채워져 있습니다. 각각의 아래쪽 화살표는 사람들을 페이지 아래로 보내는 반면 주황색 CTA 버튼은 사람들을 다시 위로 이동시켜 양식을 완성하도록 합니다.

CTA 버튼을 다시 확인하십시오. 밝은 주황색은 시선을 사로잡으며 매력적인 카피("무료")를 사용하므로 더 많은 클릭이 발생할 수 있습니다. 방문자가 이 버튼(또는 협력 CTA 버튼 중 하나)을 클릭하면 페이지 상단으로 다시 이동하여 Salesgenie 무료 평가판을 시작합니다.

또한 AppFolio는 CTA 버튼을 사용하여 잠재 고객을 리드 캡처 양식으로 리디렉션합니다. 방문자가 전체 페이지를 스크롤하면 주황색 CTA 버튼이 표시됩니다. 버튼은 페이지 상단의 양식으로 리디렉션되는 앵커 링크입니다.

세 번째 CTA 버튼 예에서 BambooHR은 대비되는 색상으로 CTA 버튼을 강조 표시하고 복사본은 데모가 무료임을 지정하며 양쪽에 이를 가리키는 화살표 방향 신호도 있습니다.

리드 캡처 양식은 클릭 후 방문 페이지에서 가장 중요한 요소 중 하나입니다. 그렇지 않으면 잠재 고객의 정보를 얻을 수 없기 때문입니다. 쉽게 액세스할 수 있는 양식이 없으면 잠재 고객이 변환하는 데 더 많은 시간이 소요되므로 앵커 태그는 양식을 향해 살짝 밀어 변환하는 훌륭한 디자인 기술입니다.

CTA 버튼

CTA 버튼을 최적화하는 방법은 여러 가지가 있지만 방문자를 해당 버튼으로 바로 연결하는 앵커 링크를 만들 수도 있습니다. 아래의 QuickBase 예에서 회사는 세 개의 링크가 모두 앵커 태그인 클릭 후 방문 페이지 탐색(이미지 하단의 세 섹션)을 만들었습니다. 잠재 고객이 "성공 사례" 및 "QuickBase란 무엇입니까?"를 클릭하면 페이지 아래에 있는 두 개의 다른 섹션으로 리디렉션되며 두 섹션에는 CTA 버튼이 있습니다.

분명히 CTA가 중요합니다. 말 그대로 사람들이 개종하는 방식입니다. 눈에 띄게 만들고, 카피로 설득력 있게 만들고, 바로 연결되는 앵커 태그를 만들어 가능한 한 액세스할 수 있게 만드세요.

앵커 태그는 어떻게 사용합니까?

위의 예는 포괄적인 목록은 아니지만 앵커 태그가 전환을 지원하고 다양한 클릭 후 방문 페이지 요소를 강조 표시하는 방법에 대한 좋은 아이디어를 제공합니다. 특정 클릭 후 방문 페이지 요소를 연결하든 전체 링크 메뉴를 설정하든 상관없이 클릭 후 방문 페이지의 앵커 태그는 잘못될 수 없습니다. 즐거운 사용자 경험을 제공하여 전환 가능성을 높입니다.

클릭 후 방문 페이지에 맞춤 코드를 추가하여 지금 앵커 태그 사용을 시작하십시오. 지금 Instapage Enterprise 데모에 등록하십시오.