클릭 후 방문 페이지 디자인 영감을 위한 12가지 기법

게시 됨: 2017-07-14

클릭 후 방문 페이지 디자인은 중요합니다. 이러한 페이지는 제품과 서비스를 홍보하고 판매하는 데 필수적인 디지털 상점이기 때문입니다. 올바르게 최적화되면 페이지는 전환율을 크게 높일 수 있습니다. 비즈니스의 전반적인 성공에 매우 중요하기 때문에 전문적이고 높은 전환율의 클릭 후 방문 페이지를 만드는 것은 마케팅 전략에 필수적입니다.

앱 클릭 후 랜딩 페이지, 제품 클릭 후 랜딩 페이지, 모바일 클릭 후 랜딩 페이지 등에 대한 영감을 찾고 있는지 여부. 다양한 클릭 후 방문 페이지 디자인 영감을 사용할 수 있습니다.

Instapage에는 클릭 후 방문 페이지 예제 전용 전체 블로그 카테고리가 있습니다. 우리는 청중에게 세계 최대 브랜드의 영감을 제공하기 위해 이 주제에 대해 자주 조사하고 글을 씁니다. Microsoft, Lyft, Marketo, Constant Contact, Oracle, Facebook, MailChimp 및 HubSpot이 포함됩니다.

이 기사에서는 페이지를 만들 때 영감을 주기 위해 다양한 디자인 기법을 강조하는 클릭 후 방문 페이지를 소개합니다. 각 예에 대해 페이지가 잘하는 것과 더 나은 결과를 생성하기 위해 A/B 테스트를 할 수 있는 것이 무엇인지 논의할 것입니다.

클릭 후 방문 페이지는 제품과 서비스를 홍보하는 데 필수적인 디지털 매장입니다.

트윗하려면 클릭

클릭 후 방문 페이지 디자인 영감

매력적인 영웅 이미지

인간은 일반적으로 텍스트보다 이미지를 최대 60,000배 빠르게 처리합니다. 페이지에서 이미지를 올바르게 사용하면 방문자가 제안으로 전환할 수 있을 만큼 충분히 오랫동안 페이지에 참여하도록 유도할 수 있습니다. 이제 방문자가 귀하의 제안을 사용할 때 얻을 수 있는 혜택을 말하지 않고 대신 보여주기 시작할 때입니다. 영웅 샷은 잠재 고객이 제안의 이점을 경험하는 것이 어떤 것인지 시각화하는 데 도움이 됩니다.

TaskEasy는 이것을 이해하고 페이지에서 영웅 이미지를 잘 활용합니다. 방문자가 페이지에 도착하자마자 TaskEasy를 고용하면 잔디가 어떻게 생겼는지 엿볼 수 있습니다.

페이지가 잘하는 것.

CTA 버튼 색상 은 Contact Us 버튼을 제외하고 페이지의 다른 곳에서는 사용되지 않기 때문에 두드러집니다.
CTA 버튼 카피 는 1인칭을 사용하여 잠재 고객이 제안에 개인적으로 연결되어 있다고 느끼게 합니다.
방향 신호 (CTA 버튼의 화살표와 페이지 아래를 가리키는 화살표)는 방문자가 다음에 주의를 기울여야 할 위치를 보여줍니다.
Iconography 는 TaskEasy 고용의 기능과 이점에 대한 주의를 환기시키는 데 도움이 됩니다.
신뢰 신호와 사회적 증거 (보안 배지, 수상 인감, Facebook 좋아요 카운터)는 잠재 고객이 편안하고 안전하며 심지어 TaskEasy를 고용하도록 강요할 수 있습니다.
연락처 슬라이드 아웃 양식을 사용하면 방문자가 회사에 쉽게 연락하여 서비스에 대해 문의할 수 있습니다.

A/B 테스트 대상:

TaskEasy 로고 는 하이퍼링크로 연결되어 방문자가 페이지에서 쉽게 나갈 수 있습니다.
페이지 상단에 있는 Property Manager CTA 버튼 은 방문자를 이 페이지에서 멀어지게 합니다. 다른 리드 캡처 페이지가 열리긴 하지만 이 페이지와 완전히 별개인 자체 캠페인이 있어야 합니다.
사본 을 추가하면 잠재 고객이 TaskEasy 작업의 이점을 더 잘 이해하는 데 도움이 됩니다. 현재 페이지에 사본이 없으므로 방문자가 회사 및 제안에 대한 좋은 느낌을 얻기 어려울 수 있습니다.
바닥글 탐색 은 방문자가 전환하지 않고 페이지를 벗어날 수 있는 너무 많은 방법을 제공합니다.
전화번호 는 클릭 투 콜(click-to-call)이 활성화되어 방문자가 TaskEasy에 훨씬 쉽게 연락할 수 있습니다. 특히 회사에서 "전화를 원하십니까? 여기에 있었다!"

중요 항목

사람들은 종종 자신이 찾고 있는 것을 찾기 위해 끝없는 텍스트를 읽고 싶어하지 않습니다. 그들은 특정 정보를 찾기 위해 페이지를 빠르게 스캔하기를 원합니다. 글머리 기호 복사가 이를 가능하게 합니다. 글머리 기호 복사(체크 표시, 화살표, 도해법 등 활용)는 방문자가 페이지를 빠르게 스캔하고 원하는 것을 찾을 수 있기 때문에 효과적입니다.

이 Yodle 예제는 글머리 기호(확인 표시)를 사용하여 소프트웨어의 이점을 강조합니다. 공백이 있는 페이지의 나머지 사본과도 구별됩니다.

페이지가 잘하는 것.

Yodle의 로고 는 홈페이지에 연결되어 있지 않기 때문에 방문자가 페이지를 클릭할 위험 없이 어떤 웹페이지에 있는지 볼 수 있습니다.
클릭 투 콜 전화번호를 통해 방문자는 회사에 쉽게 연락할 수 있습니다.
헤드라인과 서브헤드라인 은 방문자에게 제안 내용과 혜택이 무엇인지 알려줍니다.
기울임꼴 사본 은 사본 의 나머지 부분과 구별되어 방문자가 읽도록 유도합니다.
캡슐화된 양식 은 방문자에게 데모를 요청하기 위해 어디로 가야 하는지 보여주어 눈길을 끕니다.
"맞춤형 데모" 는 잠재 고객이 해당 제안이 자신을 위해 특별히 제공되는 것처럼 느끼게 합니다.
페이지에 주황색 CTA 버튼 색상 r이 "팝업"되어 주의를 끌고 사람들이 클릭할 가능성을 높입니다.
CTA 버튼 의 화살표 는 방향 신호 역할을 하여 양식 뒤에 있는 내용에 대한 사람들의 관심을 불러일으킵니다.
신뢰 신호 (고객 평가, 회사 로고 및 수상 인감)는 방문자가 개인 정보를 작성하도록 설득하는 데 도움이 되는 Yodle에 대한 잠재 고객의 신뢰 수준을 높입니다.

A/B 테스트 대상:

CTA 버튼 사본 은 개인화되지 않았으며 많은 방문자가 클릭하도록 유도하지 않을 수 있습니다. "데모를 원합니다" 또는 "내 데모 예약"과 같이 변경하면 더 나은 결과를 얻을 수 있습니다.
고객과의 헤드샷 을 포함하여 평가는 고객을 더 친근하게 보이게 하여 잠재 고객에게 더 많은 신뢰를 심어줄 것입니다.
바닥글 의 작은 글씨 는 잠재 고객을 압도하고 전환을 방해할 수 있습니다.

F-패턴

페이지를 디자인할 때 방문자가 페이지를 볼 가능성이 가장 높은 방법을 생각하십시오. 그렇게 하면 가장 중요한 요소를 적절하게 배치할 수 있습니다. 사람들은 위에서 아래로, 왼쪽에서 오른쪽으로 읽는 경향이 있으므로 F-패턴을 따르도록 페이지를 디자인하는 것이 현명합니다.

아래 Oracle의 데모 클릭 후 방문 페이지는 고유한 F-패턴 레이아웃을 따릅니다. 각 중요 요소는 방문자가 페이지를 볼 때 자연스럽게 보게 되는 F-Pattern 경로를 따라 위치합니다.

시청자는 먼저 왼쪽 상단 모서리에서 컴퓨터 이미지를 찾습니다.
그들의 눈은 가로 줄기를 따라 미소 짓는 사람들을 볼 것입니다.
페이지 왼쪽 아래로 다음 가로 줄기로 이동하면 방문자는 헤드라인에 주의를 집중한 다음 단일 양식 필드로 이동합니다.
다음으로, 세로 줄기 아래로 F-패턴을 계속하여 텍스트 단락과 글머리 기호를 스캔합니다.
마지막으로, 그들의 초점은 밝은 빨간색 CTA 버튼으로 끝납니다.

페이지가 잘하는 것.

웃는 사람들 은 페이지를 더 인간답게 만들어 방문자가 더 편안하게 느낄 수 있습니다.
글머리 기호와 굵은 글씨체 는 제안의 주요 기능에 주의를 집중시킵니다.
1필드 양식을 사용하면 빠르고 쉽게 완료할 수 있습니다.
방문자의 시선 은 양식과 CTA 버튼을 향하고 있어 거기에 집중하고 전환해야 함을 의미합니다.

A/B 테스트 대상:

제품 이미지 가 더 클 수 있습니다. 현재는 화면에 아무것도 표시하기 어렵습니다.
제안이 방문자에게 어떤 혜택을 줄 것인지에 대한 정보를 방문자에게 제공하지 않기 때문에 헤드라인 은 설득력이 없습니다.
CTA 버튼 카피 가 약합니다. "계속"은 제안에 대해 아무 말도 하지 않으며 클릭을 유도하지 않습니다.
고객 평가와 같은 사회적 증거를 포함 하면 회사와 제안의 신뢰성을 높일 수 있습니다.
바닥글 탐색 링크 는 방문자의 주의를 분산시키고 페이지에서 멀어지게 하며 전환율을 낮출 수 있습니다.

Z 패턴

F-패턴과 마찬가지로 Z-패턴은 시청자가 페이지를 탐색하는 데 도움이 되므로 페이지 디자인을 위한 또 다른 훌륭한 레이아웃 옵션이 됩니다.

다음은 명확한 Z 패턴을 따르는 Business-Software.com의 예입니다.

방문자는 먼저 왼쪽 상단 모서리에서 굵은 제목을 볼 수 있습니다.
상단 수평 Z 스템을 따라 이동하면 빨간색 "다운로드 등록" 스탬프에 도달합니다.
대각선 아래로 왼쪽 아래로 이동하면 보는 사람이 보고서 이미지에 주의를 집중할 수 있습니다.
마지막으로 또 다른 가로 줄기로 Z 패턴을 완성하고 페이지의 가장 중요한 요소인 CTA 버튼에 위치하게 됩니다.

페이지가 잘하는 것.

왼쪽 상단 의 로고 는 링크되어 있지 않으므로 방문자가 즉시 주의가 산만해져서 페이지에서 멀어지지 않습니다.
헤드라인과 하위 헤드라인 은 방문자에게 이 보고서가 상위 10개 마케팅 자동화 공급업체를 제공하고 보고서 다운로드를 통해 얻을 수 있는 이점을 알려주는 데 효과적입니다.
최소한의 카피로 글머리 기호를 사용하면 시청자가 페이지를 빠르게 스캔하고 많은 텍스트를 읽을 필요 없이 핵심 내용을 배울 수 있습니다.
"무료"라는 단어 는 두 곳에서 사용됩니다. 공백으로 둘러싸여 매우 눈길을 끄는 빨간색 스탬프와 이미지 바로 위에 굵은 서식으로 표시된 사본에 있습니다.
보고서 미리보기를 통해 잠재 고객은 보고서를 다운로드하기로 선택한 경우 보고서가 어떻게 생겼는지 엿볼 수 있습니다.
노란색 CTA 버튼 은 페이지의 나머지 부분과 잘 대조되어 더 많은 방문자가 클릭할 수 있습니다.

A/B 테스트 대상:

오른쪽 하단 모서리에 있는 회사 로고 는 방문자에게 제안으로 전환하기 전에 페이지에서 벗어날 수 있는 방법을 제공하는 홈페이지에 하이퍼링크되어 있습니다.
13개의 양식 필드 는 마케팅 깔때기의 인지 단계에서 많은 제안을 합니다. 구매자 여정의 초기에 너무 많은 정보를 요청하면 사람들이 전환하는 것을 쉽게 막을 수 있습니다.
가장 중요한 요소 주변의 공백을 늘 립니다. 이미지와 CTA 버튼과 같은 것은 그들에게 더 많은 관심을 끌고 방문자가 보고서를 다운로드하도록 유도할 것입니다.
사회적 증거를 추가하면 더 많은 잠재 고객이 개종할 수 있습니다. 그것은 그들이 Business-Software.com과 함께 일하는 아이디어에 대해 더 편안하고 흥분하게 만들 것이기 때문입니다.
페이지 바닥글 을 제거할 수 있습니다. 작은 글씨는 불필요해 보이고 회사 로고는 출구 링크 역할을 하여 방문자를 이 페이지에서 멀어지게 합니다.

여백

방문자가 주의를 집중하도록 설득하는 또 다른 방법은 공백을 추가하는 것입니다. 특정 요소 주위에 충분한 공백을 포함하면 해당 요소가 페이지에서 더 두드러집니다.

특정 요소에 대한 집중도를 높이는 것 외에도 여백도 도움이 됩니다.

어수선함 줄이기
귀하의 페이지를 미학적으로 즐겁게 만듭니다.
가독성 및 이해도 향상
사용자 경험 향상

아래 MarcomCentral 예에서 리드 캡처 양식을 둘러싼 모든 공백을 살펴보십시오. 양식 주위의 공간은 실제로 흰색이 아닙니다. 공백은 다른 페이지 요소를 구분하는 데 도움이 되고 강조 표시되는 요소와 대조되는 한 모든 색상이 될 수 있습니다. 이 경우 형식은 다음과 같습니다.

페이지가 잘하는 것.

클릭 투 콜 전화 번호 는 방문자가 고객 서비스에 연락할 수 있는 편리한 방법을 제공합니다.
50초 길이의 비디오를 통해 잠재 고객은 사본을 읽을 필요 없이 빠르고 쉽게 정보를 얻을 수 있습니다.
양식 제목과 첫 번째 CTA 버튼의 "무료" 는 모두가 무료를 좋아하기 때문에 매우 설득력 있는 문구입니다. 개인화된 사본을 추가하면 이 페이지를 더욱 설득력 있게 만들 수 있습니다.
앵커 태그 를 클릭하면 방문자가 양식으로 직접 돌아가서 양식을 더 쉽게 찾고 완료할 수 있습니다.
사회적 증거 는 방문자에게 신뢰와 확신을 심어줍니다. 고객 평가와 함께 헤드샷을 포함하면 더 많은 가치를 얻을 수 있습니다.
"작동 방식" 섹션 의 이미지 를 통해 잠재 고객은 각 단계에서 설명하는 내용을 더 잘 이해하고 상상할 수 있습니다.

A/B 테스트 대상:

하이퍼링크로 연결된 회사 로고 는 방문자가 전체 제안을 보기도 전에 페이지에서 멀어지게 할 수 있습니다.
헤드라인 은 크고 눈에 띄지만 설득력이 없기 때문에 변경해야 합니다. 잠재 고객에게 어떤 이점도 제공하지 않기 때문입니다.
주황색 CTA 버튼 은 페이지 전체에서 주황색이 여러 번 사용되기 때문에 눈에 잘 띄지 않습니다.
페이지 하단의 소셜 미디어 버튼 은 방문자의 주의를 산만하게 하고 전환을 방해할 수 있습니다.

앵커 태그

앵커 태그는 동일한 페이지의 다른 위치에 연결되어 방문자가 스크롤하지 않고도 페이지의 특정 부분으로 이동할 수 있습니다. 앵커 링크는 방문자를 많은 노력 없이 원하는 곳으로 데려가기 때문에 전반적인 사용자 경험을 개선하는 데 도움이 되어 전환 프로세스에 도움이 됩니다.

PRWeb은 페이지에 두 개의 앵커 태그를 포함했습니다. 둘 다 "지금 시작하십시오!" 스크롤 없이 볼 수 있는 CTA 버튼 클릭하면 스크롤 없이 볼 수 있는 부분에 있는 리드 캡처 양식으로 방문자를 다시 보냅니다.

페이지가 잘하는 것:

헤드라인 은 구체적이고 2인칭 카피를 사용합니다. 방문자가 제안을 자세히 읽고 결국 전환하도록 설득하는 데 좋은 두 가지 특성입니다.
양식 을 캡슐화하면 더 많은 관심을 끌 수 있으며, 이는 완성하기 위해 잠재 고객을 끌어들일 가능성이 높습니다.
양식의 옵트인 상자를 선택 하지 않은 상태로 두면 잠재 고객은 PRWeb이 대신 결정을 내리는 대신 스스로 결정을 내릴 수 있다고 느끼게 됩니다.
"How" 및 "Why" 섹션 의 이미지와 형식화된 사본 은 PRWeb이 작동하는 방식과 잠재 고객이 PRWeb을 선택해야 하는 이유에 관한 가장 중요한 세부 사항에 주의를 집중시킵니다.

A/B 테스트 대상:

종료 링크 (회사 로고, 소셜 미디어 버튼 및 바닥글 탐색)는 모두 사람들을 전환하지 않고 페이지에서 멀어지게 할 수 있습니다.
글머리 기호 사본 이 더 돋보일 수 있습니다. 들여 쓰기 또는 화살표를 확대하면 더 많은 관심을 끌 수 있습니다.
가이드 이미지 가 잘려서 디자인 오류처럼 보입니다. 클릭도 가능하지만 이미지가 열리면 여전히 전체 이미지가 아니거나 더 크지 않습니다.
7-양식 필드 는 방문자를 위협하고 양식 작성을 방해할 수 있습니다. 특히 구매자 여정의 고려 단계에 있을 가능성이 높기 때문입니다.
CTA 버튼 색상 (세 버튼 모두)은 빨간색과 파란색이 페이지 전체에 사용되기 때문에 눈에 띄지 않습니다.
CTA 버튼 카피 (다시, 세 버튼 모두)는 모호합니다. "마케팅 가이드를 원합니다!"와 같은 것입니다. 더 매력적이며 더 많은 클릭이 발생할 수 있습니다.
고객 평가 가 최적화되지 않았습니다. Craig Kasnoff의 얼굴 사진도 없고 회사 이름도 없고(Media Consultant 뒤에 쉼표가 없어야 함), 평가 자체에는 잠재 고객이 회사와 함께 일하도록 권장하는 구체적인 내용이 없습니다.

GIF

클릭 후 방문 페이지(이미지, 비디오 또는 GIF 형식)에 미디어를 통합하면 제품이나 서비스를 설명하는 전환율을 높이는 동시에 페이지를 시각적으로 더 매력적으로 만들 수 있습니다.

GIF는 제안을 보다 대화식으로 설명하는 데 도움이 되는 애니메이션 이미지입니다. 따라서 소프트웨어 대시보드의 스크린샷과 같이 페이지에 정적 이미지를 추가하는 대신 GIF를 추가하여 잠재 고객이 다양한 작업을 수행할 수 있는 방법을 시각적으로 보여줍니다.

ActiveCampaign은 페이지에서 다음을 수행합니다.

페이지가 잘하는 것.

헤드라인과 부제목 이 인상적입니다. 헤드라인은 2인칭 카피를 사용하고 하위 헤드라인은 헤드라인을 잘 보완하여 150,000명 이상의 다른 마케터가 ActiveCampaign을 사용하고 있음을 잠재 고객에게 알립니다.
"신용 카드 필요 없음" 은 방문자에게 이 제안이 완전히 무료임을 보증합니다.
두 개의 양식 필드만 있으면 더 많은 잠재 고객이 양식을 완성할 수 있습니다.
고객 평가 는 사회적 증거를 추가하는 데 적합하지만 Twitter 핸들은 먼저 전환하지 않고 방문자를 페이지에서 멀어지게 할 수 있습니다.
스크롤 양식과 CTA 버튼 은 방문자가 페이지의 어느 위치에 있든 볼 수 있기 때문에 방문자가 조치를 취할 가능성을 높입니다.

A/B 테스트 대상:

CTA 버튼 이 눈에 띄지 않습니다. 색상이 페이지의 나머지 파란색과 혼합되어 사본이 인상적이지 않습니다.
CTA 버튼 아래의 사본 에는 "'만들기'를 클릭하여...'라고 표시되어 있지만 CTA 버튼에는 '만들기'가 표시되어 있지 않습니다.
바닥글의 탐색 링크는 방문자가 페이지의 목표에서 쉽게 주의를 분산시킬 수 있습니다.

시각적 단서

시각적 단서는 클릭 후 방문 페이지 디자인에서 큰 역할을 합니다. 시각적 계층 구조를 유지하고 방문자의 참여를 유지하며 필수 요소의 방향을 안내하는 데 도움이 되기 때문입니다. 일반적으로 사용되는 세 가지 시각적 신호에는 화살표, 시선 및 전략적으로 배치된 개체가 포함되며 모두 전환 목표에 필수적인 요소의 방향을 가리킵니다.

화살표

화살표는 간단하고 간단하며 이해하기 쉽기 때문에 클릭 후 방문 페이지에서 자주 사용됩니다. 애니메이션 또는 고정될 수 있으며 방문자가 리드 캡처 양식과 CTA 버튼을 가리키도록 하는 데 가장 일반적으로 사용됩니다(예: Bridgeline Digital에서처럼).

페이지가 잘하는 것.

증가된 전환율에 대한 통계 를 포함하면 마케팅 자동화에 대한 방문자의 관심을 불러일으킬 수 있습니다. 또한 굵은 서식은 주의를 끄는 데 도움이 됩니다.
"무료" 는 잠재 고객이 이 백서에 대해 비용을 지불할 필요가 없음을 강조하면서 두 곳에서 언급됩니다.
글머리 기호가 있는 사본을 사용하면 잠재 고객이 텍스트 블록을 읽을 필요 없이 백서에 포함될 내용을 쉽게 찾을 수 있습니다.
주황색 CTA 버튼이 눈에 띄고 양식 제목 및 화살표와 잘 어울립니다.
회사 로고 는 페이지에 신뢰 가치를 더하여 방문자가 "이 유명한 회사가 Bridgeline Digital과 파트너 관계를 맺었다면 나도 해야 한다"고 생각하게 만듭니다.

A/B 테스트 대상:

하이퍼링크로 연결된 회사 로고와 바닥글 링크 는 방문자에게 페이지에서 벗어날 수 있는 방법을 제공하여 이탈률을 높일 수 있습니다.
제품 이미지 주변의 여백을 늘리면 더욱 돋보이게 됩니다.
CTA 버튼 카피 는 "백서 다운로드"에 대한 설득력이 없기 때문에 개선이 필요합니다. 이익 지향 및/또는 1인칭 카피를 추가하면 더 많은 잠재 고객이 클릭하도록 유도할 수 있습니다.

시선

사람들은 다른 사람들이 보고 있는 것을 보는 경향이 있기 때문에 사람의 시선을 방향 신호로 사용하는 것이 클릭 후 방문 페이지에서 특히 효과적입니다. 예를 들어, 페이지의 사람 이미지가 헤드라인을 보고 있는 경우 방문자의 관심도 헤드라인에 집중될 수 있습니다. 따라서 이 기술은 방문자가 원하는 위치를 볼 수 있도록 하는 데 유용합니다.

아래 페이지에서 Vistage는 리드 캡처 양식 방향을 바라보는 여성의 이미지를 포함했습니다. 방문자가 그녀를 볼 때, 그들은 무의식적으로 그 형태를 보아야 한다고 느낍니다.

페이지가 잘하는 것:

개인 정보 보호 정책을 제외하고는 출구 링크 가 없으므로 방문자가 브라우저에서 "X"를 클릭하거나 양식을 작성하지 않고 페이지를 떠날 수 없습니다.
대조되는 색상 은 시각적 단서 역할을 하여 페이지에서 가장 중요한 요소인 헤드라인, 여성 및 CTA 버튼에 주의를 집중시킵니다. 페이지의 나머지 부분이 회색 톤이므로 이 세 가지 구성 요소가 다른 모든 요소보다 두드러집니다.
개인 정보 보호 정책 을 포함하면 방문자에게 신뢰를 심어주고 회사에서 방문자의 정보가 안전하다는 것을 알릴 수 있습니다.

A/B 테스트 대상:

고객 평가 또는 회사 배지와 같은 사회적 증거를 추가하면 더 많은 방문자가 제안 자격이 있는지 알아보도록 유도할 수 있습니다.
제안에 대한 최소한의 정보 는 사람들이 전환하지 못하게 할 수 있습니다. 제안 혜택을 강조하기 위해 글머리 기호나 작은 텍스트 덩어리를 추가하면 더 나은 결과를 얻을 수 있습니다.

사물

세 번째로 일반적으로 사용되는 시각적 신호 기술은 페이지의 특정 영역을 직접 가리키도록 개체를 배치하는 것입니다. 이렇게 하면 특정 중요한 페이지 요소에 잠재 고객의 관심이 집중됩니다.

Lyft는 아래 예에서 차량을 리드 캡처 양식을 향해 직접적으로(거의 닿게) 배치하여 이를 수행합니다.

페이지가 잘하는 것:

사람들이 정보를 전달하도록 설득하는 데는 하나의 양식 필드만 적합합니다.
계약 확인란을 선택 하지 않은 상태로 두면 잠재 고객이 전환 프로세스를 더 잘 제어하고 편안하게 느낄 수 있습니다.
"얼마나 벌 수 있는지 보기" 섹션 은 잠재 고객이 페이지를 떠나지 않고 정보를 입력하고 "계산" CTA 버튼을 클릭할 수 있도록 하기 때문에 유용합니다. 주간 급여 금액이 계산된 후 버튼은 다른 "지금 신청" 버튼으로 바뀌어 전환 프로세스를 돕습니다.
"Lyft 운전 작동 방식" 섹션을 통해 회사는 Lyft가 작동하는 방식에 대한 단계별 정보를 제공할 수 있습니다. 또한 수평으로 스크롤되기 때문에 사본으로 페이지를 복잡하게 만들지 않습니다.

A/B 테스트 대상:

여러 종료 링크를 사용하면 방문자가 제안을 전환하지 않고 쉽게 주의가 분산되어 페이지에서 벗어날 수 있습니다.
바쁜 배경 때문에 헤드라인과 부제목 을 읽기 어렵습니다. 더 잘 보이는 다른 위치에서 테스트하면 더 많은 관심을 끌고 더 나은 결과를 얻을 수 있습니다.
CTA 버튼 사본 은 모호합니다. "다음"은 제안에 대해 전혀 말하지 않으며 많은 사람들이 클릭하도록 강요하지 않습니다.

시각적 계층

모든 클릭 후 방문 페이지는 특정 시각적 계층 구조를 따라야 합니다. 콘텐츠는 가장 중요한 것에서 가장 덜 중요한 순서로 구성되어 있습니다. 방문자의 관심을 끌기 위한 요소(일반적으로 헤드라인)는 페이지 상단에 배치해야 합니다. 이것이 계층 구조의 상단이고 나머지 콘텐츠가 가장 높은 우선 순위에서 가장 낮은 우선 순위로 전달되기 때문입니다.

다음을 포함하되 이에 국한되지 않는 많은 특성이 시각적 계층 구조를 만드는 역할을 합니다.

크기
색상/대비
밀도/근접
여백
질감/스타일

SendGrid는 페이지에서 이러한 구성 요소 중 몇 가지를 활용합니다. 어떤 것을 사용하고 어떤 것을 개선해야 하는지 살펴보겠습니다.

페이지가 잘하는 것.

크기 변형과 굵은 서식 은 가장 중요한 사본에 주의를 집중시켜 강력한 시각적 계층 구조를 형성하는 데 도움이 됩니다.
헤드라인 은 방문자들이 SendGrid를 사용하고 있는 세 개의 유명 회사를 언급함으로써 SendGrid를 사용하도록 강요합니다.
여러 협력 CTA 버튼 은 잠재 고객에게 페이지 전체의 다른 위치에서 제안을 사용할 수 있는 여러 기회를 제공합니다.
제품 이미지 는 전달된 콘텐츠의 모양을 미리 보여줍니다.
최소한의 카피로 글머리 기호를 사용하면 잠재 고객이 원하는 내용을 찾기 위해 텍스트 단락을 읽을 필요가 없습니다.
고객 평가 및 회사 배지 는 사회적 증거 역할을 하며 다른 사람들이 SendGrid로 성공을 거두고 있기 때문에 더 많은 잠재 고객이 SendGrid와 함께 일하도록 설득할 수 있습니다. 그의 평가에 Dave Tomback의 헤드샷을 추가하면 훨씬 더 효과적일 것입니다.

A/B 테스트 대상:

이미지의 여성 은 헤드라인/CTA 버튼을 내려다보고 시각적 신호를 추가하고 방문자도 그렇게 보도록 권장할 수 있습니다.
CTA 버튼 을 확대하고 다른 색상으로 테스트하여 더 많은 관심을 끌 수 있습니다. 페이지의 다른 곳에 파란색이 있으므로 최대한 "튀지" 않습니다.
CTA 버튼 및 헤드라인과 같은 일부 요소 주위에 공백을 늘리면 더 눈에 띄게 됩니다.
"계획 및 가격 보기" CTA 버튼 은 방문자를 다른 페이지로 이동시켜 이 페이지에서 주의를 분산시키므로 제거해야 합니다.

시선을 사로잡는 CTA 버튼

완벽하게 최적화되고 시선을 사로잡는 CTA 버튼은 클릭 후 방문 페이지 프레임워크에 포함해야 하는 가장 중요한 요소입니다. 다른 모든 요소보다 눈에 띄어야 하므로 잠재 고객이 제안을 사용하기 위해 클릭해야 하는 위치에 대해 혼란이 없습니다.

WalkMe는 페이지에서 확실히 눈에 띄는 크고 대조적인 CTA 버튼이 있는 2단계 옵트인 페이지를 만들어 방문자의 관심을 끌었습니다.

페이지가 잘하는 것.

배경 이미지 는 방문자에게 소프트웨어가 어떻게 생겼는지에 대한 사실적인 미리보기를 제공합니다.
CTA 버튼 은 페이지에 실제로 나타납니다. 크고 대조적일 뿐만 아니라 사용자가 스크롤을 시작하면 페이지 상단에 다시 나타납니다.
2단계 옵트인 양식 은 여기에 정보를 입력할 필요가 없기 때문에 혼란을 줄이고 사용자가 덜 겁먹게 만듭니다.
글머리 기호로 된 문구를 사용하면 잠재 고객이 너무 많은 텍스트를 읽을 필요 없이 제안에 대한 정보를 쉽게 배울 수 있습니다.
사회적 증거 (고객 평가 및 스크롤링 회사 로고)는 잠재 고객이 이 회사와 함께 일해야 한다고 느끼게 할 수 있습니다.

A/B 테스트 대상.

CTA 버튼 문구 를 좀 더 개인화되고(1인칭 형식으로) 이익 지향적으로 변경하면 전환율이 향상될 수 있습니다.
(스크롤 없이 볼 수 있는 부분) 이미지를 GIF로 대체하면 사용자가 페이지에서 보다 인터랙티브한 경험을 할 수 있고 제품을 더 잘 설명하는 데 도움이 됩니다.
고객 평가에 헤드샷 을 추가하면 더 신뢰할 수 있고 효율성이 높아집니다.

클릭 후 방문 페이지 디자인 기법 중 영감을 받은 것은 무엇입니까?

클릭 후 방문 페이지를 사용하여 제품과 서비스를 홍보하고 판매하는 것은 마케팅 전략의 필수적인 부분입니다. 위에서 설명한 기술과 디자인 모범 사례 가이드 및 클릭 후 방문 페이지 최적화 가이드를 올바르게 최적화하면 전환율을 크게 높일 수 있기 때문입니다.

광고 클릭을 전환으로 전환하고 모든 제안에 대해 빠르게 로드되는 전용 클릭 후 페이지를 만드십시오. 지금 Instapage Enterprise Demo에 등록하여 모든 청중에게 고유한 클릭 후 방문 페이지를 제공하는 방법을 알아보십시오.