팝업 디자인: 뜨거울 때 잡아라

이메일 구독 양식을 사용하는 것은 더 많은 구독자를 확보하는 가장 효과적인 방법 중 하나입니다. 이 기사에서는 팝업 이메일 구독 양식에 중점을 둘 것입니다. 특히 팝업 디자인을 향상시키는 방법을 설명하고 영감을 주는 몇 가지 훌륭한 팝업 예제를 보여줍니다.

이메일 마케팅에서 팝업 양식의 역할

팝업은 웹사이트 콘텐츠의 전면에 표시되고 사용자가 이메일 수신에 등록하도록 권장하는 양식입니다. 일반적으로 제목, 간단한 설명, 이메일 주소, 이름 및 기타 세부 정보를 입력하는 필드, CTA 버튼으로 구성됩니다.

매우 자주 팝업은 할인, 무료 전자책, 웨비나 녹화, 이벤트 티켓 및 기타 공짜와 같은 리드 자석을 제공합니다. 예를 들어, 팝업 중 하나에서 Kate Spade는 모든 신규 이메일 구독자에게 15% 할인을 제공합니다.

그러나 많은 사람들이 팝업을 성가시게 생각한다면 팝업이 어떻게 리드를 가져올 수 있습니까? 이에 대한 간단한 과학적 설명이 있습니다.

작가이자 광고 및 브랜딩 전문가인 Martin Lindstrom은 "구매학: 우리가 구매하는 이유에 대한 진실과 거짓말"이라는 책에서 3년 간의 대규모 신경 마케팅 연구의 흥미로운 결과를 공유했습니다. 요약하자면, 그는 사람들의 구매 행동의 90%가 무의식적이며 사용자가 하는 많은 행동이 그들이 믿는다고 주장하는 것과 충돌한다는 것을 증명했습니다. 따라서 팝업에 대한 논란의 여지가 있는 의견에도 불구하고 여전히 작동합니다. 팝업에 짜증이 나지만 그래도 반응하고 계속 등록하고 있습니다.

이제 작동 중인 팝업을 살펴보겠습니다. Sumo는 2년 동안 거의 20억 개의 팝업을 분석하고 어떤 요소가 전체 이메일 마케팅 결과에 중요한 기여를 하는지 알아냈습니다.

이 실험의 평균 팝업 전환율은 3.09%였습니다. 상위 10% 최고 실적 팝업의 평균 전환율은 9.28%였으며 일부는 최대 50.2%에 달했습니다.

Sumo는 팝업 전환율에서 다음과 같은 경향을 발견했습니다.

1. 적절한 컨텍스트에 배치된 팝업은 40% 이상의 전환율에 도달했습니다. 적절한 컨텍스트란 팝업의 주제가 팝업이 표시되는 웹사이트 페이지의 주제와 일치함을 의미합니다.
2. 컨텍스트에 전적으로 의존하는 팝업 타이밍은 전자책 페이지에서 15초 지연 덕분에 38.4%의 전환율을 가져왔습니다. Google Analytics와 같은 도구는 각 개별 사례에서 가장 적합한 타이밍 뒤에 숨겨진 미스터리를 해결하는 데 도움이 됩니다.
3. 컨텍스트와 타이밍을 고려하고 컨텍스트에 맞는 CTA를 만들고 명확하고 가치를 제공하려고 노력함으로써 Sumo는 60%의 전환율에 도달했습니다.

보시다시피 팝업 양식의 개별 측면을 자세히 살펴보고 세부 사항을 하나씩 테스트하면 전환율을 크게 향상시킬 수 있습니다.

팝업 디자인 팁과 트릭

디자인은 전환을 유도하고 더 많은 리드를 유치할 때 간과해서는 안 되는 측면입니다. 위에서 언급한 "Buyology" 책에 따르면 소비자는 일반적으로 구매 결정을 내리는 데 최대 2초를 소비합니다. 사람들이 가장 먼저 보는 것은 디자인 요소와 색상이며 그제서야 내용을 읽기 시작합니다. 따라서 주의를 끌고, 요점을 설명하고, 사용자가 양식에 이메일 주소를 남기도록 권장하는 데 문자 그대로 몇 초 밖에 걸리지 않습니다.

자신의 구독 양식에 사용할 수 있는 팝업 디자인 전략을 찾기 위해 멋진 팝업 예제의 세부 정보를 살펴보겠습니다.

회사 지침에 따라 팝업을 만드십시오.

무엇보다도 웹사이트, 이메일 또는 소셜 미디어와 같은 모든 유형의 미디어에서 사용되는 모든 디자인 자산은 회사의 기업 지침과 완전히 일치해야 하며 이러한 자산은 브랜드로서 귀하에 대한 인상을 형성해야 합니다. 그렇기 때문에 회사 색상, 글꼴, 모양 및 기타 디자인 요소를 고수하는 것이 중요합니다.

Whole Whale About Us 페이지를 살펴보십시오. 색상 팔레트가 흰색과 회색 음영으로 구성되어 있으며 밝은 파란색과 진한 파란색 음영이 보완된 것을 볼 수 있습니다. 웹사이트 전체에 걸쳐 사용되는 산세리프체(sans serif font)라는 부정적인 공간이 많이 있습니다.

이제 웹 사이트 디자인과 완벽하게 일치하는 팝업 디자인을 살펴보십시오. 양식에 적용된 동일한 색상과 글꼴이 있습니다. 게다가 감성적인 사진을 활용해 팝업으로 시선을 더 끈다. 왼쪽 텍스트 부분과 오른쪽 그림 부분은 완전히 대칭입니다.

Whole Whale은 비영리 단체에 유용한 세 가지 제품을 제공합니다. 그 중 하나는 기부 페이지의 효율성을 높이기 위해 만들어진 Lighthouse입니다. 이 제품의 팝업 디자인이 회사 디자인 지침과 어떻게 일치하는지 확인하여 전반적으로 더 강력한 영향을 미칩니다.

팝업 디자인은 Whole Whale이 사용하는 것만큼 중립적일 필요는 없습니다. 특히 개인 블로그나 웹사이트가 있는 경우 좀 더 많은 캐릭터를 추가할 수 있습니다.

예를 들어 Wait But Why 웹사이트는 Whole Whale이 소유한 웹사이트와 매우 다릅니다. 재미있고 밝고 스케치 같은 삽화가 많이 있습니다.

그들의 팝업도 예외는 아닙니다. 재미있고 개인적인 것이기도 합니다. 팝업의 성가신 특성을 농담으로 회사는 사용자에게만 가입을 권장합니다.

시각적 지각 이론을 실천에 옮기다

오늘날까지 디자인에 사용되어 온 몇 가지 확립된 시각적 인식 이론이 있습니다. 가장 중요한 디자인 이론인 황금비 법칙과 게슈탈트 이론에 대해 이야기하겠습니다.

황금 비율 법칙

황금 비율은 자연에서 발견되는 약 1:1.61 비율로 시각적으로 균형 잡힌 이미지를 만들어 사진의 특정 부분을 강조하는 데 사용됩니다.

이것을 실제로 어떻게 사용할 수 있습니까? 예를 들어, 이러한 비율은 이미지를 균형 잡힌 섹션으로 나누거나, 디자인의 가장 중요한 요소에 액센트를 주거나, 가장 시각적으로 매력적인 방식으로 사진을 자르는 데 도움이 될 수 있습니다.

아래 그림은 황금 비율 원리를 사용하여 잘렸습니다. 사진에서 가장 중요한 부분인 휴대폰이 어떻게 사람의 눈이 자연스럽게 끌리는 나선의 중심에 배치되었는지 주목하십시오.

팝업 디자인 작업을 할 때 나선의 중앙에 CTA 버튼을 배치할 수 있으며 이미지는 나선의 시작 부분에 위치하며 가장 큰 부분을 차지합니다. 이 경우 팝업의 기본 레이아웃은 다음과 같습니다.

게슈탈트 이론

게슈탈트(Gestalt)는 '통일된 전체'를 의미하며 2차원 공간에서의 배치에 따라 인간이 물체를 어떻게 인식하는지를 설명하는 전체 이론의 본질을 만듭니다.

게슈탈트에는 6가지 공통 원칙이 있습니다.

1. 유사성 . 유사한 물체는 패턴이나 그룹으로 인식됩니다.
2. 계속 . 하나의 경로에 놓인 물체는 그룹으로 인식되고 이러한 시각적 선에 의해 사람의 눈이 안내됩니다.
3. 폐쇄 . 어떤 대상이 부분적으로 부족하더라도 우리는 여전히 그것을 전체로 인식합니다. 팬더가 있는 WWF 로고를 생각하면 그 원칙을 이해할 수 있습니다.
4. 근접성 . 서로 가깝게 배치된 개체는 그룹으로 인식됩니다.
5. 피규어/그라운드 . 사람들은 배경과 요소를 분리하므로 큰 요소는 땅으로 인식되고 작은 요소는 물체 또는 그림으로 인식됩니다. 이 원리는 Escher의 작품에서 자주 사용됩니다.
6. 대칭과 질서 . 사람들은 대칭적인 디자인을 볼 때 더 안전하고 차분한 느낌을 받습니다.

이 모든 원리를 마음으로 배울 필요는 없습니다. 그러나 이들에 대한 몇 가지 기본 지식은 비대칭 디자인이 더 역동적으로 보이고 대칭 디자인이 더 안정적이고 더 안전해 보이는 이유와 사용자의 관심이 나머지에서 눈에 띄는 가장 크거나 가장 밝은 물체에 끌리는 이유를 이해하는 데 도움이 될 것입니다.

예를 들어 SheSimplyShops의 팝업 디자인 예제를 살펴보겠습니다. 회사는 사용자가 할인을 받을 수 있는 기회를 제공합니다. 팝업은 화면 왼쪽에 나타나며 비대칭입니다. 왼쪽 부분이 오른쪽 부분보다 '무거워' 보입니다. 휠은 팝업의 전체 왼쪽 부분을 차지하고 텍스트와 CTA 버튼은 음수 공간으로 둘러싸인 오른쪽에 배치됩니다. 이 모든 것이 팝업 주위에 역동적이고 활기찬 분위기를 조성합니다.

대조적으로, Leia의 팝업 형태는 완전히 대칭적이어서 이전 예보다 훨씬 차분해 보입니다. 모든 요소는 중앙에 배치되어 시각적으로 단일 지점인 CTA 버튼으로 연결됩니다.

가독성에 주의

팝업이 올바른 메시지를 전달하려면 이해하기 쉬워야 합니다. 가독성과 관련하여 텍스트 및 타이포그래피 작업 능력이 중요합니다.

헤드라인, 설명 및 버튼과 같은 요소가 상호 보완적인 글꼴, 다양한 크기와 두께, 간격을 사용하여 시각적으로 구분되는 시각적 계층 구조를 설정합니다. 행 사이의 공백인 행간과 문자 사이의 공백인 커닝은 독자를 양식을 통해 안내해야 합니다. 가장 중요한 정보는 항상 가장 눈에 잘 띄어야 합니다.

더 큰 대비를 만들기 위해 단일 글꼴의 다른 두께와 세리프체 및 산세리프체를 혼합할 수 있습니다. 그러나 양식이 지저분해 보이지 않도록 2개 이하의 글꼴을 사용하십시오.

Tim Ferris 블로그의 팝업 양식은 좋은 타이포그래피의 좋은 예입니다. 로고타입, 제목, 부제목, 저자명, 그리고 두 개의 버튼 사이의 차이점을 명확하게 알 수 있으며, 그 중 더 눈에 띄는 것은 원하는 CTA입니다.

제목은 배경과 텍스트의 대비로 인해 가장 눈길을 끕니다. 그런 다음 눈이 CTA 버튼으로 직접 이동합니다. 그런 다음 다시 위로 이동하여 세부 정보(부제목과 저자 이름)를 읽습니다.

Social Triggers는 대담한 타이포그래피를 기반으로 더 가벼운 팝업 형식을 제공합니다. 먼저, 질문 형식의 흥미로운 제목을 보고 눈이 즉시 밝은 CTA 버튼으로 이동합니다. 설명은 구분선으로 시각적으로 구분되며 작은 글꼴로 작성됩니다.

색상 선택에 주의

색상은 팝업 양식의 분위기를 완전히 바꾸는 데 사용할 수 있는 강력한 도구입니다. 파스텔 색조는 로맨틱하고 가벼운 분위기를 더하고 시끄럽고 생생한 색상은 팝업을 더 화려하게 만들 수 있습니다.

서로 잘 어울리는 색상을 선택하려면 Adobe Color와 같은 도구를 사용하십시오. 무료이며 독창적인 색상 팔레트를 처음부터 만들거나, 이미지에서 추출하거나, 영감을 찾기 위해 색상과 트렌드를 탐색할 수 있습니다.

Tommy Hilfiger 팝업의 예는 빨간색, 파란색 및 흰색 사이의 큰 대비를 보여줍니다. 제목은 굵은 대문자로 작성했으며 가장 중요한 부분은 빨간색으로 강조 표시했습니다. 즉시 관심이 제목에서 가입 버튼으로 드래그됩니다.

최소한의 디자인 선택이 더 매력적이라고 ​​생각되면 배경에 단일 기본 색상을 사용하고 텍스트 및 기타 요소에 보조 색상을 사용할 수 있습니다.

예를 들어, Horizn Studios는 흰색 텍스트와 버튼을 사용하여 단색 배경을 대조하기 때문에 완전히 검은색 형식을 도입하는 것을 두려워하지 않습니다. 이러한 대조와 웹사이트의 희미한 배경은 이 형태를 잘 보이게 합니다.

Elvie&Leo는 그 반대의 경우도 마찬가지이며 검정색 텍스트가 있는 완전히 흰색 형식을 사용합니다. 메인 메시지를 위한 세리프체의 현명한 선택과 나머지 양식과 대조되는 검은색 버튼 덕분에 단순하면서도 고급스럽습니다.

My Deal 웹사이트는 팝적인 색상으로 또 다른 최소한의 옵션을 제공합니다. 빨간색 종이 비행기가 오른쪽으로 향하고 있습니다. 빨간색 가입 버튼이 있는 곳입니다. 양식의 주요 메시지를 강조하기 위해 타이포그래피가 어떻게 사용되는지 주목하십시오.

모양 및 상호 작용 실험

팝업에 재미를 더하여 참여도를 높이세요. 예를 들어 Jackpot Candles는 당신이 당첨되는 복권에 참여하도록 제안합니다.

휠을 돌리면 4개의 상품 중 하나를 얻을 수 있습니다. 팝업이 활성화되면 다음과 같이 표시됩니다.

모양을 가지고 놀면 팝업에 더 많은 관심을 끌 수 있습니다. 예를 들어 이메일 먼데이는 구독 양식의 특이한 모양인 원에 의존했습니다. 웹 사이트 설립자의 사진을 보여주는 작은 원과 결합하면 브랜드가 더 많은 리드를 얻을 수 있는 모든 기회를 가질 수 있습니다.

네 차례 야

구독 양식을 눈길을 끌도록 만들려면 다음과 같은 간단한 팝업 디자인 원칙을 기억하십시오.

• 팝업 양식이 회사의 기업 스타일로 디자인되었는지 확인하십시오.
• 디자인 요소를 배치하고 양식의 타이포그래피로 작업할 때 황금 비율과 게슈탈트 이론을 기억하십시오.
• 팝업 텍스트가 읽기 쉬운지 확인하십시오.
• 색상을 현명하게 사용하여 팝업의 가장 중요한 부분에 강조 표시를 하십시오.
• 사용자에게 팝업을 재미있고 특별하게 만들기 위해 상호 작용을 추가하고 다양한 모양으로 플레이하십시오.

무료로 SendPulse를 사용하여 첫 번째 팝업 양식을 만들 준비가 되셨습니까?