전문가의 팁으로 랜딩 페이지 와이어프레임을 만드는 방법

게시 됨: 2018-05-08

클릭 후 방문 페이지는 사람들이 귀하의 브랜드에 대해 보는 첫인상 중 하나인 경우가 많으므로 탁월하게 만드는 것이 중요합니다. 클릭 후 방문 페이지 와이어프레임은 실제로 페이지를 구축하기 전에 페이지 요소의 배열을 시각화할 수 있도록 하여 이를 도울 수 있습니다.

클릭 후 방문 페이지 와이어프레임이란 무엇입니까?

와이어프레임은 페이지가 어떻게 구성되고 페이지를 구축하는 데 필요한 자산이 무엇인지 이해 관계자에게 알려주는 클릭 후 방문 페이지의 기본 디자인 레이아웃 또는 골격입니다.

Instapage의 비주얼 디자이너인 Rares Cimpean은 다음과 같이 설명합니다.

클릭 후 방문 페이지 와이어프레임을 구성할 때 페이지의 흐름, 사용성 및 액세스 가능성, 사람들이 필요한 정보에 얼마나 빨리 도달할 수 있는지, CTA가 얼마나 액세스 가능하고 인식할 수 있는지 등에 중점을 두어야 합니다. 이러한 모든 요소 와이어프레임 단계에서 고려됩니다.

다음은 길고 짧은 와이어프레임 클릭 후 방문 페이지의 예입니다.

클릭 후 방문 페이지 와이어프레임 템플릿은 다음과 같은 몇 가지 주요 용도로 사용됩니다.

펜과 종이 스케치와 첫 번째 프로토타입 사이의 중간 지점 역할
페이지에 표시될 내용의 개요를 표시하려면
페이지 구조의 청사진을 제공하려면
사용자 인터페이스의 전반적인 방향을 전달하기 위해

참고: 모든 캠페인에 적합한 단일 클릭 후 방문 페이지 와이어프레임 디자인은 없습니다. 일부 클릭 후 방문 페이지에는 헤드라인, 글머리 기호 문구, 양식 및 CTA 버튼이 필요할 수 있지만 다른 페이지는 추가 이점을 강조하고 사회적 증거를 보여줘야 할 수도 있습니다. 예를 들어 판매 페이지에는 더 자세한 제품 설명이 필요한 경우가 많으며 더 길어야 할 수도 있습니다. (항상 짧은 페이지와 긴 페이지를 A/B 테스트하여 더 나은 결과를 얻을 수 있는 페이지를 확인할 수 있습니다.)

와이어프레이밍하는 페이지 유형에 관계없이 그래픽 디자인 관리자인 Rafal Bogdan은 관련된 이해 관계자를 압도하지 않도록 처음에는 와이어프레임을 매우 단순하게 유지하는 것의 중요성을 표현합니다.

다음 단계에서 이해 관계자가 거부할 수 있는 요소에 너무 깊이 초점을 맞추고 싶지 않습니다. 와이어프레임의 주요 아이디어는 클릭 후 방문 페이지에 특정 프로젝트 기능을 표시하고 이러한 기능이 실제 페이지에서 어떻게 작동하는지 이해하도록 돕는 것입니다.

와이어프레임이 완성되면 디자인을 더욱 빛나게 만들 차례입니다. 다음은 일반적으로 전환율이 높은 클릭 후 방문 페이지에서 볼 수 있는 요소입니다.

클릭 후 방문 페이지를 와이어프레임하는 방법

탐색 없음

클릭 후 방문 페이지는 전환 및 단일 목적을 위해 설계되었으므로 전환 목표에서 사용자의 주의를 분산시킬 수 있는 탐색 링크가 없어야 합니다. 그것은 전환하거나 떠나는 것입니다. 다른 옵션은 없습니다.

많은 회사에서 탐색 모음을 제거한 후 전환율이 크게 변경되었습니다.

Career Point College는 상단 탐색 모음을 제거하고 양식 레이아웃을 수정한 후 전환율이 336% 증가했습니다.
Yuppiechef는 탐색 모음을 제거하여 전환율이 3%에서 6%로 100% 증가하는 것을 목격했습니다.
SparkPage는 A/B 테스트를 통해 상단 탐색을 제거한 달에 전환율이 9.2%에서 17.6%로 증가했습니다.

Comporium Media Services는 전환을 최대화하기 위해 탐색을 제거해야 할 필요성을 이해하는 또 다른 브랜드입니다. 로고조차 연결되어 있지 않아 방문자가 페이지에 머물고 상담 요청에 집중할 수 있습니다.

모범 사례를 따를 때 사용해야 하는 유일한 링크는 신뢰성을 높이는 링크(예: 이용 약관 및/또는 개인 정보 보호 정책)와 사용자 경험을 향상시키는 링크(예: 앵커 태그 및 클릭 투 콜 전화)입니다. 숫자).

헤드라인 및 서브헤드라인

강력한 헤드라인이 없으면 방문자가 귀하의 제안을 계속 평가할 만큼 충분히 설득되지 않기 때문에 헤드라인은 가장 중요한 요소 중 하나입니다. 이것이 메시지를 전달하는 기본 방법이므로 주의를 기울여야 하고 사용자가 페이지를 방문하는 즉시 스크롤 없이 볼 수 있는 부분에 명확하게 표시되어야 합니다.

하위 헤드라인은 기본 헤드라인을 보완하는 데 사용되며, 특히 기본 헤드라인이 길거나 추가 컨텍스트(예: 통계)가 필요한 경우에 사용됩니다.

좋은 헤드라인을 작성하는 열쇠는 그것이 당신의 고유한 가치 제안(UVP) 또는 당신의 제품이나 서비스를 경쟁자와 차별화하는 요소를 전달하는지 확인하는 것입니다.

이 Autopilot 클릭 후 방문 페이지 헤드라인은 회사가 다른 마케팅 자동화 소프트웨어에 비해 Autopilot에서 "더 빠르게 성장할 수" 있음을 알려줍니다. 그런 다음 하위 헤드라인은 더 빠르게 성장할 수 있는 방법 을 설명하여 이 아이디어를 보완합니다.

UVP를 포함하는 것 외에도 매력적인 헤드라인에는 네 가지 주요 유형이 있습니다.

뉴스: 잠재 고객을 위한 새로운 솔루션 소개
자기 이익: 잠재 고객의 고유한 이익에 호소<
빠르고 쉬운 솔루션: 빠른 수정에 대한 잠재 고객의 욕구에 호소
호기심: 방문자의 관심과 호기심을 자극하여 더 많은 것을 읽도록 유도합니다.

더 강력한 헤드라인을 위해 하나를 사용하거나 여러 개를 결합할 수 있습니다. 가장 눈에 띄는 헤드라인은 두 개 이상을 사용합니다.

더 강력한 헤드라인을 위해 하나를 사용하거나 여러 개를 결합할 수 있습니다. 가장 눈길을 끄는 헤드라인은 두 개 이상을 사용합니다.

미디어

사람들이 텍스트보다 시각 자료를 처리하는 것이 더 쉽기 때문에 매력적인 미디어(이미지, gif 및 비디오)는 말보다 제안의 가치를 전달하는 데 도움이 됩니다. 그러나 비주얼은 만능 솔루션이 아닙니다. 클릭 후 방문 페이지에 대해 선택하는 미디어 유형은 제공하는 항목에 따라 다릅니다.

클릭 후 방문 페이지 이미지의 유형은 다음과 같습니다.

영웅 장면: 방문자에게 제품 또는 서비스가 어떻게 그들의 삶을 더 나은 방향으로 변화시킬지 엿볼 수 있도록 합니다.
제품 이미지: 방문자가 주요 기능을 포함하여 제안의 세부 정보를 볼 수 있습니다.
인포그래픽: 방문자가 데이터 및 통계(차트, 그래프 등)를 보다 쉽게 개념화할 수 있습니다.

잠재 고객이 생성하는 데 도움이 되는 비즈니스 이메일의 몇 가지 예를 보여주기 위해 iContact가 사용하는 이미지를 살펴보십시오.

이미지 외에도 여러 유형의 클릭 후 방문 페이지 동영상이 있습니다.

설명 동영상: 제품이 어떻게 작동하는지 설명하세요. 특히 새 제품이거나 복잡한 경우 제품이 잠재 고객에게 어떤 혜택을 줄 것인지에 초점을 맞춥니다.
소개 비디오: 새로운 회사 소개 , 신제품 발표 또는 신제품 기능 강조
비디오 평가 및 사례 연구: 실제 만족한 고객이 제품 또는 서비스에 대한 만족도와 성공을 설명하는 모습을 보여줌으로써 사회적 증거 역할을 합니다.

이미지를 사용하는 경우 제안의 현실적인 상황을 전달하고 주제와 관련이 없는 한 스톡 사진을 사용하지 마십시오. 이보다 적으면 브랜드 인지도와 가치가 떨어질 위험이 있습니다.

복사

그러나 방문자에게 귀하의 제안에 대한 모든 것을 말하고 싶은 유혹이 있더라도 하지 마십시오. 주의 시간은 기껏해야 몇 초에 불과하므로 사본은 간결하고 즉시 사람들의 관심을 사로잡아야 합니다.

예를 들어, 글머리 기호(도해법, 확인 표시, 화살표 등으로 표시)는 방문자가 페이지를 빠르게 스캔하고 제안의 핵심 내용을 식별할 수 있도록 중요한 정보를 전달하는 일반적인 방법입니다.

잠재 고객은 굵은 섹션 헤더, 최소한의 카피 및 글머리 기호를 사용하여 Highfive의 화상 회의 솔루션에 대해 빠르게 배울 수 있습니다.

사회적 증거

전환하기 전에 사람들은 귀사가 신뢰할 수 있는 서비스를 제공한다는 것을 신뢰해야 합니다. 그것이 바로 사회적 증거가 다양한 방식으로 그들을 설득할 수 있는 곳입니다.

고객 평가: 고객이 직접 확인했기 때문에(구체적인 정보, 통계, 성명, 소속 및 직위, 헤드샷이 포함된 인용문을 통해) 귀하가 약속을 이행하고 있다는 것을 잠재 고객에게 보여주십시오.
고객 로고(및 개수): 이미 작업한 잘 알려진 회사(및 몇 개)를 표시하여 방문자에게 "저희 제품이나 서비스가 그들에게 충분했으므로 귀하에게도 해당될 것입니다."라고 알립니다.
업계 수상: 업계 리더, 기자, 뉴스 방송국, 웹사이트 등에서 공개적으로 인정받았음을 입증하십시오.
트러스트 씰(Trust seal): 잠재 고객이 지불 정보를 외부로부터 안전하게 보호할 수 있도록 합니다.
개인 정보 보호 정책: 잠재 고객이 이메일 주소를 적절하게 사용하고 다른 사람과 공유하지 않을 것임을 보장합니다.

이전에 동일한 Highfive 클릭 후 방문 페이지를 되돌아보고 방문자를 전환하도록 설득하는 데 사용한 모든 사회적 증거(브랜드 로고, 인용된 평가 및 업계 별 등급)를 확인하십시오.

다음은 고객 수, 브랜드 로고, 사례 연구 비디오 및 인용된 평가와 같은 모든 유형의 사회적 증거를 포함하는 Splash Omnimedia의 또 다른 예입니다.

이 모든 증거를 결합하면 CTA 버튼을 클릭하여 잠재 고객이 전환하도록 설득할 수 있습니다.

리드 캡처 양식

완벽한 형태를 만드는 것은 그렇게 쉬운 일이 아닙니다. 양식 필드가 충분하지 않으며 필요한 모든 정보를 수집하지 못할 것입니다. 필드가 너무 많으면 잠재 고객을 겁먹게 할 위험이 있습니다. 양식의 길이는 제안이 마케팅 깔때기의 어디에 있는지에 따라 다릅니다. 일반적으로 높이가 높을수록 형식이 짧고 그 반대의 경우도 마찬가지입니다.

Justworks는 가격 정보를 제공하기 위해 클릭 후 방문 페이지를 디자인했습니다. 이것은 퍼널 상단 제안이므로 필드에서 세 개만 포함하고 매우 기본적인 정보를 요청하는 것이 합리적입니다.

대조적으로 Autopilot의 무료 평가판은 깔때기보다 더 아래에 있으므로 더 많은 정보를 요청하는 것이 허용됩니다.

행동을 요구하다

CTA 버튼은 클릭 후 방문 페이지 전환이 발생하는 곳이므로 눈에 띄고 클릭을 유도해야 합니다. CTA 버튼을 최적화하기 위한 주요 측면은 다음과 같습니다.

색상: 색상 이론을 사용하여 페이지의 나머지 부분과 잘 대조되고 눈에 띄는 색조, 색조, 색조 또는 음영을 찾습니다.
복사: "제출" 및 "다운로드"는 일반적이고 영감을 주지 않습니다. 대신에, 구체적이고 개인화된 사본을 만들고 "당신", "당신의", "나" 및 "나의"를 통합하여 더 많은 CTA 버튼 클릭을 생성하십시오.
크기: 사람들이 버튼을 찾도록 하지 말고 눈에 띄게 만드십시오 . 또한 Volusion 클릭 후 방문 페이지의 튀는 화살표와 같은 시각적 신호를 제공할 수 있습니다.
아래 — 더 많은 관심을 끌기 위해:

최소 바닥글

클릭 후 방문 페이지와 웹사이트 바닥글은 동일하지 않습니다. 클릭 후 방문 페이지 바닥글에는 사이트맵, 제품 페이지 링크 또는 소셜 미디어 계정이 포함되어서는 안 됩니다. 포함하는 모든 링크는 또 다른 주의를 산만하게 하고 전환하지 않고 페이지를 떠날 수 있는 추가적인 방법을 만듭니다.

Infegy가 방문자에게 제공하는 이 모든 탈출 경로를 살펴보십시오.

여백

공백을 사용하면 페이지가 숨을 쉴 수 있으므로 모든 요소가 관심을 끌고 방문자가 페이지를 더 쉽게 탐색할 수 있습니다. 공백 추가:

어수선함 감소
가독성 향상
시각적 계층 구조 설정
클릭 후 방문 페이지를 보다 전문적으로 보이게 합니다.

NASM과 Acquisio의 다음 클릭 후 방문 페이지를 비교하십시오.

NASM의 페이지는 혼잡하고 어떤 사람들에게는 압도적일 수 있습니다. 먼저 어디를 봐야 할지, 페이지를 탐색하는 방법을 결정하기 어렵기 때문입니다. Acquisio의 페이지에는 충분한 여백이 있으므로 위에서 아래로 탐색하기가 더 쉽고 전반적으로 더 나은 경험을 제공합니다.

모든 것은 클릭 후 방문 페이지 와이어프레임으로 시작됩니다.

와이어프레임을 생성하면 팀이 전체 페이지 스토리를 결정하고, 어떤 자산이 필요한지, 얼마나 많은 사본이 필요한지 확인할 수 있습니다. 여기에서 위의 제안과 함께 최적화된 클릭 후 방문 페이지를 디자인할 수 있습니다. 그러나 개인화되고 100% 사용자 정의 가능한 클릭 후 방문 페이지를 구축하려면 작업에 충분히 강력한 솔루션이 필요합니다.

Instapage를 사용하면 마케터는 디자이너 친화적인 빌더, CSS 편집기, 정렬 및 그룹화, 단축키 등을 사용하여 완벽한 픽셀 페이지를 만들 수 있습니다. 그런 다음 내장된 히트맵을 사용하여 더 높은 전환율을 위한 A/B 테스트를 수행하고 Instablocks™로 생산량을 확장하십시오. 다른 솔루션은 비교할 수 없습니다. 지금 Instapage Enterprise 데모에 등록하십시오.