모바일 쇼핑 카트 디자인의 해야 할 일과 하지 말아야 할 일: 6가지 실용적인 분해(mCommerce 심층 가이드)

장바구니 페이지가 전자 상거래 기계의 중요한 톱니바퀴라는 것을 이미 알고 있습니다. 그러나 방문자가 체크아웃하기 전에 보는 페이지인 모바일 장바구니 페이지가 무게를 실어주고 있습니까?

Growcode에서 장바구니 페이지는 특히 모바일과 관련하여 고객 상점에서 가장 무시되는 부분 중 하나라는 것을 반복적으로 발견합니다. 그리고 그 결과는 심각하여 수익을 심각하게 손상시킵니다.

모바일 커머스 매출은 2021년까지 전체 전자상거래 매출의 52.9%를 차지할 것으로 예상된다. 그러나 2017년 평균 모바일 장바구니 포기율은 무려 85.65%였다.

이는 장바구니에 제품을 추가한 모든 고객 중 10명 중 거의 9명이 구매를 완료하지 않고 남았음을 의미합니다.

#모바일 상거래 매출은 2021년까지 전체 전자 상거래 매출의 52.9%를 차지할 것으로 예상됩니다. #EcommerceStats Click To Tweet
장바구니 포기에 대한 모바일 리드. 위의 그래프에서와 같이 집계 데이터는 산업 간의 상당한 차이를 설명하지 않는다는 점을 기억하십시오. 원천.
이 게시물에서는 장바구니 리뷰 페이지의 6가지 예를 살펴보겠습니다. 처음 세 가지는 복제를 고려해야 하는 견고한 설계 방식을 활용하는 반면 나머지 예에는 피하는 것이 가장 좋은 요소가 포함됩니다.

우리가 특정 장바구니 디자인의 실수에 초점을 맞추는 동안 그것이 전체적으로 완전히 끔찍하다는 것을 의미하지는 않는다는 점도 언급할 가치가 있습니다. 모바일 장바구니 모범 사례를 살펴보겠습니다.

1. 해야 할 일: 아마존

모바일 웹사이트를 위한 Amazon의 장바구니는 모바일 장바구니 디자인이 잘 된 훌륭한 예입니다. 붐비지는 않지만 지나치게 미니멀하지도 않습니다. 주요 CTA에서 눈을 떼지 않고 필요한 모든 요소가 포함되어 있습니다. 선물 포장에서 관련 품목에 이르기까지 주문 가치를 높이기 위해 선택할 수 있는 눈에 잘 띄지 않는 "추가 기능"도 많이 있습니다.
아마존 모바일 장바구니 ux. 필요한 모든 요소가 포함되어 있습니다.

팁 #1: 대비되는 색상으로 설정된 페이지 상단의 명확한 CTA 1 개. 사용자가 아래로 스크롤하면 이 CTA가 화면 상단에 계속 떠 있습니다.

#모바일 #장바구니 최적화 팁: 페이지 상단에 선명한 #CTA 하나를 대비되는 색상으로 설정하세요. #ecommerce #optimization 트윗하려면 클릭
CTA는 사용자가 아래로 스크롤할 때 화면 상단에 떠 있습니다.
팁 #2: CTA는 화면 전체에 적용되므로 왼손잡이와 오른손잡이 사용자 모두 쉽게 탭할 수 있습니다.
팁 #3: 페이지 상단에 무료 배송을 반복하여 의심을 없애고 "거래를 달콤하게"하십시오.
팁 #4: 제품 세부 정보를 다시 확인하려는 사람들을 위해 제품 이미지와 이름이 설명 페이지로 연결됩니다.
팁 #5: 주문 금액을 변경하고 항목을 삭제하고 나중을 위해 저장하는 명확하고 누르기 쉬운 버튼이 있습니다.
팁 #6: "재고 있음" 알림은 고객이 제품을 기다릴 필요가 없도록 안심시킵니다.
#모바일 #장바구니 최적화 팁: '재고 있음' 알림은 #고객이 제품을 기다릴 필요가 없도록 합니다. #ecommerce 트윗하려면 클릭
팁 #7: Amazon은 아래에 간편한 "장바구니로 이동" 버튼과 함께 "나중에 저장"된 제품을 선보입니다.
나중을 위해 저장된 항목이 명확하게 보입니다.
팁 #8: 페이지를 떠나지 않고 장바구니에 추가할 수 있는 관련 제품("고객이 함께 쇼핑한 제품" 포함). 세 번째 항목으로 이 요소의 디자인에 대한 추가 플러스가 완전히 표시되지 않아 스와이프 동작을 제안합니다.
팁 #9: 공백이 많고 불필요한 "필러" 세부 정보가 없습니다. 아마존은 꼭 필요한 것만 포함했습니다.
팁 #10: 바닥글의 "페이지 상단"으로 연결합니다.

이와 같은 통찰력을 더 원하십니까?

주간 전자상거래 팁, 전략 및 업계 최고의 지식을 얻으십시오.
받은 편지함으로 바로 배달됩니다.

on 개인정보 보호정책을 읽었으며 뉴스레터 이용약관에 동의합니다.

계속하려면 이 확인란을 선택하세요.

우후! 방금 가입했습니다. 구독을 확인하려면 받은 편지함을 확인하세요.

2. 해야 할 일: 스테이플

스테이플 카트의 아름다움은 단순함입니다. 제품을 몇 초 만에 검토할 수 있습니다. 그 결과 포함된 옵션이 더욱 강조됩니다.
스테이플 카트의 아름다움은 단순함입니다. 최고의 모바일 전자 상거래 카트 중 하나입니다.
팁 #1: 아마존과 마찬가지로 페이지 상단과 결제 요약에서 제품이 무료로 배송된다는 사실에 주의를 기울입니다. 또한 텍스트가 녹색으로 되어 있어 알림이 더욱 눈에 띕니다. "배송 예정"의 정확한 날짜도 표시됩니다.
팁 #2: 디자인은 매우 단순하며 여백을 잘 활용합니다. 고객은 페이지를 떠나지 않고도 주문을 빠르게 확인하고 필요한 변경을 수행하고 합계를 확인할 수 있습니다.
팁 #3: "쿠폰 및 보상" 상자는 눈에 거슬리지 않습니다. 주요 CTA에서 시선을 떼지 않고 "매장에서 픽업"하는 중요한 옵션도 제공됩니다.
팁 #4: 체크아웃 CTA에 "보안"이라는 단어가 포함되어 있습니다.
팁 #5: 바닥글이 제거되었습니다.

문제가 있습니까? Staples는 많은 권리를 얻었지만 이 카트 디자인의 한 가지 문제는 확장 가능한 메뉴나 검색 양식이 포함되지 않은 헤더의 단순성입니다. 회사에서 하나의 제품만 판매하는 경우 이것이 실행 가능한 솔루션이 될 수 있습니다. 그러나 여러 제품 사이트의 경우 고객이 원할 경우 다시 탐색할 수 있는 옵션을 제공하는 것은 항상 가치가 있습니다.

3. 해야 할 일: 시어스

Sears는 지불 계획, 매장 내 픽업, 선물 옵션 및 프로모션을 포함한 많은 추가 옵션을 제공합니다. 그들의 장바구니는 모바일 장바구니 포기를 방지하는 디자인을 손상시키지 않으면서 한 페이지에 다양한 요소를 결합하려는 소매업체에게 좋은 예입니다.
Sears 모바일 카트 디자인에는 많은 요소가 포함되어 있지만 여전히 단순합니다.
팁 #1: CTA는 소계와 함께 페이지 상단에 포함됩니다. 자물쇠 아이콘은 신뢰를 더욱 강화하고 Paypal을 사용한 결제 옵션도 제공됩니다.
팁 #2: 고가 품목으로서 이 단계에서 망설임을 없애기 위해 지불 계획이 포함되어 있습니다.
팁 #3: 판매 할인은 주문 요약 섹션에 빨간색으로 포함되어 고객이 클릭하여 체크아웃하도록 유도하여 긴급성을 구축하고 의심을 줄입니다.
팁 #4: 신규 고객에 대한 추가 인센티브 역할을 하는 로열티 제도에 로그인할 수 있는 링크가 제공됩니다. 이것은 체크아웃 양식에 더 잘 통합될 혜택 없이 상점 계정을 설정하는 링크가 아니라는 점에 유의하는 것이 중요합니다.
팁 #5: 페이지 하단에 "안전한 체크아웃" 씰이 포함되어 있습니다.
문제가 있습니까? 약간 너무 많으며 일부 고객에게는 그 효과가 주의를 분산시킬 가능성이 있습니다. 예를 들어, 잡지 구독과 하단에 로열티 프로그램에 대한 링크를 제공할 필요가 없습니다.

4. 하지마: Vitacost

Vitacost는 위에서 설명한 많은 요소를 활용하지만 구현에 결함이 있는 경우가 많습니다. 결과는 약간의 조정으로 장바구니 전환이 증가할 가능성이 있는 잘못 설계된 장바구니 페이지입니다.
Vitacost는 위에서 설명한 많은 요소를 활용하지만 구현에 결함이 있는 경우가 많습니다.
실수 #1: 사람들을 장바구니 페이지에서 멀어지게 하는 눈에 띄는 검색 표시줄을 포함합니다. 탐색을 계속하려는 사람들을 위해 검색 표시줄 아이콘(Amazon 예제에서와 같이)을 포함하는 것이 좋습니다. 그러나 너무 크게 만들지 마십시오.

#모바일 #장바구니 최적화 팁: 사람들을 장바구니에서 멀어지게 하는 눈에 띄는 검색창을 포함하지 마세요. #ecommerce 트윗하려면 클릭
실수 #2: 고객을 혼란스럽게 하거나 짜증나게 할 수 있는 불명확한 "BOGO" 제품(하나를 구매하면 반값)을 자동으로 포함합니다.
실수 #3: 눈에 띄는 프로모션 코드 바. 이는 주요 CTA의 주의를 산만하게 하고 고객이 장바구니를 떠나 온라인에서 프로모션을 검색하도록 유도합니다. 프로모션 상자는 표시되어야 하지만 지나치게 표시되어서는 안 됩니다. 그들은 확실히 CTA 이후에 있어야 합니다.
실수 #4: 배송 비용이 "TBD"로 설정되어 의심이 갑니다 (일반적으로 약어를 피해야 함)
실수 #5: 바닥글이 너무 큽니다. Vitacost는 고객이 구매를 완료하거나 앱을 다운로드하기를 원합니까?
실수 #6: 항목을 제거하거나 늘리는 제품 옵션이 너무 작아 탭하기 어렵습니다.
실수 #7: 스크린샷 바로 아래에서 볼 수 있는 플로팅 바는 작은 휴대폰에서 너무 많은 화면 공간을 차지합니다.

5. Don't: 외로운 행성

Staples 페이지가 최소한의 디자인을 효과적으로 활용하는 경우 Lonely Planet은 너무 많은 요소를 배제합니다. 망설임을 줄이고 신뢰를 구축할 수 있는 기능이 없고 구매 가치를 높이기 위한 권장 사항이나 제품 제안이 없으며 많은 버튼이 클릭하기 어렵습니다.
Lonely Planet은 너무 많은 요소를 제외합니다. 카트 UX를 개선하는 데 사용할 수 있는 많은 공간이 남아 있습니다.
실수 #1: 공간이 제대로 사용되지 않습니다. 카트가 전체 페이지를 채우도록 하고 현재 콘텐츠 위에 팝업되는 것보다 공백을 활용하는 것이 좋습니다.
실수 #2: 배송, 할인 또는 지불 옵션에 대한 정보가 포함되어 있지 않습니다. 이는 불확실한 고객의 의심과 두려움을 줄여줄 것입니다.
실수 #3: 관련 제품 제안이 없습니다.
실수 #4: 제품 수를 늘리거나 줄이는 버튼이 너무 작아서 거의 클릭할 수 없습니다.
실수 #5: CTA - "체크아웃 진행" - 버튼처럼 보이지 않습니다.
실수 #6: 팝업 형식으로 인해 왼쪽에서 CTA를 누르기가 어렵습니다. 고객이 두 엄지손가락을 모두 사용하게 하십시오!

6. 하지마: 나이키

Nike 페이지의 주요 문제는 다양한 요소가 무작위로 포함된 방식이며 함께 배치되거나 페이지의 다른 지점에 배치될 경우 어떻게 작동할지에 대한 명확한 생각이 거의 없습니다. CTA에 대한 혼란도 있습니다.
Nike 페이지에는 다양한 요소가 무작위로 포함되어 있습니다.
실수 #1: 배송 할인은 회원에게만 제공됩니다. 이것은 불필요한 마찰을 추가하고 가입을 원하지 않는 고객에게 의욕을 떨어뜨리는 역할을 할 수 있습니다. 고객에게 결제 단계에서 로그인할 수 있는 옵션과 신규 고객을 등록할 수 있는 옵션을 제공합니다. 장바구니 페이지는 주문 검토 전용이어야 합니다.

실수 #2: 두 개의 CTA 사용. 특정 행동 방침을 찾고 있기 때문에 장바구니 페이지에 하나의 CTA를 두는 것이 거의 항상 더 좋습니다. 여러 CTA를 제공하는 유일한 이유는 고객에게 다양한 결제 옵션을 제공하기 위함입니다. 사용자가 이메일 주소를 제공한 후 적절한 양식(로그인 양식 또는 주소 양식)을 표시하는 것이 좋습니다.

실수 #3: "허용되는 지불 유형"이 체크아웃 CTA 근처에 나열되지 않습니다. 특히 Nike만큼 잘 알려져 있지 않지만 바닥글에 배지가 없는 경우 이러한 배지를 장바구니 페이지에 포함하는 것이 좋습니다.

실수 #4: "손님"이라는 용어는 고객이 그렇게 자신을 식별하지 않으면 혼동을 일으킬 수 있습니다(손님으로 쇼핑하면 회원이 될 수 있나요?)

모바일 쇼핑 카트 디자인 마무리하기

대부분의 최고 실적 장바구니 페이지는 깔끔하고 단순하면서도 적절한 유형과 양의 정보를 제공하는 디자인을 가지고 있습니다. 자신의 페이지를 다시 디자인할 때 장바구니 페이지의 목적은 쇼핑객이 주문을 검토 및 확인하고 불필요한 항목을 제거하고 유사한 제품을 추가하는 것입니다. 계정 로그인 또는 가입과 같은 다른 원하는 작업은 체크아웃 페이지에 남겨둘 수 있습니다. 따라서 이러한 모바일 장바구니 모범 사례 및 기타 장바구니 최적화 기술에 대해 기억하십시오.

그리고 기억하십시오, 분할 테스트가 핵심입니다! 여기에 설명된 전술을 사용하여 자체 테스트를 구성하고 장기적으로 요소를 조정하는 데 전념하십시오. 그렇게 하면 거의 확실히 전환율이 꾸준히 증가하는 것을 볼 수 있습니다.

115-포인트 전자상거래 최적화 체크리스트 받기

8년의 경험을 바탕으로 우리는 최고의 통찰력을 한 권의 책으로 모았습니다: 7+ Figure Online Store의 전자상거래 최적화 체크리스트. 홈페이지에서 결제에 이르기까지 모든 페이지의 성능을 높이려면 여기에서 사본을 가져오세요.