팝업 UX 디자인: 모범 사례, 팁 및 예

이익에 중점을 둔 모든 웹사이트는 방문자로부터 더 많은 전환을 얻는 데에도 초점을 맞추고 있습니다 .

팝업은 전환율을 높이는 최고의 도구입니다. 팝업을 사용하기 시작한 전자상거래 상점에서 본 결과는 다음과 같습니다.

• Kiss My Keto 는 장바구니 포기율을 20% 줄 였습니다.
• Christopher Cloos 는 전환율을 37% 향상시켰습니다.
• 팔! Cindy Joseph 작성 단 한 달 만에 전자상거래 수익이 $148,297 증가했습니다.

위 캠페인의 성공 비결은 각 웹사이트의 전반적인 사용자 경험(UX)과의 통합이었습니다. 이러한 회사는 팝업을 표시하는 동안 사용자를 방해하지 않고 대신 유용하고 관련성 높은 콘텐츠를 적시에 제공할 수 있을 때 팝업이 나타나도록 영리하게 설정했습니다.

사이트에서 이를 실현할 수 있다면 UX 중단을 피할 수 있을 뿐만 아니라 실제로 개선할 수 있습니다.

이 기사에서는 다음과 같이 시작하여 이를 수행할 수 있는 5가지 방법을 살펴보겠습니다.

항목 팝업은 매우 혼란스러울 수 있습니다.

웹사이트가 로드되는 즉시 나타나는 팝업입니다. 방문자가 자신의 위치를 ​​파악하고 사이트의 모든 정보를 받아들이기 시작하면 갑자기 팝업 팝업이 표시되어 방문자가 중단됩니다.

항목 팝업도:

• 방문자가 원하는 콘텐츠에 액세스하지 못하도록 방지
• 관련 없는 콘텐츠가 포함된 경우가 많습니다.
• 혼란스러운 방문자

요컨대, 거의 항상 도움이 되기보다는 성가시고 사이트의 UX를 저하시킵니다.

전통적인 항목 팝업으로 방문자를 귀찮게 하는 대신 방문자가 귀하의 웹사이트를 먼저 알게 하십시오. 그런 다음 그들의 행동이 보조 메시지를 볼 준비가 되었음을 나타낼 때 팝업을 표시할 수 있습니다.

다음은 사용자 참여를 기반으로 팝업을 실행하는 몇 가지 일반적인 방법입니다.

• X초 후에 팝업 표시: 이 옵션을 사용하면 방문자가 보고 있는 페이지를 탐색할 수 있습니다. 페이지에서 일정 시간을 보낸 후 관심을 끌 수 있습니다.

• X퍼센트 스크롤 후 팝업 표시: 방문자가 웹 페이지의 특정 비율 아래로 스크롤한 후에 팝업이 나타나도록 설정할 수 있습니다.
  
  예를 들어 방문자가 블로그 기사의 끝에 도달했을 때 표시되는 팝업을 설정할 수 있습니다. 즉, 방문자가 새로운 콘텐츠를 받을 준비가 되었음을 의미합니다(연락처 정보에 대한 대가로 무료 전자책 제공).

• 이탈 의도 시 팝업 표시: 이렇게 하면 사이트를 떠나려는 방문자의 관심을 끌 수 있습니다.
  
  이탈 의도 팝업을 사용하면 누군가가 전환하지 않고 떠나는 것을 막을 수 있고 쇼핑을 계속하거나 이메일 목록을 구독하도록 설득할 수 있습니다.

또한 "빈도" 또는 팝업이 나타나도록 설정된 최대 횟수에 주의를 기울이는 것이 중요합니다. 일반적으로 방문자당 1~2회로 제한하려고 합니다.

여러 팝업을 표시하는 것은 괜찮지만(아래에서 볼 수 있음) 동일한 팝업을 계속해서 보는 것은 사용자를 미치게 만들 것입니다.

다음은 사용자 참여를 기반으로 팝업을 사용하는 방법의 좋은 예입니다. Obvi의 이탈 의도 팝업 은 사이트를 떠나는 방문자에게만 나타납니다.

모든 방문자와 관련된 마법의 팝업은 없습니다. 모든 사람이 동일한 중요 정보나 할인 제안을 동시에 볼 필요는 없기 때문입니다.

안타깝게도 개개인의 문제에 대한 해결책을 찾아 팝업으로 제시할 수는 없습니다.

대신 방문자를 유사한 요구 사항과 특성을 공유하는 그룹으로 분류할 수 있습니다.

이러한 세그먼트는 산업 및 상점에서 판매하는 제품 유형에 따라 다릅니다. 그러나 모든 기업은 방문자가 구매 프로세스의 어느 단계에 있는지에 따라 방문자를 그룹으로 분류할 수 있습니다.

"고객 여정"에 대해 생각해 보십시오. 사람들이 브랜드에 대해 처음 알게 된 방법, 방문 페이지에 도달하는 방법, 사고 싶은 제품을 찾는 방법 등입니다.

고객 여정의 여러 단계에 있는 세그먼트에는 서로 다른 요구 사항이 있으며 여기에 표시되는 팝업은 이를 반영해야 합니다.

이제 고객을 분류하는 데 사용할 수 있는 몇 가지 다른 요소를 살펴보겠습니다. 또한 고객 여정의 여러 단계에 있는 다양한 방문자를 위한 몇 가지 캠페인 아이디어를 공유할 것입니다.

2.1. 차가운 대 뜨거운 전망

"뜨거운 잠재 고객"은 바로 지금 무언가를 구매하려는 고객인 반면, "차가운 잠재 고객"은 여전히 ​​옵션을 탐색 중이며 아무것도 구매할 준비가 되지 않은 고객입니다.

모든 방문자를 즉시 ​​구매할 준비가 된 "인기 있는 잠재 고객"으로 취급하는 대신 인기 있는 잠재 고객과 냉담한 잠재 고객에 대해 서로 다른 전환 목표를 만들어야 합니다.

인기 있는 잠재 고객의 전환 목표는 간단합니다. 지금 구매하세요. 메시지는 시간 제한 할인 또는 거래 를 사용하여 이러한 잠재 고객을 즉시 판매하도록 유도해야 합니다.

일반적으로 이메일 목록에 가입하도록 유도하는 냉담한 잠재 고객을 위한 2차 전환 목표가 필요합니다. 그들의 연락처 정보를 얻은 후에는 시간이 지남에 따라 그들과 의사 소통하고 구매할 준비가 될 때까지 관계를 발전시킬 수 있습니다.

이러한 이유로 다운로드 가능한 전자책과 같이 방문자가 구독하고 싶게 만드는 콘텐츠를 보여줘야 합니다.

실제로 어떻게 작동하는지 봅시다. 다음은 몇 가지 BOOM! 캠페인 의 좋은 예입니다 .

그들은 제품 라인에 관심이 있지만 아직 구매할 준비가 되지 않은 냉담한 잠재 고객을 위해 전자책을 리드 자석 으로 제공합니다.

가장 인기 있는 잠재 고객(BOOM!의 콘텐츠에 가장 큰 관심을 표명했거나 장바구니를 버리려는 사람)은 10% 할인 쿠폰을 나중에 구매하기보다는 지금 구매하는 인센티브로 사용합니다.

2.2. 지역 타겟팅

국제적으로 판매하는 경우 위치 기반 타겟팅 또는 지역 타겟팅은 전환율을 높이는 좋은 방법이 될 수 있습니다. 지역 타겟팅을 사용하면 원하는 만큼 많은 대상 국가에 대해 다양한 메시지를 만들 수 있습니다.

위치를 기반으로 방문자를 분류하면 배송 제안과 같은 국가별 거래를 제공할 수 있습니다. 다음은 예입니다.

2.3. 구매 프로세스의 단계에 따라 방문자 타겟팅

각 고객은 다음과 같은 인식 단계를 거칩니다.

5가지 수준의 인지도는 고객이 사이트와 상호 작용할 때 갖게 될 다양한 사고 방식을 설명합니다. 귀하의 브랜드가 존재한다는 것을 방금 알게 된 고객은 충성도가 높은 고객과 동일한 페이지를 매우 다르게 볼 것입니다.

그렇기 때문에 팝업을 통해 이러한 각 세그먼트에 서로 다른 보조 메시지를 전달해야 합니다.

다음은 이러한 그룹 중 하나에 맞게 조정된 메시지의 몇 가지 예입니다.

1. 문제 인식 방문자 는 자신에게 문제가 있음을 알고 있지만 여전히 문제를 해결하는 가장 좋은 방법을 찾으려고 노력하고 있습니다. 따라서 이 시점에서 당신의 목표는 그들이 그들의 문제(피부 관리 문제이든 새 운동화의 필요성이든)를 더 잘 이해하고 가능한 솔루션을 제공하도록 돕는 것입니다.

이를 수행하는 한 가지 방법은 블로그 게시물과 전자책을 이용하는 것입니다. 예를 들어, "초보자를 위한 달리기 팁"에 대한 기사가 있는 경우 10K 달리기에 대한 "방법" 팁을 제공하는 eBook을 홍보할 수도 있습니다.

2. 솔루션 인식 방문자 는 어떤 유형의 제품이 문제를 해결할 수 있는지 알고 적극적으로 옵션을 고려합니다(방금 논의한 문제 인식 방문자보다 "더 인기 있는" 잠재 고객이 됨). 이렇게 하면 목표가 단순해집니다. 사이트에서 고객에게 가장 적합한 제품을 찾도록 도와주세요.

검증된 접근 방식 중 하나는 탐색 중인 카테고리에서 가장 인기 있는 제품(또는 "트렌딩" 제품)을 보여주는 것입니다.

3. 가장 인지도가 높은 방문자 는 문제를 해결할 수 있는 특정 제품을 찾았습니다. 그들이 해야 할 일은 "지금 구매"를 클릭하고 결제 프로세스를 진행하는 것입니다. 이러한 고객이 귀하의 "가장 인기 있는" 잠재 고객이라 할지라도 구매를 하기 위해서는 종종 최종 결정이 필요할 것입니다.

제한된 시간 동안만 제공되는 거부할 수 없는 특별 제안은 이 세그먼트가 나중이 아니라 지금 구매하도록 설득하는 가장 좋은 방법입니다.

2.4. 고급 세분화

또한 방문자의 현장 행동을 고려하여 점점 더 구체적인 사용자 세그먼트를 생성할 수 있습니다. 세분화가 구체적일수록 메시지 관련성이 높아집니다.

다음과 같은 사용자별 행동을 사용하여 방문자를 세분화할 수 있습니다.

• X초 이상 현재 하위 페이지에 있었습니다.
• 특정 트래픽 소스에서 발생
• 현재 특정 페이지를 탐색 중입니다.
• 이전에 특정 페이지를 방문한 적이 있음
• 장바구니에 특정 품목이 있습니다.
• 특정 임계값보다 큰 장바구니 값이 있습니다.

이를 통해 다음을 수행할 수 있습니다.

• 다양한 트래픽 소스(예: Facebook 및 Google Ads)에서 오는 방문자에게 다른 팝업을 표시합니다.
• 특정 페이지를 방문했지만 아직 구매하지 않은 잠재 고객에게 특정 캠페인을 표시합니다.
• 이미 장바구니에 추가한 항목을 기반으로 방문자를 타겟팅합니다(업셀링 및 크로스셀링의 경우).

우리가 말했듯이 "만약 당신이 모든 사람에게 판매한다면 당신은 아무에게도 판매하지 않는 것입니다." 개인화를 통해 이를 한 차원 높일 수 있습니다.

방문자를 관심분야, 인구통계학적 또는 지리적 변수, 구매 프로세스 단계에 따라 세그먼트로 분리하면 가장 관련성 높은 메시지를 표시할 수 있습니다.

예를 들어, 전자 제품을 판매하고 특정 방문자가 스마트폰에 관심이 있다는 것을 알고 있다면 "25% OFF 스마트폰"이 "25% OFF Selected Products"보다 훨씬 더 효과적인 메시지입니다.

팝업 메시지에 대한 4가지 기본 사용자 정의 수준이 있습니다.

1. 모든 사람이 동일한 메시지를 받습니다. 즉, 모든 웹사이트 방문자에게 일반 제안을 브로드캐스트합니다. 이것은 권장되지 않습니다.
2. 뜨거운 잠재 고객과 차가운 잠재 고객에 대해 두 가지 다른 제안을 합니다. 즉, 청중을 참여도에 따라 두 개의 주요 세그먼트로 나눕니다. 이 간단한 세분화조차도 차이를 만들 수 있습니다.
3. 각 주요 방문자 그룹에 대해 몇 가지 제안이 있습니다 . 이 경우 관련 변수에 따라 방문자를 여러 그룹으로 나누고 각 그룹에 대한 사용자 정의 메시지로 방문자를 다시 참여시킵니다.
4. 모든 사람은 동적 텍스트 교체를 사용하여 사용자 정의된 메시지를 받습니다. 이것은 팝업에 대한 최고 수준의 개인화입니다. 각 메시지는 그것을 보는 특정 개인에 맞게 조정됩니다.

동적 텍스트 대체 를 사용 하면 선택한 변수에 따라 팝업의 텍스트가 자동으로 업데이트됩니다.

즉, 하나의 템플릿을 만든 다음 각 방문자 청중의 요구 사항에 맞게 콘텐츠를 변경할 수 있습니다. 이 접근 방식을 사용하면 귀하의 노력이 줄어들고 각 방문자 세그먼트에 가장 관련성이 높은 콘텐츠가 표시됩니다.

위의 예로 돌아가서 전자 제품 매장은 방문자가 스마트폰 카테고리 페이지 또는 스마트폰 카테고리 내의 개별 제품 페이지에서 사이트를 떠나려고 할 때 "스마트폰 25% 할인"을 홍보합니다.

그러나 방문자가 노트북 액세서리를 검색하고 사이트를 떠나려고 하면 "스마트폰"이라는 단어가 자동으로 "노트북 액세서리"로 변경되어 해당 고객의 요구를 직접적으로 나타냅니다.

전환을 최대화하려면 팝업당 하나의 목표로 제한하고 가치 제안이 설득력이 있는지 확인해야 합니다.

가치 제안 은 고객이 팝업에 참여하거나 제품을 구매할 때 기대할 수 있는 이점입니다 . 이메일 등록 팝업 의 가치 제안은 특정 판매 또는 제품에 대한 독점 액세스일 수 있지만 할인 팝업의 가치는 방문자가 쿠폰 코드를 사용하여 절약할 수 있는 돈에서 나옵니다.

동일한 팝업에서 여러 목표를 달성하려는 경우 그 중 하나를 완료할 가능성이 줄어듭니다. 궁극적으로 메시지를 혼란스럽게 만들고 제안의 가치에 대해 방문자를 혼란스럽게 하여 전환 및 판매 가능성을 낮춥니다.

팝업을 사용하여 여러 목표를 달성할 수 있지만 각 팝업에서 그 중 하나만 추구하도록 제한해야 합니다.

다음은 몇 가지 일반적인 전자상거래 목표입니다.

1. 판매 촉진
2. 이메일 목록 작성
3. 장바구니 포기 줄이기
4. 상향 판매 및 교차 판매
5. 고객 경험 향상

방금 보았듯이 팝업의 성공은 방문자에게 제공하는 가치에 달려 있습니다.

그러나 당신의 제안이 아무리 가치가 있더라도 그것을 활용하는 것이 너무 어렵다면 아무도 문제를 겪고 싶지 않을 것입니다.

그렇기 때문에 너무 많은 정보를 요구하지 않는 것이 중요합니다. 예를 들어, 이메일 등록 팝업에 너무 많은 필드를 표시하면 대부분의 사용자에게 너무 많은 작업으로 보일 것입니다. 또한 새로운 방문자는 너무 많은 개인 정보를 제공하는 것을 주저할 수 있습니다.

요청하는 데이터가 적을수록 더 많은 전환이 발생합니다. 대부분의 경우 아래 예와 같이 이메일 주소만 있으면 충분합니다.

Oodie의 이 예와 같이 많은 사이트에서 나중에 메시지를 개인화하기 위해 이름을 요구합니다.

더 많은 정보를 요청할 필요가 있다고 생각되면 다단계 팝업을 사용하는 것이 가장 좋습니다. 그렇게 하면 가장 중요한 정보를 먼저 요청한 다음 팝업의 두 번째 페이지에 추가 입력 필드를 가질 수 있습니다.

Oodie의 팝업에는 전화번호를 묻는 두 번째 페이지도 있었습니다.

The Oodie에서 사용하는 이 전략을 "트로이 목마 방법"이라고 하며 단 30일 만에 Oodie에 190만 달러의 추가 수익을 창출했습니다.

그들의 전략을 "훔치고 싶다면" 무료 교육을 시청하십시오.

UX 디자이너와 같은 팝업을 만든다는 것은 방문자 한 명 한 명을 사람으로 생각하고 팝업이 나타날 때의 마음 상태를 신중하게 고려하는 것을 의미합니다.

그렇기 때문에 항목 팝업을 사용해서는 안 되며 대신 사이트에 대한 사용자 참여를 기반으로 팝업을 생성해야 합니다. 사용자 세그먼트를 정의한 다음 관련 제안을 표시하는 것은 다음 단계입니다. 마지막으로 동적 텍스트 대체를 사용하여 팝업을 개인화하여 각 사용자에게 메시지를 맞춤화할 수 있습니다.

이러한 모범 사례를 따르면 사이트의 사용자 경험을 개선하는 동시에 목록 작성 노력을 개선하고 매출을 높일 수 있습니다!

무료로 OptiMonk를 시작 하고 몇 분 만에 사용자 경험을 개선하는 멋진 팝업을 만드십시오.