스크롤되지 않는 화면(Above the fold)에 CTA(Call-to-Action)을 위치하는 것이 왜 근거 없는 믿음인가?

1997년 제이콥닐슨이 인터넷 사용자의 20%만이 스크롤하여 화면 아래(Below the fold)본다는 연구 조사를 발표한 후,  특정 해상도를 기준으로 모든 CTA(Call-to-Ation), 다시 말해 전환(Converting)을 일으킬 수 있는 행위를 만들어 내는 장치들을 한 화면에 위치시키는 것이 당연시 되고 있었습니다. 

최근 사내에서 랜딩페이지 최적화(landing page optimize, LPO)와 관련된 몇 가지 사례들을 조사하던 중  제이콥닐슨의 연구 조사와 달리, CTA를 배치했으나, 구매 전환율을 크게 개선한 흥미로운 몇 가지 사례가 있어,  번역해 공유합니다.

웹디자인, 온라인마케팅 또는 전환율 최적화(coversion-rate optimization)에 대해서 배운적이 있었다면, 폴드(fold)아래에 절대로 CTA(call to action)을 위치시키지 말라는 이야기를 들었을 것입니다.

실제로 마케팅에 대해서 충분히 알고 있는 웹 디자이너가 속한 CTA를 처음 활용하기 시작한 산업군에서 엄청나게 많은 사이트들이 매우 유사하게 시작됩니다. 여기 훌륭한 예가 있습니다. 인터넷 기반의 기술기업의 웹사이트 입니다. 아래의 사례들은 유사점을 가지고 있지 않나요?

2014-01-28 09-40-28-358

2014-01-28 09-42-39-312

헤드라인, 두 문장의 카피, 이미지와 비디오, 그리고, CTA(Call To Action)버튼-  같은 세로 600 픽셀. 아래의 화면은 어떤가요?

다른 칼라와 텍스트를 가지고 있지만 거의 유사한 레이아웃입니다.

하지만, 항상 동일하지는 않습니다. 때로는 컨텐츠를 뒤집어 배치하기도 합니다!

2014-01-28 09-45-15-077

이러한 레이아웃이 적절하지 않다고 주장하는 하거나 특정 사이트가 잘못되었다고 주장하는 것이 아닙니다. 그러나, “브라우저의 보이는 부분(above the fold)에 CTA(Call To Action)’을 유지”하는 것을 기반으로 하는 트렌드에 대해서 걱정하는 것입니다.

그러한 트렌드가 잘못되었다면 어찌될까요? CTA(Call To Action)이 폴드(fold)아래에 위치하는 것이 더 나은 선택이라면 어떻게 해야 하나요?

아래의 예처럼 가장 아래에 CTA가 위치해 있습니다. 이러한 배치로 전환율이 20% 향상되었습니다.

Cap 2014-01-28 10-05-56-304

CTA은 반드시 fold위에 위치해야 한다는 것을 들어보았을 것입니다. 이것이 이른바 “best practice”입니다. 당신의 웹페이지에 적용해 보길 추천합니다.

만일 단순히 기계적으로 CTA를 폴드위에 배치한다면, 당신은 잠재 고객들 에게 그들이 왜 클릭해야 하는지 보여주기전에 혹은 당신이 구매하도록 요청하는 것이 무엇인지 알기도 전에 강요하는 것일 수도 있습니다.

또한 아래의 예처럼 CTA를 폴드(fold)와 아주 먼 아래쪽에 배치하였을 때, 전환율이 304%상승하였다는 것은 무엇을 의미할까요?

Cap 2014-01-28 10-24-29-823

어떻게 이러한 것들이 가능할까?

제이콥 닐슨(사용성의 거장) 폴드 아래를 읽는 사람들은 20% 정도라고 이야기 했습니다. 80%의 사용자 집중은 폴드의 위에서 발생한다. 어떻게 20%밖에  집중을 얻지 못하는 영역에서의 CTA가 80%의 주목을 얻는 영역보다 전환이 더 많은 것이 가능할까?

데이비드 오길비는  “평균적으로 본문의 카피 보다 다섯배나 많은 사람들이 헤드라인의 카피를 읽는다.”라고 표현하였습니다.

그는 또한 “조사 결과는 카피의 단어가 50개가 넘을 때 까지 빠르게 독자가 줄어들지만, 50~500사이의 단어 사이에서는 매우 천천히 줄어든다는 것을 보여준다.”라고 강조했습니다.

이것은 50개의 단어안에서 모든 것을 설명할 수 없다면 500개 단어까지는 충분히 설명을 하는 것이 오히려 효과적이다 라는 것입니다.

500단어의 카피는 16px 또는 75글씨 크기(영문기준)와 150%의 줄높이로 세팅되었을 때, 최소한 1,000pixel의 세로 공간이 필요하기 때문에 굉장히 중요한 인사이트입니다. – full-HD 해상도에서도 CTA은 폴드아래에  위치하게 됩니다.(크롬은 최소 68픽셀이 증가하지만, 1366*768해상도가 가장 일반적으로 사용된 이후로 세로 픽셀이 약 700px보다 아래에 위치한 모든 것들은 폴드 아래-below the fold 라고 보는 것이 합리적입니다.)

제이콥 닐슨이 1997년에 증명한바 처럼 폴더위(above the folder)에서 그들이 보는 것들이 충분히 흥미롭다면 그들은 계속해서 읽을 것이라는 것은 문제의 여지가 없습니다.

폴드(fold)와는 아무 상관이 없다.

폴드는 실제로 관심을 다른곳으로 돌리지 못합니다. 그것은 전환율(coversion rates)에서 CTR까지 영향을 미치는데 상관 관계가 없습니다.

폴드의 아래(below the fold)에 CTA가 위치하는 것이 전환율이 좋다고 명확하게 보여주지 않았냐고요? 실제 그렇게 이야기 한적이 없습니다. – 이제부터 전혀 새로운 것을 보여드리겠습니다.

첫번째로 나의 관점을 증명하기 위한 클래식 샘플이 있습니다. 두 가지의 보스톤 글로브(Boston Globe)회원가입 페이지중 어느것이 전환율이 좋을까요?

Cap 2014-01-28 14-02-56-998

CTA이 바닥에 있는것과 CTA이 폴드위에 있는 것. 정답은 두 가지 타입에 있어, 전환율에 특별한 차이점이 없다는 것입니다.

두 가지 타입은 왜 폴드가 특별한 관계가 없는지에 대한 꽤 적절한 단서를 제공해 줍니다. – 그리고 무엇이 CTA를 통해 전환을 만들어 내는 결정적인 요소인지 보여줍니다.

그것은 전적으로 동기부여에 달려있다.

버튼의 클릭을 하고자 하는 사용자에게 어떻게 동기를 부여할까요?  어떻게 고객 또는 잠재고객이  당신의 제안을 찾고 클릭할수 있도록 할 수 있을까요?

다시 말해서 폴드 아래에 있는 CTA가 전환율이 좋다는 예를 통해 보여준 것은 폴드 아래에 있는 CTA가 전환율이 좋다는 것이 아니다. –고객들이 더 많은 카피를 읽을 난 후에 행동에 대한 동기가 더 많이 부여된다는 것이다.

높은 전환율은 버튼이 폴드위에 있는지 여부보다는 버튼이 제대로 된 좋은 카피의 아래에 위치하느냐와 밀접하다.

이런 까닭으로 다음과 같은 질문이 가능합니다. 그렇다면 얼마나 많은 카피가 필요할 것인가? 그리고, 그것은 대답하기 어렵지 않습니다. 왜냐하면 카피의 길이보다 CTA를 통해서 사용자가 얻을 수 있는 가치가 무엇인가, 카피는 그 가치에 대해서 적절한 어투로 설득력있게 작성되어 있느냐가 중요하기 때문입니다.

출처 ; kissmetrics


Leave a Reply

Your email address will not be published.