2021 년 전자 상거래 웹 사이트 재 설계를 위해 알아야 할 사항

올해는 전자 상거래 웹 사이트를 재 설계 할 예정입니까? 몇 년이 지난 후에도 많은 변화가 있었음을 알아야합니다.

현대 전자 상거래 사이트는 모바일 용으로 먼저 디자인되어야한다는 것은 말할 필요도 없습니다. 이제 제가 작업하는 대부분의 모바일 트래픽은 모바일 장치에서 트래픽의 70 % 이상을 얻습니다. 그러나 이는 시작에 불과합니다. 사이트를 방문하여 사용자를 고객으로 전환하려는 경우 고려해야 할 많은 미묘한 점이 있습니다.

나는에 상담했다 유용성 지난 XNUMX 년 동안 광범위한 전자 상거래 사이트에서 최고의 사이트가 따르는 원칙을 연구했습니다. 내 책의 가이드 라인에서 영감을 얻은 오늘날 사용자를 위해 사이트가 처음부터 시작되도록하는 XNUMX 가지 방법을 안내합니다. 전자 상거래 웹 사이트 디자인.

홈페이지에서 긴 동영상 피하기

홈페이지는 감동을주는 곳입니다. 많은 웹 사이트에서 고급 사진에 돈을 투자하지만 여기에 비디오를 사용하여 제품을 보여 주거나 브랜드 스토리를 이야기하는 것이 좋습니다. 결국, 비디오는 현재 모든 곳에, 특히 소셜 미디어에 있습니다.

올바르게 사용하면 비디오는 사용자에게 알리고 흥미를 유발할 수 있습니다. 그러나 비디오가 아무리 화려하든 사용자가 클릭 재생을해야하는 경우 대부분의 사람들은 그것을 무시. 내가 본 많은 사용자 테스트에서 이는 방문 페이지 비디오에서 가장 일반적인 동작입니다.

왜? 사용자 여정의이 단계에서는 관심 범위가 짧습니다. 사용자는 알 수없는 것을 시청할 시간을주지 않고 사이트를 완전히 떠나고 튀길 가능성이 높습니다.

처음에는 사용자가 빠르게 이동할 수 있도록 짧고 조용한 자동 재생, 루핑 비디오를 고수해야합니다. 이렇게하면 깊이 관여 할 필요없이 정보를 얻을 수 있습니다. 사용자가 더 관심을 가질 때 제품 기능과 같은 사항을 설명하는 데 더 긴 비디오가 나중에 유용하게 사용될 수 있습니다.

Prynt 사이트는 짧은 자동 재생 비디오를 사용하여 제품의 실제 작동 상태를 보여줍니다. 소리로 모든 것을 볼 수있는 옵션도 있습니다.

초과 콘텐츠로 홈페이지를 채우지 마십시오

사용자를 홈페이지로 유도하기 위해 어려운 마케팅 작업을 수행 한 후 매장을위한 강력한 홍보 자료를 만들면 다음은 어떻게 되나요? 당신의 회사에 대해 그들에게 말할 수있는 많은 것들이 있습니다. 이제 기회가 있습니까?

조심해. 방문 페이지를 길게 만들면 사용자가 전환하거나 혼란스러워 할 위험이 커집니다. 사용자는 편안하게 스크롤 할 수 있지만 컨텐츠가 작업과 직접 관련이없는 경우 곧 중지됩니다.

디자인 할 때마다 '한 페이지, 하나의 목적'. 이 페이지의 목적은 판매하는 제품을 소개하고 사용자가 해당 제품을 찾도록하는 것입니다.

가장 최근의 XNUMX 개의 블로그 게시물, 최신 트윗 및 Instagram 이미지를 볼 필요가 있습니까? 소셜 게시물은 사용자를 방금 사이트로 데려왔을 때 특히 도움이되지 않으며, 클릭하면 다시 삭제됩니다.

페이지에 더 많이 넣을수록 더 많이 사용자에게 방해가되는 방해 요소 당신의 주요 행동과 그들이 원하는 주요 일에서. 모바일 사용자는 세션이 짧아지고 작업 수행에 집중하는 경향이 있으며 추가 콘텐츠로는 도움이되지 않습니다.

쉽게 접근 할 수있는 필터 만들기

제품이 많은 경우 사용자가 필요한 것을 찾을 수 있도록 필터가 필수적입니다. 전자 상거래 사이트의 대다수 (약 내가 공부 한 사람들의 90 %)는 모바일에서 오버레이로 필터를 사용합니다. 사용 가능한 공간이 많지 않으면 사용자가 실제로 볼 가능성이 적다는 것을 의미합니다.

원칙적으로 사용자의 95 %가 기본값을 변경하지 않습니다 이는 특정 옵션을 선택하기 위해 필터 메뉴를 여는 데 적용됩니다. 그것은 내가 본 전자 상거래 사용자 테스트에서 제공 된 것입니다. 목록 페이지에서 제품을 찾는 것은 전자 상거래 브라우징 경험이 데스크탑에서 우수한 영역 중 하나입니다.

사용자가 필터링하면 실제로 원하는 제품을 찾을 가능성이 높습니다. 모바일에서 해결해야 할 과제는 공간을 절약하는 방법을 찾는 것입니다. 한 가지 방법은 옵션 버튼이있는 페이지에서 가장 관련성이 높은 필터 범주를 표시하는 것입니다 (아래의 Macy 참조). 하나를 누르면 해당 필터가 적용된 목록이로드되고 그 다음으로 가장 관련성이 높은 필터가 표시됩니다.

전자 상거래 재 설계-메이시의 필터 옵션
메이시 사이트는 일부 필터 옵션을 페이지에 버튼으로 제공합니다. Burberry는 필터 범주를 페이지에 표시합니다.

 

최소한 전체 필터 메뉴로 이동하는 버튼이 분명해야합니다. 또한 필터가 적용되는시기를 명확하게 표시해야하므로 사용자는 제한된 결과 집합이 언제 표시되는지 알 수 있습니다.

더 큰 이미지를 위해 목록을 다시 디자인하십시오

대부분의 전자 상거래 목록 페이지는 한 번에 많은 제품을 화면에 표시하려고합니다. 결과적으로 제품 이미지는 매우 작은 경향이 있습니다 (전통적으로 썸네일 이미지라고 알려진 이유입니다).

그러나 이미지는 사용자가 어떤 제품을 선택할지 결정하는 데 도움이되는 핵심 부분입니다. 대부분의 경우 텍스트보다 더 많은 정보를 제공합니다. 의류 및 가구와 같은 제품은 사용자가 제공하는 서로 다른 것을 주관적으로 구분합니다.

모바일에서도 큰 이미지를 가질 수 있습니다. Instagram과 같은 앱은 사용자가 어디에서나 고품질을 기대하도록 이끌었고 사용자가 이것을 좋아한다는 것을 종종 알았습니다. 그들이 어디에 있는지 상관없이 좋은 사진은 항상 사랑 받고 있습니다.

에어 비앤비는 스크롤 할 수있는 큰 이미지를 가지고 있습니다 (왼쪽). Zara (오른쪽)는 목록에 전체 화면 너비 이미지가 있습니다.

물론 몇 가지 이미지로 무언가를 더 잘 팔 수 있다고 생각하면 그렇게하십시오. 여행 사이트에는 종종 스크롤 할 수있는 미묘한 화살표가있는 목록 미리보기 이미지에 여러 사진이 있습니다. 많은 의류 사이트는 제품을 자체적으로 보여주고 모델이 착용하는 옵션을 제공합니다.

제품 옵션을 버튼으로 표시

색상, 크기, 재질 또는 기타와 같은 다양한 제품을 사용할 수 있습니다. 제품 정보 페이지는 사용자가 궁극적으로 선택하는 곳입니다. 선택을 더 쉽게하려면 드롭 다운 메뉴에서 이러한 옵션을 덤프하지 않아야합니다.

그들은해야한다 시각적 버튼 사용자가 모든 옵션을 볼 수 있도록하고 변동이 가격 변동을 의미 할 때 명확해야합니다. 변형이 제품의 모양 (예 : 색상)을 변경하는 경우 변형을 선택하면 기본 제품 이미지가 업데이트됩니다. 이것은 주문 될 것에 대해 의심의 여지가 없다.

전자 상거래 재 설계-나이키 크기 옵션
John Lewis (왼쪽)에는 시각적 표시기가있는 버튼으로 제품 색상이 있습니다. Nike (오른쪽)는 모든 크기 옵션을 표시하고 사용할 수없는 크기를 비활성화합니다.

또 다른 이점은 특정 버튼을 비활성화하여 사용자가 재고가없는 변형을 한 눈에 볼 수 있다는 것입니다. 다시 한 번 옵션 드롭 다운 목록을 스크롤하여 저장합니다.

크기 선택시 기본 크기를 사용하지 않는 것이 가장 좋습니다. 사용자가 있으면 원하는 것보다 기본값을 추가 할 수 있습니다. 이로 인해 많은 수익과 고객 불만이 생길 수 있습니다.

공유 버튼을 생략

페이 스북, Twitter, Pinterest, Instagram, 링크드 인, Snapchat. 사용자가 아마이 중 하나 이상에서 행 아웃 소셜 네트워크. 제품 세부 정보 페이지에 공유 버튼을 제공해야합니까?

많은 전자 상거래 사이트는 사람들이 웹에서 자신의 제품을 홍보하도록 장려하기 위해 여전히 작은 아이콘을 표시합니다. 불행히도, 그들은 거의 확실히 시간 낭비입니다.

아무도 클릭하지 않습니다. 실제로 0.2 %의 사람들이 한 연구에 따르면. 또한 코드 스 니펫처럼 보일 수 있지만 페이지 속도가 느려지는 추가 항목이 많이 있습니다.

유료 '인플 루 언서 (influencer)'의 등장은 현대 사용자가 더 이상 브랜드가없는 브랜드의 방송을 원하지 않는다는 것을 의미합니다. 더 많은 사람들이 친구 나 가족과 비공개로 기꺼이 공유 할 것입니다. 전자 메일 또는 WhatsApp과 같은 인스턴트 메시징 서비스를 통한 공유를 허용하는 링크가 더 잘 작동 할 수 있습니다.

결제 지갑 통합

다음과 같은 지불 지갑 서비스 페이팔Apple Pay와 Android Pay가 증가하고 있습니다. 전자 상거래 결제 과정에서 옵션으로 보는 것이 점점 더 일반적입니다. 실제로 그들은 표준 결제를 중단시킬 수 있으며 신용 카드 및 현금 사용 전부.

전자 상거래 재 설계-Amazon Pay 통합
Tamara Mellon (왼쪽)은 Apple Pay, PayPal 및 Amazon Pay 옵션을 장바구니와 체크 아웃에 사용할 수 있습니다. 구찌는 '가방에 담기'알림에서 PayPal로 이동할 수있는 기능을 제공합니다.

비밀번호, 지문 또는 얼굴 스캔을 입력 한 다음 즉시 결제를 완료 할 수 있으면 양식을 작성하는 것보다 훨씬 편리합니다. 전자 상거래가 모바일에 의해 지배되기 때문에, 불충분 한 양식 작성이 필요없는 손쉬운 지불을 제공하는 것이 필수적입니다.

사용 편의성이 높아지면 더 많은 사용자가 체크 아웃을 완료 할 수 있습니다. 이전에 브랜드에 대해 들어 본 적이 없다면 사용자가 중개자처럼 지갑을 사용하는 것이 안전하다고 느낄 수있는 보안상의 이점도 있습니다.

결제 과정에서 실행 한 사용자 테스트에서“PayPal 사용 옵션을 선호합니다”및“매우 보안이 중요하며 PayPal 만 사용하여 지불합니다”와 같은 의견이 정기적으로 들립니다. PayPal은 현재 잘 알려져 있지만 어떤 사이트를 사용할지 결정할 때 가장 인기있는 국가 및 장치와 함께 사용할 수 있습니다.

사용자가 수집하도록 허용

점점 더 많은 전자 상거래 웹 사이트는 사용자에게 주문을 전달하지 않고 주문을 수집 할 수있는 기능을 제공합니다. 집에 자주 있지 않고 직장에 배달 할 수없는 사용자에게 좋습니다. 이 옵션을 제공하면 귀하로부터 구매할 수있는 사용자 수만 증가합니다.

가장 쉬운 (그리고 종종 가장 좋은) 접근 방법은 결제시 배송의 대안으로 컬렉션을 추가하는 것입니다. 사용자에게 위치를 입력하고 주문을받을 수있는 옵션을 표시하도록 요청하십시오. 또한 픽업 장소의 영업 시간을 표시하는 것이 중요합니다.이 데이터는 종종 배송 회사와의 통합에서 비롯됩니다.

ASOS 체크 아웃에서 클릭하여 수집 창을 통해 사용자는 배달 할 편의점을 선택할 수 있습니다.

보다 복잡한 방법은 사이트의 모든 제품 세부 정보 페이지에 수집 할 수있는 옵션을 통합하는 것입니다. 당신이 가지고 있다면 이것은 의미가 있습니다 벽돌과 박격포 상점 특정 상점에서 재고를 확인할 수 있기 때문입니다.

그러나 사용자가 여러 제품을 주문한 경우 문제가 발생할 수 있습니다. 주의하지 않으면 일부는 배송 용 제품과 일부는 수거용 제품 ('혼합'바구니). 이 문제를 가장 빨리 피하려면 사용자가 수거 또는 배송을 바스켓 단계로 지정하여 전체 주문에 적용하도록하는 것이 좋습니다.

더 많은 전자 상거래 조언

이것이 전자 상거래 사이트가 2020 년 이후에 적합하도록 재 설계되도록하는 66 가지 방법이었습니다. 물론 전체 전자 상거래 웹 사이트를 재 설계 할 때 고려해야 할 사항 이상이 있습니다. 실제로 저는 10 년간의 UX 디자인 경험을 바탕으로 변환하는 온라인 상점을 설계하기위한 XNUMX 개의 지침이 포함 된 책을 작성했습니다.

이 책을 전자 상거래 웹 사이트 디자인이라고합니다. Amazon에서 사용 가능 페이퍼 백 및 Kindle을 포함한 다양한 형식으로 제공됩니다. 아니면 당신은을 얻을 수 있습니다 내 사이트의 디지털 PDF 버전인쇄본의 모든 삽화가 포함되어 있습니다. 당신은 또한 얻을 수 있습니다 15의 % 할인 프로모션 코드 PLATFORMS를 사용하여 제한된 시간 동안 디지털 버전.