105 전자상거래 UX 팁: 방문자를 구매하도록 유도하는 방법

매일 사람들은 원하는 것을 찾을 수 없기 때문에 매장을 방문하고 떠납니다.

Google에서 상위 순위 이상이 필요합니다. 사람들은 원하는 제품을 탐색할 수 있어야 하고 구매할 만큼 귀하를 신뢰할 수 있어야 합니다. 전자상거래 UX(사용자 경험) 는 방문자가 목표를 달성할 수 있도록 도와줌으로써 방문자의 신뢰를 구축하는 데 중점을 두어야 합니다.

사용자 경험 연구 회사인 Nielson Norman Group에 따르면 전자 상거래 사용성을 위한 800개 이상의 모범 사례가 있습니다. 개발에 수십억 달러를 지출하지 않는 한 모든 지침을 충족하지 못할 것입니다. 이 게시물은 전자상거래 UX 디자인을 개선하고 더 많은 전환을 얻을 수 있는 팁과 예제로 가득합니다.

페이지 유형별로 기본 모범 사례를 분석해 보겠습니다. 모바일 UX에 대한 팁은 이 기사를 확인하세요.

홈 페이지 한 눈에 신뢰를 구축하는 UX 팁

귀하의 홈페이지에 가장 많은 트래픽이 발생합니다. 제품을 판매하고 있음을 분명히 하십시오. 홈 페이지를 상점의 창이라고 생각하십시오. Magnificent Mile에 있는 Macy's를 생각해 보십시오. 최고의 제품과 이미지로 홈페이지를 꾸며보세요. Macy's에서 절대 볼 수 없는 것 중 하나는 창가에 하나씩 다른 드레스가 휙휙 날아가는 것입니다. 여기서 슬라이더에 대해 이야기하고 있습니다. 사용해야 하는 경우 사용자 친화적인지 확인하십시오.

영웅 영역 모범 사례

영웅 영역(특징 영역이라고도 함)은 홈 페이지에서 가장 눈에 띄는 부동산입니다. 좋은 인상을 남길 수 있는 시간은 단 50밀리초입니다. 여기에 이를 반영하는 방법이 있습니다.

히어로 에어리어 도스

1. 심플하고 군더더기 없는 디자인을 사용합니다. 가능한 한 적은 수의 단어를 사용하십시오.
2. 영향을 미치지 않는 모든 것을 제거하십시오. 예를 들어, 최근 블로그 게시물.
3. 색상이나 화살표와 같은 시각적 대기열을 사용하여 단일 클릭 유도문안에 주의를 집중하세요.
4. 사람들이 자신을 쉽게 식별할 수 있도록 합니다. 여성용 고가 재킷을 판매합니까?

히어로 에어리어 돈츠

1. 장식합니다. 소용돌이, 반짝임 및 기타 무의미한 기호는 인지 부하를 추가하고 고객의 주의를 산만하게 합니다.
2. 지난 주 또는 심지어 지난달의 프로모션과 같은 오래된 콘텐츠가 있습니다. 즉시 신뢰를 잃게 됩니다.
3. 너무 많은 메시지나 프로모션으로 영역을 어지럽힙니다.
4. 자동으로 진행되는 슬라이더 또는 회전 목마가 있습니다.
5. 전체 믹스를 대표하지 않는 제품을 강조합니다.

홈페이지 탐색

사람들이 귀하의 사이트를 방문할 때 그들이 무엇을 위해 왔는지 찾도록 돕고 싶습니다. 전환 전문가인 Tim Ash에 따르면 홈 페이지의 주요 초점은 카테고리 수준 탐색을 제공하는 것입니다. 방문자가 원하는 것을 찾는 데 도움이 되도록 다음 지침을 따르십시오.

홈 페이지 탐색 해야 할 일

1. 방문자에게 귀하의 사이트가 판매하는 제품에 대한 "30,000피트 뷰"를 제공하여 특정 카테고리로 드릴다운할 수 있습니다.
2. 가장 많이 사용하는 도구나 구매 가이드를 추가하세요.
3. 반품 정책, 고객 서비스, 배송 및 개인 정보 페이지에 대한 링크를 제공하십시오.

홈 페이지 탐색 금지 사항

1. 사람들이 무엇을 찾고 있는지 알고 있다고 가정합니다.
2. 홈 페이지의 모든 카테고리와 하위 카테고리를 잼.
3. 제품 수준 프로모션을 푸시합니다. 몇 가지 제품만 있는 경우 이를 무시할 수 있습니다.
4. 일반 스톡 사진을 사용하십시오. 이것은 진정성을 외칩니다.

탐색: UX의 기초

카테고리, 가변 제품 또는 옵션이 많은 제품이 많은 경우 탐색이 중요합니다. 번거로운 메뉴보다 더 짜증나는 것은 없습니다. 사람들이 원하는 것을 더 빨리 찾을 수 있을수록 결제 프로세스로 더 빨리 이동할 수 있습니다.

탐색 메뉴의 목적은 사람들이 가고 싶은 곳으로 이동하는 것입니다. 해결해야 할 사항에 대한 분석은 다음과 같습니다.

기본 탐색 메뉴 수행 사항

1. 상위 메뉴를 7개 선택으로 제한합니다.
2. "문의하기"와 같은 항목에 대한 오른쪽 상단의 보조 탐색 사용
3. 범주 및 하위 범주를 구성하는 다중 열 메뉴를 사용합니다.
4. 제품의 고품질 이미지를 보여주세요.
5. 대비되는 색상으로 탐색 메뉴를 눈에 띄게 만드십시오.
6. 제품을 여러 범주로 상호 참조합니다. USB 드라이브를 찾는 사람은 노트북, 액세서리 또는 컴퓨터 아래를 찾을 수 있습니다.

기본 탐색 메뉴 금지 사항

1. 긴 열을 차지하는 단일 드롭다운이 있습니다.
2. 기본 탐색에 대한 링크 빈 카테고리 페이지를 표시합니다.
3. 제품을 과도하게 분류합니다. (하위)카테고리에 하나의 상품만 있는 경우 해당 카테고리를 제거하고 상품을 재분류합니다.
4. "more"와 같은 모호한 옵션을 사용하지 마십시오.

장바구니 메뉴

장바구니 메뉴는 사용자가 신용 카드를 꺼내기 전에 클릭하는 마지막 버튼일 가능성이 큽니다. 이 작은 아이콘을 지나치지 마십시오.

장바구니 메뉴 Do's

1. 장바구니에 담긴 총 가격 과 품목 수를 표시합니다.
2. 내용의 세부 정보를 볼 수 있는 장바구니 페이지에 대한 링크

장바구니 메뉴 Dont's

1. 전체 카트를 "미니 카트"로 대체하십시오. 전자 상거래 사이트에는 장바구니 위젯뿐만 아니라 장바구니 페이지가 필요합니다.
2. 장바구니에 있는 제품의 모든 세부 정보를 표시하지 않는 체크아웃 페이지로 직접 연결합니다.

검색

많은 사용자가 탐색 메뉴를 건너뛰고 검색/패싯 검색에 의존하여 더 자세히 드릴다운합니다. 패싯 검색은 빠르게 복잡해질 수 있습니다. 개발 및 비용 관점뿐만 아니라 사용자 관점에서도. 이 지침을 따라 작업을 간단하고 유용하게 유지하십시오.

검색

1. 모든 페이지 상단에 열린 텍스트 필드 상자를 사용하십시오.
2. 카테고리 내에 20개 이상의 제품이 있는 경우 패싯 검색을 사용하십시오.
3. 가격, 색상, 크기별 필터링은 기본 패싯 검색 옵션입니다.

검색 금지

1. 검색 입력에 필러 텍스트를 사용하십시오. 비워두거나 "검색"이라고 말합니다.
2. "heavy-duty" 또는 "light-duty"와 같은 주관적인 필터링 옵션을 사용합니다.

카테고리 페이지: 쇼핑객에게 한 걸음 더 다가가기

카테고리 페이지는 약간 까다로울 수 있습니다. 내용이 너무 얇지 않은지 확인하고 싶습니다. 텍스트의 추가 영역은 Google 순위에 놀라운 효과를 줄 수 있지만 너무 많은 텍스트는 고객을 혼란스럽게 할 수 있습니다.

검색어가 주어지면 Macy's의 "수영복" 결과는 관련성이 높습니다. 사용자가 찾고 있는 것을 더 세분화하는 것은 쉽습니다.

카테고리 탐색을 깔끔하게 유지

카테고리 페이지에 어떤 하위 카테고리를 표시할지 선택하십시오. Macy's는 분홍색 수영복, 검은색 수영복, 원피스, 투피스 등의 사진을 보여줄 수 있었습니다. 모든 옵션이 제공된다면 쇼핑객은 옵션의 수에 마비될 것입니다. 또한 사람들이 귀하의 카테고리 페이지를 불량한 제품 목록 페이지로 착각하는 것을 원하지 않습니다.

카테고리 탐색 해야 할 일

1. 많은 공백과 제한된 텍스트를 사용하십시오.
2. 가능한 한 적은 단어로 하위 범주를 설명하되 구체적으로 설명하십시오.
3. 이미지를 사용하여 주요 하위 범주를 적절하게 나타냅니다.
4. 덜 인기 있는 카테고리는 텍스트만 사용하십시오.
5. 메가 또는 드롭다운 메뉴를 사용하는 경우 상위 카테고리가 있습니다.

카테고리 탐색 금지 사항

1. 관련 없는 사진을 표시합니다.
2. 텍스트에만 의존하십시오.
3. 여러 색상 텍스트를 사용합니다.
4. 강력하게 프로모션을 푸시합니다.
5. 하위 카테고리에는 제품 이름을 사용하세요.

타겟 웹사이트에서. "주니어 수영복"을 찾으려면 정말 열심히 찾아야합니다.

카테고리 페이지 콘텐츠

카테고리 페이지는 콘텐츠가 얇을 필요가 없습니다. 키워드 조사는 쇼핑객의 뜨거운 질문을 이해하는 데 도움이 될 수 있습니다. 해당 키워드를 사용하여 제품 라인에 대한 일반적인 질문을 해결하십시오.

카테고리 페이지 내용 해야 할 일

1. 구매자의 요구에 집중하세요.
2. 시맨틱 키워드를 사용하여 주요 키워드를 보완하십시오.
3. 카테고리와 관련된 FAQ를 확인하세요.

구분 내용 하지 말아야 할 것

1. 큰 사본을 페이지 상단에 놓으십시오.
2. 기본 키워드를 계속해서 사용하십시오.
3. 관련 없는 이미지를 사용합니다. Target의 수영복 페이지에 있는 남성복 사진이 믿겨지시나요?
4. 이미지에 텍스트를 넣습니다.

제품 목록 페이지: 정보 제공 및 신뢰 구축

콘텐츠가 부족한 제품 목록 페이지가 너무 많다는 사실에 충격을 받았습니다. Best Buy의 풍부한 콘텐츠와 사용자 친화적인 제품 목록 페이지는 지속적으로 높은 순위를 기록하고 있습니다. 그들의 페이지는 많은 모범 사례를 보여줍니다.Best Buy의 제품 목록 페이지를 사용하면 제품 페이지를 방문하지 않고도 전환할 수 있습니다. 전자상거래 제품 목록 페이지는 이미지, 가격, 옵션 및 재고와 같은 필수 제품 정보를 제공해야 합니다. 이 페이지가 당신을 위해 약간의 판매를 하게 하십시오.

제품 목록 페이지용 SEO 콘텐츠

사용자 친화적인 카피는 자연스럽게 SEO 친화적이 될 것입니다. 사람들(및 Google)이 페이지 내용을 명확하게 이해하기를 원합니다. 또한 원하는 내용이 표시되지 않는 경우 사용자를 이 페이지에서 부드럽게 탐색할 수 있습니다.

SEO 콘텐츠 해야 할 일

1. 페이지 제목과 h1 태그에 가장 관련성이 높고 난이도가 가장 낮은 키워드를 사용하십시오. 키워드 연구에 대해 자세히 알아보세요.
2. 카테고리의 짧은 요약에서 추가 키워드를 사용하십시오.
3. 추가 정보가 필요한 경우 제품 목록 아래에 추가하십시오.
4. 탐색경로를 사용하여 사용자가 PageRank를 탐색하고 카테고리 페이지에 배포할 수 있습니다.
5. 가격 및 옵션을 표시합니다.
6. 장바구니에 추가 버튼이 있는 경우 제품 개요를 제공합니다.

SEO 콘텐츠 금지

1. 제품이 나열되기 전에 너무 많은 콘텐츠를 넣습니다.
2. 제품에 귀엽거나 비유적인 이름을 사용하십시오. 아동용 신발을 판매하는 경우 갈색 샌들을 "조지"라고 부르지 마십시오.

제품 목록 탐색

사용자가 무엇을 사고 싶은지 생각하면 제품 목록 페이지를 쇼핑하게 됩니다. 쇼핑할 수 있는 여러 옵션과 페이지가 있음을 분명히 하세요. 첫 페이지에 원하는 내용이 표시되지 않는 경우 계속 찾아보기를 원합니다.

제품 목록 페이지 탐색 수행 사항

1. 제품 목록 전후의 페이지 수를 표시합니다.
2. 해당 카테고리 내의 총 제품 수를 표시합니다.
3. 사용자가 정렬할 수 있도록 허용: 가격,
4. 사용자가 결과 내에서 특정 페이지로 이동할 수 있도록 합니다.

제품 목록 페이지 탐색 금지 사항

1. 사용자가 화살표를 클릭하여 페이지를 변경하도록 합니다.
2. 사람들이 위로 스크롤하거나 "모두 보기" 버튼을 클릭한다고 가정합니다.
3. 작거나 흐릿한 제품 사진을 사용하십시오.

제품 페이지: SEO, UX 및 영업이 만나는 곳

전체 제품 세부 정보가 중요합니다. SEO 및 사용자 경험을 위해. 내부 링크는 SEO를 향상시키고 사용자가 제품 목록 페이지로 돌아갈 수 있도록 도와줍니다. 사용자 친화적인 제품 페이지 디자인에는 스크롤 없이 볼 수 있는 부분에 필수 제품 정보가 있습니다.

제품 페이지는 사이트의 핵심이며 설득력이 있어야 합니다. 고객이 장바구니에 추가하기 전에 옵션을 선택해야 하는 경우 "장바구니에 추가" 버튼을 클릭할 때 오류 메시지를 표시합니다.

제품 페이지 콘텐츠 계층화

귀하의 제품 페이지는 정보 과부하로 인해 빠르게 어려움을 겪을 수 있습니다. 당신은 그들이 무엇을 사고 싶은지 이미 알고 있는 사람들을 위해 적절한 수준의 제품 정보를 원할 뿐만 아니라 마지막 제품 세부 사항까지 모두 필요로 하는 쇼핑객의 요구를 충족해야 합니다. 정보를 계층화하여 두 가지 유형의 구매자를 모두 수용할 수 있습니다.

제품 페이지 콘텐츠 레이어링 해야 할 일

1. 페이지 상단이나 사진 옆에 짧은 제품 요약을 제공하십시오.
2. 사람들이 옵션을 선택하고 버튼을 클릭하는 "작업 영역"에 테두리 또는 음영 처리된 배경을 추가합니다.
3. 작업 영역 상단 근처에 주문 옵션 표시
4. 제품 페이지에 이동 경로가 있습니다.
5. 상품 이미지 및 CTA 영역 아래에 상품 상세, 리뷰, 데이터 등을 입력합니다.

제품 페이지 콘텐츠 레이어링 금지 사항

1. CTA 버튼 근처나 위에 큰 카피 블록을 놓습니다.
2. 누군가가 선택할 때까지 장바구니에 추가 버튼을 숨깁니다.
3. 클릭 한 번으로 가용성 정보를 확인하세요.
4. 누군가 장바구니에 추가 버튼을 클릭하면 미묘한 변화가 생깁니다. 사람들 은 "성공적으로 추가됨" 메시지를 놓칠 것입니다.

많은 WordPress 전자 상거래 테마에서 내가 본 일반적인 실수는 "장바구니에 추가" 버튼이 숨겨져 있다는 것입니다.

제품 페이지 이미지

큰 사진과 확대/축소는 구매자가 제품을 물리적으로 만지지 않고도 얻을 수 있는 가장 가까운 것입니다. 흐릿하고 품질이 좋지 않은 이미지는 제품의 품질도 좋지 않게 만듭니다. 더 크고 더 나은 제품 이미지가 전환율을 300% 이상 높인 이 사례 연구를 확인하십시오.

제품 페이지 이미지 해야 할 일

1. 흰색 배경에 큰 고해상도 사진을 사용하십시오.
2. 확대/축소 기능을 사용하여 사용자가 직접 세부 정보를 볼 수 있도록 합니다.
3. 사용자가 이미지 사이를 앞뒤로 스크롤할 수 있습니다.
4. 추가 이미지 또는 확대/축소 기능이 활성화되어 있다는 명확한 지침을 제공합니다.

제품 페이지 이미지 금지 사항

1. "라이프스타일" 이미지나 제품을 보여주세요. 제품만 보여주세요.
2. 로고, 워터마크 또는 배경으로 사진을 더럽히지 마십시오.
3. 자세한 내용이나 추가 사진을 보려면 이미지 팝업을 강제 실행합니다.

체크아웃 프로세스: 신뢰를 위해 구축

결제 프로세스는 단순하고 논리적이며 주의가 산만하지 않아야 합니다. 복잡하게 만들지 마세요. Macy의 장바구니 페이지는 많은 주요 사항을 확인합니다. 장바구니에는 이미지, 가격, 세금 및 개별 제품 페이지로 다시 연결되는 링크가 포함된 제품 세부 정보가 표시됩니다.

장바구니 페이지

결제 프로세스의 첫 번째 페이지는 장바구니 페이지입니다. 이 페이지는 구매 의도가 무엇인지 자세히 재확인합니다. 이것은 그들이 당신의 상점에 대한 자신감과 신뢰를 구축하는 데 도움이 됩니다. 잘 설계된 장바구니 사용 기간은 장바구니 포기를 줄이는 데 도움이 됩니다.

장바구니 페이지 할 일

1. 모든 것을 확인합니다. 제품, 크기, 색상, 수량, 가용성, 배송 날짜, 예상 배송.
2. 사용자가 장바구니에 있는 제품으로 직접 돌아갈 수 있도록 합니다.
3. 수량 변경이나 상품 삭제를 쉽게 하세요. 사용자가 수량을 0으로 변경하여 제품을 제거하거나 "제거" 버튼을 클릭할 수 있습니다.
4. 주문한 색상의 제품 사진을 보여주세요. 고객이 검은색 재킷을 주문했는데 계산대에서 파란색 재킷을 본다면 자신감을 잃습니다.
5. 계속 체크아웃 버튼을 눈에 잘 띄게 하되 사람들이 계속 쇼핑할 수 있도록 하세요.
6. 총 금액을 문 가격으로 표시하십시오.

Sopping Cart 페이지 프레젠테이션 Don's

1. 성급하게 신용카드나 이메일 주소를 요구합니다. 사람들이 무엇을 구매하는지 확인하게 하십시오.
2. 제품을 제거하기 위해 "업데이트" 버튼을 사용하지 마십시오.

등록 페이지

이것은 방문자로부터 정보를 얻어야 하는 중요한 순간입니다. 구매자가 계정을 만들지 않고도 결제할 수 있도록 합니다. 고객은 새로운 로그인과 비밀번호를 생성하고 기억해야 하는 것은 아니지만 계정 생성의 이점이 강조됩니다. 페이지의 간단한 레이아웃에 유의하십시오. 간단한 선택으로 인지 부하가 ​​줄어듭니다.

등록 페이지 할 일

1. 계정 생성의 이점을 강조하십시오.
2. 간단한 레이아웃을 사용합니다.
3. 2개 이상 질문하지 마세요.

등록 페이지 금지 사항

1. 사람들이 계정을 만들도록 합니다. 아무도 새로운 사용자 이름과 비밀번호를 기억하고 싶어하지 않습니다.
2. 성급하게 신용카드나 이메일 주소를 요구합니다. 사람들이 무엇을 구매하는지 확인하게 하십시오.
3. 제품을 제거하기 위해 "업데이트" 버튼을 사용하지 마십시오.

결제 페이지

구매자가 올바른 회사(귀하의 회사)로부터 올바른 제품을 주문하고 있다고 확신했다면 이제 파티를 시작할 때입니다.

사용자는 결제 프로세스를 시작하면 최대한 빨리 구매를 완료하고 싶어합니다. 그들이 당신을 도울 수 있도록 도와주세요. 방해 요소를 제거하고 프로세스를 최대한 쉽게 만드십시오. 주소를 다시 입력하게 하거나 양식 작성 방법을 추측하게 하지 마십시오.

체크아웃 페이지 할 일

1. 최소한의 필수 정보만 요청하십시오.
2. 기본 탐색을 "연락처" 탐색으로 교체합니다.
3. 결제 프로세스를 짧게 유지하고 단계를 명확하고 논리적으로 유지하세요.
4. 결제 과정에서 진행 상황을 표시합니다.
5. 사용자는 클릭 한 번으로 청구지 주소를 배송 주소로 사용할 수 있습니다.

체크아웃 페이지

1. 새로운 정보나 선택을 제시하십시오.
2. 사람들이 "가입"하거나 "회원이 되십시오."
3. 사람들이 동일한 정보를 두 번 다시 입력하게 합니다.

귀하의 사이트는 어떻게 쌓이나요?

긍정적인 쇼핑 경험을 만들기 위해 백만 달러가 있어야 하는 것은 아닙니다. 위의 대형 브랜드 중 Nielson Norman Group이 제안한 800개 이상의 지침을 충족하는 브랜드는 없습니다. 고객이 귀하처럼 귀하의 사이트를 알고 있다고 가정하지 마십시오. 이러한 기본 사항을 준수하면 Google과 고객이 귀하의 사이트를 좋아하고 귀하로부터 구매하게 될 것입니다.