쿠폰, 할인 및 프로모션 UI 및 UX 모범 사례

“쇼핑객은 사이트 전체 판매, 일부 판매 품목 또는 쿠폰 형태의 거래를 좋아합니다. 그러나 사용자가 프로모션을 성공적으로 사용하려면 웹사이트는 두 가지를 잘해야 합니다. 즉, 사이트 전체에 이러한 다양한 프로모션을 효과적으로 전달해야 하고 사용자가 쉽게 전달되는 거래를 얻을 수 있어야 합니다." Kim Salazar, Nielsen Norman Group의 수석 사용자 경험 전문가

이 게시물은 웹사이트 또는 모바일 플랫폼에서 쿠폰 코드 및 자동 적용 프로모션을 홍보하기 위한 사용자 인터페이스 및 경험을 디자인하기 위한 모범 사례와 영감을 수집합니다. 웹사이트의 프로모션 메시지 및 가격 인하부터 쿠폰 및 프로모션 확인 및 체크아웃 시 적용, 마지막으로 사용에 이르기까지 전체 고객 여정을 다룰 것입니다. 고객의 UI & UX, 수익 면에서 가장 우수한 DTC 전자상거래 플랫폼의 UI, 다양한 UX 연구를 바탕으로 이 포스트를 작성했습니다.

참고: 모든 데스크톱 스크린샷은 Mac, Chrome에서 제작되었으며 모든 모바일 스크린샷은 Chrome에서 iPhone X 해상도를 사용하여 제작되었습니다.

이 가이드가 쿠폰 및 장바구니 수준 프로모션을 포함하도록 플랫폼을 재설계하거나 기존 고객 쿠폰 경험을 개선하는 데 도움이 되기를 바랍니다. 당사의 프로모션 엔진인 Voucherify에 대해 질문이 있거나 더 자세히 알고 싶으시면 언제든지 저희에게 연락해 주십시오.

쿠폰 및 프로모션 UI 키트

Figma에서 사용할 수 있는 쿠폰 및 프로모션 UI 키트의 준비된 쿠폰 및 프로모션 구성 요소를 사용하여 출시 시간을 단축하십시오. 더 알아보기.

목차:

프로모션 UI 및 UX에 대한 일반적인 조언:

• 프로모션 기간을 명확하게 명시하세요.
• 공개적으로 사용 가능한 쿠폰을 자동으로 적용합니다.
• 판매 편집 페이지를 제공합니다.
• 판매 카테고리에서 필터링을 활성화하십시오.
• 고객 조종석을 제공합니다.
• 판매 섹션과 적절한 범주에 할인 품목을 나열하십시오.
• 사이트 전체의 프로모션을 전 세계적으로 전달합니다.
• 사전에 프로모션 제한 사항을 명확히 하십시오.

특정 페이지의 쿠폰 UX 모범 사례:

1. 홈페이지:

• 홈페이지에 광고되는 프로모션 유형.
• 판매 페이지로 연결됩니다.

2. ‍ 카테고리 페이지.
3. ‍ 팝업.
4. ‍ 페이지 상단 리본 .
5. ‍ 바닥글.
6. ‍ 제품 페이지:

• 기존 가격표는 그대로 둡니다.
• 번들 프로모션 규칙을 명확하게 명시하세요.

7. ‍ 장바구니:

• 장바구니와 결제 페이지 모두의 핵심 부분으로 쿠폰 코드 필드를 포함합니다.
• 최소 지출 프로모션의 경우 사용자를 위해 계산을 수행하고 지출 목표에 도달하도록 돕습니다.
• 장바구니에 담을 수 있는 사용 가능한 특별 제안에 대해 사용자에게 상기시킵니다.
• 특별한 조건이나 제한 사항을 언급하십시오.

8. 결제 페이지:

• 쿠폰 코드 필드를 포함합니다.
• 코드가 성공적으로 적용되면 성공 메시지를 표시합니다.
• 유효하지 않은 쿠폰 코드의 경우 오류 메시지를 표시합니다.
• 고객이 할인 쿠폰을 두 개 이상 추가할 수 있는지 여부를 명확히 합니다.
• 사용자가 할인을 찾도록 도와주세요.
• 받은 할인을 반영합니다.
  

쿠폰 코드 UI 및 UX의 기본

여기서는 대부분의 할인 쿠폰 및 프로모션 디자인, 배치 및 프로모션에 적용되는 몇 가지 일반적인 팁을 다룰 것입니다. 이후에는 고객 경험의 관점에서 최고의 디자인 솔루션을 강조하면서 웹사이트의 특정 쿠폰 및 장바구니 프로모션 위치로 이동합니다. 단순히 쿠폰 캠페인을 시작하는 것만으로는 충분하지 않으며 캠페인을 눈부신 성공으로 만들기 위해서는 쿠폰 디자인, 배치, 확인 및 사용 프로세스도 관리해야 합니다.

프로모션 기간을 명확하게 명시

불만족한 고객이 결제 시 제안이 더 이상 유효하지 않음을 알게 되는 것을 방지하려면 고객에게 쿠폰 또는 카트 수준 판촉 기간에 대해 알려야 합니다. 또한 고객이 주문을 완료하기 위해 긴박감을 느끼고 약간의 움직임을 유도하는 데 도움이 됩니다. 그렇게 하지 않으면 사용자 경험이 손상되고 고객이 사이트에서 이탈하게 됩니다.

프로모션 기간(날짜 또는 시간)을 언급하거나 카운트다운 타이머를 추가하면 됩니다. 가장 좋은 방법은 고객이 판촉 만료 날짜를 알 수 있도록 이용 약관뿐만 아니라 모든 배너와 광고에 판촉 기간을 항상 추가하는 것입니다.

UI 예:

Pomelo Fashion은 카운트다운 타이머를 사용하여 제안이 만료되는 시간을 명확하게 표시합니다.

Shein은 프로모션 배너 또는 카테고리 옆에 있는 고객에게 카운트다운과 함께 제안 기간에 대해 알려줍니다. 또한 남은 조각의 수를 표시하여 긴박감을 유발합니다.

또한 프로모션 경험을 더욱 향상시키기 위해 제품 페이지에서 제공 기간을 고객에게 알려줍니다.

그리고 그들은 장바구니에도 타이머를 포함시켰습니다.

모바일 앱에서 디스플레이는 다음과 같습니다.

Pretty Little Thing은 모바일 해상도에서도 사용할 수 있는 메인 페이지 배너에 프로모션 카운트다운이 있습니다.

가능한 최고의 경험을 제공하기 위해 공개적으로 사용 가능한 쿠폰을 자동으로 적용

사이트에서 할인 또는 쿠폰 코드가 제공되는 경우 사용자가 할인 코드를 클릭하여 장바구니에 자동으로 적용하거나 최소한 클릭할 때 자동으로 복사하여 사용 프로세스를 단순화할 수 있습니다. 그들은 코드를 기억할 필요가 없습니다. 이렇게 하면 사용자가 장바구니에 더 쉽게 적용할 수 있어 프로모션 사용량이 늘어납니다. 고객이 수신한 링크를 클릭하면 다양한 채널(이메일, SMS 등)을 통해 전송된 고유 할인 코드를 자동으로 적용할 수도 있습니다. 이 게시물을 따라 쿠폰 유효성 검사 UX를 수정하는 방법을 알아보세요.

제안이 공개적으로 제공되는 경우 공개 쿠폰 코드 대신 장바구니 수준의 자동 적용 할인일 수 있는지 항상 신중하게 고려하십시오. 고객의 체크아웃 프로세스를 단순화하고 프로모션의 전환율을 높일 수 있습니다.

또 다른 좋은 UX 관행은 쿠폰 코드를 복사할 수 있도록 하는 것입니다(이미지에 포함되지 않고 웹사이트 또는 모바일 앱에 텍스트로 배치).

UI 예:

Vanity Planet은 장바구니의 적격 주문에 대해 공개 쿠폰 코드를 자동으로 적용합니다. 결제로 이동한 후 주문 총액은 할인 코드를 반영하여 다시 계산됩니다.

그들은 주문에 무료 제품을 추가하기도 합니다. 주문에 해당하는 경우 할인 코드를 다시 자동으로 적용합니다.

여기에서 모바일 해상도에서 동일한 흐름을 볼 수 있습니다.

"주문 요약 보기" 버튼을 클릭하면 주문에 적용된 프로모션 및 쿠폰 코드에 대한 정보가 포함된 장바구니 내용이 표시됩니다.

판매 편집 페이지 제공

공개적으로 사용 가능한 모든 카트 수준 프로모션 및 할인 쿠폰을 한 페이지에 수집하면 고객이 더 쉽게 찾을 수 있습니다. 이렇게 하면 고객 조종석만 사용하여 모든 판촉을 표시하는 것과는 대조적으로 신규 또는 로그인하지 않은 고객에게도 판촉을 표시할 수 있습니다. 종종 회사는 다른 페이지 요소를 가리고 고객 경험을 손상시킬 수 있는 홈 페이지에 모든 판촉 배너를 표시합니다.

UI 예:

Victoria's Secret은 한 사이트에서 사용 가능한 모든 제안을 명확한 UI로 제공합니다. 사이트의 정보 아키텍처에서 크기를 사용하여 선택한 제안을 강조하거나 강조하지 않는 방법을 확인하십시오.

더 나은 UX를 위해 판매 카테고리에서 필터링 활성화

특정 장바구니 프로모션 또는 할인 코드가 적용되는 모든 항목을 수집하는 판매 카테고리를 제공하는 경우 사용자가 해당 카테고리를 탐색하고 필터링할 수 있도록 허용해야 합니다. 일부 방문자는 판매 중인 제품만 보고 싶어하므로 별도의 판매 카테고리를 통해 모든 제안을 보고 이 섹션을 쉽게 탐색할 수 있어야 합니다. 필터링된 탐색 옵션을 사용하면 쇼핑객이 판매 섹션 내에서 정렬 및 필터링하여 선택 범위를 효과적으로 좁힐 수 있습니다. 필터가 없으면 판매 쇼핑이 힘들고 고객이 사이트에서 이탈할 수 있습니다.

UI 예:

Pomelo Fashion은 제품 유형 및 크기별로 판매 카테고리 필터를 제공합니다.

Fashion Nova는 가격대 또는 구획별로 필터링된 판매 카테고리를 제공합니다.

고객 조종석 제공

특정 고객이 전용 고객 조종석에 액세스할 수 있는 모든 카트 판촉 및 할인 코드를 표시하면 고객이 자신에게만 제공되는 판촉을 이해하는 데 도움이 됩니다. 또한 개인화된 프로모션이 아닌 대중에게 제공되는 프로모션만 표시하는 판매 페이지와 달리 개인 고유의 할인 쿠폰, 기프트 카드, 로열티 포인트 잔액 또는 기타 보상을 표시할 수 있습니다.

UI 예:

H&M은 고객이 로열티 포인트 잔액, 사용 가능한 프로모션 및 할인, 고유한 바우처, 추천 프로그램을 찾을 수 있는 고객 조종석을 제공합니다.

모바일 해상도의 고객 조종석:

판매 섹션 및 적절한 범주에 할인 품목 나열

사이트의 전용 판매 섹션에 판매 항목 표시를 제한하지 마십시오. 최고의 검색 가능성을 위해 적절한 카테고리 페이지와 판매 섹션 모두에 할인 품목을 나열하는 것이 가장 좋습니다. 일부 사용자는 할인을 찾고자 할 때 직접 판매 섹션으로 이동하지만 다른 사용자는 특별히 판매 섹션을 찾지 않습니다. 특정 항목을 찾는 사용자는 일반적으로 카테고리를 기준으로 탐색합니다. 세일 품목을 정가 품목과 함께 표시하는 사이트는 사용자가 관심 영역 내에서 할인을 찾을 수 있도록 도와줍니다.

UI 예:

프리티 리틀 씽은 세일 품목과 제품 카테고리에서 판매 품목을 나열하여 두 가지 모두에서 찾을 수 있습니다.

나쁜 언론을 피하기 위해 전 세계적으로 사이트 전체의 프로모션을 전달하십시오.

사이트에서 무료 배송이나 기타 사이트 전체 할인 또는 쿠폰을 제공하는 경우 사이트의 각 페이지에 이러한 제안을 표시하십시오. 일관된 할인 알림은 사용자가 예산 내에서 항목을 찾고 구매를 유도하는 데 도움이 될 수 있습니다. 다시 말하지만, 그들은 귀하의 브랜드를 구매자에게 특전을 제공하는 것으로 묘사합니다. 선택한 영역에서만 사이트 전체 프로모션을 표시하면 모든 사용자가 해당 프로모션을 발견하지 못할 위험이 있습니다. 또한 모든 페이지에 쿠폰을 광고하지 않으면 사용을 방지하기 위해 의도적으로 쿠폰을 숨겼다고 생각할 수 있으며 이는 궁극적으로 브랜드에 부정적인 영향을 미칩니다.

가능한 할인 배치는 다음과 같습니다.

• 홈페이지 영웅공간의 프로모션 공지사항입니다.
• 장바구니 페이지 또는 쿠폰 코드를 입력해야 하는 체크아웃 페이지를 포함하여 장바구니 프로모션 세부정보 또는 쿠폰 코드가 있는 모든 페이지 상단의 배너.
• 제품 목록 페이지 또는 오른쪽 레일에 있는 프로모션 콜아웃.
• 바닥글 내부 또는 근처에 있는 페이지 하단의 배너.

UI 예:

‍Pomelo Fashion은 홈페이지 배너, 톱 페이지 리본 및 카테고리 페이지에서 사이트 전체에 쿠폰을 전달합니다.

PrettyLittleThing은 제품 페이지에서도 사이트 전체의 할인 쿠폰을 고객에게 상기시켜줍니다. 이는 UX 관점에서 훌륭한 조치입니다.

모바일 레이아웃에 표시하는 방법은 다음과 같습니다.

Pretty Little Thing은 메인 페이지 배너와 상단 페이지 리본에 카트 수준 프로모션을 광고합니다.

모든 할인 품목을 표시하는 판매 페이지를 제공합니다.

또한 제품 페이지에 할인이 표시됩니다.

프로모션에 대한 제한 사항을 사전에 명확히 하십시오.

때때로 장바구니 프로모션 또는 할인 쿠폰은 한정자 또는 제한 사항의 대상이 될 수 있습니다. 이 경우 제안에 적용되는 제한 사항이 명확하게 표시되어 있는지 확인하십시오. 필요한 경우 이러한 조건에 대한 자세한 정보로 연결되지만 사용자가 기본 제한 사항을 이해하기 위해 세부 사항을 자세히 살펴보지 않아도 됩니다. 거래를 받기를 기대하는 것보다 더 실망스러운 것은 없지만 결제 시 자격이 되지 않는다는 사실을 알게 되는 것입니다. 쿠폰 디자인은 눈길을 끌 뿐만 아니라 더 중요하게는 기능적이어야 합니다.

UI 예:

Pretty Little Thing은 메인 페이지 배너에 프로모션이 세일 품목과 미용 품목을 제외한다고 명시하고 있습니다.

Chewy는 "첫 번째 Autoship에서 35% 절약" 리본에 광고된 프로모션 세부 정보(버튼 "자세히 알아보기")에 대한 추가 정보에 대한 링크를 제공합니다.

프로모션 CTA를 클릭하면 표시되는 팝업입니다.

모바일 해상도에서 리본은 버튼을 포함하지 않지만 클릭할 수 있습니다. 프로모션 이용약관이 포함된 동일한 팝업을 클릭하면 다음과 같이 표시됩니다.

특정 페이지의 쿠폰 UX 모범 사례:

홈페이지:

홈페이지에 광고되는 프로모션 유형:

고객이 제안의 수에 압도될 수 있으므로(소위 배너 실명증에 걸릴 수 있으므로) 홈페이지에 모든 프로모션을 광고해서는 안 됩니다. 공개적으로 사용 가능한 장바구니 프로모션 또는 쿠폰만 광고해야 합니다. 가장 좋은 UX 관행은 카테고리 또는 제품 페이지에 대한 제품 또는 카테고리별 할인을 그대로 두는 것입니다.

UI 예:

해피삭스는 당시 최대 공개 할인이었던 여름 세일 자동 적용 30% 할인을 홈페이지 메인 배너와 리본 상단에 선보였다.

판매 페이지 링크

사이트 전체에서 자동 적용 또는 쿠폰 프로모션이 진행 중인 경우 홈페이지에 적격한 모든 제품과 조건을 나열하는 대신 고객이 모든 조건을 읽을 수 있는 판매 페이지로 연결되는 티저를 제공할 수 있습니다. 프로모션 및 적격 제품 및 제안을 탐색합니다.

UI 예:

Chubbies Shorts는 판매 컬렉션 페이지로 연결되는 메인 페이지에 프로모션 배너를 표시합니다.

카테고리 페이지:

팝 업

팝업은 상점에서 사용할 수 있는 쿠폰 할인 및 카트 수준 프로모션을 광고하는 데 사용할 수 있지만 다양한 UX 단점이 있습니다. 프로모션을 광고하는 유일한 방법인 경우 사용자는 프로모션을 닫고 필요한 정확한 할인 조건이나 바우처 코드를 잊어버릴 수 있습니다. 따라서 팝업은 배너, 이메일, SMS와 같은 다른 커뮤니케이션 수단과 함께 사용해야 합니다. 팝업의 또 다른 문제는 방해가 된다는 것입니다. 그들은 사용자가 실제로 탐색하고 싶어하는 콘텐츠를 다루며 성가신 것처럼 보일 수 있습니다.

반면에 팝업은 고객이 방금 수행한 작업에 대해 할인을 할당할 때 이메일을 대체하거나 추가할 수 있는 훌륭한 기능입니다. 예를 들어 고객이 뉴스레터를 구독한 경우 팝업에 적립된 할인을 표시할 수 있습니다. 이렇게 하면 고객은 받은 편지함을 확인해야 하는 것보다 더 빠르고 쉽게 받을 수 있습니다. 다시 한 번, 팝업과 이메일이 공존할 수 있어 고객이 나중에 다시 방문하고 싶어할 때 할인을 받을 수 있습니다.

모바일 앱의 팝업에 대한 좋은 대안은 푸시 알림입니다.

UI 예:

Tula는 팝업을 사용하여 카트 수준 프로모션을 전달하지만 사용자가 15% 할인 고정 배너를 클릭할 때도 팝업에 액세스할 수 있습니다. 그래야 나중에 프로모션으로 돌아올 수 있습니다.

페이지 상단 리본:

홈페이지 배치와 유사하게 리본은 공개 또는 사이트 전체 카트 또는 할인 쿠폰 프로모션을 위해 예약해야 합니다. 사용자가 장바구니를 확인하거나 결제를 완료할 때 코드에 쉽게 액세스할 수 있도록 공개 쿠폰 코드를 추가하고 결제를 포함한 모든 페이지에서 볼 수 있도록 하는 좋은 위치입니다.

UI 예:

Chubbies Shorts는 리본을 사용하여 공개적으로 사용 가능한 대형 카트 프로모션을 광고합니다.

보행인:

바닥글은 웹사이트에서 가장 적게 읽히는 곳 중 하나입니다. 대부분의 고객이 할인을 놓칠 수 있으므로 할인 쿠폰이나 장바구니 수준 제안을 두는 것이 가장 좋은 방법은 아닙니다. 반면에 바닥글은 프로모션 이용약관을 추가하기에 좋은 곳입니다. T&C가 매우 짧기 때문에 프로모션의 T&C에 대한 별도의 페이지가 필요하지 않은 경우 바닥글에 배치할 수 있습니다.

UI 예:

ThredUp은 바닥글을 사용하여 장바구니 프로모션의 이용 약관을 표시합니다.

제품 페이지:

기존 가격표는 그대로 둡니다.

가격을 인하하기 전에 고객에게 가격이 얼마였는지 확인하십시오. 사람들은 제품의 가치가 아니라 거래의 가치를 기준으로 구매 결정을 내립니다. 가능하면 고객에게 비교하여 좋은 거래처럼 보이게 하는 참조 가격을 제공하세요.

UI 예:

Shein은 이전 가격에 줄을 긋고 새 가격을 표시하며 할인 수준을 백분율로 나타내는 태그도 추가합니다.

모바일에서는 할인 비율과 할인 금액을 표시합니다.

번들 프로모션 규칙을 명확하게 명시

번들 할인의 경우 제품을 보기 쉽게 만들고 제품 페이지에서 단계를 수행하여 사용자가 원할 경우 자격을 갖추도록 합니다. 사이트에서 동일한 제품의 여러 항목 구매에 대해 할인을 제공하는 경우 사용자는 해당 제안을 쉽게 발견하고 최소 요구 사항에 도달할 수 있어야 합니다.

UI 예:

Chubbies Shorts는 카테고리 페이지의 제품 가격표 바로 옆에 "2개 사면 할인 받기" 세일을 표시합니다.

그들은 또한 장바구니에 할인을 표시합니다.

할인을 클릭하면 해당 할인이 선택되어 주문에 추가되어 가격이 $10 감소합니다.

쇼핑 카트:

장바구니와 결제 페이지 모두의 핵심 부분으로 쿠폰 코드 필드를 포함합니다.

쿠폰 코드가 있는 사용자는 가능한 한 빨리 입력하기를 원합니다. 결제 프로세스의 첫 번째 단계 전에 장바구니에서 쿠폰 코드를 위한 명확한 위치를 제공해야 합니다. 이 UI 접근 방식을 통해 사람들은 개인 정보를 입력하기 전에 해당 정보가 유효한지 확인할 수 있으며 프로세스 초기에 합계를 적절하게 업데이트할 수 있습니다.

쿠폰 코드 배치와 관련하여 프로모션 코드를 사이드바 항목 대신 체크아웃 프로세스의 핵심 부분으로 만드는 것이 좋습니다. 프로모션이 오른쪽 레일에 배치되면 광고와 혼동되기 쉽고 배너 블라인드로 인해 무시되는 경향이 있습니다.

반면에 고객에게 쿠폰 코드가 없고 쿠폰 필드가 표시되는 경우 할인을 찾기 시작하기 때문에 가능한 거래를 놓치고 이탈할 수 있습니다. 모든 쿠폰을 공개적으로 사용할 수 없는 경우 가장 좋은 해결책은 눈에 보이는 열린 텍스트 필드를 제공하지 않는 것입니다. 텍스트 필드를 표시하려면 텍스트 링크를 제공해야 합니다. 이 디자인은 많은 쇼핑객이 눈치채지 못하기 때문에 사용자를 유치하고 쿠폰 퀘스트를 보낼 가능성이 적습니다. 물론 절충점은 쿠폰 코드가 있는 사람들이 찾기 어렵다는 것입니다.

링크 아래에서 자동으로 확장되거나 숨겨 지는 쿠폰 코드 상자 는 텍스트 필드여야 합니다. 쿠폰 코드에 고정된 수의 문자 또는 특정 패턴이 있는 경우 사용자가 도움이 되도록 충분하지 않거나 너무 많거나 잘못된 유형(숫자, 알파벳, 특수 기호) 문자를 추가하면 사용자에게 메시지를 표시하는 자동 유효성 검사를 추가할 수도 있습니다. 그들은 오류를 더 일찍 발견합니다. 필드는 사용자가 올바르게 입력할 수 있도록 사이트에서 사용되는 쿠폰 코드를 수용할 수 있을 만큼 충분히 길어야 합니다. 쿠폰 코드의 가장 좋은 길이는 8-12자입니다. 쿠폰 코드 제안을 제공하는 경우 드롭다운 목록에 표시할 수도 있습니다.

제안된 쿠폰 주위에 문구를 표현하는 방법 과 관련하여 정신 회계 마케팅 심리학은 귀하의 제품이 필수품 범주에 더 많이 속하는 경향이 있는 경우 고객에게 쿠폰을 "얻었다"고 말해야 한다고 제안합니다(팝업 "안녕하세요! 방금 $10 할인 쿠폰을 받았습니다!"라는 메시지가 표시됩니다. 대조적으로, 제품이 더 하찮다면 쿠폰을 깜짝 선물로 사용하거나 운이 좋아서 쿠폰을 받은 것으로 간주해야 합니다(“당신은 방금 $10 할인 쿠폰을 받았습니다!”라는 메시지를 상상해 보세요). 정신 회계에 대한 자세한 내용은 블로그 게시물에서 읽을 수 있습니다.

쿠폰 코드 자체는 기억하기 쉽고 쿠폰 상자에 쓰기 쉬워야 합니다(선택할 수 있는 드롭다운 또는 라디오 버튼으로 제공하지 않는 한). 이것은 조합을 고객에게 의미 있는 것으로 만들고 O 및 0과 같은 유사한 문자 및 숫자를 피하고 길이를 12자 미만으로 유지하는 것을 의미합니다. 블로그 게시물에서 인지 능력에 대해 자세히 알아보세요.

UI 예:

Birchbox에는 장바구니 보기에 매우 잘 보이는 쿠폰 코드 상자가 있습니다. 또한 장바구니 보기에서 쿠폰 코드 상자를 놓친 사람들을 위해 결제 보기에서 쿠폰 코드 상자를 열 수 있는 링크를 제공합니다. 두 단계 모두에서 쿠폰 코드를 추가하는 옵션을 유지하는 좋은 방법입니다. 결제 양식에서 쿠폰 코드 상자를 숨겨 이탈을 줄이는 데 도움이 됩니다.

모바일 해상도에서는 쿠폰 상자가 숨겨져 있으므로 클릭하여 확장해야 합니다.

다시 말하지만, 체크아웃 페이지에 프로모션 코드 상자에 대한 링크가 있습니다.

최소 지출 프로모션의 경우 사용자를 위해 계산을 수행하고 지출 목표에 도달하도록 돕습니다.

일부 사이트는 특정 금액 이상 구매 시 무료 배송과 같은 프로모션을 제공합니다. 이러한 거래는 사용자가 자격을 갖추기 위해 추가 시간과 돈을 사용하도록 유도합니다.

최소 지출 프로모션의 경우 사이트는 사용자에게 제안 자격을 얻기 위해 지출해야 하는 금액을 정확히 알려야 합니다. 이에 대한 훌륭한 UI 아이디어는 무료 배송, % 할인 또는 할인 할인 여부에 관계없이 사용자가 할인을 받기 위해 더 많은 비용을 지출해야 하는 장바구니에서 직접 카운트다운하는 것입니다.

고객이 무료 배송에 도달하기 위해 더 많은 비용을 지출하도록 하고 싶지만 "충분한" 지출 수준에 도달하기 위해 쇼핑을 제한하지 않고 가격 상한선을 설정하고 무료 배송에 도달하는 데 필요한 가치에 고정하지 않으려면 다음과 같이 할 수 있습니다. UI를 사용하여 지출 시작 시 더 빠르게 진행되고 주문량 "목표"에 도달하는 데 더 느리게 진행되는 무료 배송 진행 상황을 표시합니다. 이것은 연구에 기반한 "목표 속도" 아이디어에 따른 것입니다. 이 블로그 게시물에서 자세한 내용을 읽을 수 있습니다.

사이트는 쇼핑 카트에 관련 항목을 제안하여 쇼핑객이 최소 지출 목표에 도달할 수 있도록 하고 스스로 계산하는 수고를 덜어줌으로써 훨씬 더 나아갈 수 있습니다.

UI 예:

Tula는 UI를 사용하여 무료 배송 자격을 갖추기 위해 누락된 금액을 장바구니에 표시합니다.

장바구니에서 받을 수 있는 사용 가능한 특별 제안에 대해 사용자에게 알림

사용자의 관심을 끌고 사용 가능한 장바구니 수준 및 쿠폰 프로모션을 찾을 수 있는 마지막 기회는 장바구니 페이지에 있습니다. 여기에서 주문을 쉽게 변경할 수 있으므로 무료 배송이나 할인과 같이 사용자가 받을 수 있는 모든 특별 제안을 포함해야 합니다.

제안은 사용자의 관심을 끌 수 있도록 명확하게 표시되어야 합니다. 사용자의 눈을 그리려면 적절한 배치와 시각적 가중치를 사용하십시오.

다음은 몇 가지 최고의 UX 사례입니다.

• 제품 수준 제안의 경우 제품 자체 근처에 메시지를 표시합니다.
• 사이트 전체 제안의 경우 옵션 바로 위의 우선 순위 공간에 제안을 제시하여 결제를 진행하십시오.
• 배송에 할인이 적용되는 경우 사이트 전체에 할인을 적용하거나 배송 총액 옆에 배치하는 것이 적절할 수 있습니다.
  

특히 체크아웃 시 고객에게 너무 많은 쿠폰과 장바구니 수준 프로모션을 제공하지 마십시오. 선택 과부하는 이탈로 이어질 수 있습니다. 블로그 게시물에서 다양성과 선택 과부하의 가치에 대해 자세히 알아보세요.

UI 예:

Chubbies Shorts는 사용 가능한 모든 할인과 보상을 장바구니에 바로 표시합니다.

특별한 조건이나 제한 사항을 언급

장바구니 프로모션 또는 쿠폰에 특별한 조건이나 제한 사항이 있는 경우 고객이 구매를 완료하기 전에 판매 페이지, 이용 약관 및 장바구니에 언급하십시오.

UI 예:

Shein은 장바구니에서 프로모션의 특별 조건을 언급합니다. 예를 들어 고객이 구매할 수 있는 최대 프로모션 제품 수와 세일 품목은 반품할 수 없습니다.

결제 페이지:

쿠폰 코드 필드 포함

이전에 언급했듯이 누군가 장바구니 보기 페이지에서 적용하는 것을 잊은 경우 장바구니 페이지와 결제 페이지 모두에 쿠폰 코드 필드를 포함하는 것이 좋습니다.

코드가 성공적으로 적용된 경우 성공 메시지 표시

쿠폰 코드가 성공적으로 적용되었음을 확인하기 위해 성공 메시지와 할인 금액을 보여줍니다. 사용자가 메시지를 보고 입력한 쿠폰 코드와 연결할 수 있도록 쿠폰 코드 필드 가까이에 메시지를 배치합니다. 해당 메시지가 페이지 상단 또는 하단에 표시되도록 하면 혼란스러울 수 있습니다. 성공 메시지가 쿠폰이 성공적으로 적용되었다는 정보의 유일한 출처가 아닌지 확인하십시오. 추가된 할인을 주문 총액, ​​장바구니 및 체크아웃 페이지에 표시하고 어떤 쿠폰 코드가 어떤 할인을 적용했는지 지정하는 것이 좋습니다(특히 고객이 주문에 할인 코드를 두 개 이상 추가할 수 있는 경우).

UI 예:

Pretty Little Thing은 유효한 코드를 입력한 후 체크 표시와 주문에 적용된 할인 금액을 보여줍니다. 또한 주문 합계에서 계산된 할인 금액을 표시하여 할인을 적용한 할인 코드를 지정합니다.

또한 모바일 보기에 적용된 쿠폰 코드 및 관련 할인이 표시됩니다.

{{CTA}}

UI 키트에 포함된 준비된 구성 요소로 프론트엔드 구축

구축 시작

{{ENDCTA}}

잘못된 쿠폰 코드에 대한 오류 메시지 표시

코드가 유효하지 않거나 프로모션 조건이 충족되지 않으면 쿠폰 코드 문제 유형을 나타내는 관련 오류 메시지를 표시해야 합니다. 사용자에게 무엇이 잘못되었고 어떻게 문제를 해결할 수 있는지 알려주지 않으므로 모든 경우에 동일한 오류 메시지를 표시하지 마십시오.

페이지 상단이나 하단이 아닌 쿠폰 코드 상자 바로 옆에 오류 메시지를 표시합니다. 사용자는 오류 메시지를 인지하지 못할 수 있습니다. 예를 들어 빨간색 또는 기타 대비되는 색상을 사용하여 오류 메시지가 표시되는지 확인합니다.

표시할 오류 메시지 유형:

• 쿠폰 코드가 잘못되었습니다.
• 쿠폰 코드는 이미 사용되었으며 더 이상 사용할 수 없습니다.
• 주문 금액이 쿠폰을 적용하기에 부족하거나 과도합니다(이 경우 쿠폰을 받기 위해 누락된 금액 또는 장바구니에 있는 초과 금액에 대한 정보를 반환).
• 주문 내용이 프로모션 조건을 충족하지 않습니다(이 경우 자격을 얻기 위해 제거하거나 추가해야 하는 항목 언급).
• 쿠폰이 만료되었습니다.
• 다른 이유 - 다른 경우를 상상할 수 있다면 특별히 메시지를 작성하십시오. 당신이 생각할 수 없었던 다른 모든 경우에 대해 하나의 기본 메시지가 있습니다.

UI 예:

Summer Salt는 입력한 코드가 유효하지 않거나 프로모션 조건이 충족되지 않은 경우 오류 메시지를 표시합니다. 그들은 고객이 코드를 다시 확인하도록 권장합니다. 상단 리본에 공개 쿠폰을 표시하면 실수를 수정하는 데 도움이 됩니다.

모바일 해상도에 표시하는 방법은 다음과 같습니다.

고객이 할인 쿠폰을 두 개 이상 추가할 수 있는지 또는 프로모션을 결합할 수 있는지 명확히 합니다.

주문에 하나의 쿠폰만 추가하도록 허용하는 경우 고객이 유효한 쿠폰 코드를 추가하면 쿠폰 코드가 사라지거나 숨겨집니다. 고객이 쿠폰 코드를 다른 것으로 변경할 수 있으므로 "내 쿠폰 코드 변경" 버튼을 추가하여 교체하십시오. 쿠폰 코드를 제거하는 옵션도 있습니다. 고객은 주문당 하나의 쿠폰 코드만 추가할 수 있다고 페이지 어딘가에 명확하게 명시해야 합니다.

고객이 쿠폰 코드를 더 추가할 수 있는 경우 쿠폰 코드 하나를 추가하면 "주문에 추가됨"으로 표시하고 쿠폰 코드 필드를 다시 로드하고 다시 비워두면 고객이 다른 쿠폰 코드를 적용할 수 있습니다.

할인 코드와 장바구니 프로모션을 결합할 수 없는 경우 프로모션 광고, T&C 및 결제 페이지에 명확하게 명시해야 하며, 특히 누군가 이미 판매 중인 품목 위에 쿠폰을 추가하려고 하는 경우 오류 메시지로 명시해야 합니다.

UI 예시:‍

Summer Salt는 쿠폰 코드 필드 아래에 추가된 쿠폰을 추가하고 쿠폰이 주문에 적용되면 쿠폰 코드 필드를 비워 사용자가 주문당 둘 이상의 쿠폰을 적용할 수 있음을 제안합니다.

Pretty Little Thing을 사용하면 고객은 주문당 하나의 쿠폰 코드만 적용할 수 있습니다. 쿠폰이 주문에 적용된 후 쿠폰 필드를 사라지게 하고 "코드 변경" 버튼으로 대체합니다.

사용자가 향상된 고객 경험을 위한 할인을 찾도록 지원

쿠폰 코드 필드 옆에 사용 가능한 모든 할인을 볼 수 있는 고객 조종석에 대한 링크를 표시하거나 선택할 수 있는 쿠폰 및 카트 프로모션 목록을 표시해야 합니다. 이렇게 하면 고객이 귀하의 거래를 훨씬 쉽게 사용할 수 있고 장바구니에 몇 가지 항목을 더 추가하는 경우 할인을 받을 수 있는 경우 장바구니 크기를 늘릴 수 있습니다.

UI 예:

Shein은 체크아웃 시 쿠폰 코드 필드 옆에 사용 가능한 쿠폰을 수집하고 쿠폰 코드 필드 아래에 공개적으로 사용 가능한 쿠폰을 언급하는 "내 쿠폰" 페이지로 연결됩니다.

"내 쿠폰" 링크를 클릭하면 열리는 사용 가능한 쿠폰과 만료된 쿠폰을 보여주는 고객 조종석입니다.

모바일 앱에서는 쿠폰을 "쿠폰 알림"으로 표시합니다. 해당 팝업을 클릭하면 사용 가능한 모든 쿠폰을 확인하고 사용할 쿠폰을 선택할 수 있습니다.

받은 할인 반영

장바구니 수준 프로모션 및 쿠폰 모두에서 장바구니에 있는 항목에 적용된 할인 또는 특별 제한 사항을 표시합니다. 결제 정보를 요청하기 전에 쿠폰 코드를 확인하고 비용에 반영해야 합니다. 장바구니 수준 할인은 적용 대상에 따라 제품 또는 주문 수준에서 표시되어야 합니다. 사용자가 절감액을 확인하고 총계가 어떻게 계산되는지 이해할 수 있어야 합니다. 가장 좋은 것은 어떤 쿠폰 코드와 어떤 프로모션이 주문 총액에서 정확한 금액을 절약했는지 표시하는 것입니다.

할인 품목에 대한 특별 제한 사항은 고객이 주문하기 전에 알려야 합니다.

UI 예:

Shein은 장바구니 요약에서 제품 수준에 대한 제품 수준 할인을 표시합니다.

Shein은 고객이 결제 시에만 할인 코드를 적용할 수 있도록 합니다. In the order summary, they reflect the product discounts by showing the difference between retail price and subtotal. Then, if you apply any discount codes to the whole order, it is displayed as the “discount” of the subtotal. Note that they show both, cart-level and discount coupons savings in the order total but in different places.

On the mobile app, coupons can be selected at checkout. Then they are displayed in the order total.

요약

This was a long one. The key takeaway here is that coupon offers and promotions shouldn't be run for the sake of it. Besides tinkering with the offer itself, your team also needs to consider the best design, placement, and validation possible. Keep in mind that the promotional ROI won't peak if you don't make your offers easy to find and apply. Even the best offer will go unnoticed if it's not promoted properly. Always remember to clearly communicate the value of the discount and any conditions customers need to meet. Hopefully, these UX tips will get you started.

{{CTA}}

Are you ready to fix your coupon UX?

시작하다

{{ENDCTA}}