전환 중심 디자인의 7가지 원칙

경험 많은 마케터는 방문을 높은 전환율로 만드는 특정 패턴과 트리거가 있음을 이해하게 되었습니다. 그들은 관찰한 내용을 실행 가능한 지침으로 전환했으며 여기 우리가 있습니다. 이것이 바로 전환 중심 디자인에 대한 간략한 이야기입니다. 더 이상 찻잎을 읽고 사용자의 행동을 예측하려고 할 필요가 없습니다. 이제 제어할 수 있습니다.

이 기사에서는 전환 중심 디자인과 이메일 및 방문 페이지에서 이를 사용할 수 있는 방법에 대해 설명합니다. 디자인 선택은 절대 임의적이어서는 안 됩니다. 모든 세부 사항이 목적에 부합할 수 있습니다!

전환 중심 디자인이란 무엇이며 왜 관심을 가져야 합니까?

CCD(전환 중심 디자인)는 상업적으로 효과적인 랜딩 페이지, 이메일 템플릿 및 기타 유형의 콘텐츠를 디자인하기 위한 일련의 규칙 또는 원칙입니다. 이 전략을 사용하면 고품질 리드, 구독자 및 고객을 확보하는 콘텐츠를 만들 수 있습니다.

원래 이러한 원칙은 Unbounce 팀에서 만들었습니다. 그들은 마케팅 용어에 들어갔고 이제 다양한 전문가와 실무자들에 의해 자유롭게 적용되고 해석됩니다. 그러나 그 의미와 관련성은 조금도 변하지 않았습니다.

2021년임을 인정하지만 많은 랜딩 페이지가 여전히 혼란스럽고 직관적이지 않습니다.

사용자가 뉴욕에 기반을 둔 빵집 광고를 클릭한 후 이 페이지를 방문합니다. 우선 페이지가 광고와 관련이 없습니다. 여기에는 수많은 저품질 이미지와 복제본이 있는 슬라이더, 기괴한 수의 링크, 거대한 메뉴가 있으며 사용자가 이 장소에 주목해야 하는 이유에 대한 설명이 없습니다. 여기서 무슨 일이 일어나고 있는지 이해하기 어렵고 이것은 고립된 경우와는 거리가 멉니다!

전환 중심 랜딩 페이지 디자인은 사용자가 일반적인 어수선한 상업 페이지를 방문한 후 자주 경험하는 혼란을 피하는 데 도움이 됩니다.

방문자의 머리 속에서 똑같은 독백이 일어나는 것을 원하지 않을 것입니다.

랜딩 페이지와 이메일이 사용자를 부드럽게 안내하고 즐겁고 부드러운 경험을 제공하기를 원합니다. 당신의 목표는 청중과 계속 소통하고 그들이 당신의 브랜드에 계속 관심을 갖도록 하는 것입니다. 당신은 그들이 쉽게 변환하기를 원합니다.

전환 중심 설계는 이를 달성하기 위해 취해야 하는 정확한 접근 방식입니다. 설득력 있는 디자인은 사용자가 제안의 가치를 인식하고 클릭 유도문안을 실행하는 데 도움이 됩니다. 페이지의 모든 단일 디자인 요소가 전환을 유도할 수 있다는 점까지 말씀드리자면, 그렇게 해야 합니다!

따라서 레이아웃을 만들 때 고려해야 할 전환 중심 디자인의 7가지 원칙은 다음과 같습니다.

1. 방문자가 집중할 수 있도록 도와주세요 . 사용자가 제안의 의미를 한 눈에 파악할 수 있는지 확인합니다.
2. 견고한 구조를 만듭니다 . 자연스러운 흐름을 만드는 콘텐츠 계층 구조를 개발합니다.
3. 일관성을 유지하십시오 . 콘텐츠에 일관성 있고 통일된 모양을 부여하십시오.
4. 장점 강조 . 모든 디자인 요소를 사용하여 제품이나 서비스를 사용하면 삶이 얼마나 쉬워지는지 지적하세요.
5. CTA를 돋보이게 만드세요 . 사용자가 여정의 어느 시점에서든 전환할 수 있도록 하세요.
6. 신뢰를 얻으십시오 . 고객과 업계 전문가가 귀사의 제품이나 서비스에 대해 어떻게 생각하는지 보여주세요.
7. 마찰 없는 경험을 만드십시오 . 페이지를 보다 직관적이고 편리하게 정리하고 최적화하세요.

항상 전환 중심의 디자인을 사용해야 합니까? 우리는 감히 아니라고 말할 수 있습니다. 특정 CTA가 없는 순전히 오락 또는 정보 제공 페이지 또는 이메일과 같이 규칙에 대한 몇 가지 예외가 있습니다. 그러나 상업용 콘텐츠는 거의 항상 전환 지향적인 접근 방식을 요구합니다.

원칙 1. 사용자가 집중할 수 있도록 지원

아무리 복잡한 아이디어라도 포괄적이고 명확한 방법으로 요약할 수 있습니다. 한 번도 들어본 적 없는 내용에 대한 텍스트 페이지를 읽고 싶어하는 사람은 아무도 없습니다. 부차적인 세부 사항은 생략하면서 제품이나 서비스의 주요 기능을 제시하고 강조해야 합니다. 사용자가 몇 문장을 읽은 후에도 올바른 방향을 유지할 수 있도록 콘텐츠에 방향성을 삽입하세요.

가장 좋은 방법은 텍스트 전체에 초점을 만드는 것입니다. 초점은 시각적으로 두드러진 요소로 일반적으로 대조되는 헤드라인, 사실 또는 사람 얼굴과 같은 이미지의 일부입니다. 텍스트를 더 쉽게 스캔하고 빵 부스러기처럼 작동하여 사용자가 모든 항목을 수집하기 위해 한 섹션에서 다른 섹션으로 이동해야 합니다.

실생활에서 어떻게 작동하는지 봅시다.

Ando의 이메일 디자인은 "더 지속 가능한 내일을 위한 모바일 뱅킹"이라는 고유한 판매 제안을 강조합니다. 강력한 헤드라인 뒤에는 독자들이 에코뱅킹에 대해 더 많이 배우고 즉시 계좌를 개설할 수 있도록 동기를 부여하는 간결한 설명이 이어집니다.

긍정적인 예도 있지만 쇼를 훔치지는 않습니다. 주요 초점은 여전히 ​​제안에 있습니다. 이 예에서는 복잡한 텍스트를 사용자 정의 아이콘과 함께 글머리 기호로 나누는 것이 얼마나 도움이 될 수 있는지 알 수 있습니다. 청중이 이 뱅킹 시스템의 주요 이점을 즉시 볼 수 있기 때문에 전반적인 가독성을 높이고 이메일을 보다 전환 중심적으로 만듭니다. 마지막으로 중요한 것은 법적 근거가 완전히 없기 때문에 독자가 제안의 의미에 집중하는 데 도움이 된다는 것입니다.

우리는 이전에 개선의 여지가 있는 레스토랑 방문 페이지를 시연했습니다. 이제 전환 중심 랜딩 페이지 디자인의 전형을 살펴보겠습니다.

이 페이지는 사용자의 관심을 끌고 쿠키를 원하게 만듭니다. 다른 것에 집중하는 것은 불가능합니다. 톡톡 튀는 헤드라인과 군침이 도는 사진은 페이지 내용을 즉시 설명하고 나머지는 명확한 설명으로 설명합니다. 페이지 작성자는 브랜드 이력 및 사용자 생성 콘텐츠 피드와 같이 덜 중요한 섹션을 바닥글에 더 가깝게 배치하여 처음 방문자의 주의를 분산시키지 않았습니다.

원칙 2. 견고한 구조 만들기

우리 인간과 마찬가지로 상업 콘텐츠도 강력하고 건강한 백본, 즉 모든 요소를 ​​제자리에 유지하는 구조가 필요합니다. 올바른 이메일 또는 방문 페이지 계층 구조는 사용자가 인지도를 높이고 브랜드에 대한 신뢰를 구축하며 쉽게 자연스럽게 전환하는 데 도움이 됩니다.

보기에 좋은 템플릿을 선택하는 것은 초보적인 실수입니다. 콘텐츠를 개조하고 약간의 희생을 감수해야 합니다. 대신 정신적으로 또는 수동으로 대략적인 초안을 작성하십시오. 목표를 정의하고 청중과 소통하는 데 필요한 내용을 간략히 설명합니다. 그런 다음 바로 그 구조에 맞는 템플릿을 찾으십시오.

방법은 다음과 같습니다. Diadora의 특별 제안 이메일입니다.

이 전환 중심 구조는 전혀 무작위가 아닙니다. 대부분의 전자 상거래 이메일은 동일한 중요도 계층 구조를 가지고 있습니다. 상단에는 깔끔한 메뉴, 시선을 사로잡는 시각적 요소, 짧은 설명 및 CTA 버튼이 있습니다. 이러한 주요 요소 다음에는 일반적으로 클릭 가능한 제품 미리보기 및 추가 설명이 약간 덜 중요합니다.

견고한 구조를 갖는다는 것은 블록을 추가하고 이메일이나 페이지를 텍스트와 이미지로 가득 채우는 것을 의미하지 않습니다. 네거티브 또는 여백을 확보하는 것도 중요합니다. 레이아웃에 숨을 쉴 수 있는 공기를 주고 가볍고 단순하며 우아하게 보이게 합니다. 공백은 나머지 요소에 주의를 끌기 때문에 현명하게 사용할 때만 전환율을 높입니다.

AI 음성 분석 서비스를 위해 정밀하게 조립된 이 랜딩 페이지를 살펴보십시오.

이 페이지는 공백을 잘 활용합니다. 많은 정보를 가지고 있지만 요소들이 서로 겹치지 않고 시각적 충돌을 일으키지 않습니다. 그러나 페이지는 전환 친화적입니다. 대조되는 많은 CTA 버튼, 실행 가능한 카피 및 가치 기반 콘텐츠가 있습니다. 구조는 있지만 방문자가 숨을 쉴 수 있을 만큼의 공기도 있습니다.

원칙 3. 일관성 유지

스타일을 실험하고 활용하는 것은 좋지만 콘텐츠 자산이 인식되고 권위를 얻고 리드를 단골 고객으로 만들기 위해 일관된 모양을 유지해야 합니다. 쉽게 식별할 수 있는 그래픽 요소, 고유한 글꼴 조합 또는 색상 팔레트 - 브랜딩에 해당하고 콘텐츠를 구별할 수 있는 모든 것을 사용하십시오.

브랜드 인지도는 애플이나 테슬라와 같은 대기업들만의 고민이 아니다. 모든 규모의 브랜드는 인지도가 높을 뿐만 아니라 핵심 청중이 높이 평가하고, 사랑하고, 홍보할 수 있습니다. 비상용 키트 생산자인 Judy를 예로 들어 보겠습니다.

이 이메일을 Judy 웹사이트와 비교하면 식별 가능한 서체, 동일한 주황색 음영, 친절하고 배려하는 어조, 교육적 요소, 가족 안전에 대한 강조와 같은 유사점을 즉시 알 수 있습니다. 단절은 없습니다. 단지 다른 매체를 통해 동일한 브랜드와 상호 작용하고 있다고 느낍니다.

사용자가 특정 회사의 이메일을 정기적으로 수신하면 고유한 커뮤니케이션과 시각적 스타일에 익숙해지고 순식간에 해당 브랜드의 이메일을 인식하게 됩니다. 청중과의 관계를 심화하려면 매번 다른 채널에서 통합된 경험을 제공해야 합니다.

원칙 4. 이점 강조

우리는 블로그에서 이메일 디자인과 랜딩 페이지 디자인에 대해 많은 글을 쓰고 있으므로 고객 중심 및 이익 중심 접근 방식의 중요성에 대해 이미 들어보셨을 것입니다. 전환율을 높이는 데 중요한 요소입니다. 혜택은 특정 제품이나 서비스를 소비자에게 바람직하게 만듭니다. 재치 있는 카피와 매력적인 이미지 또는 비디오를 사용하여 강조할 수 있습니다.

베스트셀러 작가이자 연사이자 리더십 신뢰 전문가인 David Horsager를 홍보하는 랜딩 페이지를 살펴보겠습니다.

텍스트로 개인의 카리스마를 전달하는 것은 정말 어려운 일이지만 이 랜딩 페이지는 요점을 정확히 전달하는 카피, 설득력 있는 리뷰, 시선을 사로잡는 동영상으로 성공적입니다. 웹사이트는 대기업이 행사에서 연설하기 위해 David를 고용한 이유와 그가 실제 가치를 제공하고 모든 행사 참석자에게 긍정적인 영향을 미칠 수 있는 방법을 명확하게 보여줍니다. 방문객들은 David의 전문 지식을 알게 된 후 David의 팀에 연락하는 것이 좋습니다.

또한 선택한 이미지를 통해 제품의 장점을 번역하여 특정 분위기나 분위기를 전달할 수도 있습니다.

이 이메일은 말을 하는 대신 사용자가 자신의 감정적 측면을 활용하여 운동과 움직임의 힘을 축하하도록 초대합니다. 아식스 운동화를 신고 활동적인 삶을 살고 있는 자유분방한 캐릭터들의 진솔한 실사 사진이 포함되어 있습니다. 어안 효과는 이미지를 보다 자연스럽게 보이게 하고 그 분위기를 완벽하게 포착합니다. 한 쌍을 주문하고 Asics 커뮤니티에 가입하는 것은 매우 유혹적입니다.

원칙 5. CTA를 돋보이게 만드세요

귀하의 콘텐츠는 CTA 없이는 무력합니다. 스크롤 없이 볼 수 있는 부분 위에 눈에 잘 띄는 CTA 버튼이 하나 이상 있고 콘텐츠에 스크롤이 필요한 경우 텍스트 전체에 추가 CTA가 있는지 확인하세요. CTA 문구를 짧게 유지하고 사용자가 지금 행동을 취하도록 동기를 부여하는 활성 동사를 포함하세요.

전환 중심 랜딩 페이지 디자인 영감을 얻으려면 Blendjet의 리소스로 이동할 수 있습니다.

"오늘 구매하세요"는 효과적인 CTA의 환상적인 예입니다. 속달 배송을 제공하는 경우 CTA에 이를 언급하여 사용자가 몇 시간 또는 며칠 만에 제품을 손에 넣을 수 있음을 알립니다. 이 페이지에서 "레시피 탐색"과 같은 추가 CTA도 볼 수 있지만 의도적으로 투명하게 만들어졌기 때문에 눈에 띄지 않습니다.

브랜드의 색상 팔레트에 밝은 색상이 포함되어 있지 않은 경우 Under Armour의 이 예와 같이 클릭 유도문안 버튼을 크게 만들어 눈에 띄게 만들 수 있습니다.

경험상 좋은 규칙은 CTA의 글꼴 두께를 일반 텍스트보다 무겁게 유지하고 첫 번째 헤드라인보다 가볍게 유지하는 것입니다. 버튼은 하이퍼링크보다 훨씬 더 알아보기 쉽고 클릭하기 쉽기 때문에 모든 유형의 상업 이메일에서 잘못 사용할 일이 없습니다.

지원 문구가 항상 필요한 것은 아닙니다. 페이지나 이메일이 좀 더 어수선해 보이지만 CTA가 구매를 암시하는 경우에는 필요합니다. 그러면 "환불 보장" 또는 "14일 동안 무료로 사용해 보기"가 사용자의 의심을 해소하고 궁극적으로 전환율을 높일 수 있습니다.

원칙 6. 신뢰를 얻다

사회적 증거는 올바르게 사용하면 청중의 마음에 열쇠가 될 수 있습니다. 우리는 이미 블로그에서 고객 피드백을 수집하는 방법에 대해 이야기했습니다. 작업을 시작하려면 긍정적인 리뷰가 있는지 확인하십시오.

로고 막대에 자신을 제한하지 마십시오. 로고 막대는 귀하의 비즈니스에 대한 감정이 아니라 귀하와 함께 일한 브랜드를 거의 보여주지 않습니다. 모든 고객의 평가를 작은 성공 사례로 전환하는 것이 좋습니다. 당신의 사회적 증거가 더 감동적이고, 다양하고, 진정성 있을수록 더 신뢰할 수 있습니다. 고객이 제공할 준비가 되면 실명, 직업 및 사진을 추가하십시오. 그러나 더 중요한 것은 제품이나 서비스에서 촉발된 실제 인상과 감정을 설명하도록 요청하는 것입니다.

Working Against Gravity는 온라인 영양 코칭 프로그램이며 고객은 전후 사진과 함께 인상적인 변화 스토리를 공유하는 것을 부끄러워하지 않습니다.

고객의 신뢰를 얻는 또 다른 방법은 브랜드의 유산과 풍부한 역사를 상기시키는 것입니다. 패션 스포츠웨어 브랜드 세르지오 타키니가 선호하는 방식이다.

귀하의 비즈니스가 지역적 또는 전 세계적으로 문화적 영향을 미치는 경우 해당 사실을 매력적인 이야기로 전환할 수도 있습니다. 사람들은 역사가 있는 브랜드에 끌립니다. 브랜드는 신뢰성과 무결성, 품질에 대한 헌신을 보여주기 때문입니다.

원칙 7. 마찰 없는 경험 만들기

사용자 경험은 콘텐츠 로딩 속도에서 시작됩니다. 방문 페이지가 너무 무거워서 전환을 방해한다고 생각되면 추측하지 말고 Google PageSpeed ​​Insights를 사용하여 확인하십시오.

다음 예는 특수 효과 및 기타 무거운 요소를 사용하지 않고도 멋지고 다채로운 웹사이트를 만들 수 있다는 것을 확신시켜 줄 것입니다.

봄바스는 내구성이 뛰어난 양말, 속옷, 셔츠를 생산하는 회사입니다. 그들은 또한 구매할 때마다 물품을 기부함으로써 노숙자들을 지원합니다. 이 놀라운 목적 중심의 사업은 사용하기만 하면 되는 간단하고 직관적인 웹사이트 덕분에 속옷 쇼핑을 더 즐겁게 만들었습니다.

또한 콘텐츠를 분석하고 사용자 친화적이고 모바일 우선적으로 만들어야 합니다. 한 필드 양식, 단일 열 레이아웃 및 반응형 디자인을 사용하여 이동 중에도 이메일과 페이지를 쉽게 읽을 수 있습니다. 모든 이메일의 절반 이상이 모바일 장치에서 열립니다.

인터넷 속도가 느리더라도 모든 장치에서 이메일이 올바르게 표시되는지 절대적으로 확인하는 한 가지 방법이 있습니다. 단순함을 수용하고 의도적으로 번성하거나 부피가 큰 요소를 콘텐츠에서 제거할 수 있습니다.

불완전하고 자연스러운 느낌을 주는 일반 텍스트 이메일을 선호하는 경향이 있으므로 현명한 스타일 선택이 될 것입니다. 깨끗하고 최소한의 이메일은 부드러운 경험을 제공하고 사용자를 압도하지 않고 부드럽게 전환하도록 유도합니다.

모두 함께 묶어

전환 중심 디자인의 7가지 원칙을 따르면 콘텐츠에 조화롭고 균형 잡힌 모양을 부여하는 동시에 새로운 리드를 포착하고 고객 기반을 확장할 수 있습니다. 방금 배운 내용을 구현하기 위해 SendPulse 도구를 사용해 볼 수도 있습니다.

드래그 앤 드롭 랜딩 페이지 빌더로 시작하는 것은 어떻습니까? 필요한 요소만 포함하여 템플릿을 사용자 정의하고 변환 괴물을 만들 수 있습니다. 또는 코드가 필요 없는 이메일 작성기 및 자동화 서비스로 이메일 마케팅 캠페인을 강화하십시오. 우리의 도구를 사용하면 창의적인 자유를 충분히 얻고 전환율을 높일 수 있는 새로운 방법을 열 수 있습니다!