F 패턴을 사용하여 전환율을 높이는 방법

모든 중요한 클릭 후 방문 페이지 요소를 포함하도록 클릭 후 방문 페이지를 만드는 것이 중요하지만, 마찬가지로 중요한 것은 순서와 위치(클릭 후 방문 페이지의 레이아웃)입니다.

클릭 후 방문 페이지 레이아웃을 디자인할 때 방문자가 페이지를 볼 가능성이 가장 높은 방식을 고려하는 것이 중요합니다. 위에서 아래로 읽는 경향을 인정하는 것은 방문자가 원하는 작업에 집중하도록 하는 좋은 시작입니다. 시선이 어디로 향할지 알면 시각적 계층 구조를 만들고 전환하기에 가장 좋은 위치에 CTA를 배치할 수 있습니다.

이를 뒷받침하기 위한 광범위한 연구도 있었습니다. 2006년에 Nielsen Norman Group은 현재까지 가장 유용하고 가장 많이 인용되는 시선 추적 연구를 수행했습니다. 연구 기간 동안 그들은 232명의 사용자가 수천 개의 서로 다른 웹 페이지를 어떻게 보았는지 조사했습니다. 결과는 사용자의 주요 읽기 행동이 다양한 사이트와 작업에 걸쳐 비교적 일관적이라는 결론을 내렸습니다. 사용자는 F-패턴 레이아웃으로 읽습니다.

F-패턴이란 ​​무엇입니까?

F-패턴은 온라인에서 콘텐츠를 읽을 때 눈이 움직이는 방식입니다. 몇 초 만에 우리의 눈은 웹사이트 사본 및 기타 시각적 요소 전반에 걸쳐 놀라운 속도로 이동하여 다음 순서로 페이지를 스캔합니다.

• 먼저 페이지 상단을 가로질러 중요한 헤드라인을 읽으십시오.
• 그런 다음 페이지 왼쪽 아래로 숫자나 글머리 기호를 봅니다.
• 마지막으로 페이지를 다시 가로질러 굵은 텍스트나 부제목을 읽습니다.

아래의 3가지 히트맵은 3개의 다른 웹사이트에 대한 사용자 시선 추적 연구에서 파생되었습니다. 색상 키는 다음과 같습니다.

• 빨간색 = 가장 많이 보고 가장 많이 고정된 항목
• 노란색 = 약간의 조회수, 그러나 덜 고정됨
• 파란색 = 가장 적게 보고 고정이 거의 없음
• 회색 = 보기가 거의 없고 고정이 없음

F-Reading 패턴은 더 거칠고 일반화된 윤곽선에 가깝습니다. 반드시 정확한 F 모양은 아닙니다. 또한 F-Pattern 디자인은 기존의 F와 같이 두 개의 가로 줄기에 국한되지 않습니다.

사용자가 가로줄 하나만 읽어서 패턴이 거꾸로 된 L처럼 보이는 경우가 있습니다. 다른 경우에는 페이지의 세 번째 섹션을 읽고 디자인이 F보다 E처럼 보이도록 만듭니다. 그리고 , 클릭 후 방문 페이지가 더 긴 경우 사람들이 따를 가능성이 더 높은 시각적 계층 구조를 만드는 데 도움이 되도록 두 개 이상의 줄기를 포함하는 것이 좋습니다.

클릭 후 방문 페이지에 F 패턴이 적용되는 방식

의도적인 흐름으로 웹 페이지를 디자인하는 것이 중요합니다. 시청자의 관심을 끌기 위해 특별히 배치된 것이 없으면 F-Pattern 디자인의 콘텐츠가 많은 페이지로 시선이 자연스럽게 이동합니다.

F-패턴 디자인은 블로그 게시물, 검색 결과 페이지, 긴 판매 페이지 등과 같이 텍스트가 밀집된 페이지에 가장 적합합니다. 그러나 그렇다고 해서 짧은 형식의 클릭 후 방문 페이지를 F 패턴 레이아웃.

시선 추적 연구의 결과를 사용하여 방문자가 가장 중요한 요소에 집중할 가능성이 가장 높은 위치에 가장 중요한 요소가 위치하도록 클릭 후 방문 페이지를 전략적으로 디자인할 수 있습니다.

시청자의 눈은 거의 항상 페이지의 나머지 부분을 스캔하기 전에 페이지의 왼쪽 상단 모서리에서 시작한다는 점을 기억하십시오. 따라서 클릭 후 방문 페이지가 바쁘고 방문자가 특정 요소(예: 제안 카운트다운)를 즉시 알아차리도록 하려면 이 페이지를 왼쪽 상단 섹션에 배치해야 합니다. 그런 다음 명확한 시각적 계층 구조와 시청자를 CTA로 안내하는 흐름으로 클릭 후 방문 페이지의 나머지 부분을 디자인하십시오.

F-패턴을 무시하는 클릭 후 방문 페이지

Pest Exterminator는 이 클릭 후 방문 페이지를 생성했으며 F-레이아웃을 따르지 않습니다. 시각적 계층 구조가 없습니다.

당신의 관심은 먼저 어디로 가나요? 이미지? 할인? 단일 양식 필드? 하단에 세 가지 제안?

당신의 눈은 특정 장소에 끌리지 않습니다. 여러 다른 방향으로 주의를 끌기 위해 너무 많은 일이 일어나고 있습니다. 각 요소는 가능한 한 많은 관심을 끌 수 있도록 형식이 지정되어 서로 경쟁하게 만듭니다. 따라서 방문자가 페이지의 주요 목표를 식별하기 어렵고 Pest Exterminator는 전환 생성에 어려움을 겪을 것입니다.

이제 F-Reading 패턴을 따르는 클릭 후 방문 페이지의 몇 가지 예를 살펴보겠습니다.

더 짧은 클릭 후 방문 페이지의 경우 전체 페이지를 표시했습니다. 더 긴 페이지의 경우 스크롤 없이 볼 수 있는 부분에만 표시됩니다. 또한 나열된 브랜드 중 일부는 아래에 표시된 것과 다른 버전으로 페이지를 A/B 테스트하고 있을 수 있습니다.

F 레이아웃을 따르는 클릭 후 방문 페이지

도비코

위의 Dovico 클릭 후 방문 페이지는 F-Pattern 웹 디자인 모범 사례를 사용합니다. 방문자가 이 페이지를 볼 때 자연스럽게 보게 되는 F-패턴 경로를 따라 각각의 중요한 구성 요소가 정확히 어떻게 위치하는지 확인하십시오.

1. 시청자는 먼저 페이지의 왼쪽 상단에서 회사 로고를 찾습니다.
2. 첫 번째 가로 줄기를 따라 이동하면 여성의 웃는 얼굴이 나타납니다. 여기서 특히 흥미로운 점은 F-Angle이 그녀의 얼굴을 향해 아래쪽으로 기울어져 있고 전화번호와 직접적으로 마주하지 않는다는 것입니다.
3. 페이지 왼쪽 아래로 다음 가로 줄기로 이동하면 시청자는 헤드라인과 부제목에 주의를 집중할 것입니다.
4. 마지막으로 세로 줄기 아래로 F-패턴을 계속 진행하여 클릭 후 방문 페이지의 주요 목표인 CTA 버튼으로 이동합니다.

이와 같이 F-레이아웃을 따라 가장 필수적인 클릭 후 방문 페이지 요소를 배치하면 Dovico의 페이지를 최적화하고 방문자가 제안에 대한 조치를 취하도록 설득하는 데 도움이 됩니다.

동적 수율

Dynamic Yield의 클릭 후 방문 페이지도 F-패턴 레이아웃을 따르지만 이름과 로고가 스크롤 없이 볼 수 있는 부분에서 가장 작기 때문에 시청자의 시선은 다른 위치에서 시작될 가능성이 높습니다.

1. 글꼴이 더 크고 일부가 굵기 때문에 페이지 헤드라인에 먼저 끌릴 것입니다.
2. 다음으로 첫 번째 줄기를 따라 오른쪽 이미지로 이동하여 첫 번째 가로 줄기가 완성됩니다.
3. 세로 줄기를 스캔하면 시청자가 부제목을 읽게 됩니다.
4. 계속해서 아래로 내려가면 밝은 파란색 CTA 버튼이 방문자의 주의를 끌 것 같습니다.
5. CTA 버튼 다음에는 고객 배지가 추가 줄기 역할을 하며 페이지는 스크롤 없이 볼 수 있는 부분에서 유사한 방식으로 계속됩니다.

관절 카이로프랙틱

F-패턴 디자인이 항상 전통적인 F-자형을 따를 필요는 없기 때문에 Joint Chiropractic post-click 방문 페이지에 가로 줄기가 얼마나 많은지 확인하십시오.

1. Dynamic Yield와 유사하게, 헤드라인은 F-패턴을 시작합니다(그리고 양식과 함께 오른쪽으로 계속됩니다).
2. 둘째, 사명 선언문(나머지 사본보다 큰 활자로)은 다음 줄기에 해당합니다.
3. 마지막으로 관절 카이로프랙틱의 도상과 대담한 이점이 패턴의 마지막 줄기를 구성합니다.

더 많은 수의 줄기에도 불구하고 페이지는 F-Pattern 웹 디자인 모범 사례를 염두에 두고 만들어졌습니다. 따라서 방문자가 클릭 후 방문 페이지의 가장 중요한 부분을 따르고 집중할 수 있습니다.

보스턴 글로브

Boston Globe의 클릭 후 방문 페이지는 일반적인 F자 모양을 따르지 않으므로 궁극적으로 방문자가 프로모션에서 전환하도록 설득하는 데 도움이 됩니다.

1. 방문자는 왼쪽 상단 모서리에서 시작하여 신문 로고를 가장 먼저 찾습니다.
2. 로고 바로 아래에는 헤드라인이 있고 동일한 가로 줄기를 따라 이미지가 뒤따릅니다.
3. 수직 줄기를 계속 내려가면 방문자는 밝은 녹색 CTA 버튼에 시선을 고정합니다.
4. 수직 줄기 아래로 계속 진행하기로 선택하면 무제한 액세스에 등록할 때 무엇을 기대할 수 있는지 알게 됩니다.

F-패턴을 사용할 차례입니다.

필요한 클릭 후 방문 페이지 요소를 모두 포함하는 것은 전환에 중요하지만 레이아웃도 마찬가지로 중요합니다.

F-패턴 디자인은 방문자가 특정 요소에 집중할 수 있도록 시각적 계층 구조와 의도적인 흐름을 설정하는 데 도움이 됩니다. 그들이 원하는 경로를 따르도록 할 수 있다면 이탈할 가능성이 줄어들고 대신 페이지에서 더 많은 참여와 조치를 취할 것입니다.

이러한 예를 염두에 두고 F-Layout을 실제로 적용할 차례입니다. Instapage를 사용하여 전문적인 클릭 후 방문 페이지를 만들고 지금 엔터프라이즈 데모를 요청하십시오.