공백: 적은 비용으로 전환 및 영향을 극대화하는 방법

게시 됨: 2017-03-02

아무 것도 성취할 수 없는 것처럼 보이는 날이 있었습니까? 동료의 주의를 산만하게 하는 것, 너무 많은 배경 소음, 지속적인 이메일 알림은 모두 작업을 완료하는 데 방해가 될 수 있습니다. 이런저런 이유로 집중하기 어렵고 자신이 엄청나게 비생산적이라는 것을 알게 됩니다.

많은 사람들이 자신의 조용한 공간에 혼자 있을 때 최선을 다하는 것처럼 클릭 후 방문 페이지 구성 요소도 마찬가지입니다. 클릭 후 방문 페이지 요소는 다른 요소나 방해 요소가 없이 격리되어 있을 때 목적에 가장 잘 부합합니다. 그냥 빈 공간 - 공백.

클릭 후 랜딩 페이지 요소는 다른 요소나 방해 요소 없이 분리되어 있을 때 목적에 가장 잘 부합합니다.

트윗하려면 클릭

공백: 무엇이며 왜 사용해야 합니까?

빈 공간 또는 음수 공간이라고도 하는 공백은 웹 페이지에서 특정 요소를 강조 표시하거나 주의를 끄는 데 도움이 되는 영역입니다.

공백 그래픽 디자인은 사람들이 클릭 후 개별 방문 페이지 요소에 집중하게 만듭니다. 왜냐하면 근처에 볼 것이 없기 때문에 거기에 있는 것을 볼 수밖에 없기 때문입니다.

공백이 반드시 "흰색"은 아니라는 점에 유의하는 것이 중요합니다. 단순히 비어 있고 표시되지 않은 공간입니다. 다른 요소를 구분하고 강조 표시하는 요소와 대비되는 한 모든 색상이 가능합니다.

공백 디자인의 심리학

여백이 어수선함을 크게 줄이고 웹 페이지를 미학적으로 보기 좋게 만들지만; 다음을 포함하여 여러 다른 기능적 목적도 제공합니다.

  • 가독성 향상
  • 향상된 초점
  • 제안에 대한 더 큰 이해
  • 향상된 사용자 경험

우리가 그 당시에 그것을 인식했는지 여부에 관계없이 부정적인 공간은 우리의 정신을 두드려 이러한 목적을 수행합니다. 이 공간은 페이지의 콘텐츠를 처리하는 동안 시청자에게 시각적 휴식을 제공합니다. 한 번에 너무 많은 정보나 시각적 데이터가 인지 피로(정보 과부하라고도 함)를 유발하여 뇌가 정보를 전혀 흡수하고 유지하기 어렵게 만들기 때문에 이는 중요합니다.

덜 복잡하고 덜 산만해지면 우리의 두뇌가 정보를 받아들이고 처리하고 가장 중요한 것에 더 잘 집중하기가 훨씬 더 쉬워집니다.

공백이 없는 클릭 후 방문 페이지

좋은 첫인상을 남기지 못하면 총 전환수와 궁극적으로 수익에 많은 비용이 소요될 수 있습니다. 따라서 클릭 후 방문 페이지에 공백의 좋은 예를 보여주기 전에 거의 포함되지 않는 이 LogiGear 클릭 후 방문 페이지를 살펴보겠습니다.

이 그림은 LogiGear가 더 나은 사용자 경험을 만들고 전환율을 높이기 위해 공백을 사용하지 못하는 방법을 보여줍니다.

이 페이지의 첫인상은 어땠나요? 숨을 쉴 틈 없이 모든 것이 꽉 차 있기 때문에 다소 압도적입니다. 탐색하고 중요한 것에 집중하고 제안을 이해하기 어렵게 만듭니다. 마치 디자이너가 스크롤 없이 볼 수 있는 부분에 모든 것을 표시하고 매우 균형 잡힌 페이지를 가지려고 하여 가독성을 완전히 떨어뜨리는 것과 같습니다.

클릭 후 방문 페이지 디자인으로 하지 말아야 할 일을 살펴보았 으므로 이제 공백의 몇 가지 훌륭한 예를 살펴보겠습니다.

공백이 최적화에 도움이 되는 요소는 무엇입니까?

공백은 방향 신호 역할을 하고 방향 신호는 클릭 후 방문 페이지의 가장 중요한 요소를 가리키는 시각 보조 장치입니다. 공백으로 강조 표시해야 할 가장 중요한 요소는 다음과 같습니다.

표제

클릭 후 방문 페이지 헤드라인은 시청자가 도착했을 때 가장 먼저 보게 되는 요소이기 때문에 주의를 사로잡아야 합니다. 헤드라인을 둘러싸는 적절한 여백이 있으면 헤드라인이 방문자의 주의를 더 빨리 사로잡을 수 있습니다.

BigMarker는 이 무료 평가판 클릭 후 방문 페이지 전체에 빈 공간을 많이 만들었습니다. 이 스크린샷은 스크롤 없이 볼 수 있는 부분에 표시되며 페이지에서 튀어나와 헤드라인 과 양식이 즉시 주의를 끄는 방법을 보여줍니다.

이 그림은 마케팅 담당자에게 BigMarker가 공백을 사용하여 헤드라인과 리드 캡처 양식에 주의를 집중시켜 클릭 후 방문 페이지 전환을 증가시키는 방법을 보여줍니다.

소프트웨어 스크린샷

공백은 종종 회사 소프트웨어의 스크린샷, 제품 이미지 또는 서비스를 시연하는 비디오를 중심으로 디자인됩니다. 참여 미디어는 전환을 유도하는 데 큰 역할을 하기 때문에 브랜드가 미디어 주변에 부정적인 공간을 추가하여 시청자가 쉽게 알아볼 수 있도록 하는 것은 드문 일이 아닙니다.

이 OfficeX 클릭 후 방문 페이지의 소프트웨어 이미지는 상당한 빈 공간으로 둘러싸여 있기 때문에 페이지를 아래로 스크롤할 때 시청자의 주의를 끕니다.

이 그림은 마케터에게 OfficeX가 여백을 사용하여 소프트웨어 스크린샷을 강조 표시하고 클릭 후 방문 페이지에서 가독성을 높이는 방법을 보여줍니다.

카운트 다운 타이머

카운트다운 타이머는 사람들이 고갈된 것을 원하는 경향이 있기 때문에 의도적으로 긴박감과 희소성을 조성합니다. 타이머는 다양한 제안(웹 세미나 등록, 특별 이벤트 등록, 가격 할인 등)에 사용할 수 있으며 전환을 생성하는 데 매우 설득력이 있기 때문입니다. 방문자에게 뛰어드는 것이 중요합니다.

다음은 카운트다운 타이머와 함께 충분한 음수 공간을 사용하는 Exact Data의 예입니다. 방문자가 제안이 만료되기 전에 마감일을 알 수 있도록 합니다.

이 그림은 마케터에게 Exact Data가 공백을 사용하여 가격 할인 제안에 대한 카운트다운 타이머에 주의를 환기시키는 방법을 보여줍니다.

리드 캡처 양식

리드 캡처 양식은 가장 중요한 클릭 후 방문 페이지 요소 중 하나이므로 가능한 한 많은 관심을 끌기 위해 공백을 많이 사용하여 강조 표시하는 것이 좋습니다.

이 Stackla 클릭 후 방문 페이지에서 방문자의 눈은 배경에 있는 시선과 풍부한 공백 덕분에 양식에 즉시 이끌립니다.

이 사진은 마케터에게 Stackla가 공백을 사용하여 리드 캡처 양식에 주의를 끌고 데모 등록을 늘리는 방법을 보여줍니다.

단추

2단계 옵트인, 클릭연결 또는 앵커 태그로 하이퍼링크되었는지 여부 버튼은 공백을 최대한 활용할 수 있습니다.

YP Marketing Solutions는 클릭 후 방문 페이지 하단에 하이퍼링크된 버튼을 추가하여 방문자를 스크롤 없이 볼 수 있는 부분의 양식으로 다시 안내합니다. 버튼이 많은 공간으로 둘러싸여 있기 때문에 버튼이 어떻게 눈에 띄는지 확인하십시오.

이 그림은 Yellow Pages가 CTA 버튼에 주의를 끌고 무료 목록을 만들기 위해 공백을 사용하는 방법을 마케팅 담당자에게 보여줍니다.

회사 서비스

전체 페이지를 읽는 것보다 웹 사용자는 웹 페이지를 빠르고 쉽게 스캔하여 가장 중요한 정보를 찾습니다. 그렇기 때문에 글머리 기호 또는 아이콘으로 표시된 작은 청크로 클릭 후 방문 페이지 사본을 디자인하는 것이 이상적입니다. 이를 공백과 결합하면 글머리 기호가 더욱 눈길을 끕니다.

스크롤 없이 볼 수 있는 바로 아래에 있는 Comporium Media Services는 아이콘과 최소한의 텍스트로 추가 서비스를 강조 표시합니다.

이 그림은 마케터에게 공백이 글머리 기호와 도상법에 주의를 기울이고 방문자의 경험을 개선하는 데 어떻게 도움이 되는지 보여줍니다.

고객 평가

사용후기는 클릭 후 방문 페이지에서 가장 설득력 있는 요소 중 하나입니다. 사용 후기는 신뢰성과 신뢰를 더하고 실제 고객이 성공하는 데 도움이 되는 제품 또는 서비스의 다양한 측면을 강조할 수 있기 때문입니다.

귀하의 평가가 눈에 띄도록 하려면 Outbrain의 예를 따르고 공백으로 둘러싸십시오.

이 그림은 Outbrain이 여백을 사용하여 고객 평가를 강조하고 전환율을 높이는 방법을 마케터에게 보여줍니다.

회사 배지

고객 평가와 함께 회사 배지는 클릭 후 방문 페이지에서 가장 설득력 있는 측면 중 하나입니다. 유명하고 평판이 좋은 브랜드의 배지를 표시하면 권위와 신뢰성을 구축하는 데 도움이 됩니다. 잠재 고객이 양식을 작성하고 CTA 버튼을 클릭하도록 영향을 미칩니다. 잠재 고객은 "신뢰할 수 있는 다른 회사가 제품이나 서비스를 신뢰했다면 나도 할 수 있다"고 생각합니다.

시연하기 위해 Alteryx는 클릭 후 무료 평가판 방문 페이지에서 스크롤 없이 볼 수 있는 일부 최대 고객 및 파트너를 보여줍니다.

이 그림은 마케터에게 공백이 고객 배지에 대한 관심을 끌고 전환율을 높이는 데 어떻게 도움이 되는지 보여줍니다.

공백 웹 디자인에 대한 마지막 참고 사항

클릭 후 방문 페이지 디자인에 공백을 추가하면 필연적으로 페이지가 길어질 것입니다. 웹 사용자는 스크롤을 기대하기 때문에 이것이 반드시 나쁜 것은 아닙니다. 방문자를 원하는 방향으로 안내하기 위해 페이지에 다른 시각적 신호를 통합하는 한 방문자는 계속 집중하고 참여할 수 있습니다.

각 중요한 요소 주위에 공백이 있는 아래의 게시 체크리스트 클릭 후 방문 페이지를 살펴보십시오. 또한 아래쪽 화살표는 시청자가 아래로 스크롤하여 제안을 계속 평가하도록 권장합니다.

이 그림은 마케팅 담당자에게 Instapage가 공백을 시각적 신호로 사용하여 방문자가 스크롤 없이 볼 수 있는 부분 아래로 스크롤하여 제안을 전환하도록 유도하는 방법을 보여줍니다.

다음 클릭 후 방문 페이지는 공백을 어떻게 사용합니까?

여백을 빈 공간이라고 하지만 그 영역은 낭비되지 않습니다. 클릭 후 방문 페이지 공백에는 의식적이고 고의적인 의도가 있습니다. 개별 요소에 간격을 두고 강조 표시하면 이해도와 전반적인 사용자 경험이 효과적으로 향상되어 전환율을 높일 수 있습니다.

이것을 알면 다음 클릭 후 방문 페이지에서 어떤 요소를 강조 표시할 것입니까?

디자이너 친화적인 플랫폼을 사용하여 단 몇 분 만에 완전히 최적화된 클릭 후 방문 페이지를 만들 수 있습니다. Instapage를 사용하면 업계에서 가장 진보된 분석으로 100% 사용자 정의를 즐길 수 있습니다. 지금 Instapage Enterprise 데모에 등록하십시오.