전환율이 높은 방문 페이지 뒤에 숨겨진 8가지 디자인 원칙

그래서 당신은 Divi를 발견하고 웹사이트를 만들기 위한 탐구에 착수했습니다. 그러나 웹사이트가 가동되면서 보기에는 좋아 보이지만 염두에 두었던 전환 목표에 도달하지 못하고 있다는 사실을 알게 되었습니다.

그렇다고 해서 노력을 포기해야 하는 것은 아닙니다. Divi를 사용하면 아름다운 웹 사이트를 만들기 위해 수행해야 하는 모든 학습을 건너뛸 수 있지만 여전히 전환하는 디자인을 만드는 원칙을 이해해야 합니다.

이렇게 하려면 기본 원칙을 배우고 자신의 웹 사이트에서 시도하고 구현해야 합니다. 물론 잠시 동안 응용 프로그램을 실험해야 하며 A/B 테스트를 수행하면 더 빨리 도달하는 데 도움이 됩니다. 그러나 이러한 원칙이 없으면 웹사이트를 훨씬 더 오래 전환시키기 위해 웹사이트로 무엇을 해야 하는지 알게 될 것입니다.

문제는 랜딩 페이지에 대한 완벽한 전환율을 달성하기 위한 방법을 찾는 것이 대부분의 사람들에게 빠른 여정이 아니라는 것입니다. 방문 페이지를 전환율 0%에서 50%로 높이는 마법의 공식은 없습니다.

그러나 웹사이트에서 이미 100% 또는 300%까지 전환율을 높이는 것은 자신을 적용할 때 이상한 일이 아닙니다. 1%에서 3%로 증가하더라도 방문자 100명당 리드가 2개 더 늘어나 비즈니스의 판도를 바꿀 수 있습니다.

이러한 결과를 얻기 위해 해야 할 일은 방문 페이지의 수익성을 높이는 몇 가지 일반적인 규칙을 배우는 것입니다.

이 게시물에서는 랜딩 페이지를 보다 효과적으로 만드는 데 도움이 되는 8가지 디자인 원칙을 발견할 것입니다.

사람을 위한 디자인

모든 비즈니스의 청중은 다릅니다. 그들은 다른 사람들, 제품에서 다른 것을 원하고 다르게 생각합니다. 그들이 들어야 하는 메시지를 전달하려면 당신의 모든 것을 배워야 합니다.

구매자 페르소나를 아직 개발하지 않았다면 랜딩 페이지에 대해 이를 수행해야 합니다. 완전 초보자는 전체 기사를 확인하는 것이 좋지만 구매자 페르소나에 대해 이미 조금 알고 있다면 여기에서 청중에 대한 정보를 찾을 수 있습니다.

• 구글과 페이스북 분석.
• 의도에 대한 Google 키워드 검색.
• Reddit 및 Quora에 대한 여론을 찾고 있습니다.
• 사용자의 소셜 미디어 프로필을 연구합니다.
• 개인 인터뷰를 진행합니다.

이제 개인 인터뷰를 하는 것은 대부분의 중소기업에게 과잉일 수 있습니다. 고객 조사로 그렇게 멀리 갈 필요는 없습니다. 처음 네 가지 방법으로 랜딩 페이지를 업그레이드하기에 충분합니다.

가장 중요한 것은 청중을 위해 각각의 특정 방문을 디자인하는 것입니다. 고가치 평생 고객 리드와 할인 쇼핑객을 위한 두 가지 별개의 마케팅 캠페인을 진행하고 있습니까? 당신은 같은 착륙을 가질 수 없습니다

일관성

이 조언은 "섞지 마십시오"처럼 들릴 수 있습니다. 뭐, 그냥 그렇습니다. 랜딩페이지의 디자인과 메시지가 소스링크의 디자인과 메시지와 일치하도록 해야 합니다.

일부 방문 페이지는 검색 결과에서 트래픽을 발생시키고 일부는 유료 광고에서 발생합니다. 귀하의 경우 후자라면 배너, 메시지 및 방문 페이지 디자인이 일치하는지 확인하십시오.

큰 차이가 있는 경우 사용자는 사기라고 생각할 수 있습니다. 하지만 악의적인 존재로 떠오른 것만으로 걱정해야 하는 것은 아닙니다. 페이지에 대한 링크와 페이지 자체 간에 메시지가 일치하지 않는 경우 많은 리드가 원하는 내용을 찾지 못해 반송됩니다.

미니멀리즘

이 디자인 원칙은 현대 미술을 만들 때만 유용하지 않습니다. 또한 모든 것 중에서 랜딩 페이지를 디자인하는 데 매우 유용합니다.

문제는 방문 페이지가 방문자에게 가능한 한 많은 정보를 제공하는 것이 아니라는 것입니다. 전환을 간소화하는 것입니다. 페이지에 추가 요소가 적을수록 좋습니다.

페이지에 방해 요소가 없는지 확인하고 사용자를 CTA 섹션으로 바로 안내합니다.

이 NGO 웹사이트는 최소한의 것입니다. 상단의 직선은 더 많이 보려면 아래로 스크롤하라는 신호입니다.

출처: 캘리포니아 콜링

그러나 이 캘리포니아 NGO처럼 랜딩 페이지에서 완전한 예술적 미니멀리즘을 추구할 필요는 없습니다. Shopify와 같이 요소 수를 최소한으로 유지할 수 있습니다.

출처: 쇼피파이

리드가 랜딩 페이지에서 CTA와 주의를 산만하게 하지 않는다면, 그들은 당신이 그들에게 제공하는 작은 정보를 읽고 계속 스크롤할 것입니다.

전경

이 디자인 원리는 너무 간단해서 이미 일상 생활에서 사용하고 있습니다. 방문 페이지를 학생의 교과서로 취급하십시오. 이 책의 모든 정보가 중요하지만 가장 중요한 부분은 놓치기 힘든 노란색 마커로 강조 표시되어 있습니다.

배경 및 글꼴 색상, 글꼴 크기 및 모양, 공백을 사용하여 페이지에서 가장 중요한 요소를 전경으로 사용하십시오.

전경화의 가장 간단한 예는 하위 제목을 더 크게 만들고 다른 색상을 지정하는 것입니다.

중요한 CTA에 대비되는 색상을 지정하는 것도 일반적인 관행입니다.

주의를 끌다

새로운 리드가 광고에서 페이지에 도착하면 짧은 시간 안에 그들의 관심을 끌 수 있습니다. 일부 소식통은 기간이 2.6초로 짧다고 주장합니다. 어떻게 3초 이내에 낯선 사람의 관심을 끌 수 있습니까? 다음은 네 가지 제안입니다.

• 접힌 부분에서 움직임(내키지 않게 반응함) 또는 사람의 얼굴을 사용합니다.
• 당신이 전경에 있는 한 문장으로 당신의 제안을 설명하십시오
• 무료 평가판을 제공하여 관심 유도
• 중요한 통계 또는 수치 표시

이 Airbnb 방문 페이지는 목록에서 세 가지를 수행합니다.

출처: 에어비앤비

그것은 자동으로 주의를 끄는 친근한 얼굴을 가지고 있습니다. 사람이 보는 다음 것은 돈을 벌겠다는 제안입니다. Airbnb가 그들에게 월별 추정치를 보여줄 때, 회사는 그 리드의 모든 주의를 기울입니다.

UX 글쓰기를 위한 그리드와 비주얼 커뮤니케이션

좋은 웹사이트 디자인은 어느 정도 균일합니다. 좋은 피치는 아닙니다. 청중에 대한 모든 지식을 고려하고 사용자가 전환하도록 설득할 수 있는 메시지를 작성하십시오. 당신이 알게 된 고객의 사회적 요인, 고통, 가치를 활용하십시오.

당신의 제품이 좋은 이유에 대해 1,000단어 에세이를 쓰지 마십시오. 가능한 한 간략하고 그리드를 사용하여 말해야 할 내용을 구성하십시오.

Divi를 포함한 모든 프레임워크와 템플릿에는 이미 알고 있을 수도 있는 디자인 원칙입니다. 다음은 Shopify에서 사용하는 3열 그리드입니다.

출처: 쇼피파이

다음은 Airbnb의 방문 페이지에서 가져온 두 개의 열이 있는 그리드입니다.

출처: 에어비앤비

그리드는 모두가 사용하기 때문에 다소 지루해 보일 수 있지만, 그리드는 요점을 전달하는 데 도움이 되는 몇 안 되는 항목 중 하나이므로 타협입니다. 아이콘과 텍스트가 있는 단순한 그리드가 너무 지루해 보인다면 여백과 다른 포그라운드로 멋지게 꾸며보세요. Divi를 사용하면 이동 중에도 디자인하고 그리드 패턴이 올바르게 보이도록 할 수 있습니다.

UX 작성에 사용할 수 있는 또 다른 중요한 디자인 원칙은 시각적 커뮤니케이션입니다. UX 쓰기에는 텍스트만 포함되지 않습니다. 이미지, 애니메이션 또는 비디오를 사용하여 제품이 고객을 위해 무엇을 할 수 있는지 설명하십시오.

다음은 캘리포니아 NGO의 미니멀하고 대담한 예입니다.

출처: 캘리포니아 콜링

손쉬운 전환

오프라인 매장을 디자인하는 사람들은 고객이 식료품비를 지불하기 위해 뛰어다니게 만들지 않습니다. 또한 고객이 구매를 위해 10분 등록 절차를 거치도록 요구해서는 안 됩니다. 실제로 랜딩 페이지에 더 많은 양식 필드가 있을수록 얻을 수 있는 전환은 줄어듭니다.

사람이 전환을 위해 수행해야 하는 동작의 수를 가능한 한 적게 유지하고 행동 촉구를 전면에 그리고 매우 명확하게 만듭니다. 일종의 무료 평가판을 제공하는 경우 CTA 버튼이 하나만 필요할 수 있습니다. 결국, 제안은 이미 매우 낮은 노력을 필요로 합니다.

그렇지 않은 경우 사용자가 지금 전환할 준비가 되지 않은 경우에 대비하여 두 번째 옵션을 그대로 두십시오. 선택은 예와 아니오 사이가 아니라 예와 예 사이가 아니라 나중이어야 합니다.

챗봇을 백업 CTA로 사용하는 것도 좋은 생각입니다.

사람들이 디자인과 상호 작용하는 방식 연구

이러한 원칙으로 시작하여 Google UX 가이드라인에 대해 더 많이 배우는 것은 전환하는 웹사이트를 위한 견고한 기초입니다. 그러나 디자이너로서 탁월해지고 싶다면 사용자가 디자인과 상호 작용하는 방식을 연구해야 합니다. 특히 수십만 달러의 수익이 걸려 있는 경우에는 더욱 그렇습니다.

어떻게 합니까? 클라이언트의 관점에서 웹사이트가 어떻게 보일지 탐색하는 것으로 시작할 수 있습니다.

Chrome 또는 Firefox 개발자 도구를 사용하여 브라우저 창의 크기를 조정하여 다양한 크기의 화면에서 디자인이 어떻게 변경되는지 확인합니다. 귀하의 웹사이트는 전 세계 여러 지역의 고객을 대상으로 합니까? 더 나은 테스트를 위해 VPN을 추가로 사용해야 합니다. 예를 들어, Mac, Android 및 기타용 VPN이 많이 있습니다. 이렇게 하면 고객을 잃지 않는 데 도움이 됩니다.

또한 일본이나 뉴질랜드에서 온 방문자라면 얼마나 빨리 로드되는지 알 수 있습니다. 서버가 미국에만 있는 경우 다른 국가의 방문자는 로딩 시간이 더 길어질 수 있으며 이는 원하는 것이 아닙니다.

마지막으로 실제 사람들이 웹사이트와 상호작용하는 방식을 살펴봐야 합니다. 여러 버전의 랜딩 페이지를 디자인하고 Divi의 분할 테스트 도구를 사용하여 어떤 것이 가장 실적이 좋은지 확인하십시오.

더 많은 통찰력을 얻으려면 Hotjar와 같은 히트맵 도구를 사용하여 사람들이 클릭하고 마우스를 가져가는 위치를 확인하십시오. CTA가 원하는 관심을 받지 못한다면 개선이 필요하다는 신호입니다.

마지막 생각들

이 8가지 디자인 원칙은 방문 페이지를 개선하는 데 큰 도움이 됩니다. 하지만 그 중 8개를 알게 되었다고 해서 학습을 중단하지 마십시오. 랜딩 페이지의 디자인 원칙에 대해 자세히 알아보고 리드의 관심을 끌기 위해 Divi에서 시차 배경을 만드는 방법을 학습하여 UI 디자인에 대한 지식을 업그레이드하십시오.

PureSolution / Shutterstock.com을 통한 추천 이미지