마찰 없는 양식을 위한 6가지 가입 페이지 디자인 방법

마케팅 담당자는 잠재 고객이 누구인지, 어떻게 행동하는지 등 잠재 고객을 잘 이해하고 있다고 생각하고 싶을 것입니다. 따라서 그들 중 한 명이 귀하의 웹사이트나 가입 페이지를 방문하면 다음에는 무엇을 할 것 같습니까?

아마도 서비스에 등록할 것입니다. 그렇죠?

한 브랜드에서 알 수 있듯이 항상 그런 것은 아닙니다. 그들에게 있어 CTA와 "감사합니다" 페이지 사이에 있는 무언가가 비즈니스에서 잠재 고객의 거의 4분의 1을 잃게 만드는 원인이 되었습니다.

가입 페이지에 문제가 있습니다.

가입 페이지가 무엇인가요?

"등록 페이지"라고도 하는 등록 페이지는 모두 동일하지 않습니다. 일부는 PPC 클릭 후 방문 페이지입니다. 다른 사람은 탐색을 통해 홈페이지에 링크 - 일부는 심지어 홈페이지입니다. 차이점에도 불구하고 서비스 가입을 생성한다는 동일한 목표를 공유합니다.

대부분의 경우 가입 페이지는 비즈니스 전환 유입경로의 마지막 단계입니다. 잠재 고객이 브랜드를 평가하고 서비스가 필요한 것을 제공하기로 결정한 후 탐색하는 곳입니다.

그 때문에 가입 페이지는 잠재 고객이 전환하도록 설득하는 것보다 전환을 수행하는 것과 관련된 마찰을 최소화하는 데 더 중점을 둡니다. 사용성에 초점을 맞추는 것은 사회적 증거, 평가, 관심을 끄는 미디어와 같은 기존의 클릭 후 방문 페이지 요소가 뒷전으로 밀려난다는 것을 의미합니다.

"시작하기"를 클릭하면 홈페이지에 팝업되는 아래 Shopify 가입 페이지를 살펴보세요.

정말 짧은 형식입니다. 그리고 잠시 후에 보게 되겠지만 대부분의 가입 페이지는 헤드라인, 몇 가지 양식 필드 및 클릭 유도문안만 포함하는 동일한 방식으로 구축됩니다.

그러나 많은 사람들이 그런 방식으로 설계되었다고 해서 그것이 올바른 방식이라는 의미는 아닙니다. 성공적인 가입 페이지를 만드는 것은 방해 요소를 제거하고 양식 필드를 줄이는 것 이상입니다. 과제는 두 가지입니다.

최대 가입을 생성하려면 등록과 관련된 단계를 최소화하는 동시에 사용하는 몇 가지 요소를 최대한 활용해야 합니다. 다음은 전문가의 몇 가지 팁과 통찰력입니다.

1. 이익 중심의 헤드라인을 사용하십시오.

잠재 고객이 귀하의 가입 페이지에 도착할 때쯤이면 대부분의 경우 이미 귀하의 서비스를 평가하고 자신의 요구 사항에 적합하다고 판단한 것입니다. 그러나 그것이 그들이 왜 거기에 있는지 상기시켜 주면 안된다는 의미입니까?

아래에서 Copyblogger는 소셜 증거가 포함된 헤드라인을 사용하여 사용자가 가입하도록 설득하고, 위에서 Shopify는 잠재 고객에게 평가판이 14일 동안 무료임을 상기시킵니다.

단순한 것도 좋지만 헤드라인으로 USP를 강화할 여지가 있다면 그렇게 하십시오. 전환에 부정적인 영향보다 긍정적인 영향을 미칠 가능성이 높습니다.

2. 모든 필드를 필수 항목으로 설정

이 팁은 방문자가 양식을 작성하도록 요구하는 것이 아니라 올바른 필드를 선택했는지 확인하는 방법에 대한 것입니다. 즉, 양식 필드가 선택 사항이라고 결정한 경우 잠재 고객을 등록하는 데 해당 정보 가 필요하지 않습니다 .

예를 들어 Groupon과 같은 서비스는 관련 거래 및 쿠폰을 제공하기 위해 가입 시 사용자의 위치를 ​​알아야 합니다. 그러나 위치는 Instapage가 고객에 대해 알 수 있는 중요한 정보가 아니므로 등록 시 위치를 묻지 않습니다.

잠재 고객의 회사, 직위 또는 직원 수를 알 필요가 없다면 묻지 마십시오. 그들이 해야 할 일은 적을수록 좋습니다.

고려해야 할 양식 필드

통합/제거를 고려할 몇 가지 양식 필드:

• 사용자 이름: 사용자가 가입하기 위해 사용자 이름이 정말로 필요합니까? 아니면 이메일을 요청하고 로그인한 후 사용자 이름을 결정하도록 할 수 있습니까?
• 비밀번호 확인: 이 필드는 구식이며 또 다른 비실용적인 기술인 비밀번호 마스킹 때문에 필요합니다.

비밀번호 마스킹은 양식에 입력할 때 모든 문자를 동일한 글머리 기호처럼 보이게 하는 기술입니다. 보안이 강화된 느낌을 주지만 실제로 보호하는 것은 사람들이 어깨 너머로 엿보는 것뿐입니다.

스스로에게 물어보십시오. 내 잠재 고객이 정말 혼잡한 공개 환경에서 비밀번호를 생성하고 있습니까? 가능성이 없습니다.

"비밀번호 확인" 필드를 사용하는 대신 사용자가 원래 "비밀번호" 필드의 마스크를 해제하거나 MailChimp가 가입 페이지에서 하는 것처럼 "표시/숨기기" 기능을 사용하여 입력 내용을 볼 수 있도록 합니다.

• 이름과 성: 이름과 성을 하나의 "성" 필드로 통합하는 것을 고려하십시오. 아니면 그냥 이름을 물어보세요. 젠장, 아예 없애버릴까도 생각해봐.

아래의 몇 가지 예(Buffer, Asana, Crazy Egg)에서 가입 페이지는 즉시 이름을 묻지 않지만 전환된 고객이 플랫폼에 로그인하면 세부 정보를 입력할 수 있습니다.

• 사용자 동의: 사용자가 사용자 약관에 동의한다는 확인란을 클릭하게 하는 대신 LinkedIn이 아래에서 수행하는 방식으로 CTA 위에 메시지를 포함하는 것을 고려하십시오. 변환하면 사용자가 자동으로 동의한다고 명시되어 있습니다.

3. 그 모든 정보가 절대적으로 필요한 경우 단계적으로 요청하십시오.

가끔은 새로운 사용자를 등록하기 위해 많은 정보 가 필요할 때가 있습니다. 현장 결제가 필요한 가입은 청구서 수신 주소 및 신용 카드 번호와 같은 민감한 정보를 캡처하기 위해 긴 양식이 필요합니다. 이 경우 등록 프로세스를 여러 단계로 나누는 것을 고려하십시오.

Formstack의 보고서에 따르면 작년에 다중 페이지 등록 양식이 단일 페이지 등록 양식보다 9% 이상 성능이 우수했습니다.

왜요?

다중 페이지 양식은 프로세스를 몇 개의 짧은 단계로 분리하여 변환을 덜 복잡하게 만듭니다. 더 많은 페이지는 더 큰 글꼴, 더 긴 필드 및 더 짧은 형식에 맞지 않을 수 있는 설명 레이블을 위한 더 많은 공간을 의미합니다. 또한 다중 페이지 등록에는 일반적으로 사용자가 등록이 얼마나 진행되었는지 알려주는 편리한 진행 표시줄이 함께 제공됩니다.

기억하십시오: 몇 개의 필드를 제거하여 양식을 줄일 수 있다면 줄이십시오. 할 수 없다면 작은 공간에 모든 것을 집어넣어 더 짧게 보이도록 하지 마십시오. 페이지를 어지럽히고 잠재 고객을 압도할 뿐입니다.

4. 모달 창 사용 고려

Canva와 같이 가입 절차가 빠른 사용자에게는 모달 창이 몇 가지 이점을 제공합니다.

디자이너인 Joshua Johnson은 그 이유를 다음과 같이 설명합니다.

다른 페이지로 이동하는 대신 현재 콘텐츠를 오버레이합니다. 뭔가 새로운 곳으로 옮겨가는 것보다 덜 불안하고 방해가 되는 것 같은 느낌이 듭니다. 홈페이지 그래픽을 어둡게 하고 모달 사인 등록 양식을 불러오면 프로세스가 빠르고 간편하며 곧 다시 검색할 수 있다는 느낌을 받을 수 있습니다.

인터넷 사용자가 그 어느 때보다 참을성이 없을 때 즉시 탐색할 수 있다는 인상을 주는 것은 좋은 습관입니다.

5. 소셜 자동 완성 활성화

아래의 거의 모든 가입 페이지 예에서 소셜 자동 완성 버튼을 볼 수 있습니다. 이를 통해 사용자는 이미 소셜 네트워크에 제출한 관련 개인 정보를 가져와서 한 번의 클릭으로 양식을 무시할 수 있습니다.

Formstack은 이 기능을 포함함으로써 사용자가 189% 더 높은 양식 전환을 생성할 수 있음을 발견했습니다. 또한 86%의 사람들이 다른 웹사이트에서 새 사용자 계정을 만드는 것이 불편하다고 말합니다. 가능한 한 쉽게 전환하는 것이 목표인 경우 소셜 자동 완성을 활용하는 것은 어렵지 않습니다.

6. 자리 표시자 텍스트 버리기

전환하려면 방문자가 양식을 작성하는 방법을 알아야 합니다. 그러나 자리 표시자 텍스트를 사용하는 것이 가장 좋은 방법은 아닙니다.

Nielsen Norman Group에 따르면 양식 필드에 밝은 회색 텍스트를 추가하면 다음과 같은 이점이 있습니다.

• 사용자의 단기 기억을 변형시킵니다. 입력을 시작하고 회색 텍스트가 사라지면 "내 비밀번호에 다시 몇 글자가 필요한가요?"라고 생각합니다.
• 양식 필드를 보이지 않게 만드십시오. 빈 양식 필드는 실제로 자리 표시자가 있는 필드보다 잠재 고객에게 더 눈에 띕니다.
• 사용자가 양식을 탭하는 것을 짜증나게 합니다. "탭" 버튼을 사용하여 양식을 빠르게 완성하는 사람들은 사라지기 전에 설명 자리 표시자 텍스트를 읽을 시간이 없습니다.
• 방문자를 혼란스럽게 합니다. 자동으로 채워진 정보로 자리 표시자 텍스트를 오인할 수 있습니다.

혼동을 피하기 위해 방문자에게 정확히 무엇을 포함해야 하는지 알려주는 레이블을 각 필드 위에 포함하십시오. 자리 표시자 텍스트는 등록 페이지에서 더 많은 마찰을 일으킬 뿐입니다.

전문가가 등록 페이지를 만드는 방법

이제 가입 페이지에 무엇을 포함해야 하는지 알았으므로 전문가가 어떻게 자신을 구축하는지 살펴보겠습니다.

링크드인

이 LinkedIn 가입 페이지는 다양한 클릭 후 방문 페이지입니다. 독립형입니다. 즉, 탐색을 통해 회사 웹사이트에 연결되지 않습니다. 로고에도 없습니다.

형식 위의 헤드라인은 더 강력한 이점을 전달할 수 있습니다. 그 위에 4개의 필드가 마찰을 낮게 유지합니다. 하지만 이름과 성을 하나의 "전체 이름" 필드로 결합하면 이러한 마찰을 훨씬 더 낮출 수 있습니다.

각 텍스트 상자 위의 회색 글자는 잠재 고객이 무엇을 입력해야 하는지 알 수 있도록 하고 "비밀번호" 필드 위에는 해당 레이블이 훨씬 더 구체적입니다. 그러나 해당 "비밀번호" 필드는 각 문자 유형에 대해 동일한 글머리 기호를 표시하여 모범 사례를 따르지 않습니다.

마지막 양식 필드 아래의 추가 회색 글자는 방문자가 "지금 가입"을 클릭하면 LinkedIn의 사용자 계약, 개인 정보 보호 정책 및 쿠키 정책에 동의함을 알려줍니다. 그러면 잠재 고객이 동의하기 위해 옵트인 상자를 클릭해야 하는 추가 단계를 절약할 수 있습니다.

클릭 유도문안에서 "지금"이라는 단어는 사용자가 CTA 버튼을 클릭하면 즉시 네트워크의 일부가 됨을 강조합니다. 버튼 자체가 닿는 한 조금 더 튀어나올 수 있지 않을까? 다른 배경이나 버튼 색상은 사용자가 참여하기 위해 클릭해야 하는 위치에 더 많은 관심을 끌 수 있습니다.

그 아래에 있는 "Facebook으로 계속하기" 버튼은 전체 프로세스를 간소화합니다. 세계 최대 소셜 네트워크에 프로필이 있는 경우 해당 버튼을 클릭하면 Facebook과 이미 공유한 데이터를 사용하여 자동 완성 기능이 자동으로 양식을 완성할 수 있습니다.

카피블로거

여기에 단순한 양식 이상의 가입 페이지가 있습니다. 잠재 고객이 가장 먼저 알아차릴 수 있는 것은 거대하고 사회적 증거로 가득 찬 헤드라인입니다. 번역하면 "334,000명의 마케터에게 우리가 충분하다면 당신에게도 충분합니다."라고 되어 있습니다.

또한 일반적으로 "잃어버릴 것에 대한 두려움"을 의미하는 "FOMO"로 알려진 현상을 이용합니다. 334,000명의 동종 업계 동료들이 누리고 있는 유리한 출발을 놓치고 싶어하는 사람은 아무도 없습니다.

그 밑에 잠재 고객이 등록 후 얻을 수 있는 모든 귀중한 무료 콘텐츠의 미리 보기가 해당 양식을 작성하도록 유혹합니다. 그러나 양식 자체는 더 잘 설계될 수 있습니다.

"비밀번호 재입력" 필드를 제거하고 이름과 성을 "전체 이름"으로 축약함으로써 Copyblogger는 텍스트 상자의 수를 5개에서 3개로 줄이고 결과적으로 가입과 관련된 마찰의 양을 줄일 수 있습니다. "비밀번호 재입력" 필드 대신 표시/숨기기 옵션을 사용하여 비밀번호를 입력할 때 정확성을 보장할 수 있습니다.

마찰을 더욱 줄이려면 각 필드 내의 레이블을 대신 위에 배치해야 합니다. 지금은 잠재 고객이 텍스트 상자를 클릭하면 회색 글자가 사라지므로 입력한 내용을 쉽게 잊게 됩니다.

전반적으로 양식의 몇 가지 결함과 몇 가지 아웃바운드 링크가 이 가입 페이지의 전환에 영향을 미칠 수 있지만 Copyblogger의 무료 콘텐츠는 너무 가치가 있어 그냥 지나칠 수 없습니다.

미친 계란

먼저 업계에서 스스로를 '리더'라고 칭하는 기업은 커피를 세계 최고라 칭하는 카페와 같다. 말하는 사람은 많지만 증명할 수 있는 사람은 적습니다. 자신을 최고라고 칭하는 대신 통계를 사용하거나 자신이 최고라고 생각하는 잘 알려진 고객의 말을 인용하여 주장을 뒷받침하십시오.

그 헤드라인 아래에는 Crazy Egg를 사용할 때 얻을 수 있는 통찰력을 미리 보여주는 이미지가 있고, 이미지 오른쪽에는 해당 통찰력이 무엇과 함께 무엇을 할 수 있는지 설명하는 세 줄의 카피가 있습니다.

이 초단형에서는 마찰이 최소화됩니다. 헤드라인은 평가판이 무료이고 버튼이 흰색 배경에 팝업되며 클릭 유도문안이 1인칭으로 ​​작성된다는 점을 강조합니다. 현재 이 양식이 고통 없이 유지되는 유일한 방법은 각 필드에 있는 혼란스러운 회색 자리 표시자 텍스트입니다.

그 아래에 알아볼 수 있는 클라이언트 로고 형태의 사회적 증거와 "200,000개 이상의 기업이 Crazy Egg로 더 잘 전환합니다"라는 텍스트가 이 가입 페이지의 설득력을 높입니다.

전체적으로 이 페이지는 방문자에게 전환을 쉽게 만듭니다.

완충기

Buffer.com에서 "무료 가입" 클릭 유도문안을 클릭하면 홈페이지가 짧은 팝업 형식을 배포하고 주변 콘텐츠를 어둡게 하여 가입 페이지로 전환합니다.

해당 팝업에서 변환 프로세스는 간단합니다. 세 가지 소셜 로그인 버튼 중 하나를 클릭하여 양식을 무시하거나 이메일 주소와 비밀번호를 입력합니다. 어느 쪽이든 마찰은 최소화됩니다. 이 양식을 더 쉽게 작성할 수 있는 유일한 방법은 무엇입니까? 그 산만한 자리 표시자 텍스트를 제거하십시오.

아사나

기껏해야 Asana에서 이 페이지에 가입하려면 두 번만 클릭하면 됩니다. Google 로그인 기능을 사용하면 1분도 걸리지 않을 수 있습니다.

양식 위의 문장은 가입해야 하는 이메일까지 양식을 작성하는 방법을 알려줍니다.

하지만 그 바로 아래에 회색 자리 표시자 텍스트로 채워진 양식 필드가 사용자의 주의를 분산시킵니다. 그러나 사람들이 가입하는 것을 막을 수 있습니까? 가능성이 없습니다. 이 양식은 거의 마찰이 없고 완성하기 쉽습니다.

Instapage로 최적화된 등록 페이지 만들기를 시작하고 지금 Instapage Enterprise 데모를 요청하십시오.