Nielsen Norman Group의 연구에 따르면, 사용자는 페이지를 보는 시간의 57%를 Above-the-Fold(스크롤 전 첫 화면)에서 보냅니다. 첫 화면 이후에는 주의력이 급격히 떨어집니다. 랜딩 페이지의 경우 이 수치는 더욱 극단적입니다. 방문자는 단 2~3초 만에 페이지에 머물지 아니면 이탈할지를 결정합니다.
즉, Above-the-Fold 디자인은 방문자를 붙잡을 수 있는 사실상 유일한 기회라는 뜻입니다.
시선 추적(Eye-Tracking) 연구가 밝혀낸 사실
Djamasbi et al. (2010)의 시선 추적 연구는 Above-the-Fold에서 주의를 끄는 요소들을 다음과 같이 확인했습니다.
| 요소 | 평균 고정 시간 | 첫 시선 고정 비율 |
|---|---|---|
| 히어로 이미지 / 비주얼 | 1.2초 | 67%가 이곳을 먼저 봄 |
| 메인 헤드라인 | 0.8초 | 22%가 이곳을 먼저 봄 |
| CTA 버튼 | 0.4초 | 3%가 이곳을 먼저 봄 |
| 네비게이션 | 0.3초 | 8%가 이곳을 먼저 봄 |
히어로 비주얼이 가장 많은 주의를 끌지만, 실제 전환은 CTA에서 일어납니다. 핵심 과제는 히어로 → 헤드라인 → CTA로 이어지는 시각적 경로를 설계하는 것입니다.
높은 전환율을 만드는 첫 화면의 5가지 요소
1. 욕구를 자극하는 히어로 비주얼
히어로 이미지는 제품 자체가 아니라 제품을 통한 결과를 보여주어야 합니다. Adaval & Wyer (1998)의 연구에 따르면, 최종 상태(제품을 사용하며 행복해하는 고객)를 묘사한 이미지는 제품만 찍은 사진보다 구매 의향을 2배 더 높이는 것으로 나타났습니다.
2. 단 하나의 가치 약속을 담은 헤드라인
Copyhackers의 전환 카피라이팅 연구에 따르면, 방문자의 내면의 목소리와 일치하는 헤드라인은 일반적인 가치 제안보다 3~5배 더 높은 성과를 냅니다. 헤드라인은 "나는 ~해줄 무언가가 필요해"라는 문장을 완성할 수 있어야 합니다.
3. 시선을 유도하는 시각적 계층 구조
웹 디자인의 시각적 계층 구조에 관한 Faraday (2000)의 연구는 크기, 대비, 위치가 측정 및 최적화 가능한 '읽기 순서'를 만든다는 것을 보여줍니다. 흐름은 '시각적 앵커 → 문제/해결책 → CTA' 순이어야 합니다.
4. 대비를 극대화한 CTA
Ling & van Schaik (2006)은 배경과 색상 대비가 가장 높은 CTA 버튼이 특정 색상과 관계없이 21% 더 많은 클릭을 받는다는 것을 발견했습니다. 중요한 것은 색상 자체가 아니라 대비입니다.
5. Above-the-Fold에 배치하는 사회적 증거
Klucharev et al. (2009)의 연구에서 알 수 있듯이, 신뢰 신호(고객 수, 평점, 로고 바)를 Above-the-Fold에 배치하면 전두엽 피질의 위험 평가 반응이 줄어듭니다. "10,000명 이상의 마케터가 신뢰하는 서비스"와 같은 한 줄의 문구만으로도 전환율을 15~20% 높일 수 있습니다.
랜딩 페이지 테스트하기
랜딩 페이지 URL을 FlowDx에 붙여넣어 방문자의 시선이 정확히 어디로 향하는지 확인해 보세요. 주의력 히트맵을 통해 CTA가 '핫 존(Hot Zone)'에 있는지, 아니면 다른 요소들에 묻혀 있는지 알 수 있습니다.
참고 문헌
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.