본문 바로가기
디자인/디자인 이야기

쇼핑몰 전자상거래 UX 디자인 팁

by 코코리★ 2018. 6. 13.
728x90

라인 상점을 만드는 동안 신속하게 방향을 잡고 웹 사이트가 소유자의 수입에 긍정적 인 영향을 미치도록 만드는 방법을 이해하는 것은 어렵습니다. 고객이 상점 페이지에 남아 있는지 여부, 상점에 대한 확신을 갖고 구매할 것 인 지 여부를 판별합니다. 그러나 정확히 "올바른 전자 상거래 웹 디자인"이되어야하는 것은 무엇입니까? 사실, 페이지 디자인에 대한 확고한 규칙은 없습니다. 모든 상점 및 대상 고객의 특성에 따라 다릅니다. 그러나 모든 사람들에게 똑같이 잘 작동하는 기술이 있습니다. 이 기사에서는 양질의 사이트를 만들고 가장 중요한 측면에 집중하는 데 필요한 지식을 체계화하려고 노력했습니다. 또한 전자 상거래 웹 사이트를 최적화하는 방법에 대한 실질적인 조언을 추가하여 고객이 다시 열심히 응할 수 있도록했습니다.

1. 일반적인 권장 사항

이러한 조언은 일반적으로 웹 사이트에 적용될 수 있습니다.

  • 감정적 인 연결

전자 상거래 감정적 인 연결 그림

그 사람이 웹 사이트의 서비스를 사용할 지 이해하는 데 몇 초가 걸립니다. 물론, 특정 웹 상점이 전문적으로하는 것에 대한 명확성을 사용자에게 부여해야합니다. 각 요소는 주요 아이디어와 함께 플레이해야하며 강조해야합니다. 웹 사이트 디자인의 필수 요소입니다. 맞춤형 온라인 소매점의 모든 부분을주의 깊게 검토해야합니다. 전자 상거래 웹 사이트의 전반적인 디자인은 간결하고 인식 가능하며 독창적이어야하며 고객에게 긍정적 인 감정을 선사해야합니다. 귀찮은 인터페이스로 인해 잠재적 인 구매자를 쉽게 위협 할 수 있기 때문에 이것이 가장 중요한 전자 상거래 조언입니다. 간단한 기하학적 형태와 최소한의 중립적 인 색상을 사용하십시오. 전자 상거래 UX 디자인은 이중화가 사용되지 않는 경우 가장 좋습니다. 그럼에도 불구하고 이것은 성공적인 전자 상거래 사이트가 멍청하고 지루하고해야한다는 것을 의미하지는 않습니다. 나쁜 전자 상거래 유용성. 크고 아름다운 이미지를 사용하면 사용자의 상상력과 구매 희망을 자극 할 수 있습니다. 또 하나의 큰 특징은 가격 비교, 재고가 많은 인기있는 상품에 관한 메시지, 행동을 요구하는 버튼, 사실 고객과의 감정적 인 연결 고리를 만들고 유지하는 데 도움이 될 것입니다.

  • 유효성

전자 상거래 제품 가용성 그림

전자 상거래 상점의 모든 세부 사항을 신중하게 고려하여 현재의 전자 상거래 UX 트렌드까지 스타일 및 색 구성표로 통합하더라도 사용자는 방문 페이지에서 무엇이든 찾을 수 있다면 고객이되지 않습니다. 그들이 실제로 관심이있는 것을 제외하고 귀하의 사이트를 방문하십시오. 미니멀리스트 디자인과 이해하기 쉬운 사용자 친화적 인 탐색의 균형 잡힌 조화를 찾는 것이 좋은 조언 일 것입니다. 온라인 상점의 모든 사용자 인터페이스 요소가 관습 적으로 배치되는 것이 중요합니다. 아무도 사이트의 이상한 논리를 이해하려고 노력하는 시간을 낭비하지 않을 것이기 때문에 수백 가지가 아니라도 수십 가지의 대안을 찾아 낼 수 있다면 모든 것이 명확합니다. 고객의 시간에 세심한주의를 기울이면 항상 갚을 수 있습니다. 가능한 한 간단하고 신속하게 상품 선택 및 구매 프로세스가 이루어 지도록하는 것이 중요합니다.

찾아야 할 다른 사항은 다음과 같습니다.
 

1. 사이트 검색

검색을 통해 구매자는 카탈로그에 필요한 항목을 찾는 데 많은 시간을 절약 할 수 있습니다. 고객은 사이트 메뉴가 아닌 검색 기능을 선호합니다. 실제로 검색은 전환 및 판매에 큰 영향을 미치므로 쉽게 액세스 할 수있는 장소에 배치해야합니다. 한 범주 내에서 검색 할 수있는 기능 또한 추가 할 가치가 있습니다. 특히 많은 수의 제목이있는 경우 특히 유용합니다. 보다 정확한 결과 전달을 위해 자동 보정하고 최상의 결과를 얻기 위해 주어진 검색과 관련된 제품을 출력에 추가하십시오.

2. 배송 정보

배달 정보는 사이트의 어느 페이지에서나 쉽게 접근 할 수 있어야합니다. 예를 들어 링크를 헤더에 배치 할 수 있습니다. 구매자는 배송 기간 및 시간대를 명확하게 이해하면보다 편안해집니다. 무료 배송은 많은 사용자를위한 매장 선택에 결정적인 역할을합니다. 또한, 한 번에 두 개씩 구매하는 것이 좋습니다.

3. 온라인 지원 채팅

잠재 고객이 생각할 수있는 것이 웹 사이트에 있었더라도 온라인 지원 채팅에 투자해도 문제가되지 않습니다. 결국 다음 방문객이 무엇에 관심 있을지 예측할 수 없으며 질문에 대한 신속한 답변은 회사의 열정의 신호로 간주됩니다.

4. 장바구니

장바구니는 사이트의 모든 페이지에서 사용할 수 있어야합니다. 작은 팝업 창에서 주문을 표시하는 기능을 고려하는 것도 중요합니다. 이를 통해 사용자는 수시로 카트를 모니터링하고 수량을 수정할 수 있습니다. 그러나 이것이 팝업 창을 통해 본격적인 장바구니 페이지를 대체 할 수있는 것은 아닙니다.

5. 사용자 테스트

이 방법을 사용하면 잠재 고객의 기본 설정을 학습하고 전환, 사용자 충성도, 평균 주문 가격, 이탈률 및 기타 측정 항목을 포함하여 사이트의 주요 실적 지표를 관리 할 수 ​​있습니다. A / B 테스트는 웹 사이트의 수명주기의 모든 단계에서 유지되는 중요하고 지속적인 프로세스입니다. 새로운 기능은 항상 구현, 테스트 및 개선됩니다. 모든 관련 가설은 실제 트래픽과 실제 사용자의 도움을 받아 테스트됩니다.

  • 믿을 수 있음

전자 상거래 신뢰성 그림

우리 각자는기만 당하거나 품질이 떨어지는 물건을 입을 위험에 두려워하며 온라인 사기가 증가하고 있습니다. 따라서 잠재 고객이 회사의 신뢰를받을 가치가 있음을 확신시켜야합니다. 따라서 상점의 정직성을 보장하는 보안 인증 로고는 기본 페이지 나 바닥 글에 눈에 띄게 두어야합니다.

또한 회사의 실제 주소는 온라인 소매 업체가 신뢰할 수 있음을 보장합니다. 운영자의 실제 주소를 알면 사이트의 견고 함을 쉽게 믿을 수 있습니다.

이러한 온라인 상점 구축 필수 사항을 준수하면 사이트의 전환율을 향상시킬 수 있습니다. 그러나 클라이언트를 유지하고 반복적으로 구매 및 반환하도록 유도하려면 인터페이스의 각 요소를 신중하게 조사해야합니다.

온라인 상점은 불필요한 구성 요소로 인해 과부하가 발생하지 않도록 가능한 한 단순해야하지만 사용자에게 필요한 모든 정보를 제공하는 몇 가지 일반적인 페이지로 구성됩니다. 다음 개요에서는 각 상점 페이지의 가장 중요한 주요 기능에 대해 설명합니다.

전자 상거래 탐색 관련 권장 사항

전자 상거래 탐색 실례 우수 사례

전자 상거래 탐색의 두 가지 주요 요소는 제품 카탈로그와 검색 입니다. 평균 사용자와 관련하여 설계되고 최적화되어야하며 고객이 온라인 상점의 구색에서 자신의 길을 찾을 수있는 가장 편안한 조건을 만들어야합니다.

중요한 전자 상거래 탐색 요소 :

 

  1. 제품 카탈로그또는 상점의 주 메뉴는 상품 범위의 개요입니다. 이것은 상점의 고유 한 부분입니다. 방문자가 제품 구색의 특징에 대해 알게되고 상점이 경쟁 업체와 차별화되는 것을 즉시 이해할 수있는 가장 간단한 방법입니다. 카탈로그를 카테고리 및 하위 카테고리로 나누는 것이 좋지만 사이트의 구조를 쉽게 이해할 수 있도록 2 단계로 제한해야합니다. 주 메뉴 외에 회사 정보, 장바구니, 배달 서비스, 특집 기사 등이있는 페이지에 빠르게 액세스 할 수있는 보조 단추를 배치해야합니다. 일반적으로 검색을 통해 웹 사이트의 상단에 배치됩니다 상자 및 문맥 메뉴. 거의 사용되지는 않지만 Sitemap도 있어야합니다. 이 섹션에는 모든 상점 페이지에 대한 참조가 있으며,
     
  2. 면면 탐색. 다음으로주의해야 할 것은 사용자에게 주어진 특성에 해당하는 상품 목록을 제공하는 패싯 형 탐색 디자인입니다. 간단히 말해서 항목을 필터링하십시오. 예를 들어, 사용자가 가죽 제품을 선택한 경우, 페이지에 표시되는 모든 항목은 가죽을 포함하거나, 포함하거나, 돌보거나, 연상시켜야합니다. 각 클라이언트에 가장 적합한 필터를 사용자 정의 할 수있는 기능으로면 세부 탐색이 매우 자세해야합니다.
     
  3. 앞에서 언급했듯이 사이트 검색 은 잠재적 인 구매자의 질문에 최대한 적응해야하며 모든 페이지에서 접근 할 수 있고 사용하기 쉽습니다. 검색에 가장 필요한 두 가지 기능은 자동 완성 / 맞춤법 검사 및 범주 검색입니다. 오타 또는 잘못된 키보드 레이아웃의 경우에는 0을 피하기 위해 먼저 필요합니다. 모범 사례 중 하나는 드롭 다운 목록을 디자인하여 이미지 및 가격이 감소 된 가장 적합한 제품을 보여주는 것입니다. 검색 봇은 사용자 경험 통계를 수집하여 소비자의 요구 경향을 파악할 수 있습니다. 이렇게하면 특정 사용자가 필요로하는 것을 정확히 알고있는 새 사용자가 사이트를 방문하면 특정 항목 구입의 가능성이 높아집니다.

사용자는 항상 자신이있는 위치를 알며 클릭 한 번으로 사이트의 구조에서 1 단계 또는 2 단계로 돌아갈 수 있으며 검색 결과로 돌아갈 수 있습니다.

2. 페이지 유형별 권장 사항

이 기사에서는 기본적인 유형의 페이지 만 논의합니다. 각 온라인 상점은 고유하므로 모든 개별 사례 및 전자 상거래 기능 목록이 별도로 논의됩니다.

  • 전자 상거래 홈페이지 디자인 팁

전자 상거래 홈페이지 디자인 도움말 일러스트

중요한 e-shop 홈페이지 요소 :
 

  1. 캠페인, 업데이트, 이벤트 및 인기 상품에 대해 고객에게 알리는 프로모션 블록이 기본 페이지에 있어야합니다. 이것은 온라인 상점에서 가장 중요한 요소 중 하나입니다. 실제로 고객의 관심을 끌고 있습니다. 보통 슬라이드를 전환하는 수직 또는 수평 배너로 만들어집니다. UX 디자이너는 이러한 요소를 만들어 사용자에게 매달리고 구매 동기를 부여해야합니다. 물론 색상과 그 조합은 사이트의 다른 모든 부분보다 더 강하고 밝아야합니다. 또한 슬라이드에서 제목, 설명 및 가격 비교를 사용해야합니다. 
     
  2. 인기있는 제품과 혁신이 담긴 배너 는 인간의 심리에 기반한 판매 메커니즘입니다. 현수막 및 배너 광고에 대한 구매 확률은 영구 및 신규 고객 모두에서 높습니다. 상점의 비즈니스 로직이 일반 고객의 선호에 적응하고 가장 관심있는 제품이나 브랜드에 대한 정보를 홍보 블록에 제공하면 좋을 것입니다.
     
  3. 떠 다니는 창 또는 팝업방문자에게서 어떤 정보든지 얻는 가장 편리한 방법이다. 국가 및 언어 선택은 국제 배송에 초점을 맞춘 상점의 팝업을 통해 사용자에게 제공 될 수 있습니다. 또한 고객의 행동, 연령, 신체적 특징 및 관심사에 따라 고객에게 가장 적합한 제품 범위를 보여주기 위해 팝업을 사용할 수 있습니다. 팝업은 또한 리드를 수집하고 소셜 미디어 페이지 가입자를 늘리는 데 도움이됩니다. 팝업에는 높은 기능성 및 실험을위한 공간과 같은 많은 이점이 있습니다. 그들은 관심을 끌고 정보 개인화를위한 더 큰 기회를 제공하는 것을 효과적으로 보장합니다. 그러나, 하나는 그들의 사용에주의해야합니다,
     
  4. 제품 페이지 디자인 

제품 페이지 디자인 일러스트레이션

이 섹션에서는 제품 카드 디자인에 대해 논의하기 위해 노력합니다. 제품 카드 페이지에서 잠재적 구매자는 관심있는 제품에 대한 가능한 최대 정보를 확보해야합니다. 과부하가되지 않도록하는 것이 중요합니다.

중요한 제품 페이지 요소 :

  1. 영화.온라인 쇼핑은 고객이 직접 물건을 만질 수없고 사진과 설명으로 만 안내된다는 점에서 실제 쇼핑보다 열등합니다. 따라서 이미지의 품질이 좋고 원본 해상도로 볼 수있는 옵션, 여러면에서 충분한 수의보기 및 가능한 경우 다른 용도로 볼 수있는 옵션이 필요합니다. 주요한 역할은 정확한 구성에 의해서도 수행됩니다. 상대적인 상황에서 제품을 볼 수있는 가능성은 매출을 증가시킬 수 있습니다. 또한 사용 가능한 모든 색상의 상품 사진을 제시하는 것이 중요합니다. 전문 사진 작가를 고용하는 데 드는 비용을 절감하는 것은 큰 재앙이 될 수 있습니다. 또한 고객은 제품이 어떤 소재로 만들어 졌는지 알 필요가 없으며 명확하게 사진을 선호합니다. 이미지는 상품 구매 욕구를 자극해야합니다.
     
  2. 비디오 리뷰 는 제안의 가치, 기능 및 성능을 보여줍니다.
     
  3. 해당 제품의 회전 가능한 3D 모델 을 카드에 추가하여 방문자가 원하는 각도에서 관찰 할 수 있습니다.
     
  4. 가격과 주식. 구매자에게 두 번째 중요한 것은 제품 가격 및 가용성에 대한 정보입니다. 당연히 가격은 색상이나 크기에 관계없이 동일해야합니다. 할인 옵션, 단기 프로모션 알림 및 저축 예금 비율로 방문자가 더 빨리 결정할 수 있습니다. "가격 따르기"버튼을 누르지 않아도됩니다.이 방법으로 회사는 리드를 얻고 클라이언트는 판촉 및 판매에 대해 빨리 배울 수 있습니다. 주식 부족에 대한 메시지는 즉각적인 구매를 자극 할 수 있습니다. 고객이 제품을 장바구니에 추가 한 후 이미 종료되었음을 알면 안됩니다. 이것은 제품 페이지에 표시되어야하며 제품에 재고가 있음을 알리는 알림을 구독 할 수있는 옵션이 있어야합니다.
     
  5.  장바구니 페이지 디자인

장바구니 페이지 디자인 일러스트 레이션

이 섹션에서는 전자 상거래 카트 디자인에 대해 논의하기 위해 노력합니다. 우리는 이미 기사의 첫 번째 부분에서 장바구니 페이지의 잘 만들어진 웹 디자인의 중요성을 언급했습니다. 최적화에 대해 더 자세히 살펴 보겠습니다.

클라이언트는 상품 선택 과정에서 쇼핑 바구니와 상호 작용합니다. 광고 및 배너는 여기에서 불필요합니다. 구매자는 이미 필요한 것을 결정 했으므로 추가 정보가 귀찮습니다. 또 다른 중요한 순간은 등록이 주문을 예약하기위한 요구 사항 중 하나인지 여부를 결정하는 것입니다. 작은 상점은 쇼핑을위한 추가 장애물을 만들지 않아야하지만, 큰 상점의 경우 충성도가 높은 고객과 함께 일하는 것이 더 쉽습니다. 이 페이지의 중요한 요소는 체크 아웃 버튼, 프로모션 코드 필드, 가격 계산기 및 쇼핑을 계속할 수있는 기능입니다.

배달 가격이 고객의 지리적 위치에 따라 다르면 여기에서 전체 비용을 계산할 수 있어야합니다. 프로모션 코드도 마찬가지입니다. 상점의 마케팅 전략에 의해 지원되는 코드라면 입력란을 만들어야합니다. 즉, 계산기에서 즉시 고려해야합니다.

고객에게 개인 정보가 존중되고 개인 정보가 명시적인 의지 및 반품 정책에 반하여 사용되지 않을 것이라고 상기시키는 것이 좋을 것입니다. 장바구니가 아직 비어있는 경우 주문을하지 않는 방법을 알려주는 대신 여기에 주문하는 방법에 대한 정보를 표시하는 것이 좋습니다.

장바구니의 다른 추가 기능들 중 사용자는 내용을 인쇄하거나 전자 메일로 보낼 수있는 기능에 크게 감사 할 것입니다. 구매는 다른 사람에게 할 수 있으므로 승인이 필요합니다. 또한 다른 사람들이 장바구니에있는 선물과 함께 사는 경향이있는 상품에 대한 정보 또는 고객에게 여전히 필요할 수있는 제안을하는 것이 논리적 일 것입니다. 부적절한 계산으로 인한 실패 횟수를 줄이기 위해 처리 된 주문에 대한 여러 지불 옵션을 고려하십시오.

  • UX UX 디자인 확인

UX UX 디자인 일러스트레이션보기

기본적으로 웹 양식 디자인에 적용되는 것과 동일한 지침을 여기에서 사용할 수 있습니다. 고객의 편의를 위해 체크 아웃을 완료하기 전에 추가 탭에서 한 번 더 입력 한 데이터를 확인하도록하는 것이 좋습니다. 이렇게하면 최소한의 노력으로 신속하게 구매를 완료하는 데 도움이됩니다. 모든 정보는 동일한 페이지에 표시되어야하며 고객에 관한 일반 정보부터 선택된 지불 방법 세부 사항까지 표시해야합니다. 오른쪽에는 짧은 주문 내용 목록을 넣을 수 있습니다. 요약 정보가 표시되어 체크 아웃을 처리하는 과정에서 제어 할 수 있습니다. 입력 필드로 페이지를 오버로드하지 마십시오. 체크 아웃 프로세스는 가능한 한 간단해야합니다. 사이트는 사용자가 입력 한 데이터를 저장해야하므로 다음에 다시 올 때 체크 아웃이 훨씬 간단 해집니다. 구매를 완료하는 데 남은 단계 수에 대한 최신 정보를 고객에게 제공해야합니다. 보안 자격 증명 및 고객 서비스 담당자와 함께 제공되는 회사의 안정성을 보장해야합니다. 계산 흐름이 고객에게 더 빠르고 편안 해지면 반환 가능성이 높아집니다.

개요

실제 판매와 마찬가지로 전자 상거래 웹 사이트를 만드는 주요 임무는 상품을 판매하고 이익을 창출하는 것이 아니라 고객 만족을위한 모든 것을하는 것입니다. 일반적으로 상점 디자인은 비슷한 논리와 일관성을 갖습니다. 그럼에도 불구하고 그들 각각은 고유 한 기능을 가지고 있으며, 이에 따라 깨끗한 전자 상거래 디자인이 선택되어 몇 가지 중요한 작업을 해결합니다. 이 기사에서는 가장 중요하고 공통적 인 인터페이스 요소에 대한 예제를 설명하고 전자 상거래 웹 사이트를 개선하는 방법을 설명하려고했습니다. 그러나 모든 다른 비즈니스에 동일한 기능을 사용하는 것은 불가능합니다. 각 사례별로 가장 적합한 솔루션을 선택하는 가장 좋은 방법은 A / B 테스트를 통해 찾을 수 있습니다. A / B 디자인 가이드 라인은 가까운 장래에 별도의 기사에서 자세하게 다루겠습니다.

희망이 전자 상거래 웹 디자인 튜토리얼은 독자에게 도움이 될 것입니다.

728x90

댓글