전환율을 높이는 제품 페이지 디자인 전략

소개

웹사이트에서 가장 중요한 페이지는 무엇인가요?

아니요, 홈페이지는 기억에 남는 첫인상을 만드는 데 중요한 역할을 하지만 홈페이지는 아닙니다. 이 경우 승자는 약자인 제품 페이지입니다.

생각해보면 지극히 당연한 이치입니다. 이메일, SEO, 소셜 미디어, 유료 광고 활동의 상당 부분은 홈페이지가 아닌 특정 제품 페이지로 트래픽을 보내는 데 목적이 있습니다. 실제 의사 결정과 구매가 이루어지는 곳이 바로 이 페이지입니다.

하지만 평균적으로 이커머스 웹사이트 방문의 2.5%~3%만이 성공적인 전환으로 이어집니다. 이러한 저조한 전환율의 원인은 일반적으로 제품 페이지의 디자인 및 최적화가 제대로 이루어지지 않았기 때문입니다.

이 게시물에서는 잘 디자인된 제품 페이지를 만드는 요소에 대해 논의하고 각 전략이 효과적인 이유에 대해 자세히 살펴봅니다. 또한 각 전략을 구현하는 방법도 설명할 예정이니 계속 읽어보시고 제품 페이지 디자인을 한 단계 더 발전시켜 보세요.

쉽고 직관적인 사용자 지정 프로세스 만들기

개인화에 탁월한 브랜드는 그렇지 않은 브랜드보다 40% 더 많은 수익을 창출합니다. 같은 연구에 따르면 고객의 71%가 기업이 개인화된 상호 작용을 제공하기를 기대한다고 합니다.

이러한 통계를 바탕으로 맞춤형 경험을 제공하고 고객의 요구를 충족하는 것은 선택 사항이 아니라는 결론을 내릴 수 있습니다. 사용자 지정은 모든 성공적인 제품 페이지의 필수 요소가 되었습니다.

온라인에서는 맞춤 설정이 더 쉽지만 잠재 고객을 압도하지 않도록 주의해야 합니다. 선택 마비는 실제 존재하는 현상이며, 사람들에게 다양한 옵션이 제시될 때 발생합니다.

힉의 법칙에 따르면 선택의 폭이 넓을수록 결정을 내리는 데 걸리는 시간은 길어집니다. 이러한 지연은 잠재 고객이 구매를 포기하는 결과를 초래하여 결국 매출에 타격을 줄 수 있습니다.

이러한 선택의 마비를 어떻게 낮출 수 있을까요?

다음은 몇 가지 팁입니다:

• 선택 항목의 수를 제한하거나 최소한 가장 눈에 띄는 몇 가지 항목만 강조 표시하세요. 언제든지 '더보기' 버튼을 추가하여 덜 인기 있는 다른 선택 항목을 표시할 수 있습니다.
• 개인화 프로세스를 간소화하고 잠재 고객이 원하는 제품을 더 쉽게 맞춤 설정할 수 있도록 하세요.
• 가장 인기 있는 선택 사항과 베스트셀러를 기반으로 미리 정의된 기본 옵션을 제공하세요. 이렇게 하면 일부 고객의 의사 결정 피로도를 줄일 수 있습니다.

전체 프로세스를 최대한 사용자 친화적으로 만들고 고객이 최종 결과물의 모양에 대해 의견을 제시할 수 있도록 지원하는 것이 중요합니다.

Nike는 고객이 구매하고자 하는 운동화 모델을 창의적으로 제어할 수 있는 훌륭한 기능을 제공합니다. 이 브랜드의 제품 커스터마이징 도구는 직관적이며 조정할 수 있는 모든 제품 요소를 명확하게 나열합니다. 또한 고객은 변경하려는 운동화 섹션을 클릭하여 사용 가능한 색상이나 소재를 확인할 수 있습니다.

(출처: Nike)

제품 갤러리 다양화

온라인 쇼핑의 가장 큰 장벽 중 하나는 고객이 제품을 만지고, 느끼고, 입어보고, 체험할 수 없다는 점입니다. 온라인에서 구매한 제품의 10~15%가 반품되기 때문에 이러한 요소는 구매 후에도 판매에 타격을 줄 수 있습니다. 패션과 같은 특정 산업에서는 이 수치가 훨씬 더 높아져 50%에 달합니다.

모든 감각을 동원하는 것은 여전히 오프라인 매장의 특권이지만, 차선책으로 다양한 제품 갤러리를 활용할 수 있습니다.

1. 필요한 만큼의 이미지 제공

다양한 각도와 클로즈업으로 제품을 보여줌으로써 고객이 제품을 상상할 수 있도록 하세요. 고품질 이미지만 사용하되, 웹사이트 속도가 느려지지 않도록 최적화되어 있는지 확인하세요.

거칠거나 픽셀이 많은 이미지는 제품을 제대로 보여주지 못하기 때문에 전환율에 방해가 될 뿐 아무런 가치를 제공하지 못합니다. 이러한 실수는 제품에 대한 고객의 인식에 부정적인 영향을 미치고 평판을 손상시킬 수 있습니다. 시각적 매력은 신뢰와 신용에 있어 성패를 좌우하는 요소이므로, 제품 페이지가 의심스러워 보이면 사이트 방문자가 신용카드 번호를 제공하는 것을 꺼릴 수 있습니다.

2. 360도 제품 보기 제공

360도 보기 기능은 고객이 제품을 움직여 다양한 각도에서 볼 수 있기 때문에 실제 매장을 방문하는 것을 대체할 수 있습니다.

또한 이 UX 요소를 구현하면 사용자 경험을 저하시키지 않으면서도 더 적은 수의 이미지를 업로드할 수 있습니다.

3. 확대 기능 활성화

고객은 오프라인 매장에서 제품을 둘러볼 때 항상 자세히 살펴보고 세부 사항을 확인하고자 합니다.

줌인 기능은 이를 모방하여 사이트 방문자가 제품을 시각적으로 더 잘 이해하고 질감을 확인할 수 있도록 합니다. 제품을 자세히 살펴볼 수 있으면 잠재 고객은 구매에 대한 확신을 갖게 됩니다.

4. 사용 중인 제품 표시

잠재 고객에게 다른 사람들이 제품을 어떻게 사용하는지 보여줌으로써 모든 제품을 컨텍스트화하세요.

이렇게 하면 제품이 실제 세계에서 어떻게 보이고 어떻게 사용되어야 하는지에 대한 감각을 익힐 수 있습니다. 예를 들어, 의류를 평평한 표면에 배치하는 것보다 모델에게 의류를 입혀서 보여주는 것이 더 친근하고 흥미를 유발할 수 있습니다.

맥락에 맞는 사진은 고객에게 의류 핏에 대한 더 나은 아이디어를 제공합니다.

다양한 크기와 인종적 배경을 가진 모델을 포함시켜 모든 잠재 고객층과 정서적으로 연결되도록 하는 것이 좋습니다.

5. 비디오 활용

88%의 사람들이 제품 동영상을 보고 구매를 결심하게 되었다고 답했습니다.

짧은 시간 안에 많은 정보를 압축할 수 있는 이 형식의 기능은 특히 강력합니다. 잠재 고객에게 제품의 특징과 이점에 대해 읽도록 강요하는 대신 짧은 동영상으로 모든 것을 보여주는 것이 훨씬 더 효과적이라는 점을 이미 언급했습니다.

6. 실제 제품 크기 표시

온라인 쇼핑 시에는 사이즈가 중요합니다.

잠재 고객의 오해를 불러일으키지 않으려면 특정 제품의 크고 작은 크기를 시각적으로 확인할 수 있도록 하세요. 제품과 패키지의 모든 치수를 나열하고 옷과 신발의 사이즈 차트를 추가하세요.

제품의 크기가 속일 가능성이 희박하다면 참조 지점으로 사용할 수 있는 물체 옆에 제품을 배치하여 크기를 표시하세요.

솜니픽스는 제품 갤러리 다각화의 좋은 예입니다. 이 브랜드의 제품 페이지에는 제품 적용 방법, 사용 대상, 주요 이점을 보여주는 유용한 이미지, 일러스트레이션 및 기타 시각적 요소로 가득합니다.

(출처: 섬니픽스)

가격 앵커링 활용하기

마케팅은 인간의 심리에 크게 의존합니다. 가격 책정도 다르지 않으며, 전환율을 높이기 위해 여러 가지 전략을 사용할 수 있습니다.

고객은 특정 제품의 가격이 얼마인지 모르기 때문에 몇 가지 기준점을 바탕으로 가격이 적당한지 의견을 형성합니다. 예를 들어, 비슷한 제품의 가격이 얼마인지 확인하고 이를 기준으로 삼습니다.

또한 수요가 많은 제품이라면 사람들은 기꺼이 더 많은 비용을 지불할 준비가 되어 있습니다. 예를 들어, 에르메스는 수십 년 동안 상징적인 버킨 백을 중심으로 인위적인 희소성과 독점적인 분위기를 조성하여 이를 활용해 왔습니다.

따라서 이 평가 메커니즘은 가격에 대한 고객의 인식이 다음과 같다는 것을 나타냅니다.

1. 상대
2. 조작에 취약함

2010년에 스티브 잡스는 기조연설 중 하나를 통해 애플의 새로운 제품인 iPad를 공개했습니다. 잡스는 이 화려한 기기의 가격 책정에 대해 이야기할 때 업계 코드명인 999달러의 가격표가 1,000달러에 약간 못 미칠 것이라는 추측에 대해 언급했습니다. 그 순간 이 숫자는 배경의 큰 화면에 나타났고, 60초 후 499달러라는 가격표가 나타나면서 청중은 이 기기의 장점에 대해 자세히 알게 되었습니다.

그런 다음 가격이 '인하'되었을 때 고객들은 500달러를 절약하고 실제 가치의 극히 일부에 불과한 놀라운 제품을 얻을 수 있다는 강력한 인상을 받았습니다.

잡스가 훌륭하게 활용한 이러한 인지적 편향은 가격 고정의 핵심입니다. 고객에게 제품의 실제 가격이 훨씬 더 높다는 인상을 주면 동일한 효과를 얻을 수 있습니다. 요령은 초기 가격을 명시하고 지우고 그 옆에 새로운 더 낮은 가격을 표시하는 것입니다. 그리고 짜잔! 이제 고객은 큰 할인을 받을 수 있다고 생각하게 됩니다.

시각적으로 눈에 띄는 CTA 사용

효과적인 클릭 유도 문안은 전환율에 큰 도움이 될 수 있습니다. 이것이 바로 이 글에서 두 번째 항목이 있는 이유입니다.

버튼 모양의 요소에 두 개의 단어를 배치하는 것은 로켓 과학처럼 보이지 않을 수 있지만, 실제로는 많은 연구, 데이터 및 A/B 테스트가 필요합니다. 거부할 수 없는 CTA의 비결은 카피, 크기, 색상 및 위치를 적절히 조합하는 것입니다.

액션 지향 사본 만들기

CTA의 핵심은 방문자에게 다음에 해야 할 일을 알려주고 행동을 취하도록 유도하는 것입니다.

하지만 "구매"라는 문구 대신 더 매력적이고 설득력 있는 문구를 사용해야 합니다. "자세히 알아보기", "예, 무료 평가판을 원합니다", "할인 받기" 또는 "독점 할인을 제공하세요"와 같은 문구가 더 시선을 사로잡고 강력합니다.

Going은 이 원칙을 저렴한 항공권 상품 페이지에 재치 있는 말장난과 결합했습니다. 브랜드 이름은 시선을 사로잡는 귀여운 말장난에 적합하며 행동에 대한 동기를 부여합니다.

(출처: Going)

올바른 크기 선택

한편으로는 CTA의 카피가 가독성이 높기를 원하지만, 다른 한편으로는 값싸고 보기 싫은 거대한 버튼은 원하지 않을 것입니다.

버튼은 눈에 잘 띄도록 충분히 크되 페이지의 다른 콘텐츠를 압도하지 않는 것이 적절한 균형입니다.

Cotton Bureau의 제품 페이지에는 눈에 잘 띄는 CTA가 있어 읽기 쉽지만 페이지의 다른 요소를 가리거나 지나치게 판매적인 느낌을 주지 않습니다.

(출처: 코튼 뷰로)

대비되는 보색 사용

여러 연구에서 가장 효과적인 CTA 색상을 찾아내려고 시도했지만, 색상이 중요한 이유는 배경에 비해 CTA 버튼이 눈에 띄게 만들어야 하기 때문입니다.

보색(색상환의 반대편에 있는 색상)을 사용하면 최상의 대비를 만들어내고 클릭 유도 문안의 가시성을 높일 수 있습니다.

CTA를 눈에 띄고 눈에 띄게 만드는 또 다른 방법은 네거티브 스페이스를 활용하는 것입니다.

Kettle & Fire는 이러한 모범 사례를 모두 활용하여 흰색 배경에 눈에 잘 띄는 밝은 빨간색의 CTA를 사용합니다. 이 예시가 효과적인 또 다른 이유는 손쉬운 주문 사용자 지정과 투명성입니다.

고객은 구매하고자 하는 팩의 개수를 선택하고 청구되는 금액을 정확하게 확인할 수 있습니다. 일회성 주문 또는 구독 중에서 선택할 수 있는 옵션도 있습니다.

(출처: Kettle & Fire)

설명 동영상 수용

시청자들은 동영상의 메시지를 거의 95% 이상 기억한다고 답했습니다.

이 숫자가 다소 과장되었다고 생각하더라도 이 형식이 마케팅 메시지를 전달하고 특정 제품의 장점과 사용 사례를 보여주는 데 훨씬 더 강력하다는 사실은 부인할 수 없습니다.

96%의 사람들이 관심 있는 제품이나 서비스에 대해 자세히 알아보기 위해 설명 동영상을 시청했다고 응답한 것은 당연한 결과입니다. 이 형식은 특히 SaaS 세계의 복잡한 서비스 제품에 유용합니다. 일반적인 구매자 페르소나에게 생소한 제품이라면 제품 페이지용 동영상을 한두 개 제작하는 데 투자하세요.

설명 동영상은 지침을 제공하는 데 효과적이므로 제품 사용 방법을 설명하는 데 유용합니다. 특정 제품을 설명하는 장문의 텍스트로 고객을 대면하는 대신, 제품의 작동 방식을 보여주는 짧고 매력적인 동영상을 제공하여 메시지를 더 빠르게 전달하세요.

또한 사람들은 다른 어떤 형식보다 동영상을 네트워크에 공유할 가능성이 두 배 나 높기 때문에 도달 범위를 넓히고 더 많은 트래픽을 생성할 수도 있습니다.

베이 알람 메디컬은 설명 동영상을 활용하여 의료용 경보 시스템을 설치하는 방법을 보여줌으로써 잠재 고객이 서면 지침을 찾을 필요가 없도록 합니다.

(출처: 베이 알람 메디컬)

일반적인 전환 장애물 해결

온라인 쇼핑은 고객이 집에서 편안하게 제품을 구매할 수 있어 편리합니다. 하지만 전환을 방해할 수 있는 몇 가지 장애물이 있으며, 그 중 가장 일반적인 장애물은 다음과 같습니다:

트랜잭션 보안

고객은 결제 보안에 대해 걱정하고 있습니다. 18%의 사람들이 보안 문제 때문에 장바구니를 포기합니다. 고객의 민감한 정보와 신용카드 정보를 안전하게 보호하는 시스템을 구현하는 것 외에도, 실사를 수행했음을 나타내는 신뢰 배지를 사용하세요.

안전 결제 및 승인된 결제 배지는 타사 보증과 함께 고객에 대한 신뢰를 높이고 구매를 완료하도록 유도합니다.

배송비 및 반품 정책

배송비 및 반품 정책은 전환율에 큰 영향을 미칠 수 있습니다. 고객이 총 비용을 미리 확인하지 못하면 구매를 완료하지 않고 장바구니를 떠날 확률이 높습니다.

마찬가지로 주문한 상품을 사용해 볼 수 없다는 점을 고려할 때, 관대한 반품 정책은 고객의 마음을 사로잡을 수 있는 요소입니다.

판매 후 지원 이용 가능 여부

구매 전환이 구매자 여정의 끝이 아닙니다. 일단 구매를 결정한 후에는 탁월한 고객 경험을 제공하고 고객의 니즈를 충족시키는 것이 중요합니다. 구매 후 지원이 필요할 때 어떤 일이 일어날지 확신할 수 없다면 고객들은 귀사와의 거래를 꺼릴 것입니다.

따라서 문제가 발생하거나 구매한 제품이나 서비스를 최대한 활용하는 방법을 배우고 싶을 때 연락할 수 있음을 알려주세요.

마네킹몰은 제품 페이지에서 이러한 문제를 명확하고 바로 해결함으로써 모든 전환 장벽을 제거합니다. 잠재 고객은 웹사이트를 탐색하거나 배송 또는 반품 정책을 찾기 위해 이리저리 클릭할 필요 없이 필요한 모든 답변을 얻을 수 있습니다.

(출처: 마네킹 몰)

모바일 쇼핑객을 염두에 두세요

모바일 이커머스 지출은 2025년까지 7,282억 8,000만 달러에 달할 것으로 예상됩니다.

소비자의 59%는 모바일 쇼핑 기능을 구매처를 결정할 때 고려하는 중요한 요소로 꼽았습니다.

마지막으로 인터넷 사용자의 57%는 모바일 사이트가 잘못 디자인된 브랜드를 친구나 가족에게 추천하지 않을 것이라고 답했습니다.

이러한 모든 통계는 모바일 친화적인 이커머스 스토어를 구축해야 하는 확실한 근거를 제시합니다. 그렇기 때문에 제품 페이지의 모바일 버전을 디자인할 때는 항상 모범 사례를 적용해야 합니다.

다음은 방문자를 불편하게 하지 않는 모바일 친화적인 웹사이트를 위한 몇 가지 팁입니다:

• 디자인을 단순하게 유지하고 쉽게 탐색할 수 있습니다.
• 큰 버튼을 사용하면 손가락 오류를 방지할 수 있습니다.
• 팝업은 모바일 디바이스에서 닫기 어려울 수 있으므로 사용하지 마세요.
• 모바일 장치에 맞게 이미지를 최적화하여 로딩 속도를 높입니다.
• AMP(가속화된 모바일 페이지) 프레임워크를 사용하여 서버의 성능을 개선하고 로딩 속도를 높일 수 있습니다.
• 웹 양식에서 자동 고침을 끄면 입력 프로세스가 빨라집니다.
• 읽기 쉬운 표준 글꼴을 사용합니다.

많은 모닝은 제품 페이지에 모바일 친화적인 디자인을 구현했습니다. 단순성, 쉬운 탐색, 대형 CTA 버튼, 명확한 프로세스 개요를 통해 고객은 제품 섹션을 쉽게 탐색하고 장바구니에 제품을 추가하고 이미 선택한 항목에 빠르게 액세스할 수 있습니다.

(출처: 많은 아침)

최종 생각

잘 설계되고 최적화된 제품 페이지는 훨씬 더 많은 전환을 유도합니다. 고객이 제품 페이지에 도달했다는 것은 일반적으로 구매 준비가 완료되었다는 의미이며, 결제 프로세스를 최대한 원활하고 방해 없이 진행해야 하는 것은 판매자의 몫입니다. 이러한 전략은 올바른 방향을 제시하고 중요한 제품 페이지 요소를 최적화하는 프로세스를 안내합니다.