전환하는 전자상거래 결제 흐름을 디자인하는 방법

전자 상거래 결제 흐름은 돈이 있는 곳입니다. 그것에 대해 생각해보십시오. 임의의 방문자는 결제 깔때기에 들어가기 전에 사이트를 떠납니다. 의욕적인 구매자는 주문을 마치기 위해 이곳에 옵니다.

체크아웃 UX의 작은 디자인 개선 사항은 일반적으로 사이트의 수익에 직접적인 영향을 미칩니다.

내가 최근에 분석한 전자상거래 사이트에는 트래픽의 84.7%가 구매로 이어지는 결제 페이지가 있었다. 이를 90%까지 늘릴 수 있다면 461개의 추가 주문과 월 $87,175의 추가 수익이 발생하여 23.9%의 매출 성장을 이룰 것이라고 계산했습니다. "작은" 이익은 클 수 있습니다.

따라서 질문은 "더 많은 사람들이 결제 과정을 거쳐 구매를 완료하도록 하려면 어떻게 해야 합니까?"입니다. 구체적인 전술은 사이트에 따라 다르지만 답을 찾는 원칙은 보편적입니다.

전자상거래 결제에 대한 생각을 위한 프레임워크: Fogg 행동 모델

결론은 행동 = 동기 x 능력 x 방아쇠입니다.

모델은 다음과 같습니다.

그래프의 오른쪽 상단, 즉 높은 동기 부여, 수행하기 쉬운 트리거, 적절한 트리거를 목표로 합니다. 의욕이 높고 능력이 낮으면(하기 어려운) 좌절감을 얻게 됩니다. 동기는 낮지만 하기 쉬운 경우(예: 쓰레기 버리기) 짜증이 납니다.

Amazon이 Fogg 행동 모델을 사용하는 방법

Amazon에서 제품 프로모션이 포함된 이메일을 보내는 것은 동기 부여 이자 방아쇠입니다. 사람들은 링크를 클릭하고 제품 페이지로 이동합니다. 그들은 카피와 리뷰를 읽고, 사진을 봅니다. 이 모든 것이 동기 부여를 증가시킵니다. "장바구니에 추가"는 체크아웃 프로세스를 시작하는 트리거입니다.

능력은 어떻습니까? 결제 프로세스를 완료하는 것이 얼마나 쉽습니까? 여기에서 아마존이 발버둥을 치고 있습니다. 비밀번호를 입력하고 몇 번만 클릭하면 됩니다. 결제 흐름은 마찰이 없습니다.

다음은 Amazon 모바일 상거래 애플리케이션의 실제 워크플로입니다.

완료 및 완료. 전체 결제 흐름을 단계별로 살펴보고 무엇이 좋은 결제인지 알아보겠습니다.

참고: 포괄적인 전자 상거래 지침 보고서(전자 상거래를 위한 247개 지침)에서 전자 상거래에 대한 수많은 팁을 얻을 수 있습니다.

"장바구니에 추가" 기능 및 장바구니 페이지를 디자인하는 방법

모든 것은 사람들이 장바구니에 무언가를 추가하는 것으로 시작됩니다. 방문자가 장바구니에 첫 번째 항목을 추가하는 순간 그들은 탐색하는 것이 아니라 쇼핑하는 것입니다.

"장바구니에 추가"는 어떻게 생겼습니까?

사람들이 제품 페이지의 장바구니에 물건을 추가하면 어떻게 됩니까?

나는 그들이 장바구니에 무언가를 추가했다는 것을 어리석게도 명백해야 합니다. 명확한 확인. 얼마나 많은 사이트가 적절한 확인을 표시하지 않거나 알아채기 어려운 작은 애니메이션이나 작은 확인 텍스트를 표시하여 이를 망쳐놓는지 우스꽝스럽습니다.

보노보스에서 장바구니 추가를 놓칠 수 없습니다. "장바구니에 추가"를 클릭하면 작은 애니메이션과 함께 카트가 나타나며, 이는 사람의 눈이 움직임에 반응하기 때문에 좋습니다. 방문자에서 구매자로의 이동을 나타내는 미묘한 시각적 단서입니다.

"결제" 버튼과 함께 장바구니 내용은 ​​사용자가 다른 곳을 클릭할 때까지 계속 표시됩니다. 좋아요. "체크아웃" 버튼 색상을 파란색이 아닌 다른 색상으로 변경하겠습니다. 눈에 잘 띄지 않습니다. 시각적 계층에서 가장 중요한 것은 "장바구니에 추가" 버튼이지만 제품은 이미 장바구니에 있습니다.

ASOS는 작은 애니메이션도 보여줍니다. 그들은 카트 내용물을 연 다음 몇 초 후에 접습니다. "장바구니에 추가" 버튼도 "추가됨"으로 변경되어 구매자에게 좋은 확인이 됩니다.

사용자가 어딘가를 클릭하여 선택을 할 때까지 장바구니 내용을 열어 둡니다. 이렇게 하면 "결제" 버튼이 계속 얼굴을 응시하게 됩니다.

우리는 항상 그들이 더 많은 것을 구매하기를 원하지만 단일 품목이라도 구매하는 프로세스를 개선하면 큰 개선으로 이어질 수 있습니다. 계산대를 향해 살짝 밀어주는 것은 항상 좋은 생각입니다.

제품이 장바구니에 담기면 어떻게 됩니까?

두 가지 주요 접근 방식이 있습니다.

1. "장바구니 추가" 확인을 표시하고 사용자를 동일한 페이지에 유지합니다. 장점: 사람들이 다른 페이지로 이동을 요청하지 않았으므로 놀라움이 없습니다. 그들은 또한 체크아웃하기 전에 장바구니에 더 많은 품목을 추가하는 것을 고려할 수 있습니다. 단점: 현재 보고 있는 제품이 이미 장바구니에 있습니다. 그들이 사고 싶어할 만한 다른 것을 살펴본다면 당신에게 더 유용할 것입니다.
2. 사용자를 장바구니 페이지로 이동합니다. 장점: 결제에 한 걸음 더 다가가고 있습니다. 이것은 또한 상향 판매 제안을 할 수 있는 좋은 기회입니다. 단점: "장바구니당 항목"을 최대화하는 데 실패할 수 있습니다.

Amazon은 장바구니 페이지로 이동하여 장바구니에 제품을 추가했음을 확인하고 상향 판매를 보여줍니다. Amazon이 잘하는 것은 장바구니 내용을 줄이는 것이므로 상향 판매가 두드러집니다.

잠재적인 전략의 올바른 균형은 산업과 목표에 따라 다르며 이를 테스트하고 싶을 것입니다.

기억해야 할 측정항목:

• 평균 거래 가치;
• 거래당 평균 수량.

우리는 트랜잭션 수만 늘리는 것이 아니라 각 트랜잭션에 사용되는 금액을 늘리고 싶습니다.

장바구니 내용을 잘 표시

카트 내용을 효과적으로 표시하기 위한 핵심 원칙은 명확성과 제어입니다.

• 명쾌함. 장바구니에 담긴 내용과 배송 및 세금을 포함한 최종 비용을 쉽고 명확하게 이해할 수 있습니다. 놀라운 비용은 사람들로 하여금 카트를 버리게 만듭니다.
• 제어: 수량 업데이트 또는 제품 제거와 같은 변경을 쉽게 수행할 수 있습니다.

ASOS는 장바구니 페이지를 잘 활용합니다.

그들이 옳은 것:

• 제품 사진;
• 제품명 및 가격
• 제거, 나중을 위해 저장 또는 크기와 같은 세부 정보 변경 기능
• 그들이 수락하는 지불의 종류를 보여주십시오.
• 총 가격을 표시하고 무료 배송을 확인하십시오.
• "결제"에 대한 명확한 클릭 유도문안;
• "손쉬운 반품"을 강조 표시하여 불확실성을 줄입니다.

Indochino는 카트 내용을 제시하는 데 있어 유쾌하고 미니멀한 접근 방식을 가지고 있습니다. 하지만 페이지에는 눈에 띄는 쿠폰 상자 및 수량 변경 불가와 같은 몇 가지 문제가 여전히 있습니다.

시각적 계층 구조를 올바르게 얻으십시오.

시각적 계층 구조에서 가장 중요한 것은 결제를 계속하는 것입니다. (다양한 CTA를 테스트합니다.) 2개의 클릭 유도문안이 있어야 합니다. 하나는 장바구니 위에, 다른 하나는 장바구니 아래에 있습니다.

다음과 같이 두 개의 체크아웃 버튼이 분명히 눈에 띕니다.

Modcloth는 이 페이지를 마지막으로 검토한 이후로 이 페이지를 개선했습니다. 이전에는 입력해야 하는 수량을 업데이트했습니다. 이제 스테퍼를 사용하여 수량을 늘리거나 줄일 수 있습니다.

Modcloth는 PayPal 옵션도 제공합니다. 대부분의 사람들은 신용 카드로 지불하는 것을 선호하지만 1-2개의 대체 지불 방법(예: PayPal, Amazon)을 제공하는 것이 좋은 생각이며 전환에 도움이 되는 것으로 나타났습니다. 하지만 너무 많은 선택은 상처를 줍니다.

Modcloth는 또한 $75 이상 주문 시 무료 반품 및 무료 배송을 제공한다고 상기시켜줍니다.

쿠폰을 눈에 띄게 만들지 마십시오.

사람들이 "여기에 쿠폰 코드를 입력하십시오" 필드를 볼 때 덜 특별하다고 느낍니다. “어째서 내가 하나도 없습니까?” 많은 사람들이 쿠폰을 찾기 위해 Google로 이동합니다. 많은 사람들이 돌아 오지 않습니다. 쿠폰을 찾기 위해 사이트를 떠나는 것은 장바구니를 포기하는 일반적인 이유입니다.

따라서 이것은 좋은 생각이 아닙니다.

대신 "쿠폰이 있습니까?"라는 텍스트 링크가 있습니다. 또는 비슷한 것. 누군가 링크를 클릭하면 위와 같은 입력 필드가 나타나도록 합니다. 텍스트 링크는 덜 눈에 띄기 때문에 더 적은 사람들이 관심을 기울일 것입니다.

이미 쿠폰 코드가 있는 고객은 입력 방법을 찾고 있습니다. 당신이 그것을 정말 잘 숨기지 않는 한, 그들은 그것을 찾아 그들의 쿠폰 코드를 적용할 수 있을 것입니다.

쇼핑객에게 배송, 반품 및 보안과 같은 좋은 물건에 대해 상기시킵니다.

언제 상품을 받을 수 있습니까? 배송비는 얼마입니다. 이거 공짜인가요? 거래가 안전할까요? 사람들을 상기시킵니다.

다음은 "지금 안전하게 지불"이라고 표시된 체크아웃 버튼 아래에 있는 세 가지 주요 메시지를 보여주는 예입니다.

영구 카트 FTW

사람들이 장바구니에 무언가를 추가할 때 장바구니 내용이 만료되지 않도록 하세요. 장바구니 포기 이메일과 리타겟팅 광고를 사용하여 사람들이 다음 주 또는 다음 달에 다시 방문하도록 하여 중단한 부분에서 계속할 수 있도록 합니다.

가입 절차: 계정을 만들까 말까?

많은 전자 상거래 사이트는 구매자가 구매하기 전에 가입하기를 원합니다. 일부는 등록을 강제하기도 합니다(예: 등록하지 않고는 구매할 수 없음). 긴 이야기 요약: 하지 마십시오. 그것은 전환을 아프게합니다. 많이.

4명 중 1명은 강제 등록으로 인해 온라인 구매를 포기합니다. 강제 등록은 "탐욕스러운 마케터 증후군"의 일부입니다. 전자 상거래 마케터가 왜 그것을 하고 싶어하는지 이해하는 것은 쉽습니다. 그들은 사용자가 "고정"되기를 바라고 계정이 있기 때문에 더 많이 쇼핑하기를 바랍니다.

정말 그런가요? 오 제발. 몇 개의 웹사이트에 등록된 계정이 있습니까? 당신은 지금 그러한 이유로 그들에게 충성을 느끼고 있습니까? 나는 당신이 그들 중 대부분에 한 번 이상 로그인하지 않았을 것이라고 확신합니다.

다음은 사용성 전문가 Jared Spool이 말한 강제 등록에 대한 좋은 이야기입니다.

2개의 필드, 2개의 버튼, 1개의 링크와 같이 더 간단할 수 있는 양식은 상상하기 어렵습니다. 그러나 이 양식은 고객이 주요 전자 상거래 사이트에서 연간 $300,000,000에 달하는 제품을 구매하는 것을 막고 있는 것으로 나타났습니다. 더 나쁜 것은 사이트 설계자들이 문제가 있다는 사실조차 전혀 몰랐다는 것입니다.

형식은 간단했다. 필드는 이메일 주소 와 비밀번호였습니다. 버튼은 로그인 과 등록이었습니다. 링크는 비밀번호 찾기 였습니다 . 사이트에 대한 로그인 양식이었습니다. 사용자가 항상 접하는 형태입니다. 어떻게 문제가 있을 수 있습니까?

문제는 양식이 살았던 곳만큼 양식의 레이아웃에 관한 것이 아닙니다. 사용자는 쇼핑 카트에 구매하려는 제품을 채우고 체크아웃 버튼을 눌렀을 때 이를 접하게 됩니다. 제품 비용을 지불하기 위해 정보를 실제로 입력하기 전에 발생했습니다.

팀은 이 양식을 반복 고객이 더 빨리 구매할 수 있도록 하는 것으로 보았습니다. 처음 구매자는 등록의 추가 노력에 신경 쓰지 않을 것입니다. 왜냐하면 결국 그들은 더 많은 것을 위해 돌아올 것이고 후속 구매의 편리함에 감사할 것이기 때문입니다. 모두가 이기죠?

사이트에서 제품을 구매해야 하는 사람들을 대상으로 사용성 테스트를 진행했습니다. 우리는 그들에게 그들의 쇼핑 목록을 가져오라고 요청했고 우리는 그들에게 구매할 돈을 주었습니다. 그들이 해야 할 일은 구매를 완료하는 것뿐이었습니다.

우리는 처음 쇼핑하는 사람들에 대해 틀렸습니다. 그들은 마음을 등록했습니다. 그들은 페이지를 만났을 때 등록해야 하는 것을 분개했습니다. 한 쇼핑객이 우리에게 말했듯이, “나는 관계를 맺기 위해 여기에 온 것이 아닙니다. 그냥 뭐 사고 싶어요.”

강제 등록을 제거함으로써 매출이 3억 달러 증가했습니다 .

Spool의 팀은 또한 대부분의 사람들이 시스템에 여러 계정을 가지고 있다는 것을 알아냈습니다. 사람들은 이미 계정이 있다는 사실을 잊었습니다. 표준 이메일로 계정을 만들려고 하면 오류 메시지가 표시되어 계정을 더 만들기 위해 대체 이메일을 사용해야 했습니다.

대신 무엇을 해야 합니까? 항상 게스트 체크 아웃을 제공하십시오. 판매 후 등록 작업을 할 수 있습니다.

• "등록"이라는 단어도 언급하지 마십시오. "신규 고객" 또는 이와 유사한 용어를 말하십시오.
• 체크아웃 후 "감사합니다" 페이지에서 계정 생성을 제안합니다. 당신은 이미 체크아웃에서 그들의 이름, 이메일, 주소를 가지고 있기 때문에 계정을 만드는 데 몇 번의 클릭만으로 충분할 것입니다. 원하는 비밀번호를 묻거나 자동 생성 옵션을 제공하고 계정 생성 권한을 확인합니다.

내 경험에 따르면 전자 상거래 사이트에서 가장 일반적인 접근 방식은 여전히 ​​차선책입니다. 전반적으로 너무 바쁘고 새로운 고객에게 선택을 요구하여 주저하게 만듭니다.

몇 가지 훨씬 더 바람직한 옵션이 있습니다.

체크아웃 등록 옵션 1

사용자에게 신규 또는 재방문의 두 가지 선택권을 제공합니다.

Asos가 항상 이러한 접근 방식을 사용한 것은 아닙니다. 이것은 세 가지 선택이 있는 이전 가입 페이지였습니다.

이 접근 방식을 중단하고 간소화된 버전으로 전환하면 장바구니 포기가 50% 감소했습니다!

여전히 (본질적으로) 강제 등록이지만 다르게 포장되어 있습니다. 소셜 로그인 옵션을 사용하면 더 쉽습니다. 일반적인 사용성 문제는 단 몇 번의 클릭으로 줄어듭니다.

체크아웃 등록 옵션 2

장바구니 포기는 중요한 문제입니다. 이메일을 미리 요청하면 버려진 장바구니 복구 프로세스를 쉽게 시작할 수 있습니다. 또한 감각 과부하가 없는 두 가지 쉬운 선택이 있습니다.

체크아웃 등록 옵션 3

또 다른 좋은 방법은 로그인 화면을 완전히 건너뛰는 것입니다. 대신 기본적으로 게스트 체크아웃을 사용하세요. 기존 계정이 있는 사람은 링크를 통해 로그인할 수 있으며 신규 고객은 결제 후 계정을 만들 수 있습니다.

다이아몬드 양초가 잘하는 것은 눈에 보이지도 않습니다. 자동으로 계정이 생성되지만 언급하지는 않습니다. 동일한 이메일 주소로 4번의 게스트 체크아웃을 거친 다음 마침내 계정을 만들기로 결정했다고 가정해 보겠습니다(기본적으로 비밀번호 입력).

해당 이메일 주소를 사용한 모든 이전 주문은 이 계정에 대해 병합되므로 새로 생성된 계정에는 적절한 주문 내역이 함께 제공됩니다.

체크아웃 등록 옵션 4

이 옵션을 선택하면 구매 완료 시 인센티브와 함께 계정 등록이 제공됩니다. 다음은 Speedo의 예입니다.

사람들은 돈을 지불할 때까지 계정 등록에 신경 쓰지 않습니다. 선택해야 한다면 계정 등록과 구매 중 무엇이 더 중요합니까?

일반적으로 "감사합니다" 페이지는 그다지 유용하지 않지만 여기서는 그렇지 않습니다. 그들은 당신에게 간단한 제안을 제공합니다: 비밀번호를 입력하고 쿠폰을 받으세요(추가로 주문 추적, 더 빠른 구매 등). 여기에서 신규 사용자의 계정 생성 비율은 종종 75% 이상입니다.

전자상거래 결제 페이지

이것은 돈 페이지입니다. 최종 결제 페이지의 리프트는 은행 계좌에 큰 변화를 줄 것입니다. 다음은 결제 흐름에서 더 나은 최종 단계를 만드는 데 도움이 되는 몇 가지 원칙입니다.

마지막으로 신용카드 정보를 요청하세요

사람들이 청구서를 받기 전에 배송 정보를 완료하도록 합니다. 이것은 Cialdini의 약속과 일관성 원칙을 실행에 옮기는 것입니다. 사람들은 일단 무언가를 시작하면 끝내야 한다고 느낍니다.

그들은 이미 이름, 이메일 및 배송 정보를 입력하라는 요청을 받았으며 이상적으로는 청구서 수신 주소와 동일하므로 다시 입력할 필요가 없습니다.

문에 발 들여놓기 기법이라고도 하는 동일한 원칙이 양식 필드에 적용됩니다. 이름과 같은 쉬운 필드부터 시작하십시오. 신용 카드 번호 필드는 "가장 어려운" 필드이므로 맨 뒤에 와야 합니다.

다음은 하지 말아야 할 일입니다.

이게 낫다. (배송 페이지에서 여기로 이동합니다.)

좋음: 명확한 1-2-3 단계 흐름이 있습니다. 이름 필드는 카드 정보 앞에 나오며 청구지 주소(배송과 동일한 경우)는 다시 입력할 필요가 없습니다.

나쁜 점: 주요 CTA는 "저장하고 계속하기"입니다. 어디에서 계속 ? "계속 검토" 또는 다음 작업과 같이 구체적이어야 합니다.

실제 신용 카드처럼 보이는 결제 양식 사용

다음과 같은 스큐어모픽 방식으로 결제 양식을 디자인하여 실제 터치를 추가합니다.

시스템에서 구현하기 위해 무료(!)용 Skeuocard라는 인터페이스를 얻을 수 있습니다. 여기에서 데모를 사용해 보세요.

결제 프로세스가 안전해 보이도록 하세요.

보안은 심각한 문제입니다. 실제로 SSL을 사용하여 안전하게 결제하는 것 외에도 사람들에게 이에 대해 알리십시오. 다음은 안전해 보이도록 만든 양식의 예입니다.

작동하는 몇 가지 이유:

• 신용 카드 번호 필드의 배경색이 다릅니다.
• SSL 로고.
• 서면 진술: “신용카드 결제를 안전하게. 이것은 안전한 128비트 SSL 암호화 결제입니다.”
• 만료 및 보안 코드에 대한 설명입니다.

청중이 기술에 정통하지 않은 경우 SSL 또는 HTTPS가 무엇인지 모를 수 있으므로 일반 용어로 말하십시오.

시스템에 신용 카드 저장

물론 PCI 규정 준수를 처리해야 하고 해킹을 당할 위험이 있지만 재방문 사용자로부터 훨씬 더 많은 돈을 벌 수 있습니다. 사람들이 청구 정보를 입력할 필요가 없을 때 구매는 원클릭 프로세스가 됩니다.

반품 구매자를 위한 마찰이 거의 완전히 제거되었기 때문에 아마존은 그것을 크게 죽이고 있습니다! 결제 흐름은 거의 흐름이 아니며 원 클릭 이벤트입니다.

재방문자는 신규 방문자보다 구매 가능성이 훨씬 높지만 재방문 구매자에 비하면 아무것도 아닙니다 . 그들을 위해 쉽게 만드십시오.

결론

결제 과정에서 전자상거래 최적화 작업을 시작하세요. 여기서 상대적 이득은 매우 좋은 절대 합계를 초래할 것입니다.

결제 프로세스의 UX를 개선하려면:

• "장바구니에 추가" 기능을 지우십시오.
• 방문자가 장바구니 항목을 쉽게 변경하거나 제거할 수 있도록 합니다.
• 등록 프로세스 간소화 - 신규 구매자가 구매 후 등록할 수 있습니다.
• 결제 페이지에서 가장 쉬운 정보를 먼저 물어보세요.