효과적인 방문 페이지를 디자인하는 방법

방문 페이지는 방문자를 단일 작업으로 유도하는 한 페이지 웹사이트로 설명할 수 있습니다. 단일 목적에 대한 이러한 초점은 방문 페이지를 다른 웹사이트와 다르게 만드는 주요 기능입니다.

그들의 주요 목표는 종종 이메일 및 소셜 미디어 캠페인과 연결된 리드를 생성하고 이러한 리드를 구매자와 구독자로 전환하는 것입니다. 방문자를 리드 및 구매자로 전환하는 프로세스는 일반적으로 클릭 유도문안 버튼과 리드 생성 양식으로 수행됩니다.

랜딩 페이지는 인터넷 방문자가 귀하의 사이트에서 수행하기를 원하는 중요한 행동을 하기 위해 처음 도착하는 웹페이지입니다. Tim Ash, Landing Page Optimization

랜딩 페이지는 Microsoft가 Office 제품군에서 경험한 저조한 ​​판매에 대한 응답으로 시작되었으며 이제 전자 메일 마케팅 솔루션, 고객 관리 및 리드 캡처 기능이 표준이 되고 마케팅을 통해 고객을 유지하고 확보하기 위한 강력한 도구가 되는 지점까지 확장되었습니다. 및 디자인 기술.

좁고 다소 기본적인 형태의 고객 확보 및 판매이지만 랜딩 페이지는 계속해서 마케터가 사용하는 가장 강력한 도구 중 하나입니다.

효과적인 방문 페이지는 다음과 같은 전환 및 판매 지향 작업에 사용됩니다.

• 신제품 홍보
• 늘어나는 구독자 목록
• 매출 및 리드 증가
• 양식을 통한 통찰력 및 데이터 캡처

랜딩 페이지 디자인 모범 사례

랜딩 페이지는 일반적인 웹사이트와 매우 유사하지만 다른 용도로 사용됩니다. 다음은 방문 페이지를 멋지게 만들고 전환율을 높이는 데 도움이 되는 주요 특성입니다.

1. 시각적 단순성

시각적 단순성은 랜딩 페이지 사용자 인터페이스의 모든 요소를 ​​고려합니다. 시각적 단순성과 미니멀한 디자인을 유지하는 것은 방문자의 집중도를 높이고 가치 제안을 보여주는 데 도움이 되기 때문에 중요합니다. 다음은 시각적 단순성의 몇 가지 특징입니다.

• 시각적 단순성은 방문자를 다른 요소와 격리하여 클릭 유도문안(CTA)에 집중하는 공백을 유지합니다.
• 시각적 단순성으로 인해 주요 기능과 클릭 유도문안이 눈에 띄게 됩니다.
• 시각적 단순성은 요소를 눈에 띄게 표시하여 대비를 만듭니다.
• 시각적 단순성은 사용자가 계속 읽을 수 있도록 요소를 배치하여 디자인 흐름을 유지합니다.

2. 훌륭한 랜딩 페이지는 훌륭한 미디어에서 시작됩니다.

방문 페이지의 올바른 이미지와 비디오는 방문자가 클릭 유도문안에 따라 행동하도록 설득하는 데 도움이 됩니다. 훌륭한 이미지는 이야기를 전달하는 데 도움이 되고 제품을 효과적으로 시연하며 방문자와 개인적인 관계를 형성합니다.

표시된 이미지의 관련성이 중요합니다. 일반 스톡 이미지 대신 친근하고 실제 사람의 이미지를 표시하면 방문자의 신뢰를 구축하는 데 도움이 됩니다. 관련 제품 및 서비스 이미지를 포함하면 방문자가 구매하는 제품을 더 잘 이해할 수 있습니다.

랜딩 페이지에 대한 비디오의 영향에 대한 연구에 따르면 비디오는 정지 이미지보다 더 큰 영향을 미치며 "응답자의 71%는 비디오가 다른 콘텐츠보다 더 잘 전환된다고 확인했습니다." 비디오는 SEO에 도움이 되고 사용자 참여를 유지하며 방문자에게 제품 또는 서비스를 더 잘 설명합니다. 비디오를 선호하는 또 다른 요소는 잘 사용하면 잠재적으로 전환을 저해할 수 있는 장황한 사본을 대체할 수 있다는 것입니다.

3. 색상의 중요성

연구에 따르면 색상은 우리의 심리학, 즉 우리가 느끼고 행동하는 방식에 큰 영향을 미칩니다. 적절한 색상 팔레트는 사용자 인터페이스를 개선하고 사용자 행동을 안내하여 결과적으로 방문 페이지 전환을 개선합니다.

다음은 색상을 효과적으로 사용하는 방법에 대한 몇 가지 팁입니다.

• 복사 가독성과 직접적인 관련이 있는 고대비 생성을 가능하게 하는 높고 낮은 색상을 사용하는 방법을 이해합니다.
• 호환되는 색상 조합으로 구성되고 보색/반대 색상을 기반으로 하는 색상 팔레트를 만듭니다.
• 심리학과 마케팅의 관점에서 색상을 다룹니다. 제품/서비스에 따라 적절한 메시지를 전달하는 색상을 사용하십시오(예: 녹색은 안정감, 신뢰, 침착함을 전달하는 색상이므로 금융 관련 상품에 가장 적합합니다).
• 다양한 인구 통계를 대상으로 할 때 색상 상징을 고려하십시오. 다양한 문화권은 색상을 다르게 해석하므로 한 사용자 기반에서 작동하는 것이 다른 사용자 기반에서는 작동하지 않을 수 있습니다.
• 색상 해석은 성별에 따라 다르며 하나를 선택할 때 "방탄" 솔루션이 없다는 것을 이해하십시오.

5. 랜딩페이지 반응형 디자인

반응형 웹사이트가 업계의 표준이 된 지 몇 년이 지났고 랜딩 페이지도 예외는 아닙니다. 반응형 랜딩 페이지는 전체 화면 레이아웃에서와 동일한 수준의 사용자 경험과 UI를 모바일 장치에서 제공하기 위한 것입니다.

모바일 장치를 통한 온라인 구매가 증가하고 있으므로 모바일은 곧 쇼핑 및 온라인 구매의 주요 트래픽 소스가 될 것입니다. 방문 페이지는 전환 지향적이므로 모바일 잠재고객의 잠재력을 이해하고 해당 트래픽 유입경로에 적응하는 것이 중요합니다.

다음은 방문 페이지 반응형 디자인 통계와 관련하여 모바일 사용자의 비율을 보여주는 그래프입니다.

랜딩 페이지를 제공하는 대부분의 서비스는 이미 응답성을 템플릿에 통합했지만 독립형 랜딩 페이지를 디자인하기로 결정했다면 랜딩 페이지 디자인 모범 사례에서는 응답성이 절대적으로 필요하다고 요구합니다. 이유는 다음과 같습니다.

• 반응형 레이아웃은 기본 방문 페이지에서와 같이 기능 및 콘텐츠 패리티를 제공합니다.
• 반응형 랜딩 페이지는 모바일과 태블릿에서 유입되는 엄청난 양의 트래픽을 활용합니다.
• 반응형 방문 페이지는 트래픽을 유도하는 SMM 캠페인과 잘 통합됩니다.
• 반응형 랜딩 페이지는 레이아웃 복잡성이 줄어들기 때문에 더 쉽게 구축할 수 있습니다.

콘텐츠 – 훌륭한 랜딩 페이지의 기초

1. 시선을 사로잡는 간결한 헤드라인

헤드라인은 방문자가 랜딩 페이지에 도달했을 때 가장 먼저 보게 되는 것이며 방문자의 참여를 유도하는 효과적인 방법입니다. 헤드라인을 방문자를 잡거나 잃는 "후크"로 간주하십시오.

랜딩 페이지에 있는 처음 몇 초 동안 독자의 참여를 유도하지 않으면 독자를 잃게 됩니다. 인상을 주는 것 외에도 가장 눈에 띄는 요소인 헤드라인은 본질적인 메시지와 독특한 판매 제안을 전달해야 합니다.

효과적인 방문 페이지 제목은 다음과 같습니다.

• 설득력 있고 눈길을 사로잡는
• 간단하지만 명확하고 어떤 문제를 해결하는지 설명합니다.
• 긴박감을 전한다

2. 강력한 행동 촉구

클릭 유도문안 버튼은 훌륭한 랜딩 페이지의 핵심 구성 요소이며 제품 또는 서비스와 사용자 간의 주요 게이트웨이 역할을 합니다.

다음 팁을 적용하여 CTA "버튼 게임"을 개선할 수 있습니다.

• 스크롤 없이 볼 수 있는 부분 위에 유지하고 기본 CTA에 중점을 둡니다. 방문자가 원하는 작업을 수행할 수 있도록 항상 쉽게 만드십시오.
• 암시적인 이미지와 시각적 단서를 사용하여 방문자를 CTA로 안내합니다.
• 대비를 만들어 CTA 버튼을 돋보이게 하는 강하고 밝은 색상을 사용합니다.
• 클릭 유도문안에는 "지금 시작" 및 "지금 무료 견적 받기"와 같이 자연스럽고 실행 가능한 문구를 사용하십시오. "제출" 및 "보내기"와 같은 간단한 구문은 변환 측면에서 효과적이지 않으므로 사용하지 마십시오.

3. 심리적 측면

모든 사람은 심리적 원칙과 규칙의 적용을 받습니다. 사람들의 동기, 욕망, 신념 및 편견은 특정 선택을 하도록 이끕니다. 이러한 선택은 의식적이든 무의식적이든 다양한 요인의 영향을 크게 받으며 영향을 미치는 방법이 있습니다.

• 사용자의 컨텍스트와 관련된 공감적인 이미지를 사용합니다. 이것은 감정적 수준에서 더 나은 연결을 허용하고 사용자에게 공감의 감정을 전달합니다.
• 헤드라인 및 클릭 유도문안 버튼과 같은 랜딩 페이지의 핵심 요소는 사용자에게 가치와 긴박감을 제공해야 합니다. 이것은 적절한 사본을 작성하고 대비되는 색상을 사용하여 달성할 수 있습니다.
• 신뢰 배지, 등급 및 상과 같은 위젯은 스크롤 없이 볼 수 있는 부분에 표시되어야 합니다. 이것은 신뢰감을 전달합니다.
• 관련 후기를 표시하는 것은 방문자에게 사회적 증거로 작용하고 신뢰성과 신뢰성을 높입니다.
• 서비스 또는 제품과 관련된 로고 및 브랜드를 표시하면 사회적 증거를 통해 신뢰를 구축하는 데 도움이 됩니다.

4. 랜딩 페이지에서 사람 사용

방문 페이지에서 더 많은 것을 얻기 위해 사용할 수 있는 다양한 심리적 측면 외에도 사람과 친근한 얼굴을 사용하는 것은 더 높은 방문 페이지 전환율을 위한 입증된 기술입니다.

사물이나 스톡 이미지 대신 실제 일상적인 사람의 사진을 사용하면 보다 개인적인 관계를 형성하고 방문자로부터 더 많은 공감을 이끌어내는 데 도움이 됩니다. 사람들은 일반적으로 감정적이고 무의식적인 수준에서 결정을 내리기 때문에 이미지를 통해 감정적 연결을 만드는 것은 매우 강력한 기술입니다.

웹 디자인에서 인간 이미지의 사용을 탐구한 연구에 따르면 얼굴 특징을 포함하는 웹사이트는 웹사이트가 신뢰할 수 있고 따라서 더 매력적이라는 인식을 자극합니다.

CTA에 주목하는 또 다른 좋은 방법은 헤드라인과 클릭 유도문안 버튼을 보고 있는 사람들의 이미지를 사용하는 것입니다. 이 기술을 사용하면 사용자가 중요한 CTA를 더 쉽게 볼 수 있고 더 높은 전환율의 랜딩 페이지로 이어집니다.

랜딩 페이지 디자인의 일반적인 실수

1. 이미지가 없거나 품질이 낮은 그래픽

그림은 천 마디 말의 가치가 있습니다. - 속담

연구에 따르면 사람들은 이미지를 더 잘 인식하고 기호는 텍스트보다 1,000배 이상 빠르게 인식하여 고품질 이미지와 비디오를 사용해야 함을 강조합니다. 일반, 픽셀화, 날짜가 지정된 이미지 및 스톡 사진은 신뢰성을 떨어뜨리고 신뢰성을 감소시키며 독자의 눈에 랜딩 페이지의 진정성을 떨어뜨립니다.

2. 너무 많은 콘텐츠와 복잡성이 있는 페이지 레이아웃

방문 페이지는 사용하기 쉽고 빠르게 이해해야 합니다. 스크롤하기 너무 복잡하고 스캔하기 어렵고 UI 요소로 과부하가 걸리는 레이아웃은 가치를 거의 제공하지 않으며 방문 페이지 전환을 크게 감소시킵니다. 탐색 모음, 바닥글 및 유사한 요소와 같은 일반적인 웹 사이트 요소를 사용하기로 결정하는 것은 사례별로 이루어져야 합니다.

사용자의 관점을 이해하면 디자인의 약점을 보다 효과적으로 발견하고 페이지 흐름을 보다 직관적으로 만들고 랜딩 페이지를 스캔하는 프로세스를 덜 어렵게 만듭니다.

방문 페이지 A/B 테스트는 방문 페이지 레이아웃을 개선하는 데 적용할 수 있는 통찰력을 수집하는 좋은 방법입니다. 또 다른 옵션은 F-Shaped 및 Z-Shaped 패턴 레이아웃과 같은 증거 기반 UX 디자인 기술을 사용하는 것입니다.

이러한 유형의 레이아웃은 일반적인 사용자 상호 작용 패턴을 보여주는 데이터로 철저히 분석되고 백업되었습니다. 앞으로 연구 데이터를 적용하면 사용자가 랜딩 페이지의 콘텐츠와 상호 작용하는 능력이 크게 향상됩니다.

3. 스캔할 수 없는 사본

방문 페이지의 좋은 카피는 방문자에게 명확하고 직관적인 경험을 제공하는 데 필수적입니다. 잘 쓰여진 카피는 암시적일 뿐만 아니라 흥미진진합니다. 마케터, 디자이너 및 비즈니스 소유자가 훌륭한 카피의 가치를 이해하기 때문에 랜딩 페이지용 카피를 작성하는 것은 큰 수요가 있습니다.

고객 중심 카피의 중요한 원칙은 스토리텔링입니다. 너무 많은 텍스트, 문법적 실수, 깨지지 않은 텍스트의 큰 본문, 지루한 어조는 방문 페이지의 성능을 저하시킬 수 있습니다. 방문객들은 카피가 자신에게 맞춰져 있고 설득력 있는 이야기를 들려준다면 당신을 더 신뢰하게 될 것입니다.

요약

랜딩 페이지는 본질적으로 방문자를 확보 및 유지하고 방문자를 구매자 및 구독자로 전환하는 것에 관한 것이며 현재 마케터가 리드를 수집하는 데 사용하는 가장 인기 있는 도구 중 하나입니다.

다양한 마케팅 및 디자인 기법의 사용은 사용자의 참여에 강력한 영향을 미칠 수 있습니다. 이 기사에서 설명하는 랜딩 페이지 디자인 기술과 심리학 원칙은 실제 데이터에 의해 뒷받침되며 효과적이고 전환율이 높으며 결과 지향적인 랜딩 페이지를 보장하는 것으로 입증되었습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법