명시적 및 암시적 시각적 단서가 전환 증가에 도움이 되는 방법

게시 됨: 2016-10-21

증거에 따르면 주의 집중 시간과 관련하여 방문자보다 클릭 후 방문 페이지에 10개월 된 아이를 계속 참여시킬 가능성이 더 높습니다.

네, 잘 읽으셨습니다.

평균 웹 사용자의 주의 시간은 약 6-8초인 반면, 10개월 아기의 주의 시간은 약 60-120초입니다. 즉, 방문자가 클릭 후 방문 페이지에 집중하는 것보다 내 아들이 딸랑이에 더 오래 집중할 것입니다.

이게 무슨의미입니까? 클릭 후 방문 페이지에서 방문자의 관심을 전환에 이르기까지 충분히 오래 유지하는 것은 어려운 일입니다.

온라인 첫인상의 94%가 디자인과 관련되어 있으므로 페이지가 제대로 디자인되지 않은 경우 전환이 점점 더 어려워집니다. 예를 들어, 페이지가 복잡하고 방문자가 한 요소를 다른 요소와 구별할 수 없는 경우 매력적인 헤드라인이 단조로워집니다. 다른 모든 페이지 요소에 대해서도 마찬가지입니다.

온라인 첫인상의 94%는 디자인과 관련이 있습니다.

트윗하려면 클릭

클릭 후 방문 페이지 디자인은 방문자의 참여를 유지하는 데 중요한 역할을 합니다. 이 중 공백과 대조적인 CTA 버튼은 마케팅 담당자가 전환을 유도하는 데 사용할 수 있는 유일한 디자인 도구가 아닙니다.

시각적 단서는 클릭 후 방문 페이지 전환을 더 많이 유도하는 데에도 큰 도움이 됩니다.

시각적 단서는 무엇입니까?

시각적 또는 방향 신호는 방문자에게 말 그대로 전환 목표(예: CTA)에 필수적인 요소의 방향을 알려주는 데 사용되는 UX 디자인 도구입니다. 단서는 방문자가 페이지를 탐색하고 시각적 계층 구조를 유지하는 데 도움이 됩니다.

시각적 신호에는 두 가지 기본 유형이 있습니다.

노골적인 시각적 단서

이러한 종류의 단서는 직접적이며 페이지에서 쉽게 지적 할 수 있습니다. 화살표, 선, 가리키는 손가락 및 사람의 시선은 클릭 후 방문 페이지에서 명시적인 시각적 신호를 사용할 수 있는 몇 가지 방법입니다.

암시적 시각적 단서

이러한 신호는 미묘하여 방문자가 종종 알아차리지 못합니다. 그러나 그들은 특정 요소를 아주 잘 강조하는 역할을 합니다. 클릭 후 방문 페이지에서 가장 일반적으로 사용되는 암시적 시각적 신호에는 공백, 색상 대비 및 캡슐화가 포함됩니다.

클릭 후 방문 페이지에서 두 가지 유형의 시각적 신호를 모두 사용하여 방문자가 전환할 수 있을 만큼 충분히 오랫동안 페이지에 집중하도록 하는 방법을 살펴보겠습니다.

클릭 후 방문 페이지에서 명시적인 시각적 신호를 사용하는 방법

명시적 시각적 단서는 방문자가 페이지에서 보는 위치에 빠르게 영향을 줍니다. 화살표를 페이지의 시각적 신호로 사용하고 방문자를 페이지에서 원하는 위치로 안내할 수 있습니다.

Outbrain은 화살표와 돋보기 원을 사용하여 서비스가 스토리를 홍보하는 방법에 대한 이미지에 방문자의 주의를 환기시킵니다.

이 그림은 Outbrain이 제품 스크린샷에 더 많은 관심을 끌기 위해 화살표 시각적 신호를 사용하는 방법을 보여줍니다.

또한 방향 표시 화살표를 대화형 페이지 요소로 디자인하고 방문자가 Lumosity와 같이 페이지의 다른 섹션으로 이동하도록 도울 수 있습니다.

그리고 Boardvantage도 하는 일:

화살표를 사용하여 페이지 접힌 부분 아래로 방문자를 안내할 수도 있습니다. Facebook 광고 팁 클릭 후 방문 페이지는 다음 기술을 사용합니다.

이 그림은 마케팅 담당자가 화살표를 사용하여 방문자가 자세한 정보를 보려면 페이지를 아래로 스크롤하도록 안내하는 방법을 보여줍니다.

방문자가 양식에 더 많은 관심을 기울이도록 유도하기 위해 양식 왼쪽에 튀는 애니메이션 방향 화살표를 눈에 띄게 사용합니다.

시선을 사용하는 것은 직관적인 시선으로 인해 유용한 명시적 방향 신호 역할도 합니다.

직시적 시선은 우리가 누군가가 무언가를 보고 있는 것을 볼 때 우리의 두뇌가 반사적으로 행동하고 우리도 그 대상을 보기 시작한다고 지시하는 인지 편향입니다. 인지 편향을 통해 방문자가 페이지에서 집중할 위치에 영향을 줄 수 있습니다.

이 특별한 시각적 신호는 방문자가 원하는 곳을 보도록 할 뿐만 아니라 페이지에 인간적인 매력을 더하고 제안에 감정을 더합니다. 시각적 신호는 매우 영향력 있고 설득력이 있어 대선 후보인 힐러리 클린턴(Hillary Clinton)이 각 선거 캠페인 페이지에서 시선을 사용합니다.

기부 페이지 양식을 바라보는 클린턴의 눈은 감동으로 가득 차 있습니다.

이 사진은 힐러리 클린턴이 기부 페이지에서 시선 시각적 신호를 사용하여 더 많은 전환을 유도하는 방법을 보여줍니다.

이 페이지에서 그녀는 열심히 양식을 살펴보고 공식 캠페인에 참여할 것을 촉구합니다.

이 사진은 힐러리 클린턴(Hillary Clinton)이 시선 시각적 신호를 사용하여 지지자들을 기부 CTA 버튼으로 안내하는 방법을 보여줍니다.

iCIMS는 시각적 신호를 두 배로 늘리고 시선과 지시를 모두 사용하여 방문자가 전환하도록 장려함으로써 한 걸음 더 나아갑니다.

이 그림은 iCIMS가 포인팅 및 시선 시각적 신호를 사용하여 클릭 후 방문 페이지 전환을 더 많이 생성하는 방법을 보여줍니다.

그렇다면 어떤 시각적 신호가 더 잘 수행됩니까? 화살표, 가리키는, 시선?

CXL이 수행한 연구에 따르면 명백한 시각적 신호와 관련하여 화살표는 사람의 시선보다 더 뛰어난 성능을 보입니다.

이 차트는 화살표와 선이 다른 모든 시각적 신호보다 형태를 보는 평균 시간이 더 높다는 것을 보여줍니다.

이러한 결과를 생성하기 위해 시선 추적 연구 및 히트 맵이 데이터 수집의 주요 소스였습니다.

이 히트맵은 다양한 시각적 신호가 클릭 후 방문 페이지 전환에 어떻게 긍정적인 영향을 미칠 수 있는지 마케터에게 보여줍니다.

그래도 주의사항. 이 특정 클릭 후 방문 페이지에서 화살표가 더 나은 성능을 보였다고 해서 화살표가 항상 전환을 최대화하는 확실한 방법인 것은 아닙니다. 다른 모든 클릭 후 방문 페이지 요소와 마찬가지로 A/B 테스트 시각적 신호를 통해 이 연구가 귀하의 제안에 해당하는지 확인하는 것이 좋습니다.

클릭 후 방문 페이지에서 암시적 시각적 신호를 사용하는 방법

암시적 시각적 신호는 화살표 및 가리키는 것처럼 간단하지 않습니다. 이러한 디자인 요소는 특정 개체를 직접 가리키지 않습니다. 오히려 방문자가 전환 목표를 달성하도록 설득하기 위해 보다 미묘한 접근 방식에 의존합니다.

요소 주위에 공백을 사용하는 것은 방문자가 특정 요소에 집중하도록 하는 훌륭한 시각적 신호입니다. 왼쪽 텍스트와 오른쪽 텍스트의 가독성에 공백이 주는 차이를 눈치채셨습니까?

이 그림은 공백이 페이지의 텍스트 가독성을 높이고 더 많은 전환을 생성할 수 있는 방법을 마케팅 담당자에게 보여줍니다.

이 "음수 공간"은 중요한 페이지 요소를 자동으로 강조 표시하여 페이지에서 혼란을 제거하는 데 도움이 됩니다. DocuSign 클릭 후 방문 페이지는 방문자가 노트북 스크린샷과 양식에 더 쉽게 집중할 수 있도록 요소 주위에 많은 공백을 사용합니다. 또한 리드 캡처 양식을 가리키는 화살표가 포함되어 있습니다.

이 그림은 DocuSign이 클릭 후 방문 페이지 양식을 가리키는 화살표 시각적 큐를 사용하여 더 많은 관심을 유도하는 방법을 보여줍니다.

캡슐화를 사용하면 페이지에 초점을 맞출 수 있습니다. 즉, 상자 또는 색상을 사용하여 클릭 후 방문 페이지 요소를 감싸고 관심을 끌 수 있습니다. 이 기술은 또한 페이지를 깔끔하게 정리하고 방문자가 특정 요소에 집중하도록 하는 데 도움이 됩니다. 이 디자인 기법은 페이지에 시각적 계층 구조를 설정하는 데 도움이 되며 잠재 고객의 시선을 원하는 목표로 안내합니다.

Offerpop의 클릭 후 방문 페이지에 있는 양식은 검은색 윤곽선이 있는 주황색으로 둘러싸여 있어 자체적으로 눈에 띄게 됩니다.

이 그림은 마케터에게 Offerpop이 캡슐화 및 색상 대비를 사용하여 CTA 버튼에 더 많은 초점을 맞추는 방법을 보여줍니다.

클릭 후 방문 페이지 요소에 대비되는 색상을 사용하면 대비가 방문자의 관심을 특정 지점으로 이끌기 때문에 시각적 신호 역할도 합니다. HelloFresh 클릭 후 방문 페이지의 주황색 CTA 버튼은 방문자에게 다음과 같이 안내합니다.

이 그림은 HelloFresh가 캡슐화와 공백을 사용하여 CTA 버튼에 더 많은 주의를 기울이는 방법을 보여줍니다.

전환을 유도하기 위해 시각적 마케팅을 어떻게 사용합니까?

시각적 마케팅은 페이지에서 비디오와 gif를 사용하는 것뿐만 아니라 클릭 후 방문 페이지에서 시각적 신호를 사용하는 것은 방문자가 행동하도록 설득하는 효과적인 방법입니다.

방문자의 관심 지속 시간에 의존하여 전환을 유도하지 마십시오. 명시적 및 암시적 시각적 신호를 통해 문제를 해결하고 방문자를 전환 목표로 안내하세요. 오늘날 주목을 끄는 시각적 단서로 디자이너 친화적인 클릭 후 방문 페이지를 만들 수 있습니다. Instapage Enterprise 데모에 가입하기만 하면 됩니다.