전환율을 높이는 좋은 홈페이지 디자인의 6가지 예

일부 마케팅 팀은 책의 1장에서와 동일한 기술을 홈페이지 디자인에 적용하려고 합니다. 그들은 사이트의 여러 측면을 설명하는 텍스트 블록을 사용하여 유용하다고 생각하는 많은 콘텐츠를 만들려고 노력합니다.

좋은 의도가 어디에서 오는지 알 수 있지만 이러한 접근 방식은 종종 실패로 이어집니다. 웹사이트의 홈페이지는 책과 공통점이 많지 않습니다. 책은 독자가 머물고 참여하게 만드는 반면 , 홈페이지는 방문자를 페이지에서 벗어나 사용자가 상호 작용해야 하는 섹션으로 이동하도록 해야 합니다.

그런 의미에서 책이라기보다 간판 과 공통점이 더 많다.

홈페이지가 존재하는 이유는 두 가지입니다.

• 방문자가 사이트를 계속 사용할 수 있도록 신뢰를 구축하고
• 방문자를 홈페이지에서 벗어나게 하기 위해(그래서 드릴다운하여 필요한 것을 찾을 수 있음)

홈페이지가 의도한 대로 작동하려면 방문자가 방문할 때 다음 세 가지를 수행해야 합니다.

• 방문자 가 올바른 위치에 있다고 느끼게하십시오.
• 방문자 가 사이트에 대해 좋게 느끼도록 하십시오.
• 방문자가 다음에 무엇을 해야 하는지 명확히 하십시오

다음은 이러한 작업에 성공한 홈페이지의 예와 그 방법입니다.

1. PDF필러

PDFfiller의 홈페이지 디자인은 방문자가 여기에 왔을 때 사이트에 대한 정보를 즉시 전달할 수 있습니다.

• 회사 이름과 로고는 방문자가 웹에서 자신이 어디에 있는지 방향을 찾는 경향 이 있는 왼쪽 상단 모서리에 있습니다.
• 헤드라인은 사용자에게 PDFfiller가 무엇이며 사용자가 무엇을 할 수 있는지 정확히 알려줍니다.

페이지에는 강력한 신뢰 요소가 있습니다. 상당한 수의 양식이 작성, 서명 및 이 서비스를 통해 전송되었음을 나타냄으로써 사회적 증거 를 활용합니다.

시각적 계층 구조 는 방문자의 관심을 유도하는 클릭 유도문안(CTA)에 효과적으로 사용됩니다.

• 페이지는 메인 CTA에 주황색을 사용합니다. 이 색상은 페이지의 나머지 부분과 대비되어 튀어나온 색상입니다.
• 보조 CTA "무료 평가판 시작"은 고스트 버튼에 있으므로 강조되지 않습니다. 따라서 기본 CTA보다 주의를 덜 끌 수밖에 없습니다.

사용자가 문서를 업로드할 수 있는 다양한 방법에 대한 아이콘이 스크롤 없이 잘릴 수 있으므로 아래에 더 많은 콘텐츠가 있음이 분명합니다.

스크롤 없이 볼 수 있는 페이지 바로 아래에는 서비스 사용의 이점 이 나열되어 있습니다.

고객 평가, 등급 및 환불 보증/보안 봉인도 있습니다. 이것들은 신뢰와 신뢰성을 구축하는 데 도움이 됩니다.

사용자가 PDFfiller를 통해 문서로 수행할 수 있는 작업에 대해 자세히 알아보려는 경우 페이지 하단에는 다양한 기능 진입점이 있습니다.

2. 니라주

NyrajuSkinCare.com은 아프리카계 미국인만을 위한 천연 스킨 케어 제품을 판매하는 전자 상거래 사이트입니다. 이것은 태그라인과 정적 배너의 메시지에 의해 박쥐에서 바로 명확해집니다.

페이지는 신뢰 요소를 전면 중앙에 배치하여 방문자가 사이트에 대해 좋은 느낌을 갖도록 합니다.

• 전화번호는 표준 위치에 있습니다. 사용자는 페이지의 오른쪽 상단에 있을 것으로 기대합니다.
• Nyraju가 언급된 미디어 회사의 로고는 스크롤 없이 볼 수 있습니다.
• 100% 보장된 보안 쇼핑, Norton 쇼핑 보증 및 Yahoo! Live Store Secure Site 씰이 있습니다.

PDFfiller와 유사하게 Nyraju 는 페이지의 나머지 부분과 대조되는 CTA 색상 도 사용합니다. CTA 버튼 외에 녹색이 전화번호에 사용됩니다. 이렇게 하면 전화번호가 눈에 띄게 되므로 신뢰 요소로 더 효과적입니다.

스크롤 없이 볼 수 있는 부분 바로 아래에 Nyraju에는 시각적 탐색 기능 이 있습니다. 다양한 항목의 콜라주를 사용하여 제품 범주를 나타내므로 방문자가 사이트에서 즉시 구매할 수 있는 항목을 쉽게 확인할 수 있습니다.

제한된 선택 항목을 표시하면 사용자가 정보 냄새를 따라 사이트에 더 깊이 들어가 원하는 것을 찾을 수 있습니다.

3. 로제타 스톤

Rosetta Stone은 헤드라인과 그 아래의 본문을 통해 고유한 판매 제안 을 즉시 명확하게 보여줍니다.

방문자는 현대적인 모양과 느낌으로 인해 사이트에 대해 좋은 느낌을 받을 것입니다.

회사는 또한 PCMAG.com의 Editor's Choice 인장을 눈에 띄게 표시하고 해당 브랜드가 7년 연속 "최고의 언어 소프트웨어"를 수상했음을 표시함으로써 권위를 확립 할 수 있습니다.

페이지 본문은 스크롤 없이 볼 수 있는 부분에 두 가지 경로를 제공하여 사용자가 판매 유입경로의 어느 위치에 있든 쉽게 탐색할 수 있도록 합니다.

• 초기 단계에서 중간 단계 방문자를 위한 "데모 시도" 및
• 행동할 준비가 된 사람들을 위한 "지금 쇼핑"

스크롤 없이 볼 수 있는 부분 아래에서 페이지는 "내게 무엇을 제공합니까?"라고 답하는 혜택 설명 을 사용하여 방문자가 조치를 취하도록 설득합니다. 고객의 관점에서. 이는 각 혜택 설명을 뒷받침하는 고객 평가와 함께 제공됩니다.

페이지 아래에는 다양한 유형의 학습자를 기반으로 하는 탐색 진입점이 있습니다. 이를 통해 방문자가 자신과 관련된 콘텐츠를 쉽게 찾을 수 있습니다.

마지막으로, 회사가 상당한 시간 동안 존재했음을 보여주는 것 외에도 페이지 는 미디어 언급 및 주요 고객 로고 를 표시하여 다른 브랜드의 신뢰를 빌립니다 .

4. 우버

브랜드의 강점으로 인해 Uber는 모호한 헤드라인을 표시하고 홈페이지에 신뢰 기호를 표시하지 않을 수 있습니다.

Uber 홈 페이지의 좋은 점은 사용자가 수행할 수 있는 작업 이 개별 선택(예: "벌기", "타기", "먹기" 등)으로 표시되는 방식입니다.

또한 "가입"할 준비가 된 후기 방문자와 "운전 및 배달에 대해 자세히 알아보기" 텍스트 링크를 통해 초기 방문자 모두를 만족시킵니다.

5. 비앤에이치

B&H는 페이지의 왼쪽 상단 모서리에 회사 로고를, 페이지 오른쪽 상단 모서리에 전화번호를 배치하여 웹 규칙을 따릅니다 .

이 사이트는 회사가 "1973년부터 전문가의 출처"임을 표시함으로써 업계에서 리더십을 확립 합니다.

또한 타이머와 함께 희소성 원칙 을 사용하여 거래가 제한되어 있으며 고객이 나중에보다 빨리 행동하는 것이 좋다는 것을 나타냅니다.

슬라이더는 움직임을 활용하고 소수의 방문자만 관심을 가질 만한 프로모션을 제시하기 때문에 사용자 작업에서 주의를 산만하게 할 수 있습니다. 그러나 그 아래에는 합성 이미지 로 각 제품 범주를 나타내는 시각적 탐색이 있으므로 어떤 부분이 다음과 같은지 즉시 알 수 있습니다. 제품 카탈로그는 카테고리별로 제공됩니다.

6. 프레쉬북스

태그라인과 헤드라인은 FreshBooks가 무엇인지 간결하게 전달하므로 방문자는 사이트를 방문했을 때 사이트가 무엇을 위한 것인지 이해할 수 있습니다. 헤드라인 아래의 메시지에는 소프트웨어 사용의 이점이 나와 있습니다.

이 페이지는 소셜 증명 원칙을 사용하여 사용자가 전자 메일 주소를 제공하도록 유도합니다. "고객의 97%가 FreshBook을 추천합니다"라는 문구와 함께 "시작하기" 버튼으로 사용자의 시각적 주의를 의도적으로 안내합니다.

이 페이지는 브랜드가 소개된 미디어 회사의 로고를 표시하여 신뢰를 고취합니다.

페이지 전체에 "자세히 알아보기" CTA(스크롤해야 볼 수 있는 부분이 있음에도 불구하고)를 통해 유입경로 상단 방문자에게 적합합니다.

모든 화면에 CTA가 있으면 사용자가 페이지의 어디에 있든 관계없이 조치를 취할 수 있습니다.

페이지는 텍스트가 많고 사람들이 일반적으로 웹에서 읽지 않기 때문에 문제가 됩니다. 이 문제는 웹 사용자의 검색 동작 을 지원하는 방식으로 정보를 표시하여 해결할 수 있습니다.

• 단락 대신 정보를 글머리 기호 로 표시할 수 있습니다.
• 중요한 정보를 전달하는 단어는 굵게 표시 할 수 있으므로 강조 표시됩니다.

홈페이지 디자인 전환 중심으로 만들기

홈페이지는 방문자를 사이트의 관련 부분으로 유도해야 합니다. 방문자가 페이지에 머물게 하거나 제품 수준 정보를 제공해서는 안 됩니다.

이를 위해 다음과 같은 몇 가지 작업을 수행할 수 있습니다.

• 사용자가 기대하는 위치에 로고를 배치하고 기능적인 태그라인과 설명이 있어야 합니다. 이러한 방식으로 사용자는 올바른 위치에 도착했음을 즉시 알 수 있습니다.
• 신뢰 요소가 시각적으로 눈에 잘 띄도록 하여 사용자가 두 번째로 귀하의 신뢰성을 추측하지 않도록 합니다.
• 사용자가 앞으로 나아가야 할 방향을 쉽게 식별할 수 있도록 합니다.
  • CTA를 돋보이게 만드세요.
  • 상당한 방문자 그룹을 수용할 수 있는 경로가 있는 경우 사용자가 직접 선택할 수 있습니다.
  • 시각적 탐색이 가능합니다(즉, 이미지 콜라주가 제품 그룹을 시각적으로 나타내도록 함).

이 모든 작업을 수행하면 홈페이지에서 방문자를 사이트에 머물게 하고 궁극적으로 전환 액션을 취하는 데 더 나은 기회를 얻을 수 있습니다.