전자 상거래 UX – 필수 디자인 전략 및 원칙

전반적인 소매 환경이 계속 진화하고 오프라인 체인이 어려움을 겪으면서 전자 상거래 시장은 성장할 준비가 되어 있습니다. 2021년까지 전 세계 전자 상거래 매출은 2017년의 두 배 이상인 4조 4,800억 달러 이상으로 성장할 것으로 예상됩니다.

사용자 경험에 세심한 주의를 기울이고 고객 쇼핑 흐름을 위한 표준 전자상거래 UX 디자인 원칙을 준수하는 전자상거래 소매업체 및 디자이너는 이러한 시장 성장을 활용하고 실질적인 재정적 수익을 볼 수 있습니다.

쇼핑 흐름은 적절하게 구현될 경우 충동 구매가 증가하고 장바구니 포기가 줄어들며 전반적인 전환율이 높아지는 일반적인 사용자 여정입니다.

사용자 여정에는 다음이 포함됩니다.

• 웹사이트 검색
• 제품 검색 및 찾아보기
• 제품 페이지
• 카트
• 점검
• 확인

이 문서에서는 사용자 여정의 이러한 핵심 사항과 전자 상거래 디자이너가 고객 경험을 즐겁고 간단하며 번거롭지 않게 만드는 방법을 다룹니다.

웹사이트 검색

브랜드를 명확하게 포지셔닝

방문자는 50밀리초만에 웹사이트의 첫인상을 형성합니다. 전자 상거래 웹사이트는 무엇을 판매하고 전체 시장에서 어디에 해당하는지 명확하고 신속하게 보여줌으로써 사용자의 관심을 끌어야 합니다.

예를 들어, 명품 보석 소매업체의 웹사이트는 예산에 민감한 대형 매장 사이트와 모양과 느낌이 매우 다를 수 있습니다. 고급 전자 제품 소매업체 Bang & Olufsen은 우아한 글꼴, 세련된 색상 팔레트, 세련된 제품 이미지를 사용하여 브랜드 품질을 전달합니다.

관련 클릭 유도문안 표시

사용자가 홈 페이지에 도착하면 시기 적절한 콘텐츠와 구체적인 클릭 유도문안(CTA)으로 인사합니다. 적절한 CTA와 함께 현재 시즌 또는 특정 이벤트에 해당하는 대형 배너 이미지는 사용자가 쇼핑 프로세스의 다음 단계로 이동하는 데 도움이 됩니다. CTA를 생성할 때 "시작하기"와 같은 일반적인 문구는 사용자에게 다음에 무엇이 나올지 명확하게 알려주지 않습니다.

Polaroid는 선물을 쇼핑하는 사용자를 도와 휴가 시즌에 효과적인 CTA를 만들었습니다. Polaroid는 일반적인 문구를 사용하는 대신 "Shop Gifts"를 사용하여 사용자가 선물 제안이 있는 사이트 영역으로 이동될 것임을 분명히 했습니다.

SEO를 위한 맞춤형 랜딩 페이지

Google과 같은 검색 엔진의 사용자 검색어를 특정 방문 페이지에 연결함으로써 전자 상거래 소매업체는 특정 제품을 찾는 임무를 수행하는 사용자를 포착할 수 있습니다.

사용자가 무언가를 검색할 때 구매하려고 할 가능성이 높습니다. 일반적인 제품 검색어에 대한 맞춤형 랜딩 페이지를 만들면 소매업체가 판매(및 신규 고객)를 잡을 가능성이 높아집니다. 문구 회사 Papier는 Google 검색 결과에 표시되는 청첩장용으로 특별히 제작된 페이지를 사용하여 이 작업을 잘 수행합니다.

제품 검색 및 찾아보기

현장 검색 제공

매우 기본적인 것처럼 보일 수 있지만 많은 사이트에서 여전히 일반적인 사이트 전체 검색을 제공하지 않거나 제공하더라도 제대로 최적화되지 않습니다. 그러나 현장 검색은 견고한 전자 상거래 쇼핑 경험의 기본입니다.

Invesp에 따르면 온라인 구매의 60%는 충동 적이지 않습니다 . 사람들은 종종 자신이 무엇을 찾고 있는지 알고 있으며 전자 상거래 웹사이트의 검색 창에 제품 이름이나 모델 번호와 같은 검색어를 입력하는 것이 메뉴 옵션을 살펴보는 것보다 훨씬 빠릅니다.

예측 검색 또는 자동 완성과 같은 추가 기능은 사용자가 옵션을 빠르게 볼 수 있도록 도와줍니다. Apple은 제품 및 인기 있는 추천 검색에 대한 빠른 링크로 동적으로 업데이트되는 검색 필드와 함께 이 전술을 사용합니다.

디스커버리 모드에서 방문자에게 영감을 주세요

많은 쇼핑객이 구매할 특정 품목을 염두에 두고 있지만 모든 방문자가 확신하는 것은 아닙니다. Nielsen Norman에 따르면 전자 상거래 구매자에는 5가지 유형이 있으며 그 중 하나는 "브라우저"입니다. 브라우저는 반드시 특정한 것을 찾는 것은 아닙니다. 오히려 재미있는 것을 발견하기 위해 여유롭게 주변을 둘러봅니다.

전자 상거래 웹사이트 는 새로운 제품이나 베스트 셀러 제품을 보여주고 제품 카테고리를 쉽고 빠르게 볼 수 있도록 하여 검색 모드에서 쇼핑객을 지원할 수 있습니다.

Etsy는 탐색 및 홈 페이지 콘텐츠 모두에서 전체 제품 카테고리를 명확하게 표시할 뿐만 아니라 현재 인기 있는 것을 보여줌으로써 브라우저를 참여시킵니다.

필터 및 패싯 검색 사용

패싯 검색은 필터링을 사용하고 사용자가 한 번에 여러 속성을 선택할 수 있도록 하여 한 단계 더 나아갑니다.

필터를 생성할 때 크기, 색상 또는 가격과 같은 일반적인 기준으로 옵션을 제한하는 대신 판매되는 제품과 관련된 카테고리에 대한 특정 필터를 추가하십시오. 이러한 필터는 의복, 글꼴 또는 초대장에 대한 핏 또는 패브릭, 가제트에 대한 화면 크기 또는 프로세서와 같은 것일 수 있습니다.

사용자가 필터를 적용하면 어떤 필터가 적용되었는지 UI에 즉시 표시되어야 합니다. 또한 사용자는 적용된 필터를 쉽게 제거할 수 있어야 합니다.

ASOS는 각 카테고리에 대한 필터의 세부 범위를 보여주고 어떤 필터가 적용되었는지 명확하게 보여줍니다.

제품 페이지

주요 행동을 눈에 띄게 표시하십시오

사용자는 장바구니에 제품을 담는 것과 같은 중요한 작업을 수행하는 방법에 대해 결코 궁금해해서는 안 됩니다. "장바구니에 추가" 또는 "지금 구매"와 같은 기본 작업을 버튼으로 표시하고 나머지 콘텐츠와 관련하여 화면의 눈에 잘 띄는 위치에 배치합니다.

주택 개조 소매업체인 Lowe's는 페이지에서 가장 눈에 띄는 항목 중 하나로 큰 녹색 버튼을 사용하여 사용자가 장바구니에 제품을 추가하는 방법을 알려줍니다.

자세한 제품 정보 제공

구매자가 제품을 이해할 수 있도록 고품질의 전문적인 사진과 자세한 설명을 보여줍니다.

점진적 공개 및 시각적 계층 구조를 사용하여 사용자에게 필요한 만큼의 정보를 제공합니다. 가장 중요한 정보를 즉시 제공한 다음 더 자세히 알고 싶은 사용자를 위해 페이지 아래쪽에 세부 정보를 추가하십시오.

긴 설명을 섹션으로 나눕니다. 예: 개요, 크기/치수, 세부 기능 및 배송 정보. Myprotein이 하는 것처럼 추가 섹션에 대한 확장/축소 탐색을 사용하면 사용자가 압도감을 ​​느끼지 않도록 도와줍니다.

고객 신뢰 구축

고객이 배송 옵션, 제품 가용성 및 반품 정책에 대해 추측하게 하지 마십시오. 이 모든 정보를 쉽게 사용할 수 있도록 하면 고객의 신뢰와 신뢰가 구축되고 불확실한 고객이 구매를 유도하는 데 도움이 될 수 있습니다. 물건을 반환할 수 있는지 여부와 방법을 아는 것은 정보에 입각한 결정을 내리는 데 도움이 됩니다.

ASOS는 각 제품 이름 아래의 링크에서 액세스하는 모달을 사용하여 각 제품 페이지에 중요한 배송 및 반품 정보를 명확하게 표시합니다.

사회적 증거 추가

사회적 증거는 사람들이 다른 사람들의 행동에 의해 영향을 받는다는 것을 의미하는 개념입니다. 이 개념은 Dr. Robert Cialdini(영향학의 선도적 연구원)의 설득 원칙의 일부이며 효과가 입증되었습니다.

전자 상거래 소매업체는 고객 평가, 리뷰 및 댓글을 추가하여 사회적 증거를 통해 구매자의 신뢰를 강화할 수 있습니다. Amazon의 제품에는 수천 개의 리뷰가 있는 경우가 많으며 사용자는 이를 별점 등급별로 정렬할 수 있습니다.

쇼핑 카트

명확한 주문 요약 표시

구매자가 구매를 완료하기 전에 구매한 항목, 각 항목의 수량 및 가격, 주문 총액이 포함된 명확하고 간결한 주문 요약을 보여줍니다. 사용자가 업데이트하거나 삭제할 수 있는 항목을 편집할 수 있도록 하고 배송 요약을 포함하여 배송료 놀라움을 방지합니다.

Modist는 명확한 주문 요약과 영수증을 모두 보여줍니다. 사용자는 선택한 항목(위시리스트로 이동, 제거, 수량 변경)을 쉽게 관리하고 배송 및 세금에 대한 요약 및 세부 내역을 모두 볼 수 있습니다.

점검

사용자가 게스트로 체크아웃하도록 허용

충동 구매는 전자 상거래에서 지출되는 모든 돈의 거의 40%를 차지합니다. 구매자가 게스트로 체크아웃할 수 있도록 하여 계정을 생성하거나 로그인하는 추가 장애물을 제거합니다. 게스트로 체크아웃하는 동안 계정을 만들기 위한 간단한 통합으로 일부 게스트를 계정 사용자로 전환할 수 있습니다.

이솝은 사용자가 쉽게 게스트로 체크아웃할 수 있도록 하는 동시에 로그인 또는 등록 옵션도 제공합니다. 하나의 양식에 여러 옵션을 제공하면 빠르게 결제하려는 사람들에게 잠재적인 구매 차단 요소가 제거되지만 등록하려는 사용자에게는 그렇게 할 수 있는 기회도 제공됩니다.

체크아웃 과정에서 시각적 피드백 제공

진행률 표시줄을 포함하면 고객이 결제 프로세스의 현재 위치와 완료할 수 있는 시간이 얼마나 남았는지 이해하는 데 도움이 됩니다.

Apple은 사용자에게 프로세스의 각 단계를 보여주고 진행 링크를 사용하여 단계 사이를 이동할 수 있도록 합니다. 진행 상황이 저장되므로 사용자는 단계 사이를 이동하는 동안 아무 것도 잃지 않습니다.

일반적인 지불 방법 사용

주요 신용 카드를 통한 지불을 허용하는 것 외에도 PayPal과 같은 다른 인기 있는 지불 방법을 추가하면 신용 카드 정보를 양도하고 싶지 않은 구매자의 전환율을 높일 수 있습니다.

네덜란드에서는 전자상거래에 iDEAL을 자주 사용하며 네덜란드 소비자의 60%가 최근 구매 시 iDEAL을 사용했습니다. 의류 소매업체 Scotch & Soda는 구매자가 iDEAL 및 PayPal로 결제할 수 있도록 합니다.

주문 확인

구매 후 자세한 주문 확인 표시

고객이 구매를 완료하면 주소, 배송 방법, 예상 배송 날짜와 같은 배송 세부정보와 결제 처리가 완료되었다는 확인을 제공합니다.

아마존에 대한 확인 이메일의 이 개념은 주문 번호를 보여주고 구매한 품목에 대한 개요를 제공하며 배송 날짜와 향후 구매에 대한 몇 가지 권장 사항을 제공합니다.

이메일을 통해 주문 및 배송 업데이트 보내기

확인 화면 외에도 확인 이메일을 보내면 사용자에게 구매 상태를 알리는 데 도움이 됩니다. 모든 고객은 확인 이메일을 받아야 하지만 이는 사용자가 게스트로 체크아웃했고 웹사이트에 과거 주문을 확인할 계정이 없는 경우에 특히 유용합니다.

배송 지연과 같이 주문과 관련된 변경 사항이 있는 경우 업데이트를 보내주세요. 항목이 배송되면 추적 번호가 포함된 이메일 업데이트를 보내십시오.

요약

이 기사의 원칙은 모든 전자 상거래 디자이너가 따라야 하는 사용자 여정 접점의 기준을 제공하지만 이는 시작에 불과합니다. 모바일 전자 상거래 UX에 대한 자세한 내용은 모바일 경험을 위한 전자 상거래를 방문하거나 랜딩 페이지 디자인 효과적인 랜딩 페이지를 디자인하는 방법에 대해 자세히 알아보세요.

성장하는 전자 상거래 시장은 소매업체에게 많은 기회를 제공합니다. UX의 중요성을 인식하고 전자 상거래 사용자 여정에 대한 모범 사례를 따르는 기업은 경쟁력을 유지하고 수익에 긍정적인 영향을 미칠 수 있습니다.

• • •

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

• 저명한 전자 상거래 동향 및 디자인에 대한 영향(인포그래픽 포함)
• 모바일 경험을 위한 전자상거래 UX
• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드
• 전자 상거래 재설계: 사소한 변경으로 인해 UX가 크게 개선된 방법