전자 상거래 웹 사이트 디자인에 대한 궁극적인 가이드

미국 전자 상거래 매출은 2018년에도 계속해서 새로운 정점에 도달했습니다. 전 세계적으로 전자 상거래는 계속해서 2조 3000억 달러에 달하는 견실한 수익을 올릴 것입니다. 그러나 한 전자 상거래 사이트가 다른 사이트를 능가하는 이유는 무엇입니까?

제품 품질, 브랜드 인지도, 배송 비용, 반품 정책, 신뢰성 및 고객 서비스를 비롯한 여러 요소가 전자 상거래 웹사이트의 전반적인 성공을 결정합니다. 그러나 사려 깊은 사용자 경험 디자인은 고객에게 만족스럽고 마찰 없는 경험을 제공하는 열쇠이기도 합니다. 잠재적인 클릭을 실제 전자 상거래 거래로 전환할 뿐만 아니라 고객이 몇 번이고 다시 방문하도록 합니다.

다음은 훌륭한 전자 상거래 웹 사이트를 만들기 위한 포괄적인 전자 상거래 UX 디자인 가이드이며 예제가 포함되어 있습니다.

신뢰와 보안을 위한 전자상거래 디자인

무엇보다도 쇼핑객이 신뢰할 수 있다고 느끼는 웹사이트를 디자인하는 것이 중요합니다. 대부분의 쇼핑객은 개인 정보와 사이트가 안전한 거래를 제공하여 개인 데이터를 보호할지 여부에 대해 우려합니다. 웹 사이트가 신뢰할 수 없다고 느끼면 단순히 다른 곳에서 쇼핑하기로 선택할 것입니다.

다음은 신뢰성을 전달하는 몇 가지 방법입니다.

• 비즈니스 개요 포함:

  • 일반 정보 제공
  • 비즈니스 뒤에 있는 사람들의 사진
  • 연락처 정보
  • 소셜 미디어 링크
  • 자주 묻는 질문(FAQ) 페이지

• 상점 정책을 게시하고 찾기가 너무 어렵지 않은지 확인하십시오.

  • 배송 및 반품 정책
  • 반품 절차 및 반품 가능한 제품 개요
  • 쇼핑객의 개인 및 금융 정보를 다루는 개인 정보 보호 정책에 쉽게 액세스할 수 있도록 합니다(이것이 중요).

일반 언어로 작성하고 법률 또는 내부 정책 전문 용어를 사용하지 마십시오.

• 제품 리뷰를 공유합니다. 쇼핑객이 제품에 대해 더 많이 이해할 수 있도록 제품 리뷰를 제공합니다. 이것은 그들이 가질 수 있는 모든 우려를 완화하고 훌륭한 전자 상거래 UX를 제공하는 데 도움이 될 것입니다. 리뷰어에 대한 추가 정보와 함께 제품 리뷰를 제공하거나 리뷰를 요약하여 한 단계 더 나아가십시오. 이 단계를 통해 쇼핑객은 다른 사람의 의견을 최대한 활용할 수 있습니다.
• 보안 서버를 사용하세요. 쇼핑객은 온라인에서 구매하는 동안 개인 정보가 안전하게 유지되기를 기대합니다. SSL(Secure Sockets Layer) 인증서는 웹사이트의 ID를 인증하고 안전을 유지하는 데 필요한 정보를 암호화합니다. 체크아웃이 안전함을 나타내는 필수 표시입니다. SSL을 구현하고 SSL 인증서 배지를 표시하여 쇼핑객에게 데이터가 보호되고 있음을 확인하십시오.

• 공인된 트러스트 씰을 추가합니다. 트러스트 씰은 웹 사이트의 합법성과 보안을 확인합니다. 일부 신탁 회사는 거래가 사기로 판명될 경우 일부 보험을 제공하여 추가 보호 계층을 추가하기도 합니다. 공인된 트러스트 씰을 사용하면 잠재적인 구매자에게 안전한 거래 프로세스를 보장하여 판매를 늘리고 더 나은 전자 상거래 UX를 제공합니다.
• 세부 사항에주의를 기울이십시오. 오타, 누락된 이미지, 깨진 링크, 404 오류(페이지를 찾을 수 없음) 또는 기타 전자 상거래 UX를 죽이는 실수를 방지하여 웹 사이트를 합법적이고 전문적으로 보이게 만드십시오.

전자 상거래 UI 디자인 고려 사항

웹사이트의 모양과 느낌은 첫인상을 결정짓는 주요 요인입니다. 연구에 따르면 사람들은 웹사이트를 좋아하는지 여부를 단 50밀리초 만에 결정합니다.

다음은 몇 가지 필수 사용자 인터페이스 디자인 팁입니다.

• 브랜드 아이덴티티를 따릅니다. 브랜드는 웹사이트 전체에 걸쳐 분명해야 합니다. 브랜드를 반영하는 색상을 선택하고 어떤 유형의 제품이 판매되는지 명확하게 하기 위해 스타일을 설정합니다. 온라인, 매장, 모바일 장치 등 모든 채널에서 일관된 브랜드 경험을 보장합니다. 이는 강력한 브랜드-고객 관계를 구축하는 데 도움이 됩니다.
• 시각적 계층 구조를 채택하십시오. 가장 중요한 콘텐츠는 스크롤 없이 볼 수 있는 부분에 표시되어야 합니다. 어떤 경우에는 항목을 더 가깝게 하기 위해 더 적은 공백을 사용하는 것이 중요한 콘텐츠를 스크롤해야 볼 수 있는 부분 아래로 밀어 넣는 것보다 낫습니다.
• 과도하게 디자인하지 마십시오. 글꼴, 크기 및 색상과 같은 글꼴 형식을 제한합니다. 텍스트가 너무 그래픽처럼 보이면 광고로 오인됩니다. 콘텐츠를 최대한 명확하게 만들기 위해 고대비 텍스트와 배경색을 사용합니다.
• 알려진 기호를 고수하십시오. 식별하기 쉬운 아이콘이나 기호를 사용하십시오. 익숙하지 않은 아이콘은 쇼핑객을 혼란스럽게 합니다. 가능한 혼동을 피하는 좋은 방법은 아이콘에 레이블을 제공하는 것입니다.
• 팝업 창을 피하십시오. 팝업 창은 주의를 산만하게 합니다. 쇼핑객은 귀중한 정보가 포함되어 있어도 즉시 해당 정보를 무시할 가능성이 큽니다. 쇼핑객은 한 번 가보고 싶어도 정보를 다시 찾기가 어렵습니다.

마찰 없는 전자 상거래 사이트 탐색의 중요성

마찰이 없는 것이 가장 좋은 방법입니다. 탐색은 사람들이 웹 사이트를 이동하고 원하는 것을 찾은 다음 마침내 조치를 취하는 것이 얼마나 쉬운지에 관한 것입니다. 전자 상거래 쇼핑 경험은 원활해야 쇼핑객이 중간에 이탈하지 않습니다.

쉬운 탐색을 위한 전자 상거래 웹 사이트 디자인 의 몇 가지 주요 측면은 다음과 같습니다.

잘 정의된 제품 카테고리

최상위 탐색 수준에는 사이트에서 제공하는 범주 집합이 표시되어야 합니다. 제품을 의미 있는 범주 및 하위 범주로 그룹화합니다. 카테고리 레이블은 제품 범위를 설명하는 단일 단어로 가장 잘 작동하므로 쇼핑객은 제품을 훑어보고 제품이 무엇을 나타내는지 즉시 이해할 수 있습니다. 훌륭한 전자 상거래 UX를 위해서는 사이트 탐색이 사이트의 핵심 기능이므로 최대한 사용자 테스트 사이트 탐색을 하는 것이 가장 좋습니다.

상품검색

간단히 말해서, 쇼핑객이 제품을 찾을 수 없으면 제품을 구입할 수 없습니다. 원하는 제품을 쉽게 찾을 수 있도록 도와주는 검색 기능을 구축하십시오.

• 검색을 어디에나 있게 하십시오. 모든 페이지와 친숙한 위치에 검색창을 두십시오. 상자는 눈에 잘 띄고 빨리 알아볼 수 있고 사용하기 쉬워야 합니다. 검색창을 구현하는 표준 위치는 페이지의 오른쪽 상단 또는 중앙 상단 또는 메인 메뉴입니다.
• 모든 종류의 쿼리를 지원합니다. 검색은 제품 이름, 카테고리, 제품 속성과 같은 모든 유형의 쿼리와 고객 서비스 관련 정보를 지원해야 합니다. 쇼핑객에게 다양한 기능의 사용을 제안하기 위해 입력 필드에 샘플 검색 쿼리를 포함하는 것이 좋습니다.
• 검색 자동 완성 기능이 있습니다. 자동 완성 기능을 사용하면 쇼핑객이 원하는 것을 더 쉽게 찾을 수 있으며 이미 검색 중인 영역 내에서 물건을 제안하여 판매 가능성을 높일 수 있습니다.
• 결과 정렬 및 필터링을 허용합니다. 쇼핑객이 다양한 기준(베스트 셀러, 최고 또는 최저 가격, 제품 등급, 최신 품목 등)에 따라 검색 결과를 정렬하고 특정 범주에 맞지 않는 품목을 제거할 수 있습니다.

필터링 제품

선택지가 많을수록 선택하기가 더 어려워집니다. 필터를 구현하여 쇼핑객이 올바른 제품을 찾도록 도와주세요. 선택 범위를 좁히고 원하는 제품 범위로 바로 이동하는 데 도움이 됩니다.

제품 퀵뷰

"빠른 보기"는 불필요한 페이지 로드를 제거하여 쇼핑객이 올바른 제품을 찾는 데 걸리는 시간을 줄여줍니다. 일반적으로 제품 세부 정보는 본 페이지의 모달 창에 표시됩니다. 모든 제품 세부 정보를 표시하려고 하지 말고 전체 세부 정보를 보려면 전체 제품 페이지에 대한 링크를 포함하십시오. 또한 눈에 잘 띄는 위치에 "장바구니에 추가" 버튼과 "위시리스트에 저장" 기능을 포함해야 합니다.

특별 제공

쇼핑객은 항상 특별 제안, 할인 또는 최고의 거래를 찾습니다. 쇼핑객이 알 수 있도록 독점 제안을 표시하세요. 가격차이가 그렇게 크지 않더라도 조금이라도 절약할 수 있다는 심리적인 느낌이 우세한 것 같은 착각을 불러일으킨다.

전자 상거래 제품 페이지 디자인

쇼핑객이 원하는 제품을 성공적으로 찾았 을 때 탁월한 전자 상거래 UX를 위해 제품에 대해 알 수 있습니다. 많은 이미지, 자세한 설명 및 제품에 대한 기타 유용하고 관련 정보를 포함하여 직접 쇼핑 경험과 최대한 유사한 경험을 생성하는 제품 페이지를 디자인하십시오. 이것이 무엇을 의미하는지 자세히 살펴보겠습니다.

훌륭한 제품 이미지 제공

전자 상거래를 통해 쇼핑객은 제품을 만지거나 만지거나 시험해 볼 수 없습니다. 대신 모든 것은 온라인에서 보는 것에 달려 있습니다. 그렇기 때문에 제품의 모든 측면을 명확하게 보여주는 제품 이미지를 제공하는 것이 중요합니다. 완벽한 제품 이미지를 위한 체크리스트는 다음과 같습니다.

• 흰색 배경을 사용합니다. 제품 이미지의 배경은 제품 자체와 산만하거나 충돌해서는 안 됩니다. 흰색 배경은 제품을 돋보이게 하고 거의 모든 스타일 또는 색 구성표와 함께 작동하기 때문에 가장 잘 작동합니다.
• 고품질의 큰 이미지를 사용하십시오. 좋은 이미지는 제품을 판다. 고품질 이미지는 쇼핑객의 관심을 사로잡고 구매하는 제품을 정확히 보여줍니다. 큰 이미지를 사용하면 쇼핑객이 확대하여 제품을 자세히 살펴볼 수 있습니다.

• 다양한 이미지를 활용하세요. 다양한 각도에서 제품을 전시하고 클로즈업을 포함하여 제품의 완전한 느낌을 제공합니다. 제품을 이동할 수 있는 360도 뷰는 실제로 매장에 직접 방문하여 참여하는 것과 같은 경험을 제공하는 좋은 방법입니다. VR 전자 상거래는 이러한 경험의 다음 물결입니다.
• 비디오를 사용합니다. 비디오는 짧은 시간에 많은 정보를 전달할 수 있는 능력이 있습니다. 비디오를 사용하여 사용 중인 제품을 보여주고 가능한 한 많은 기능 정보를 제공하십시오.
• 일관성을 유지하십시오. 여러 페이지에서 일관되고 나머지 웹사이트의 모양과 느낌과도 일치하는 이미지를 사용하십시오. 이렇게 하면 모든 것이 깨끗하고 깔끔하게 유지됩니다. 주요 제품 이미지는 제품 하이라이트 또는 추천 항목 섹션과 같은 사이트의 모든 영역에서 동일해야 합니다.

적절한 양의 제품 정보 제공

쇼핑객에게 제품에 대한 자세한 정보를 제공하여 정보에 입각한 구매 결정을 내릴 수 있습니다. 가용성, 다양한 크기 또는 색상에 대한 옵션, 치수, 크기 차트, 사용된 재료, 총 비용, 보증 등을 표시합니다. 제품에 대해 남은 질문이 적을수록 구매할 가능성이 높아집니다.

설득력 있는 디자인 사용

희소성의 원리에 따르면 인간은 희소한 것에 더 높은 가치를 부여하고 풍부한 것에 더 낮은 가치를 부여합니다. 희소성을 표시하여 판매 프로세스에서 긴박감을 조성합니다. 남은 제품 수를 표시하거나, 재고가 없는 크기를 회색으로 표시하거나, 판매 마감일을 표시합니다. 희소성은 잠재적 구매자가 행동을 취하도록 동기를 부여합니다.

점점 더 많은 회사에서 고급 심리학 연구를 사용하고 있으며 더 많은 참여와 구매를 유도하기 위해 이전에는 예술이었던 것을 과학으로 바꾸었습니다. 전자 상거래의 설득력 있는 디자인은 더 많은 구매를 유도하는 매우 효과적인 방법입니다.

관련 상품 및 추천 상품 표시

현재 제품이나 다른 사람들이 구매한 제품과 잘 어울리는 쇼핑객이 좋아할 만한 유사한 제품을 표시합니다. 이는 제품 세부 정보 페이지나 장바구니에 표시될 수 있으며 쇼핑객이 필요에 맞는 제품으로 안내하는 데 도움이 되며 잠재적으로 쇼핑을 계속하도록 유도할 수 있습니다. 이는 관련 제품을 교차 판매할 수 있는 좋은 방법입니다.

장바구니 디자인

쇼핑 카트는 쇼핑객이 선택한 제품을 검토하고 최종 결정을 내리고 결제를 진행하는 곳이므로 필수적입니다. 장바구니의 주요 목표는 쇼핑객을 결제로 이끄는 것입니다. 다음은 사용자 친화적이며 쇼핑객이 추가 구매를 유도할 수 있는 쇼핑 카트를 디자인하는 방법에 대한 팁입니다.

• 명확한 클릭 유도문안(CTA)을 사용하세요. 장바구니 페이지의 기본 클릭 유도문안은 결제 버튼이어야 합니다. 밝은 색상, 클릭 가능한 많은 영역 및 간단한 언어를 사용하여 체크아웃 버튼을 눈에 띄고 직관적이며 사용하기 쉽게 만드십시오.
• 적절한 피드백을 제공합니다. 제품이 장바구니에 추가되면 즉시 명확하게 확인되었는지 확인하십시오. 쇼핑객은 눈에 띄지 않는 확인 텍스트를 표시하는 등 부적절한 피드백으로 인해 혼란스러워 합니다. 움직임이 사람의 눈을 끌기 때문에 애니메이션을 사용하는 것이 좋습니다.
• 미니 카트 위젯을 사용하세요. 쇼핑객이 미니 카트를 사용하여 현재 페이지를 떠나지 않고 장바구니에 제품을 추가할 수 있습니다. 또한 더 많은 제품을 탐색, 검색 및 추가할 수 있습니다. 미니 카트 위젯은 항상 전체 페이지 쇼핑 카트에 연결되어야 합니다.

• 제품 세부 정보를 표시합니다. 장바구니에 상품명, 이미지, 크기, 색상, 가격 등의 세부정보를 표시하면 쇼핑객이 각 상품을 기억하고 상품을 비교할 수 있습니다. 장바구니에 있는 제품을 전체 제품 페이지에 다시 연결하면 쇼핑객이 필요할 때 더 자세한 정보를 검토할 수 있습니다.
• 카트를 쉽게 편집할 수 있도록 합니다. 크기, 색상 또는 수량과 같은 세부 정보를 제거하거나 나중에 저장하거나 변경할 수 있는 기능은 쉽게 액세스할 수 있어야 합니다.
• 예상치 못한 운송비와 세금으로 인한 놀라움을 피하십시오. 예상치 못한 배송비는 쇼핑객이 장바구니를 포기하는 주요 이유 중 하나입니다. 정확한 비용 계산과 예상 배송 날짜를 미리 설정하여 배송 옵션과 세금을 입력하세요.

전자상거래 체크아웃 디자인

스타일리시하고 트렌디한 디자인이 성공적인 전자상거래 웹사이트를 결정하는 것도 아니며 반드시 훌륭한 전자상거래 UX를 제공하는 것도 아닙니다. 전자 상거래의 성공은 완료된 구매 수로만 측정됩니다. 다음은 성공적인 전환에 기여할 잘 디자인된 결제 페이지를 구축하는 몇 가지 방법입니다.

• 다양한 결제 옵션을 제공합니다. 쇼핑객마다 결제에 대한 선호도가 다릅니다. 고객 기반을 확장하고 쇼핑객이 주문을 쉽게 완료할 수 있도록 최대한 많은 지불 옵션을 제공합니다(대상 고객에 따라 다름).
• 간단하게 유지하세요. 구매를 완료하기 위해 필드와 단계의 수를 최소화하십시오. 기본적으로 배송 주소를 청구서 수신 주소로 사용하는 것은 필드 수를 최소화하는 좋은 방법입니다. 이상적으로는 쇼핑객이 장바구니를 보고 배송 및 지불 정보를 입력할 수 있는 단일 페이지 계산대를 디자인하는 것이 좋습니다.

• 등록을 선택 사항으로 만드십시오. 쇼핑객이 첫 구매 전에 계정을 만들도록 강요하면 쇼핑객이 멀어집니다. 구매가 완료된 후 등록할 수 있는 옵션을 제공하고 등록을 요청할 때 등록의 이점을 강조합니다. 배송지 주소나 결제 정보 등의 개인 정보가 저장되어 있어 보다 빠른 결제가 가능하고 등록 회원에게만 제공되는 특별 혜택이 제공됩니다.
• 명확한 오류 표시를 사용하십시오. 구매를 하지 못하거나 이유를 알 수 없는 것보다 더 답답한 것은 없습니다. 양식이 제출된 후 오류를 표시하는 대신 실시간으로 오류 알림이 표시되도록 합니다. 명확하고 간결한 오류 메시지를 수정이 필요한 항목 바로 위나 옆에 배치하여 쇼핑객이 이를 인지하고 이해할 수 있도록 합니다.

• 사람들을 추적하십시오. 다중 페이지 결제를 사용할 때 구매를 완료하기 위해 얼마나 더 많은 단계가 남았는지 보여주는 진행률 표시줄을 포함하십시오. 이렇게 하면 모호성이 제거되고 쇼핑객이 올바른 길을 가고 있는지 확인할 수 있습니다. 구매가 완료되면 배송 추적과 함께 주문 확인 및 주문 상태를 표시합니다.
• 지원을 제공합니다. 체크아웃 프로세스 전반에 걸쳐 실시간 채팅 또는 연락처 번호를 포함하여 쇼핑객이 질문이 있을 때 사이트를 떠나 다른 곳으로 이동할 필요 없이 신속하게 답변을 얻을 수 있습니다.

요약

온라인 쇼핑객은 어떤 경우에도 원활한 경험을 기대합니다. 전자 상거래 사이트를 디자인할 때 웹 사이트를 구축하는 것뿐만 아니라 수동적인 쇼핑객을 유료 고객으로 전환할 온라인 쇼핑 경험을 만드는 것입니다.

이 전자 상거래 웹 사이트 디자인 가이드가 전문적이고 매력적이며 사용자 친화적이며 쇼핑객이 계속해서 다시 찾게 만드는 훌륭한 전자 상거래 UX를 구축하기 위해 필수적인 디자인 결정을 내리는 데 도움이 되기를 바랍니다. 빠른 성장과 상대적으로 낮은 시장 점유율은 새로운 플레이어가 기존 업계 리더를 능가할 수 있는 엄청난 기회가 여전히 있음을 의미합니다.

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

• 전자 상거래 UX – 필수 디자인 전략 및 원칙
• 모바일 경험을 위한 전자상거래 UX
• UX 디자인을 통해 전자 상거래 쇼핑객을 사로 잡는 방법
• 전자 상거래 재설계: 사소한 변경으로 인해 UX가 크게 개선된 방법