걱정을 멈추고 랜딩 페이지를 사랑하는 법을 배운 방법(및 모범 사례)

게시 됨: 2017-10-04

방문 페이지 전환 기계입니까, 아니면 이탈률 로켓입니까? 귀하의 콘텐츠 제공이 얼마나 가치가 있든 광고 카피가 얼마나 잘 만들어졌든 귀하와 새로운 리드 사이에 있는 것은 랜딩 페이지입니다. 즉, 방문 페이지가 전환에 최적화되지 않은 경우 기본적으로 회사의 마케팅 비용을 낭비하고 있습니다. 랜딩 페이지에는 CTA, 양식, 콘텐츠, 그래픽, 목표 등과 같이 움직이는 부분이 많이 있습니다. 그렇다면 거대한 기계인 랜딩 페이지와 사람들이 웹에서 선전하는 모든 "모범 사례" 사이에서 어떻게 균형을 잡습니까?

이것이 제가 이 블로그를 작성하는 이유입니다. 여러분이 걱정하지 말고 랜딩 페이지(및 그들이 가져오는 리드)를 사랑할 수 있도록 말입니다. 랜딩 페이지와 사용성에 대한 몇 가지 기본 사항을 다루어 평균 John Doe보다 더 많이 알고 가슴을 부풀리고 디자이너에게 걸어가 랜딩 페이지가 만족스럽지 않다고 말할 수 있습니다.

콘텐츠, 양식 버튼, 그래픽 등에 이르기까지 랜딩 페이지에 대해 알아야 할 모든 것이 있습니다.

랜딩 페이지 모범 사례에 대한 다운로드 가능한 가이드를 받으십시오!

방문 페이지 101

랜딩페이지란?

Google Analytics에서 랜딩 페이지는 방문자가 URL을 입력하거나 링크를 통해 방문하는 모든 웹 페이지입니다. 그러나 마케팅에서는 방문자를 특정 페이지로 안내하거나 전환에 최적화된 페이지 등 특정 기능을 제공하는 독립 실행형 웹 페이지에 이 용어를 사용합니다.

어떤 유형의 랜딩 페이지가 있습니까?

마케팅에는 두 가지 주요 유형의 랜딩 페이지가 있습니다.

클릭연결 랜딩 페이지
리드 제네레이션 랜딩 페이지

클릭 스루 랜딩 페이지 는 일반 판매 퍼널 또는 쇼핑 카트 흐름(전자상거래 사이트의 경우)으로 연결되는 최적화된 웹 페이지입니다.

전환을 위해 전자 상거래 사이트를 최적화하려는 경우 다음과 같은 몇 가지 방법이 있습니다.

잠재 고객 생성 랜딩 페이지 는 웹 사이트 방문자 데이터를 캡처하는 데 사용됩니다. 일반적으로 이는 유용한 eBook, 가이드, 체크리스트 또는 기타 가치 있는 다운로드 가능한 콘텐츠와 교환하여 이루어집니다.

위의 예에서 랜딩 페이지 디자인은 다른 장치에 대해 변경되며 이는 좋지만 반드시 필요한 것은 아닙니다. 랜딩 페이지 디자인에 페이지 요소가 적고 비디오가 없는 경우 반응형 랜딩 페이지로 이동하는 것이 좋습니다.

[tweet= "랜딩 페이지 디자인에 페이지 요소가 거의 없고 비디오가 없는 경우 고유한 장치 페이지 디자인을 만드는 것보다 반응형 페이지 디자인을 사용하십시오."]

Vendasta의 모든 컨텐츠 라이브러리 랜딩 페이지는 모바일 및 데스크탑 브라우저에서 거의 또는 전혀 차이 없이 반응합니다.

Vendasta의 마켓플레이스에서 웹사이트 빌더를 사용하여 고객을 위해 처음부터 자신의 웹사이트를 구축하십시오!

랜딩 페이지 워크플로우

랜딩 페이지 유형마다 사용자가 광고 소스에서 랜딩 페이지로 이동한 방식에 대한 자체 워크플로가 있습니다.

클릭 연결 랜딩 페이지의 워크플로는 다음과 같습니다.

검색엔진 → AdWords SERP 결과 → 방문 페이지

리드 제네레이션 랜딩 페이지의 경우 다음과 같습니다.

블로그 게시물 → 블로그 광고(텍스트 또는 이미지) → 랜딩페이지

랜딩 페이지 분석

모든 기본 랜딩 페이지에는 리드를 전환하기 위한 동일한 기본 요소가 있습니다.

귀하의 로고
표제 및 행간
기능 및 이점을 포함할 수 있는 주요 콘텐츠
명확하고 눈에 띄는 CTA
다음과 같은 신뢰도 구축을 위한 적격 콘텐츠:
- 귀하의 제품/서비스를 사용하는 브랜드/회사
- 회사, 제목, 저자 이미지 및 인용문이 포함된 클라이언트의 평가
저작권 정보, 서비스 약관 및 기타 관련 바닥글 메모가 포함된 바닥글

방문 페이지 "모범 사례" 분석

웹에 대한 이러한 원칙은 가장 단순한 것부터 가장 복잡한 엔터프라이즈 웹 애플리케이션에 이르기까지 동일하게 유효합니다. 이 섹션에서는 콘텐츠 구조, 양식, 버튼 및 그래픽에 대한 랜딩 페이지 모범 사례를 살펴봅니다.

랜딩 페이지 콘텐츠 모범 사례

잠재 고객을 생성하는 랜딩 페이지의 콘텐츠는 일반적으로 트래픽을 생성하는 곳이 아니기 때문에 유기적 검색 위치를 중심으로 하지 않아야 합니다. 사람들은 대부분 광고 캠페인이나 링크(블로그 또는 이메일 캠페인을 통해)를 통해 랜딩 페이지에 도착할 것입니다.

리드 생성 랜딩 페이지가 SERP에서 잘 작동한다면 그대로 두어도 좋지만 콘텐츠의 주요 목적은 페이지 방문자의 관심을 끌고 원하는 특정 작업을 수행하도록 설득하는 것입니다. 원하는 작업은 다음과 같을 수 있습니다. 제품 가격 가이드, 카메라 사양 시트, 소셜 미디어 체크리스트 또는 CTA와 같은 콘텐츠를 다운로드하여 매장에 새로운 제안을 요청하는 것입니다.

좋은 콘텐츠 작성은 주관적이지만 특히 랜딩 페이지나 웹에서 콘텐츠를 판단하는 구조적 고장이 있습니다.

콘텐츠 청킹

콘텐츠 청킹 은 긴 콘텐츠를 읽기 쉽고 짧은 단락으로 나누는 방법입니다. 이는 콘텐츠를 미학적으로 즐겁게 만들 뿐만 아니라 콘텐츠 이해도를 향상시켜 결과적으로 기억력을 높입니다.

랜딩 페이지에 많은 정보를 포함해야 하는 경우 단락으로 나누고 중요 항목 및 시각적 요소와 혼합하십시오. 독자가 정보를 쉽게 소화할 수 있도록 하십시오!

이 블로그 게시물은 또한 부제목과 시각 자료로 구성된 콘텐츠 청크입니다.

한눈에 보기

사람들이 웹에서 각 단어를 읽을 것이라고 기대하지 마십시오. 실제로 그들이 하는 일은 정보를 찾기 위해 페이지를 스캔하고 키워드와 선택 문장을 빠르게 훑어보는 것입니다. 이것에 대해 저와 논쟁하지 마세요. 저는 사람들이 웹 페이지의 콘텐츠를 실제로 어떻게 소화하는지에 대해 연구 후 조사를 던질 수 있습니다.

사람들은 읽지 않습니다. 이것이 클릭베이트 기사가 더 많은 공유를 얻는 또 다른 이유입니다(사람들은 그냥 훑어보고 게시물을 열면 공유합니다).

화면/디스플레이에서 콘텐츠를 읽는 것은 종이에 있는 콘텐츠와 같지 않습니다(나와 같은 사람들은 Kindle과 iPad가 나온 이후로 실제 책을 사지 않는다고 자랑하고 있지만). 눈의 피로와 인터웹에서 우리의 관심을 끌려고 하는 수백 가지 이상의 다른 것들이 있습니다. 따라서 랜딩 페이지 콘텐츠를 쉽게 훑어볼 수 있고 게으른 독자에게 친숙하도록 계획하세요.

Q. 어떻게 콘텐츠를 더 쉽게 훑어볼 수 있게 만드나요?
A. 강조 표시되거나 굵은 키워드, 부제목, 글머리 기호 목록을 사용하고 단락당 아이디어를 제한하십시오!

[clickToTweet tweet="강조/굵은 키워드, 부제목, 글머리 기호 목록 및 단락당 하나의 아이디어는 콘텐츠를 더 이해하기 쉽게 만듭니다!" quote="강조/굵게 표시된 키워드, 부제목, 글머리 기호 목록 및 단락당 하나의 아이디어는 콘텐츠를 더 이해하기 쉽게 만듭니다!"]

역피라미드 글쓰기 스타일

역피라미드 스타일의 글쓰기는 저널리즘에서 주로 사용되는 용어로 콘텐츠에서 정보를 전달하고 우선 순위를 지정하는 방법을 설명합니다. 이 스타일에서는 인트로에서 전체 콘텐츠의 기본 사항을 공개한 다음 중요한 세부 사항을 탐구한 다음 기타 일반 및 배경 정보를 제공합니다.

간단히 비유하자면 911에 전화를 거는 것과 같습니다. 먼저 강도를 목격했다고 신고한 다음 점차 사건의 세부 사항을 공개합니다.

이는 랜딩 페이지뿐만 아니라 일반적으로 웹 콘텐츠에도 적용됩니다. 마케터는 이런 말을 듣기 싫어하지만 사람들은 마주치는 모든 블로그 게시물을 읽을 시간이 없습니다. 따라서 그들은 유익하고 빠르게 훑어볼 수 있으며 질문에 답하고 논점을 제공하는 것을 선택하기만 하면 됩니다. 이것이 바로 역피라미드 스타일이 저널리즘의 세계에서 친숙하고 유사한 콘텐츠 작성의 세계로 아주 잘 그리고 쉽게 옮겨진 이유입니다.

콘텐츠가 아무리 중요하다고 생각하더라도 사용자의 관심을 끌기 위해 Youtube, Netflix 및 기타 시간을 잡아먹는 플랫폼과 경쟁할 수 있습니다. 따라서 랜딩 페이지나 블로그 게시물이 읽고 싶은 내용인지 확인할 수 있도록 처음에 요약을 제공하는 것은 나쁠 것이 없습니다.

고객의 소리

고객의 소리 전략 또는 "개인 중심 콘텐츠" 전략은 사용자가 사용하는 정확한 단어와 언어를 사용하는 것을 말합니다. 이렇게 하면 청중이 찾고 있는 내용과 더 일치하는 콘텐츠를 만들 수 있으며 청중은 당신이 제공하는 콘텐츠와 더 쉽게 관련될 것입니다. 이것은 거의 생각할 필요가 없지만 신뢰를 구축하고 궁극적으로 사용자가 랜딩 페이지와 상호 작용하도록 설득하는 데 도움이 되는 콘텐츠 작성에서 매우 중요한 단계입니다.

쿠션, 보풀, 마케터, 느낌표 없이 문장을 요약한 간결한 웹 카피를 즐겨 읽는다. 느낌표는 내 페이스북 피드에 있는 푸에르토리코 여행 사진과 같아서 신경쓰이는 듯이 웃겠지만 그렇지는 않습니다. 이 블로그 게시물을 마치는 것과 같은 다른 걱정거리가 있습니다. 또한 푸에르토리코 사진이 형편없으니 더 나은 카메라를 구입하세요!

Conor McGregor의 잽과 같은 카피를 상상해보세요. 정확하게 메시지를 전달합니다.

랜딩 페이지 양식 모범 사례

대상 고객에게 무료 정보를 제공할 때 양식은 사용자 데이터를 수집하는 유일한 방법(1984년식 또는 오웰식 방식이 아님)입니다. 콘텐츠를 게이트하여 리드를 얻으세요!

랜딩 페이지를 만들 때 랜딩 페이지 양식을 종종 간과할 수 있습니다. 모든 형태가 평등하게 만들어지는 것은 아닙니다. 이는 진부한 표현이지만 사실입니다. 양식에 대해 선택한 레이아웃에 따라 읽는 속도와 웹 사이트 방문자의 인지 부하에 영향을 미칠 수 있습니다.

힌트: 인지 부하가 적을수록 좋습니다!

랜딩 페이지 양식의 유형

랜딩 페이지 양식 분석

모든 랜딩 페이지 양식에는 몇 가지 핵심 요소가 있습니다.

양식 제목
레이블
자리표시자 텍스트
입력 필드
텍스트 영역 또는 메시지 상자
전환 버튼/CTA

양식 관련 모범 사례는 연구원들이 고주파/고속 카메라를 사용하여 웹 페이지 뷰어의 눈을 추적하는 다양한 시선 추적 연구에서 나옵니다. 연구를 읽으면 눈이 덜 떠돌아다니게 하는 형태가 더 빨리 읽히는 것을 볼 수 있습니다.

양식의 디자인에 너무 화려하지 마십시오. 그 이유는 우리의 뇌가 의식적으로 인식하는 것보다 모양과 구조를 더 빨리 인식하기 때문입니다. 따라서 양식 요소를 적절하게 배치하고 정렬하되 불필요한 디자인 요소를 추가하지 마십시오. 사용자 속도가 느려질 수 있습니다.

방문 페이지 버튼 모범 사례

버튼은 사용자의 랜딩 페이지 경험을 만들거나 끊을 수 있습니다. 많은 디자이너/개발자, 심지어 나 자신도 버튼을 잘못 만드는(너무 넓거나, 너무 짧게 만드는 등) 죄를 짓고 있습니다.

몇 년 전 iOS 앱을 디자인하기 위해 수행한 일부 사용자 테스트를 통해 랜딩 페이지, 웹 페이지 및 사용자 인터페이스에서 버튼의 시각적 스타일이 얼마나 중요한지 깨닫게 되었습니다.

화면에 너무 많은 항목이 있는 많은 곳에서 버튼은 그래픽처럼 보이고 페이지 속으로 사라집니다. 이러한 이유로 버튼은 사람들이 이전에 본 버튼처럼 보여야 합니다.

이것은 HR Giger의 상상에서 벗어난 것처럼 보이는 호텔의 싱크대 수도꼭지와 유사합니다. 그들은 그들이 어떻게 작동하는지 이해하기 위해 조금 더 생각하게 만듭니다. 사람들은 그 호텔 밖으로 나가지 않고 웹 페이지에서 그냥 돌아가거나 탭을 닫습니다. 버튼을 재발명하지 마십시오.

[clickToTweet tweet="랜딩 페이지의 버튼을 다시 만들지 마세요! 버튼이 버튼처럼 보일수록 더 많은 사람들이 클릭할 것입니다." quote="랜딩 페이지의 버튼을 다시 만들지 마세요! 버튼이 버튼처럼 보일수록 더 많은 사람들이 클릭할 것입니다."]

버튼 있음: 클릭

내 사용자 인터페이스 모토는 " 버튼처럼 보이면 클릭될 것입니다. "이므로 해당 페이지의 다른 항목을 버튼처럼 보이게 만들지 마십시오. 하나의 버튼 또는 기본 클릭 유도문안만 사용하세요.
똑같이 중요하고 관련된 행동을 위해 세 개의 CTA 버튼을 사용해야 하는 경우도 있을 수 있습니다. 그렇게 할 때 히트맵이나 모든 버튼의 전환율 데이터가 뜨거워지는 것에 만족하지 마십시오. 버튼이 있으면 페이지의 어디에 있든 상관없이 클릭될 것입니다. 그리고 하나의 버튼과 두 개의 링크가 있는 경우 다른 두 개를 합친 것보다 버튼 클릭이 더 많이 발생했을 수 있습니다.

F 패턴 버튼 배치

Eye Tracking 연구에 따르면 사람들은 F–Pattern에서 웹 페이지를 스캔하므로 페이지를 효율적으로 만들고 싶다면 해당 위치에 버튼을 배치하십시오. 이것이 우리가 페이지의 오른쪽 상단과 왼쪽 하단에 있는 양식을 사용하는 이유입니다. 이것은 Amazon, GAP 또는 Apple.com에서 볼 수 있는 매우 일반적인 패턴입니다.

콘텐츠를 작성하고 전환하는 CTA를 배치하는 방법을 더 잘 이해하려면 추적 연구를 직접 확인하십시오!

클릭 유도 문안의 사본은 수월해야 합니다. 방문자가 버튼을 누르면 얻을 수 있는 것을 말하십시오. 사용자가 CTA가 지시하는 내용을 파악하기 위해 두뇌를 덜 사용할수록 좋습니다.

방문 페이지 그래픽 모범 사례

그래픽은 사람들이 자신이 방문한 사이트에 프로펠러 비행기나 보잉 777의 사진이 있었다는 것을 기억하는 경우에만 중요합니다. 이미지가 단순할수록 메시지를 더 잘 전달할 수 있습니다. 더 간단하게 말하면 사진의 피사체가 배경과 분리되고 초점이 명확하게 맞아야 한다는 뜻입니다.

그래픽을 사용한 모범 사례는 말하는 것보다 더 잘 보여주므로 다음 예를 확인하십시오.

이러한 그래픽이 모두 랜딩 페이지와 관련된 것은 아니지만 웹 이미지와 매우 관련이 있습니다.

경쟁 요소 제한

그래픽/이미지의 명확성은 정말 중요합니다. 그래픽이나 이미지에 경쟁 요소가 너무 많으면 사용하지 마세요. 사진이나 포토저널리즘 잡지를 보면 대부분의 수상 사진은 피사체가 사진 내의 요소와 시각적으로 분리되어 있거나 그 안에 있는 요소에 의해 프레임이 잡힌 사진입니다.

간단하게 유지하십시오!

그래픽을 명확하고 집중적으로 유지하고 메시지 전달에 도움이 되도록 복잡함보다 단순함을 선택하세요.

TL;DR 랜딩 페이지 모범 사례 요약

랜딩 페이지의 두 가지 유형 - 클릭 연결 및 리드 생성
LP 분석 – 헤더, 양식 상자, FAB, 신뢰성 빌더(로고 또는 사용후기)
랜딩 페이지용 정보 매트릭스 – 얼마나 많은 정보를 원하십니까?
내용/카피
- 콘텐츠 청킹 – 긴 단락을 작은 단락으로 나누고 단락당 하나의 핵심 아이디어를 가집니다. 기억력에 도움이 되고 이해력이 향상됩니다.
- 훑어보기 용이성 – 읽을 수 있는 콘텐츠가 아닌 훑어볼 수 있는 콘텐츠를 디자인합니다. 강조 표시되거나 굵은 키워드, 부제목, 글머리 기호 목록, 단락당 아이디어 제한을 사용하십시오.
- 역피라미드 스타일의 글쓰기 – 사람들에게 말하고 싶은 내용으로 콘텐츠를 시작하세요.
- 고객의 소리 – 대상 고객이 사용하는 언어를 사용하십시오.
양식
- 양식 구조 는 매우 중요합니다. 눈이 덜 떠돌아다니게 만드는 양식 디자인은 더 빨리 읽을 수 있습니다. 내 예를 참조하십시오.
- 요소 정렬 — 요소를 적절하게 정렬하고 적절한 간격으로 유지하되 단순하게 유지합니다.
버튼
- F–패턴 – 대부분의 사람들이 브라우저에서 새 페이지를 볼 때 하는 움직임인 F 모양이 웹 페이지 위에 놓여 있다고 상상해 보십시오.
- 간단한 단어 - 결과를 전달하고 사용자가 생각하게 만들지 마십시오.
제도법
- 단순하게 유지하고 최소한의 요소가 있는 이미지를 사용하며 피사체를 배경과 분리합니다.
- 시차 사용을 중지하십시오 . 아니면 계속 사용하면 우리가 더 좋아 보일 뿐입니다.
보너스: 방문 페이지 최적화를 위해 A/B 테스트를 권장합니다. 랜딩 페이지 제목을 변경하고 버튼을 단순하게 유지하고 컨트롤과 동일하게 유지하십시오. 버튼 카피가 이상하거나 페이지에 명확하게 표시되지 않는 한 해당 버튼일 가능성이 가장 낮습니다.