기프트 카드 UX 및 UI 모범 사례

기프트 카드가 전자 상거래에서 뜨거운 주제가 된 것은 놀라운 일이 아닙니다. 그들은 감사와 애정을 표현하는 데 탁월할 뿐만 아니라 선물을 위한 기발한 아이디어를 생각해 낼 시간이 없을 때 머리가 자라는 구매 딜레마에 대한 효과적인 해결책이기도 합니다.

목차

• ‍ ‍ 기프트 카드를 위한 별도의 구매 경로 설계
• 모든 선물 옵션을 나열하는 별도의 방문 페이지 만들기
• 고객이 기프트 카드 상태를 확인할 수 있는 별도의 섹션 제공
• 여러 공간에서 기프트 카드 홍보
• 기프트 카드 구매 여정 디자인
• 선물 유형 선택
• 카드 형식 선택
• 배송일 선택(선택사항)
• 기프트 카드 금액 선택
• 받는 사람 정보 제공
• 기프트 카드 코드 개인화
• 상품권 템플릿 선택
• 카드를 사용자 정의하기 위해 사진 업로드
• 결제 프로세스
• 여러 채널을 통해 받는 사람에게 카드 보내기
• 효과적인 이메일 디자인을 생각해 보세요.
• 기프트 카드 사용‍
• 부분 상환 허용
• 기프트 카드 입력 필드 디자인
• 성공 및 오류 메시지 생성
• 기프트 카드 만료 알림 디자인
• 요약
  

2019년에만 거의 30억 달러의 기프트 카드 현금이 사용되지 않았습니다. 한편, 2019년 총 기프트 카드 지출은 986억 달러를 기록했습니다. 원천

기프트 카드는 매우 강력한 도구이므로 기프트 카드의 구매 및 사용 프로세스를 단순화하는 것이 좋습니다. 그러나 입력 필드는 어떻게 설계해야 할까요? 어떤 하위 페이지에서 홍보해야 합니까? 그리고 UX 원칙에 따라 카드 구매 및 사용은 어떻게 보여야 합니까?

이 블로그 게시물은 웹사이트 및 모바일용 기프트 카드 UX 및 UI 디자인에 대한 모범 사례와 영감을 수집합니다. 사이트에서 기프트 카드를 홍보하는 것부터 구매 프로세스를 완료하고 운이 좋은 받는 사람과 카드를 공유하고 마지막으로 매장에서 카드를 사용하는 것까지 전체 고객 여정을 다룹니다.

{{전자책}}

{{ENDEBOOK}}

참고: 모든 데스크톱 스크린샷은 Mac, Chrome에서 제작되었습니다.

참고: 이 게시물의 주요 초점은 디지털 코드 또는 인쇄된 카드로 구매할 수 있는 기프트 카드입니다. 기프트 카드를 프로모션 도구 및 인센티브로 사용하는 방법에 대해 자세히 알아보려면 쿠폰 및 프로모션에 대한 UX 가이드를 확인하는 것이 좋습니다 .

기프트 카드를 위한 별도의 구매 경로 설계

기프트 카드 구매 경로는 특히 디지털 상품권을 제공하는 경우 표준 고객 여정과 크게 다를 수 있습니다. 이것이 사이트의 별도 모듈로 설계되어야 하는 이유입니다. 대부분의 기프트 카드 구매 경로는 UI 디자인에 반영해야 하는 몇 가지 중요한 단계로 이어집니다.

• 먼저 매장에서 기프트 카드 섹션을 찾습니다.
• 기프트 카드 형식 및 템플릿 선택(권장).
• 카드 값을 선택합니다.
• 배송 방법 및 날짜 설정.
• 받는 사람의 정보와 카드와 함께 보낼 메시지를 입력합니다.
• 점검.
  

알 수 있듯이 이 프로세스는 제품이 장바구니에 추가되고 추가 세부 정보를 제공할 필요가 없는 표준 제품 구매와 다릅니다. 이것이 표준 제품 보기 페이지와 다른 이 섹션에 대해 다른 디자인을 개발해야 하는 이유입니다. 그러나 나중에 더 자세히 설명합니다.

이 포스트는 주로 e-기프트 카드를 위해 작성되었습니다. 오프라인 매장에서만 상품권을 제공하는 경우 실제 카드에 대한 UX 모범 사례 목록은 다음과 같습니다.

• 시선을 사로잡도록 만드십시오 . 디자인에 따라 고객이 이를 알아차리고 구매를 고려할지 여부가 결정될 수 있습니다.
• 포장 – 카드를 봉투에 넣고 고객이 개인화된 메시지나 소원을 적을 수 있는 공간을 제공하십시오.
• 그것들을 진열해 두십시오 – 그것들을 모든 곳에 놓고 간과할 수 없도록 만드십시오(예: 계산원의 책상).
• 모바일 친화적으로 만드십시오. 모바일 사용을 보장하고 고객이 모바일 장치에 표시된 기프트 카드를 사용할 수 있도록 합니다. 예를 들어, 모바일 장치에서 스캔하고 저장할 수 있는 QR 코드 또는 바코드를 사용합니다.
  

그러나 디지털 방식으로 전환한 경우 기프트 카드 여정이 UX 및 UI 관점에서 적절하게 설계되었는지 확인하기 위한 몇 가지 주요 지침이 있습니다.

모든 선물 옵션을 나열하는 별도의 방문 페이지 만들기

이제 선물 모듈을 디자인하는 데 더 많은 시간을 투자해야 할 필요성에 대해 알게 되었으므로 랜딩 페이지도 필요하다는 것이 분명해졌습니다. 기프트 카드 방문 페이지는 사용 가능한 기프트 카드 옵션을 명확하게 설명해야 합니다. 다양한 카드 디자인을 선보여야 하고(많은 카드를 제공하는 경우) 다양한 카드 배송 옵션(이메일과 인쇄물을 모두 제공하는 경우)을 제시해야 합니다. 또한 잠재적 구매자에게 추가 정보를 제공하기 위해 FAQ 또는 T&C를 배치하는 것이 좋습니다.

예시:

Zalando에는 기프트 카드를 홍보할 수 있는 전용 랜딩 페이지가 있습니다. 이 보기에서 잠재 구매자는 가능한 모든 개인화 옵션을 보고 표준 카드와 선물 상자 중에서 선택할 수 있습니다.

와인 전자 상거래 비즈니스인 Winc는 기발한 카피와 함께 기프트 카드 랜딩 페이지에 FAQ 섹션을 포함했습니다.

방문 페이지를 사용하여 제안을 보여줄 뿐만 아니라 고객이 현재 카드 잔액을 확인할 수 있습니다. 일부 회사에서는 사용자가 이미 소유한 카드를 다시 로드할 수 있도록 이 공간을 사용하기도 합니다.

고객이 기프트 카드 상태를 확인할 수 있는 별도의 섹션 제공

기프트 카드를 인센티브로 제공하든 구매 가능한 제품으로 제공하든 상관없이 사용자가 카드 상태를 확인할 수 있는 별도의 공간을 제공하는 것이 좋습니다. 고객이 카드 유효성, 현재 잔액을 확인하거나 카드를 재충전하거나 크레딧을 다른 카드로 이체하도록 할 수 있습니다.

예시:

Shein의 기프트 카드 섹션에는 고객이 기프트 카드 잔액을 확인할 수 있는 작은 위젯이 있어 이 공간에서 기프트 카드와 관련된 모든 항목을 찾을 수 있습니다.

스타벅스는 사용자가 페이지의 별도 섹션에서 잔액을 확인하고, 잔액을 이전하고, 문제를 보고하거나, 카드를 다시 로드할 수 있도록 합니다.

여러 공간에서 기프트 카드 홍보

기프트 카드를 위한 방문 페이지를 만드는 것 외에도 모든 잠재 고객이 상점의 이 부분에 쉽게 액세스할 수 있도록 해야 합니다. 고객이 사이트에서 카드를 쉽게 찾을 수 없다면 선물로 인한 많은 수익이 발생하지 않을 것입니다. 기프트 카드에 대한 정보는 페이지 탐색 표시줄과 바닥글에 배치해야 합니다. 기프트 카드가 새로운 것이거나 선물 시즌이 시작되면 기프트 카드 할인이 포함된 특별 프로모션 캠페인을 시작하여 고객 인지도를 높일 수 있습니다.

예시:

Home Depot에는 탐색 모음 외에 추가 서비스가 포함된 상단 표시줄도 있습니다. 그들은 이 공간을 상품권 홍보를 위해 사용하기로 결정했습니다. 고객은 항상 페이지 상단에서 이 제품을 볼 수 있으므로 좋은 UX 관행을 따릅니다.

바닥글에는 기프트 카드도 포함되어 있습니다.

Zalando는 탐색 모음과 바닥글 모두에서 기프트 카드에 대해 알려줍니다. 그러나 이 경우 기프트 카드는 액세서리 카테고리에 나열되어 홈디포보다 찾기가 더 어렵습니다.

웹사이트 또는 모바일 앱 탐색 외에도 이메일 바닥글에 기프트 카드를 추가할 수도 있습니다. 또한 고객 여정의 특정 단계에 통합할 수도 있습니다. 예를 들어, 구매 후 감사 메일에서 기프트 카드를 언급하여 쇼핑객이 귀하의 브랜드에서 이미 쇼핑을 즐겼기 때문에 다른 사람이 귀하의 상점에 기프트 카드를 받도록 장려할 수 있습니다. 또 다른 아이디어는 카트 보기 근처의 추천 항목 섹션에 카드를 추가하는 것입니다.

이메일에 대해 말하자면, 연중 특정 시기에 기프트 카드를 홍보하기 위해 별도의 메시지를 보내는 것을 고려할 수도 있습니다. 예를 들어 매장에서 선물할 수 있는 가능성에 대한 전용 이메일 메시지로 크리스마스 또는 어머니날과 같은 휴일을 목표로 삼으십시오.

예 :

Winc는 구독자에게 어머니의 날을 알리고 기프트 카드를 홍보하기 위해 별도의 이메일을 보냈습니다.

Alloy Apparel은 고객이 마지막 순간에 카드를 구매할 수 있는 기회를 제공하기 위해 크리스마스 전날 모든 실물 기프트 카드에 대한 할인 캠페인을 시작했습니다.

기프트 카드 구매 여정 디자인

선물 유형 선택

이제 고객이 우리의 제안을 찾을 수 있도록 하는 방법을 알았으므로 최상의 구매 경로를 설계할 수 있습니다. 물론 구매 경로는 아래에서 다룰 경로와 다를 수 있습니다.

예시:

PrettyLittleThing은 하나의 선물 유형과 형식만 제공합니다. 이것이 고객 여정이 상품권 템플릿 선택으로 시작되는 이유입니다.

기프트 카드 유형을 선택하는 것부터 시작하겠습니다. 개인 디지털 바우처에서 법인 카드 및 그룹 선물에 이르기까지 다양한 선물 옵션이 있습니다. 이 단계의 디자인은 제공하려는 기프트 카드의 범위에 따라 크게 달라집니다. 옵션이 아무리 많아도 모두 읽기 쉽게 나열되어 있는지 확인하십시오. 하나의 선물 옵션만 강조하고 싶지 않다면 정보 아키텍처를 평평하게 유지하는 것이 좋습니다.

예 :

홈디포는 다양한 선물 옵션을 제공합니다. 개별 카드는 똑같이 중요한 보너스 옵션 그리드 위의 상단 배너에서 승격되어 사용자가 레이아웃을 이해할 수 있고 모든 옵션을 한 눈에 볼 수 있습니다.

Zalando는 또한 더 많은 사용자 정의 옵션을 제공하지만 고객이 사용 가능한 모든 옵션을 보려면 아래로 스크롤해야 하는 수직 레이아웃을 선택했습니다. Zalando는 개별 카드만 제공하므로 평면 레이아웃이 필요하지 않습니다. 대신 페이지를 사용하여 다른 템플릿과 옵션으로 초점을 전환합니다. 추가 옵션(선물 상자)은 페이지 하단에 제공되어 주요 제품이 아님을 분명히 합니다.

카드 형식 선택

디지털 상품권과 실물 상품권을 모두 제공하는 경우 구매 경로의 다음 단계는 이 두 가지 옵션 중 하나를 선택하는 것입니다. 이 단계와 다음 단계는 모두 단일 페이지에 표시되어야 합니다. 구매 프로세스를 완료하기 위해 사용자를 새 페이지로 안내하면 경험이 손상되고 사용자가 이탈할 수 있습니다.

전달 방법 간의 선택이 명확해야 합니다. 대비되는 색상이나 아이콘을 사용하여 두 옵션의 차이점을 강조할 수 있습니다. 또한 명확한 사본을 사용하는 것이 좋습니다. "이메일로 보내기"와 "우편으로 보내기"의 대비가 충분히 투명해야 합니다. 재능 있는 사람이 이메일로 받았지만 인쇄된 매장으로 가져오려는 경우 완전한 디지털 형식 외에 인쇄 가능한 디자인(이메일에 첨부된 PDF)을 가질 수 있는 옵션을 제공할 수도 있습니다. 또한 이메일에 기프트 QR 코드를 통합하여 POS에서 빠르게 스캔할 수 있습니다.

예시:

Victoria's Secret은 배송 방법을 선택하는 것으로 고객 여정을 시작합니다. UI는 두 옵션 모두에 동일한 중요성을 부여합니다. 그러나 저는 보다 대조적인 CTA를 권장합니다. "메일로 보내기"와 "이메일로 보내기"는 특히 영어가 모국어가 아닌 사람들에게 혼동을 줄 수 있습니다.

배송일 선택(선택사항)

상품권의 UX를 향상시키기 위해 사용자가 정확히 카드를 보낼 시기를 선택할 수 있도록 하여 디지털 카드에 좀 더 개인화를 추가할 수 있습니다. 카드는 일반적으로 선물로 보내지기 때문에 사용성 측면에서 의미가 있습니다. 중요한 날짜 5일 전에 생일 선물을 보내는 것은 짜증납니다. 그렇죠?

예시:

PrettyLittleThing은 사용자가 원하는 배달 날짜와 시간을 설정해야 합니다. 그들은 간단한 드롭다운 목록을 사용했습니다. 대신 사용자가 선택한 날짜(예: 요일)를 더 잘 볼 수 있는 달력 날짜 선택기를 사용하는 것이 좋습니다.

기프트 카드 금액 선택

다음 단계에서는 사용자가 기프트 카드 금액을 선택하도록 허용해야 합니다. 제안 및 클릭 가능한 값과 사용자 정의 입력 필드의 조합이 가장 잘 작동합니다. 이런 식으로 사용자에게 선물 가치가 얼마인지에 대한 단서를 제공하고 쉽게 선택할 수 있도록 하는 동시에 고객이 비표준 카드 가치를 구매하려는 경우 사용자 정의 필드를 제공합니다.

예시:

온라인 아트 마켓플레이스인 Saatchi Art는 제안된 값과 사용자 정의 입력 필드를 모두 사용하여 제한을 두지 않습니다. 사용자가 최대 기프트 카드 금액을 초과하는 경우 페이지 상단에 오류 세부 정보를 알려주는 오류 메시지가 표시됩니다.

Zalando는 50에서 100 GBP 사이의 가능한 값을 배치하는 기프트 카드 값에 제한을 부과합니다. 이 접근 방식은 경제적인 관점에서 의미가 있습니다. 그러나 이는 바우처의 유연성을 극적으로 제한하고 사용자가 더 비싼 기프트 카드를 원할 경우 사이트를 떠나게 만들 수 있습니다.

Tiffany & Co.는 맞춤형 카드 값을 제공하지 않습니다. 대신 사전 정의된 카드 값을 제공합니다. 주목할 가치는 더 낮은 값을 사용할 수 있음에도 기본 카드 값이 $500라는 것입니다. 이러한 방식으로 Tiffany & Co.는 고객이 더 높은 가치의 카드에 집중하도록 유도하고 더 바람직하고 표준 가격으로 인식되도록 관리합니다.

받는 사람 정보 제공

이것은 특히 디지털 바우처의 맥락에서 디자인 프로세스의 중요한 단계입니다. 여기에서 받는 사람의 이메일 주소와 이메일이 전달해야 하는 기프트 카드 메시지의 두 개 이상의 입력 필드를 덮어야 합니다. 일부 회사는 카드 배달을 더욱 개인화할 수 있도록 제목 줄 사용자 지정 옵션을 제공하기도 합니다. 중요한 것은 필요한 정보(받는 사람의 이름과 이메일 주소)만 요구하는 것입니다. 추가 필드를 너무 많이 포함하지 마십시오.

또 다른 것은 카드 메시지입니다. 고객이 카드를 더 빨리 보낼 수 있도록 미리 작성된 메시지를 제공하는 것이 가장 좋습니다. 그러나 미리 작성된 텍스트가 마음에 들지 않는 경우 사용자가 메시지를 변경하거나 사용자 지정할 수 있도록 해야 합니다. 또한 메시지 필드를 선택 사항으로 만드십시오.

예 :

스타벅스는 받는 사람과 보내는 사람의 정보를 위한 간단한 UI를 제공합니다.

Amazon은 사용자에게 메시지가 어떻게 생겼는지에 대한 아이디어를 제공하기 위해 미리 작성된 간단한 메시지를 제공합니다.

기프트 카드 코드 개인화

기프트 카드가 비즈니스의 큰 부분을 차지하는 경우 개인화 잠재력을 더욱 향상시키는 방법을 생각할 수 있습니다. 기프트 카드 소프트웨어를 사용하면 받는 사람의 이름과 일치하도록 기프트 카드 코드를 사용자 정의하거나 카드가 연결된 특별한 경우를 포함할 수 있어야 합니다(예: HAPPYBIRTHDAY7593). 이 간단한 트릭은 카드를 더 기억에 남게 만들 것입니다. 독특한 패턴은 또한 혼란스러운 문자나 적절한 길이의 배제로 인해 계산대에서 카드 코드를 적용하기 쉽게 할 것입니다. 코드 유효성 검사 환경 개선에 대한 자세한 내용은 여기로 이동하십시오.

상품권 템플릿 선택

기프트 카드는 일반적으로 선물로 보내지기 때문에 시각적으로 즐겁고 행사와 관련되도록 하는 것이 가장 좋습니다. 예를 들어, 생일 축하 카드가 없고 온통 회색인 생일 카드를 받았다고 상상해 보십시오. 최고의 선물이 아니겠습니까? 그렇기 때문에 최소한 여러 개의 상품권 템플릿을 제공하는 것이 좋습니다.

예시:

Amazon은 많은 카드 템플릿을 제공하며 사용자는 경우에 따라 쇼핑할 수 있으므로 카드 구매 경로가 간소화됩니다. 그들의 기프트 카드 엔진은 많은 경우에 선물을 제공합니다. 또한 다양한 디자인으로 선불카드를 맞춤 선물하는 듯한 느낌을 줍니다.

카드를 사용자 정의하기 위해 사진 업로드

보너스 UX 빠른 승리는 사용자가 카드를 개인화하기 위해 사진을 업로드할 수 있게 하는 것입니다. 그러나 이 기능을 추가하려면 제3자의 지적 재산권을 침해하지 않도록 사진에 대한 사용 약관을 제시해야 합니다.

예시:

Zalando를 사용하면 사용자가 카드 디자인을 만들 수 있습니다. 그러나 모든 것이 법적 측면에서 해결되도록 Zalando는 사용자가 사용 약관을 준수할 것을 요구합니다.

결제 프로세스

사용자가 필요한 모든 정보를 입력하면 표준 결제로 설계된 결제 단계로 이동합니다. 사용자가 제공한 정보를 신속하게 수정하거나 변경할 때마다 전체 바구니를 삭제하고 처음부터 다시 시작하지 않고도 카드를 변경할 수 있는지 확인하십시오. 또한 이 보기에 카드 세부 정보를 맞추는 것이 좋습니다. 기본적으로 숨겨져 있고 사용자가 지정된 아이콘을 클릭하거나 카드 위로 마우스를 가져갈 때 표시되는 확장 가능한 텍스트를 사용할 수 있습니다.

예 :

PrettyLittleThing은 잘못된 기프트 카드 결제 UX의 예입니다. 사용자가 카드를 장바구니에 추가한 후에는 받는 사람 정보 또는 상품권 값과 같은 카드 세부 정보를 업데이트하는 간단한 방법이 없습니다. 유일한 방법은 카트에서 카드를 제거하고 전체 프로세스를 다시 시작하는 것입니다.

Winc를 사용하면 사용자가 장바구니 보기에 있는 동안 카드 값을 업데이트할 수 있습니다.

여러 채널을 통해 수신자에게 카드 보내기

받는 사람과 카드를 공유할 수 있는 여러 옵션이 있습니다. 다음은 그 중 일부입니다.

• 이메일 메시지를 통해 보냅니다.
• 받는 사람과 물리적으로 공유할 수 있는 인쇄 가능한 PDF로 구매자에게 보냅니다.
• 구매자 또는 수령인에게 우편으로 실물 카드를 전달합니다.
• 메신저, Whatsapp과 같은 소셜 미디어를 통해 보냅니다.
  

UI 디자인이 진행되는 한 우리는 이메일 메시지로 받는 사람에게 보내는 디지털 카드에 중점을 둘 것입니다. 수신자가 귀하의 브랜드에 대해 처음 듣는 경우 이메일에 여러 신뢰 신호를 구현할 수 있습니다. 스팸 메일이 되지 않는 방법에 대한 몇 가지 팁은 다음과 같습니다.

• 명확한 발신자 ID는 중요한 신뢰 표시기 입니다. 신뢰를 높이기 위해 첨부된 기프트 카드와 함께 이메일 제목에 발신자 이름을 포함하는 것을 고려할 수 있습니다. 예를 들어 "Katie가 방금 선물을 보냈습니다!"라는 제목을 사용하십시오.
• 개인화 활용 – 받는 사람의 이름이 있는 경우 이메일에 추가하여 UX를 개선하고 메시지를 보다 신뢰할 수 있게 만들어야 합니다.
• 제목 줄에 기프트 카드 값을 너무 과장하지 마십시오. 제목 줄 에 "바우처", "코드", "거래" 또는 숫자 카드 값과 같은 문구를 사용하지 마십시오. 받는 사람의 이메일 공급자는 귀하의 메시지를 스팸으로 취급하거나 사서함의 프로모션 탭에 배치할 수 있습니다.
  

효과적인 이메일 디자인을 생각해 보세요.

이메일 내용과 관련하여 다음과 같은 몇 가지 사항을 다루어야 합니다.

• 카드의 가치를 포함합니다.
• 특정 T&C에 대한 링크 또는 카드 사용 제한에 대한 추가 정보(있는 경우)를 포함합니다.
• 가급적이면 한 번의 클릭으로 클립보드에 쉽게 복사할 수 있는 기프트 카드 코드입니다.
• 수령인을 매장으로 안내하는 CTA입니다.
  

사용자는 데스크톱과 휴대기기 모두에서 메일을 읽을 수 있습니다. 기프트 카드가 모바일 친화적인지 확인하기 위해 CTA에 딥 링크를 포함하여 사용자가 디지털 지갑에 이미 추가된 기프트 코드를 사용하여 전자상거래 앱으로 바로 이동할 수 있도록 할 수 있습니다. 이메일 형식만 결정하는 경우 POS의 스캔 장치에서 사용할 수 있도록 쉽게 확대/축소할 수 있는 바코드 또는 고대비율의 QR 코드를 포함해야 합니다.

예시:

자선 의료 기관인 Watsi는 적절한 기프트 카드 이메일 디자인과 관련하여 모든 확인란을 표시합니다.

아마존은 기프트 카드를 계정에 보관할 수 있는 스토어 크레딧으로 취급합니다. 이메일 메시지에는 받는 사람의 계정에 크레딧을 자동으로 적용하는 Amazon 웹사이트 또는 앱(기기에 따라 다름)으로 사용자를 바로 연결하는 딥 링크가 포함되어 있습니다.

기프트 카드 사용

Kim Salazar가 제안한 것처럼 쿠폰과 상품권의 유용성은 온라인 상점에서의 사용 편의성에 정비례합니다.

최소 주문 금액과 같은 상품권 사용에 대한 제한을 부과하지 않아야 합니다. 또 다른 일반적으로 좋은 UX 관행은 기프트 카드 수령인이 배송 및 제품 비용 정보에 더 민감하다는 것을 기억하는 것입니다. 이러한 고객은 평소보다 더 많은 주의를 기울여 장바구니 콘텐츠를 구성합니다. 카드 명목금액과 주문금액의 차이가 날 수 있다는 우려 때문이다. 그렇기 때문에 사용자 여정 전체를 살펴보고 가능한 최고의 사용자 경험을 제공하기 위한 수정 사항을 도입해야 합니다.

{{고객}}

{{ENDCUSTOMER}}

부분 상환 허용

상품권을 프로모션 상품권이 아닌 결제 수단으로 취급할 수 있습니다. 이 옵션은 스타벅스 케이스처럼 충전식 기프트 카드를 사용할 때 유용합니다. 그런 다음 카드의 잔액이 동적으로 계산되고 크레딧이 결제 수단으로 사용됩니다. 신용카드나 체크카드와 비슷합니다. 이 솔루션을 선택하는 경우 기프트 카드에 만료 날짜가 없는지(또는 매우 긴 날짜인지) 확인해야 합니다. 이렇게 하면 기프트 카드를 매우 매력적으로 만들 수 있지만 동시에 카드를 영원히 사용할 수 있도록 하려면 고품질 인프라가 필요합니다.

예시:

Zalando 기프트 카드로 쇼핑하는 것은 쉽지만 시작하는 것이 사용자에게 어려울 수 있습니다. 기프트 카드를 의도한 대로 사용하려면 받는 사람이 계정을 설정하고 "바우처 탭"을 찾은 다음 지정된 텍스트 필드에 기프트 카드 코드를 입력하여 사용해야 합니다. 상환 후 카드에 충전된 현금은 Zalando 크레딧으로 처리되어 구매 수단으로 사용할 수 있습니다.

이 접근 방식의 문제는 사용자가 카드를 사용하고 잔액을 확인하기 위해 계정을 설정해야 한다는 사실을 모를 수 있다는 것입니다. 상품권 입력란에 기프트 카드 코드를 입력하면 결제 시에도 카드 교환이 가능합니다. 그런 다음 바우처 금액은 장바구니의 총 금액에 적용됩니다. 나는 두 가지 가능성을 카드 수령인에게 명확하게 알려주는 것이 좋습니다.

기프트 카드 입력 필드 디자인

기프트 카드 받는 사람은 가능한 한 빨리 선물을 사용하고 싶어합니다. 이러한 요구 사항을 충족하려면 구매 프로세스 초기에 바우처 입력 필드를 제공해야 하며, 가급적이면 체크아웃 전에 장바구니에 입력해야 합니다. 이 접근 방식을 통해 고객은 개인 정보를 입력하기 전에 카드가 유효한지 조기에 확인할 수 있습니다.

더 나은 접근 방식은 주문을 완료하고 지불하는 것보다 훨씬 빠른 구매 프로세스의 가능한 가장 빠른 단계에서 상품권을 사용할 수 있는 가능성을 제공하는 것입니다.

예시:

Winc는 간단한 UI 디자인을 제공하며 사용자가 여행을 시작할 때 상품권을 사용할 수 있도록 하여 상환 필드를 찾을 수 없는 것과 관련된 스트레스나 불편을 효과적으로 제한합니다.

구독형 뷰티 브랜드 Birchbox에서도 상품권을 바로 사용할 수 있습니다. 빠른 카드 사용에 대한 정보는 페이지 바닥글에 있습니다.

또한 바우처 입력 위치는 결제 프로세스의 핵심 부분이어야 하며 웹사이트 또는 앱 구조에 적절하게 표시되어야 합니다. 전체 바우처 코드를 포함할 수 있을 만큼 충분히 길어야 합니다.

기프트 코드와 관련된 또 다른 모범 사례는 지불 및 상품권 필드의 근접성과 유사성이 잠재 구매자에게 좌절감을 줄 수 있으므로 이를 명확하게 구분하는 것입니다.

가이드라인은 쿠폰 UI에 대한 모범 사례와 일치합니다. 바우처 입력 필드를 디자인하는 방법을 배우고 싶다면 읽어보세요.

예시:

Birchbox는 바우처 입력 상자의 훌륭한 예입니다. "프로모션 및 기프트 코드"라는 상자 이름은 상자의 목적을 명확하게 합니다. 많은 전자 상거래 사이트에서 이 섹션의 이름으로 "프로모션 코드"를 사용합니다. 카드는 프로모션으로 간주되지 않기 때문에 기프트 카드 소유자에게 혼동을 줄 수 있습니다. 또한 장바구니 보기에서 쿠폰 코드 상자를 놓친 사람들을 위해 결제 보기에서 쿠폰 코드 상자를 열 수 있는 링크를 제공합니다. 두 단계 모두에 쿠폰 코드를 추가할 수 있는 옵션을 유지하는 좋은 방법입니다.

성공 및 오류 메시지 생성

상품권 코드가 성공적으로 적용된 것을 확인하기 위해 성공 메시지와 변경된 주문 합계를 보여줍니다. 사용자가 메시지를 보고 입력한 코드와 연결할 수 있도록 바우처 필드 가까이에 메시지를 배치합니다. 해당 메시지가 페이지 상단 또는 하단에 표시되도록 하면 혼란스러울 수 있습니다. 그러나 성공 메시지는 사용자가 받는 유일한 확인이 되어서는 안 됩니다. 장바구니와 결제 보기 모두에 변경된 주문 총액을 반영합니다.

동일한 논리로 기프트 카드 문제 유형을 나타내는 관련 오류 메시지도 표시해야 합니다. 사용자에게 무엇이 잘못되었고 어떻게 문제를 해결할 수 있는지 알려주지 않으므로 모든 경우에 동일한 오류 메시지를 표시하지 마십시오. 여기 예시들이 있습니다 :

• "기프트카드 코드가 잘못되었습니다. 다시 시도해 주세요."
• "기프트 카드 코드가 만료되었습니다."
• "당신은 상품권 소지자가 아닙니다(상품권을 개별 고객에게 할당하는 경우)."
• "주문이 기프트 카드 조건을 충족하지 않습니다(카드 사용에 한도를 할당한 경우)."
  

예시:

입력한 코드가 유효하지 않거나 프로모션 조건이 충족되지 않으면 SummerSalt에서 오류 메시지를 표시합니다. 그들은 고객이 코드를 다시 확인하도록 권장합니다.

기프트 카드 만료 알림 디자인

카드에 만료일이 있는 경우 조금 더 미리 계획하고 만료되기 전에 카드 잔액을 사용하도록 사용자에게 묻는 자동 알림을 설정해야 합니다. 여기에서 이메일 마케팅과 관련된 최고의 UX 사례를 따라야 합니다. 즉, 시각적으로 시선을 사로잡도록 만들고, 카피를 영리하게 유지하고, 멋지게 대조되는 CTA를 추가하고, 스팸으로 표시될 수 있는 단어("할인" ,"거래","판매").

요약

이 모범 사례 목록이 기프트 카드용 웹사이트 및 모바일 디자인을 시작하거나 현재 UI 디자인을 개선하는 데 도움이 되기를 바랍니다. 기프트 카드 캠페인 구축에 대한 일반적인 조언을 찾고 있다면 이 가이드를 확인하십시오.

{{CTA}}

기프트 카드를 한 단계 업그레이드할 준비가 되셨습니까?

시작하다

{{ENDCTA}}