구매 경로 개척 – 전자 상거래 UX 모범 사례

전자상거래 매출은 계속해서 증가하고 있습니다. 모바일 장치는 전자 상거래 트래픽의 대부분을 구성하지만 데스크톱 사이트는 장바구니 포기율이 낮고 평균 구매 가치가 더 높습니다. 모바일 전자 상거래는 미래이지만 디자이너가 현재의 이익을 극대화하려면 전자 상거래 UX 모범 사례를 통해 데스크톱 사이트를 개선해야 합니다.

잠재력은 어마어마합니다. 해마다 전자 상거래 수익이 더 높아집니다. 오프라인 판매는 여전히 소매 수익의 대부분을 차지하지만 전자 상거래의 상승세는 부인할 수 없습니다. 올해 미국의 전자 상거래 소매업체는 2022년까지 도달할 것으로 예상되지 않았던 수준인 8,400억 달러의 매출을 달성할 것으로 예상됩니다.

통계적 화려함 속에서 소용돌이치는 것은 모바일이 지배하는 전자 상거래의 미래에 대한 선언이며 타당한 이유가 있습니다. 모바일 장치는 전 세계에서 가장 많은 트래픽과 소매 수익을 창출합니다. 불행히도 모바일은 두 가지 주요 측정항목을 충족하지 못합니다. 모바일 사이트는 데스크톱 사이트보다 장바구니 포기율이 더 높고 평균 구매 가치가 더 낮습니다.

전자 상거래의 운명은 모바일입니까? 의심할 여지 없이. 전자 상거래 UX 모범 사례로 데스크톱 사이트를 최적화하면 상당한 돈을 벌 수 있습니까? 전적으로.

4페이지의 전자상거래 경험

데스크톱에서 거의 모든 전자 상거래 사이트는 판매 프로세스를 통해 쇼핑객을 유입시키기 위해 유사한 페이지 시퀀스에 의존합니다.

• 거부할 수 없는 가치 제안이 있는 깔끔한 홈페이지
• 탐색하기 쉬운 잘 구성된 카테고리 페이지
• 사회적 증거와 매력적인 콘텐츠를 결합한 세련된 제품 페이지
• 진행 상황을 보여주고 쇼핑객이 안심할 수 있도록 하는 복잡하지 않은 결제 페이지

각 페이지의 레이아웃, 콘텐츠 및 탐색 기능은 쇼핑객이 원하는 정보를 찾을 수 있도록 하는 동시에 구매 가능성을 더욱 높여줍니다. 쇼핑객이 원하는 원활한 전자 상거래 경험을 생성하려면 네 페이지가 모두 함께 작동해야 합니다. 모든 것은 홈페이지에서 시작됩니다.

깔끔한 홈페이지

1. 제품 가치를 즉시 확인

홈페이지는 첫인상입니다. 쇼핑객은 제품의 가치를 신속하게 확인할 수 있어야 합니다. 홈페이지를 이용하여 기술적 기능에 대해 함부로 떠벌리지 마십시오. 쇼핑객이 제품이 어떻게 문제를 해결하고 삶을 개선할지 상상할 수 있도록 도와주세요(Job to Be Done 프레임워크는 유용한 출발점입니다).

카피라이팅을 짧고 요점으로 유지하십시오. 제품의 장점을 보여주는 사진을 사용하십시오. 쇼핑객이 가치를 이해하기 위해 많이 읽거나, 많이 스크롤하거나, 장황한 설명 동영상을 시청해야 하는 경우 가치가 즉시 드러나지 않습니다.

2. 어디서나 검색 활성화

몇 가지 품목만 판매하는 전자 상거래 사이트에는 검색 막대가 필요하지 않을 수 있지만 제품이 증가함에 따라 검색은 고객이 자신의 멘탈 모델에 따라 제품을 찾는 필수 방법이 됩니다. 고정 검색 막대를 사용하면 모든 페이지의 모든 위치에서 검색을 사용할 수 있지만 전환을 위해 체크아웃 페이지에서 검색을 제거하는 것이 가장 좋습니다 .

3. 쇼핑객이 이해할 수 있는 제품 이름 지정

내부적으로 이해할 수 있는 제품 이름은 쇼핑객을 당황하게 만들 수 있습니다. 의사 결정 컨텍스트를 제공합니다. 모델 번호 또는 기본 기술에 기반한 이름은 일반인을 소외시킬 위험이 있습니다. 지나치게 귀엽거나 창의적인 제목도 마찬가지입니다. 구매자의 관점에서 유용성 또는 가치를 나타내는 제품 이름을 선택하십시오.

4. 거래 및 프로모션 하이라이트

쇼핑객은 특정 제품을 염두에 두고 전자 상거래 사이트를 방문합니다. 거래 및 프로모션이 홈페이지에 통합되면 눈에 띄지 않게 됩니다. 밝은 색상, 굵은 텍스트 및 전체 페이지 사진으로 거래를 알리십시오.

판매가 2차적으로 중요한 경우 눈에 띄어야 하지만 홈페이지의 주요 가치 제안과 경쟁해서는 안 됩니다. 프로모션이 쇼핑객이 알아야 할 가장 중요한 것이라면 스포트라이트를 받으십시오.

잘 정리된 카테고리 페이지

1. 그리드에 제품 표시

데스크탑 화면이 제공하는 공간은 제품 그리드에 적합합니다. 그리드는 F 패턴 스캐닝과 정렬되어 쇼핑객이 여러 제품을 빠르게 비교할 수 있도록 합니다. 그림으로 설명하기 쉬운 항목에 특히 효과적입니다. 그리드의 이점을 최대화하려면 행당 항목 수를 2에서 4 사이로 유지하십시오. 5개 이상의 제품에서는 그리드를 스캔하기가 훨씬 더 어려워집니다.

보너스: 목록 보기는 작동하지만 더 자세한 설명이 필요한 제품에 가장 적합합니다.

2. 손쉬운 탐색 보장

탐색은 직관적이어야 합니다. 쇼핑객은 카테고리 페이지를 전환하거나 제품 필터를 활성화하는 데 어려움을 겪지 않아야 합니다. 단일 카테고리에 많은 수의 제품이 있는 사이트는 왼쪽 열 탐색을 사용하여 쇼핑객이 다양한 속성(패싯 검색)에 따라 제품을 정렬할 수 있도록 해야 합니다.

3. 베스트셀러 쇼케이스

베스트 셀러 항목을 고유한 아이콘으로 표시하거나 베스트 셀러 섹션에 배치하십시오. 왜요? 베스트셀러는 일종의 사회적 증거입니다. 사람들은 불확실할 때 다른 사람들의 행동을 보고 자신의 행동을 결정합니다. 이것은 특히 새로운 쇼핑객에게 해당됩니다.

최근 출시된 제품에도 유사한 원칙이 적용됩니다. 새롭고 개선된 품목을 전시하는 것은 일회성 판매 전략 이상입니다. 이는 쇼핑객이 향후 업데이트를 위해 다시 방문하도록 유도하는 방법입니다.

세련된 제품 페이지

1. 사회적 증거로 유인

사회적 증거는 쇼핑객에게 신뢰를 심어줍니다. 평가와 리뷰는 구매 결정에 큰 영향을 미치지만 데스크톱 사이트는 다른 형태의 사회적 증거도 처리할 수 있을 만큼 충분히 넓습니다.

• 고객이 촬영한 제품 사진
• 유명인 및 인플루언서 보증
• 전문가의 인용문
• 독립적인 리뷰 사이트의 승인 배지

사회적 증거의 목표는 쇼핑객이 다른 사람들의 긍정적인 경험과 일치하는 정보에 입각한 결정을 내리고 있다고 느끼도록 돕는 것입니다.

2. 좋은 삶을 보여주기 위해 카피와 이미지를 사용하라

전자 상거래 콘텐츠는 정보를 제공해야 하지만 사실과 기능 목록보다 설득력이 더 필요합니다. 텍스트와 이미지를 사용하여 쇼핑객이 체크아웃 후 좋은 삶을 상상할 수 있도록 도와주세요.

여기서도 데스크탑 크기가 장점입니다. 방대한 사진과 영상을 사용하거나 다양한 각도에서 제품을 보여주지 않을 이유가 없습니다. 카피도 마찬가지입니다. 헤더를 크게 만들고 텍스트 블록을 충분한 양의 공백으로 둘러싸는 것을 주저하지 마십시오.

3. 상향 판매 및 관련 제품으로 더 많은 수익 창출

쇼핑객이 제품 페이지에 표시되는 내용에 만족하지 않는 경우 다른 옵션을 찾기 위해 카테고리 페이지로 다시 이동할 필요가 없습니다. 대신 비슷한 가격대의 대체 제품이나 더 나은 기능, 리뷰 또는 브랜드 인지도를 갖춘 더 비싼 옵션을 보여줍니다.

상품 페이지를 보완하는 관련 상품을 제안하는 것도 가능합니다. 신발 구매? 신발끈과 아치 지지대도 구입하지 않으시겠습니까? 마찰을 줄이려면 관련 항목에 "장바구니에 추가" 옵션이 있는지 확인하십시오.

4. 크고 굵게 "장바구니에 담기" 버튼 디자인

제품 페이지에서 "장바구니에 추가" 버튼이 눈에 띄어야 합니다. 크고, 고대비이며, 클릭하기 쉽게 만드십시오. 재치 있고 명확하고 행동 지향적 인 클릭 유도문안을 작성하려는 충동을 억제하십시오.

쇼핑객은 장바구니에 항목을 추가할 때 시각적 피드백을 받아야 합니다. 많은 데스크톱 사이트는 화면 측면에서 순간적으로 밀어 넣는 장바구니 요약 오버레이를 사용하여 이를 수행합니다(쇼핑객이 결제로 전환하거나 계속 탐색할 수 있도록 하는 창의적인 방법).

간편한 결제 페이지

1. 쇼핑객 체크아웃 진행률 표시

전자 상거래 쇼핑객은 온라인에서 제품을 찾는 데 많은 시간과 에너지를 소비합니다. 구매할 준비가 되면 프로세스의 끝이 보인다는 확신이 필요합니다. 진행률 표시줄은 각 체크아웃 단계에서 쇼핑객의 현재 위치를 표시하는 간단한 방법입니다.

2. 여러 결제 방법 수락

편리함과 보안은 쇼핑객이 결제 게이트웨이에 도달할 때 가장 중요한 관심사이며 장바구니를 포기하는 가장 큰 두 가지 이유입니다. 다행히 보안에 대한 두려움을 완화하고 결제를 신속하게 처리할 수 있는 온라인 결제 옵션이 늘어나고 있습니다. Amazon 및 Apple과 같은 신뢰할 수 있는 회사에서 지원하는 타사 결제 옵션은 신용 카드 정보를 입력하는 것보다 쇼핑객에게 더 매력적일 수 있습니다.

또한 Paypal Credit 및 Klarna와 같은 "지금 구매, 나중에 지불"(BNPL) 옵션을 고려해 볼 가치가 있습니다. BNPL은 고객이 상품을 받은 후 시간이 지남에 따라 상품 대금을 지불할 수 있는 판매 시점 신용의 한 형태입니다.

3. 비회원 결제 고려

비회원 결제는 모든 전자상거래 소매업체, 특히 비즈니스 전략이 고객 계정 생성과 관련된 소매업체에 적합하지 않을 수 있습니다. 그러나 결제를 가속화하고 계정 생성 피로를 방지하며 장바구니 포기를 줄이는 것으로 입증되었습니다.

대안은 주문 확인을 위한 이메일을 요구한 다음 배송 및 배송 메시지에 대한 후속 조치를 취하는 것입니다.

4. 명확한 주문 요약 제공

이것은 필수입니다. 다음을 포함하는 간결한 주문 요약을 쇼핑객에게 제공하십시오.

• 제품 세부 정보 및 수량
• 모든 수수료 내역
• 배송 및 청구 정보

제품 사진을 보여주는 것도 현명하지만 속성이 고객의 선택(색상, 크기, 마감 등)과 일치하는지 확인하십시오.

5. 보안 배지 및 고객 지원으로 신뢰 강화

보안 배지와 제3자 보증을 표시하여 쇼핑객에게 확신을 줍니다. Checkout은 확인된 순위와 리뷰를 쇼핑객에게 상기시킬 수 있는 좋은 장소입니다.

Nearby에는 챗봇, 반품 정책, FAQ 링크 및 고객 지원 라인과 같은 지원 기능이 포함됩니다. 쇼핑객은 결제 시 이러한 리소스를 사용하지 않을 수 있지만 이러한 리소스가 있다는 사실을 알고 안심할 수 있습니다.

전자 상거래 UX 모범 사례 준수

쇼핑은 촉각적이다. 물체의 무게, 각도와 모서리, 착용감과 느낌, 이러한 것들이 중요합니다. 존재가 없으면 친숙함과 디스플레이 크기가 중요합니다. 데스크탑은 두 가지를 모두 제공합니다. 화면이 넓고 탐색이 간단하며 이미지와 비디오가 더 사실적이라는 편안한 패러다임입니다.

단점에도 불구하고 모바일 소매는 비교적 새로운 분야입니다. 풀어야 할 꼬임이 있지만 온라인 쇼핑의 미래는 여전히 남아 있습니다. 그때까지 디자이너는 전자 상거래 UX 모범 사례로 데스크톱 사이트를 최적화하여 현재로부터 이익을 얻는 것이 현명합니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드
• 전자 상거래 101: 장바구니 포기에 대한 이해(인포그래픽 포함)
• 전자 상거래 UX – 필수 디자인 전략 및 원칙
• 저명한 전자 상거래 동향 및 디자인에 대한 영향(인포그래픽 포함)