매력적인 팝업을 디자인하기 위한 5가지 구현하기 쉬운 팁(24개의 예제 포함)

팝업 및 기타 현장 메시지는 일반적으로 고객과 소통해야 하는 가장 고급스러운 "소매 공간"인 웹사이트에 나타납니다. 그들은 당신의 제품에 가장 관심이 많은 사람들에게 나타납니다. 그래서 그들이 클릭한 것입니다. 그렇죠? 그리고 그것은 그들이 당신의 훌륭한 제안에 가장 개방적이라는 것을 의미합니다.

그럼에도 불구하고 많은 마케터들은 믿을 수 없을 정도로 기본적이고, 상상도 할 수 없고, 심지어는 못생긴 팝업을 제시합니다.

왜요?

팝업은 강력하고 결과를 얻기 때문에… 디자인에 많은 노력을 기울이지 않아도 됩니다. 1% 미만의 클릭률에 익숙한 마케터는 종종 팝업의 3-5% 전환율에 만족합니다. "충분히 좋은" 것 같습니다.

실제로, 이러한 마케터는 금광에 앉아 있으며 아직 깨닫지 못한 것뿐입니다. 몇 가지 간단한 조정으로 팝업의 전환율을 두 배 또는 세 배로 높일 수 있습니다. 주요 세그먼트에 대한 메시지 개인화와 같은 작업을 조금 더 하면 전환율이 30-50% 인 팝업을 만들 수 있습니다 .

그것이 그들의 비즈니스에 얼마나 큰 차이를 만들까요?

디자인은 팝업으로 매우 강력하며, 잘 디자인되고 아름다운 팝업을 조합하는 것은 마케터로서 최고의 ROI 활동이 될 수 있습니다. 지금 몇 분만 투자하면 앞으로 몇 달 또는 몇 년 동안 돈을 버는 자산을 가질 수 있습니다!

CTR을 5% 증가시키기 위해 Facebook 광고를 미세하게 최적화하는 것보다 몇 시간씩 시간을 투자하여 온사이트 메시지를 최적화하는 데 시간을 할애하는 것이 좋습니다.

팝업 디자인을 최대한 활용하는 방법을 살펴보겠습니다!

우선 팝업 디자인이 왜 중요한가요? 콘텐츠가 디자인을 능가하는 단순한 메시지가 아닙니까?

팝업의 메시지와 가치 제안은 매우 중요하지만 훌륭한 디자인은 모든 메시지의 효과를 실제로 높일 수 있습니다. 팝업은 일반적으로 아무데도 나타나지 않으며 방문자에게 깊은 인상을 줄 수 있는 단 몇 초의 시간이 있습니다. 그리고 관심을 요구하는 세상에서 웹사이트 방문자에게 깊은 인상을 주는 것은 쉬운 일이 아닙니다.

아래와 같은 아름답고 독특한 팝업이 있으면 최대 50%의 전환율을 얻을 수 있습니다! 한편, 지루한 텍스트 전용 방식으로 동일한 제안(정기 10% 할인)을 제시하면 10%의 전환율을 달성할 수 있습니다. 400% 차이가 나네요!

큰 브랜드도 가끔 잘못 이해합니다.

Mailchimp의 이 팝업을 보세요. 전환율은 2% 미만일 가능성이 가장 높으며, 이는 방문자의 98%가 불필요하게 방해를 받았음을 의미합니다.

팝업 디자인이 중요한 이유를 알고 복사하고 싶지 않은 잘못된 팝업 디자인의 예를 보았으므로 이제 좋은 내용으로 넘어가겠습니다. 매력적인 팝업을 디자인하는 방법과 영감을 위한 몇 가지 뛰어난 예를 살펴보겠습니다.

일부 온라인 마케팅 신화와 달리, 다른 모든 것보다 우수한 단일 색상 조합은 없습니다.

그러나 색상을 선택할 때 두 가지 중요한 요소가 있습니다.

• 가장 중요한 요소에 대비를 만들어 집중할 수 있어야 합니다.
• 색상 선택은 브랜딩과 일치해야 하며 일관되고 부드러운 경험을 제공해야 합니다.

다음 섹션에서 이 두 가지 팁에 대해 더 자세히 논의할 것입니다.

하지만 기본적으로 흰색 배경을 선택하고 브랜드의 메인 색상을 헤드라인과 CTA 버튼 색상으로 사용할 수 있습니다. 이것은 매우 고전적인 저위험 솔루션입니다.

Enro에서 이 예를 확인하십시오.

브랜드 색상을 배경으로 사용하려는 경우 Mented Cosmetics 가 좋은 예를 제공합니다. 브랜드 색상과 일치할 뿐만 아니라 회사 가치를 더욱 강조합니다.

어두운 배경에 반전된 색상 팔레트를 사용할 수도 있습니다. 이러한 경우 글꼴은 대부분 흰색 또는 밝은 회색이어야 합니다. 채도가 높은 색상을 사용하면 메시지의 가독성이 떨어집니다.

"Less is more"—팝업에 관해서는 너무나 맞는 말입니다.

관심을 끌고 관심을 불러일으킬 수 있는 시간이 매우 제한되어 있으므로 메시지와 디자인은 매우 단순해야 합니다.

팝업의 모든 단어와 요소에 대해 무자비한 태도를 취하고 모든 단일 항목이 절대적으로 필요한지 확인하십시오.

충분히 간단하다고 생각되면 하나의 주요 가치 제안과 CTA 외에는 아무것도 남지 않을 때까지 더 단순하게 가십시오.

당신은 궁금해 할 것입니다. 그것은 우리가 아래와 같은 흑백 텍스트 전용 팝업으로 제한해야 함을 의미합니까?

대답은 확고한 NO입니다!

대부분의 사람들은 팝업 내용을 읽을지 아니면 단순히 팝업을 닫을지 결정하기 전에 팝업 콘텐츠의 몇 단어만 읽을 것입니다. 즉, 메시지 디자인(색상, 이미지, 미학 등)이 메시지의 효과에 최소한 헤드라인과 같은 정도의 영향을 미칩니다.

물론 메시지의 핵심이 특정 제품에 초점을 맞추는 경우(카테고리 랜딩 페이지와 같이) 나머지 메시지는 가능한 한 단순하게 유지하여 초점을 제품에 유지해야 합니다.

아래에서 Burberry가 수행하는 방법을 확인하십시오. 그들은 완벽하게 대비되는 기본적이고 매우 단순한 메시지를 사용하고 최근에 본 세 가지 제품에 중점을 둡니다.

귀하의 현장 메시지는 공백 상태로 표시되지 않고 오버레이에 표시되더라도 웹사이트의 일부로 표시됩니다. 따라서 팝업이 브랜드 테마와 매끄럽게 조화를 이루는 것이 중요합니다.

즉, 웹사이트에서 사용되는 것과 유사한 요소(글꼴, 이미지 등)를 선택해야 합니다.

ClickUp은 브랜드 스타일 가이드와 완벽하게 일치하는 간단하면서도 효과적인 팝업을 만드는 방법의 좋은 예입니다.

Ramp가 하는 것처럼 브랜드의 글꼴과 로고를 사용하여 팝업을 브랜드에 쉽게 유지할 수 있습니다.

다른 브랜드를 홍보하는 B2C 세계에 있더라도 Sephora가 이 Gucci 관련 팝업에서 수행하는 것처럼 두 브랜드의 요소를 모두 가져올 수 있습니다.

팝업이 브랜드 테마와 조화를 이루는 것이 중요합니다. 그렇습니다. 그러나 눈에 띄고 시청자의 시선을 사로잡는 것도 중요합니다.

콘텐츠가 많은 경우(예: 제안에 포함된 항목의 글머리 기호 목록), 가치 제안이 헤더 사본에 명확하게 명시되어 있는지 확인하십시오.

또한 CTA 색상이 나머지 팝업에서 눈에 띄고 버튼이 크고 읽기 쉬운지 확인합니다. 헤드라인과 CTA는 일반적으로 팝업에서 가장 중요한 두 가지 요소이므로 대비가 충분한지 확인하세요.

예를 들어 CTA 버튼에 밝고 대비되는 색상을 선택할 수 있습니다. 이렇게 하면 훨씬 더 눈길을 끌 수 있고 방문자가 클릭할 가능성이 높아집니다.

팝업이 대부분 검은색인 경우 클릭 유도문안 버튼에 주황색 또는 핫 핑크를 사용할 수 있습니다.

다양한 글꼴 크기를 사용하는 것은 팝업의 본질에 청중의 관심을 집중시키는 가장 쉬운 방법입니다. 동일한 팝업에 여러 유형의 텍스트가 있는 경우에도 Komily와 같이 글꼴 크기, 색상 및 기타 대비 증가 기술을 사용하여 메시지의 주요 가치를 강조할 수 있습니다.

어두운 웹사이트가 있는 경우 라이트박스 색상(팝업 주변의 회색 반투명 ​​영역)을 사용하여 약간의 대비를 도입해야 하는 경우가 많습니다.

예를 들어 팝업의 색상이 어두운 경우 표시되는 동안 더 밝은 오버레이를 사용할 수 있습니다.

또는 화면의 100%를 덮는 전체 화면 버전의 팝업을 사용할 수 있습니다. 이렇게 하면 아래 예와 같이 팝업이 표시됩니다.

버튼이 여러 개인 경우 다른 버튼 색상을 사용하여 기본 CTA를 강조하여 사용자에게 어떤 옵션이 더 나은 선택인지 미묘한 방식으로 사용자에게 알릴 수 있습니다.

또 다른 전략은 클릭 유도문안 버튼을 가리키는 화살표와 같은 시각적 요소를 삽입하는 것입니다. 아래 팝업과 같이 밝은 손으로 그린 ​​방향 개체를 사용하여 클릭 유도문안을 지적할 수 있습니다.

팝업 디자인을 통해 제안을 강조하는 또 다른 방법은 특이한 템플릿 모양을 사용하는 것입니다. 이것은 사람들이 웹 전체에서 볼 수 있는 일반적인 직사각형 팝업의 패턴을 깨고 독특하기 때문에 관심을 끕니다.

너무 많은 요소를 강조하지 않도록 주의하십시오. 아래와 같은 설문조사 팝업이 있는 경우 버튼에 덜 공격적인 보조 버튼 스타일을 사용해야 합니다.

“그림은 천 마디 말의 가치가 있다”는 말이 있습니다. 이것은 팝업에 대해 확실히 사실입니다!

실제로 인간의 뇌 는 텍스트보다 60,000배 빠른 속도 로 이미지를 처리 하며 뇌에 전달되는 정보의 90%는 시각적입니다.

그렇기 때문에 일부 훌륭한 시각 자료는 현장 메시징의 효율성을 크게 향상시킬 수 있습니다. 목표는 다음 팝업과 같이 작성된 메시지를 증폭하기 위해 올바른 시각 효과를 선택하는 것입니다.

팝업에 대한 고품질 이미지를 찾아야 합니다. BlendJet과 같이 스톡 이미지 대신 제품의 실제 사진을 사용하는 것이 가장 좋습니다.

가장 좋은 방법은 제품/브랜드 이미지를 살펴보고 Oodie 팝업과 같이 메시지와 일치하는 관련 이미지를 선택하는 것입니다.

계절 판매를 실행하는 경우 계절에 따라 메시지를 업데이트하는 것이 좋습니다. 관련성 있고 시기적절하다는 것은 이러한 제안이 시간 제한이 있다는 느낌을 주어 놓칠 수 있다는 두려움을 증가시킵니다.

특별히 제공할 것이 없더라도 현재 시즌에 맞게 메시지를 업데이트하면 다음 메시지와 같이 전환율을 상당히 개선할 수 있습니다.

사진에서 제품이 재미있거나 유용해 보인다면 사람들은 할인을 받는 대가로 제품을 구매하고 이메일이나 SMS 목록에 등록할 가능성이 더 높아집니다.

방문자가 무료 경품을 요청하도록 독려하려는 경우 Castlery와 같이 메시지를 청중의 마음에 연결하는 단어와 이미지를 사용할 수 있습니다.

팝업 디자인 모범 사례 및 예제 목록이 유용했기를 바랍니다.

훌륭한 팝업 디자인의 중요성은 종종 간과됩니다. 그러나 이제 스마트 디자인이 어떤 영향을 미칠 수 있는지 보았으므로 이제 다시는 지루하고 헐렁한 팝업으로 돌아가지 않을 것입니다! 멋진 브랜드 팝업을 디자인하는 데 시간을 투자하면 전환율에 큰 영향을 미치고 ROI를 하늘 높이 올릴 수 있습니다.

팝업이 처음이신가요? 여기에서 바로 사용할 수 있는 템플릿 중 하나로 시작하세요!