변환용으로 제작 – 랜딩 페이지 디자인 모범 사례

방문 페이지는 방문자가 마케팅 클릭 유도문안을 클릭한 후 도달하는 페이지입니다. 검색 또는 디스플레이 광고, 이메일, 소셜 미디어 게시물 또는 제휴 링크가 될 수 있습니다.

일부 회사는 참조 소스에서 홈 페이지로 트래픽을 보냅니다. 그건 실수야. 랜딩 페이지는 추천 소스가 무엇이든 상관없이 명확한 제안을 포함하여 여러 가지 이점을 제공합니다. 이는 단순히 새로운 방문자를 홈페이지로 보내고 클릭했을 때 제공되는 내용을 찾는 방법을 알기를 바라는 것보다 더 높은 전환율로 이어집니다.

디자이너는 여기에 포함된 것과 같은 랜딩 페이지 디자인 모범 사례를 따르면 더 효과적으로 전환되는 랜딩 페이지를 만들 수 있습니다.

이점을 강조하십시오

제품 디자이너는 기능에 집중하는 경향이 있습니다. 소비자는 이점에 대해 알고 싶어합니다. 그들은 이러한 기능이 경험에 어떤 영향을 미치는지 알고 싶어합니다. 사람은 300마력 때문에 차를 사지 않습니다. 그들은 300hp가 빨리 갈 수 있기 때문에 그것을 삽니다. 그렇기 때문에 많은 자동차 광고에서 마력 수치 대신 0-60번을 언급합니다.

방문 페이지에서 이는 헤드라인 및 글머리 기호 목록과 같은 요소를 사용하여 제품의 이점을 강조하는 것을 의미합니다. 이것이 사용자가 가장 먼저 알고 싶어하는 것입니다. 이 제품이 내 삶이나 비즈니스에 어떤 도움이 됩니까?

관련 이미지를 사용하십시오

사람은 시각적인 동물입니다. 이미지가 부족하면 랜딩 페이지를 보는 사람이 불편할 수 있습니다. 좋은 이미지는 소비자와 회사 사이에 신뢰감을 더합니다.

랜딩 페이지에 효과적으로 사용할 수 있는 이미지 유형은 많습니다. 제품 이미지가 가장 확실한 선택입니다.

실제 사람의 사진에 사용자가 더 잘 반응할수록 제품을 사용하는 사람의 이미지는 더욱 매력적입니다. 반면에 모델의 스톡 사진은 사용자의 경험에 반드시 추가되는 것은 아닙니다.

랜딩 페이지 디자이너는 랜딩 페이지를 방문하는 사람들에게 감정적인 반응을 일으키는 이미지를 사용하는 것을 목표로 해야 합니다.

CTA 테스트

틀림없이 모든 방문 페이지에서 가장 중요한 부분은 클릭 유도문안입니다. 그 중요성 때문에 디자이너는 방문자로부터 가장 많은 긍정적인 반응을 얻을 수 있도록 최적화되었는지 확인하기 위해 CTA를 테스트해야 합니다.

A/B 테스트는 CTA를 테스트하는 가장 간단한 방법입니다. 디자이너는 정해진 시간 동안 방문자에게 무작위로 두 개의 방문 페이지를 표시할 수 있으며, CTA 자체의 차이점을 제외하고는 각각 동일합니다. 거기에서 CTA가 원하는 결과를 얻을 때까지 계속 수정하고 테스트할 수 있습니다.

디자이너는 CTA 버튼 색상, CTA 주변 언어(및 버튼 자체), 페이지에서의 CTA 배치 등의 테스트를 고려해야 합니다. (랜딩 페이지의 다른 부분도 A/B 테스트를 통해 더 나은 전체 결과를 얻을 수 있습니다.)

모바일 친화적으로 만드세요

얼마나 많은 사람들이 모바일 장치에서 웹을 검색하는지 고려할 때 디자이너가 방문 페이지가 작은 화면에서 어떻게 보일지 간과하는 것은 실수입니다. 단순히 모바일에서 괜찮아 보이는 디자인을 만드는 것도 옵션이지만 모바일에서 더 효과적이도록 랜딩 페이지를 단순화하는 것이 훨씬 더 나은 아이디어입니다.

모바일 친화성은 소셜 미디어 게시물, 광고 또는 이메일이 가리키는 방문 페이지에서 특히 중요합니다. 2017년에 이메일 사용자의 75%가 모바일 장치에서 이메일을 확인했다고 보고했습니다(그 숫자는 그 이후로 계속 증가했습니다). 그리고 인터넷 사용자뿐만 아니라 전 세계 사람들의 42%가 모바일 장치에서 소셜 미디어 사이트를 사용합니다. 또한 2018년 블랙프라이데이 매출의 40%가 스마트폰이나 태블릿에서 발생했습니다.

사람들은 스마트폰으로 소셜 미디어를 탐색하고 이메일을 읽는 것만이 아닙니다. 그들은 구매를 하고, 서비스에 가입하고, 그렇지 않으면 회사에서 원하는 작업을 완료합니다. 시장의 이 엄청난 비율을 간과하는 디자이너는 기껏해야 근시안적입니다.

참조 소스와 일관성을 유지하십시오.

누군가가 이메일에 있는 광고나 링크를 클릭할 때 방문 페이지와 일관성이 있어야 합니다. 이것은 참조 소스가 무엇인지에 따라 몇 가지 다른 방법으로 수행할 수 있습니다.

예를 들어 추천 소스가 검색 광고인 경우 광고와 사용자가 방문하게 되는 방문 페이지 간에 동일한 언어를 사용하면 일관성이 제공됩니다. 참조 소스가 이메일인 경우 유사한 이미지와 색 구성표를 사용하면 방문자가 필요로 하는 일관성을 제공할 수 있습니다.

랜딩 페이지를 디자인할 때 디자이너는 참조 소스가 무엇인지 알아야 최소한 몇 가지 면에서 일치해야 합니다.

사회적 증거를 포함하십시오

사람들은 구매를 고려 중인 제품이 다른 고객을 만족시켰는지 알고 싶어합니다. 사회적 증거는 그러한 확신을 제공하는 가장 좋은 방법 중 하나입니다.

사회적 증거를 제공하는 몇 가지 방법이 있습니다. 하나는 방문 페이지에 사용후기나 리뷰를 눈에 띄게 포함하는 것입니다. 또 다른 방법은 제품에 대한 소셜 미디어 대화를 포함하는 것입니다. 그러나 디자이너는 이 작업을 수행할 때 주의해야 합니다. 모든 소셜 멘션을 자동으로 표시하면 결국 좋은 점과 나쁜 점이 모두 표시될 수 있기 때문입니다.

방문 페이지가 하나 이상의 작업을 수행하도록 하지 마십시오.

랜딩 페이지에는 한 가지 작업만 있어야 하며 이는 디자인되기 전에 결정되어야 합니다. 방문자에게 무언가를 구매하도록 요청하고 뉴스레터에 가입하도록 요청하는 방문 페이지는 방문자의 주의를 분산시키고 있습니다. 이렇게 하면 가장 바람직한 조치를 취할 가능성이 줄어듭니다.

디자이너는 클릭 유도문안이 무엇인지 고려하고 방문 페이지에 다른 작업이 표시되지 않도록 해야 합니다. 다른 탐색 요소와 같은 것들도 방문자의 주의를 끌고 원하는 작업을 완료하지 못하게 할 수 있습니다.

필요한 것보다 더 많은 정보를 요구하지 마십시오

너무 많은 정보를 요청하면 방문자가 방문 페이지에서 이탈하게 만드는 빠른 방법이 될 수 있습니다. 그러나 이름과 이메일 주소뿐만 아니라 전화번호, 회사 이름, 직위 등을 묻는 양식이 있는 랜딩 페이지를 보는 것이 일반적입니다.

방문자가 해당 정보 제공의 가치를 즉시 볼 수 없다면 페이지에서 이탈할 가능성이 크게 높아집니다. 방문 페이지의 이탈률을 줄이기 위해 디자이너는 제안을 완료하기 위해 최소한의 정보만 요청해야 합니다.

방문 페이지 양식에서 흔히 발생하는 또 다른 주요 사용성 문제는 모바일 장치에 최적화되어 있지 않은 경우입니다. 양식 필드는 각 필드에 적절한 키보드 레이아웃을 표시하는 방식으로 코딩되어야 합니다.

예를 들어 사용자가 이메일 주소를 입력할 때 키보드는 기본 화면에 "@" 기호를 표시합니다. 또는 전화번호를 요청하면 키보드가 숫자 입력으로 전환됩니다. 이 작은 디테일이 모바일 기기의 UX를 크게 향상시킵니다.

탐색 모음을 포함하지 않음

탐색 모음을 포함하지 않는 것은 단일 목적 랜딩 페이지의 아이디어와 직접적으로 연결됩니다. 탐색은 랜딩 페이지의 시각적 혼란이며 사용자가 원하는 작업을 완료하지 않고 사이트의 다른 페이지를 클릭하게 할 수 있습니다.

탐색 모음을 제거하면 방문자가 계속 작업을 수행할 수 있습니다. 디자이너가 방문자에게 더 많은 정보를 제공하는 데 관심이 있는 경우 방문 페이지 자체에 포함하거나 페이지 아래 링크에 포함해야 하며, 가급적이면 첫 번째 클릭 유도문안 다음에 포함해야 합니다.

가입하거나 구매할 준비가 된 사용자에게 다른 옵션을 제공하여 주의를 분산시키는 것은 의미가 없습니다. 그럼에도 불구하고 많은 방문 페이지에는 추가 탐색 옵션이 포함되어 있습니다.

페이지를 어지럽히지 마십시오

방문 페이지에는 해당 페이지를 방문한 사람이 원하는 작업을 완료하는 데 필요한 정보만 포함되어야 합니다. 방문자 측에서 더 많은 투자가 필요할수록 대부분의 경우 더 많은 정보가 필요합니다.

예를 들어, 지불 정보를 요구하지 않는 무료 평가판은 위험이 상당히 낮은 제안이며 제시할 정보가 많이 필요하지 않습니다.

그러나 사용자에게 구매를 요청하는 페이지는 일반적으로 사용자에게 더 많은 정보를 제공해야 합니다. 그 정보의 양은 가격 포인트가 증가함에 따라 증가합니다.

디자이너는 다른 페이지와 마찬가지로 랜딩 페이지를 생성할 때 좋은 디자인 원칙을 따라야 합니다. 일반적으로 해당 브랜드에 적합하다면 미니멀하고 단순한 디자인이 선호됩니다. 콘텐츠 주변의 공백은 사용자가 압도되는 것을 방지하고 중요한 것에 집중할 수 있도록 합니다.

확립된 패턴에서 벗어나지 마십시오

사람들은 랜딩 페이지에 대해 특정한 기대치를 가지고 있습니다. 그들은 이점에 대해 알고 싶어하고 명확한 가치 제안을 원하며 완료하기 쉬운 클릭 유도문안을 원합니다.

디자이너가 기존 랜딩 페이지 패턴에서 너무 많이 벗어나면 사용자를 소외시키고 당면한 작업을 완료하는 데 방해가 될 위험이 있습니다. 실험적인 디자인은 훌륭하지만 종종 다른 유형의 페이지와 웹사이트에 더 적합합니다.

일반화하지 마세요

확립된 패턴을 고수하는 것은 좋은 생각이지만 방문 페이지가 일반적이어야 한다는 의미는 아닙니다. 디자이너는 방문 페이지에 추가 세부 정보와 디자인 요소를 포함하여 사용자 경험을 개선하고 사용자의 관심을 끌며 제품의 가치를 강화할 수 있는 방법을 고려해야 합니다.

여기에는 비디오 콘텐츠, 애니메이션, 슬라이드쇼 또는 기타 여러 디자인 요소가 포함될 수 있습니다. 한 제품이나 서비스에 적합한 것이 다른 제품이나 서비스에도 반드시 적용되는 것은 아닙니다. 디자이너는 랜딩 페이지에서 색다른 콘텐츠를 자유롭게 실험할 수 있어야 하지만 방문자를 이탈시키지 않도록 보다 일반적인 방법에 대해 A/B 테스트를 준비해야 합니다.

결론

방문 페이지는 모든 온라인 마케팅 캠페인의 중요한 구성 요소입니다. 그들의 단 하나의 목적은 방문자의 주의를 산만하게 하지 않고 전환을 유도하는 데 도움이 됩니다.

랜딩 페이지 모범 사례를 따르는 디자이너는 경쟁 제품보다 전환율이 높은 페이지를 만들어 제공하는 브랜드에 더 많은 가치를 창출할 수 있습니다. 랜딩 페이지를 단순하게 유지하고 CTA에 중점을 두고 양식을 짧게 유지하는 등 이미 언급된 기타 지침을 통해 랜딩 페이지를 보다 효과적으로 수행하는 동시에 UX를 개선할 수 있습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 효과적인 방문 페이지를 디자인하는 방법
• 이러한 방문 페이지 영감으로 방문자를 전환하십시오.
• 미학과 지각 – 사용자 경험 이미지에 접근하는 방법
• 디자인 원칙과 중요성
• 디자이너를 위한 효과적인 커뮤니케이션 전략