제품 상세 페이지를 12가지 항목으로 점검하고, 각 항목마다 합격 기준을 설정하세요

대부분의 제품 페이지 리뷰는 의견 목록으로 끝납니다. 누군가는 갤러리가 비좁다고 하고, 다른 누군가는 탭 기능을 옹호하며, 결국 아무런 결론도 내려지지 않습니다. 하지만 이 도구는 12가지 항목을 평가하는 채점 기준표를 제시합니다. 각 항목은 0점에서 2점까지 점수가 매겨지며, 최종 점수는 24점 만점으로 산출됩니다. 두 명의 평가자가 독립적으로 작업할 경우, 1~2점 이내의 오차 범위 내에서 일치해야 합니다. 이 기준표는 전자상거래 제품 상세 페이지를 담당하는 UX 및 CRO 팀을 위해 설계되었습니다. Baymard Institute는 미국과 유럽의 155개 이상의 주요 웹사이트를 대상으로 벤치마킹을 진행했습니다. 모바일 사이트의 62% 제품 페이지 UX에서 "보통 또는 그 이하" 수준의 평가를 받았으며, 만점을 받은 곳은 없었습니다. 귀하의 보고서에도 평가 결과가 있다고 가정해 보겠습니다. 문제는 어떤 부분이 문제이며, 얼마나 심각한가 하는 것입니다.

점수 계산 방식

각 항목은 페이지를 열기 전에 표시된 기준점에 따라 점수가 매겨집니다. 2 즉, 모바일과 데스크톱 모두에서 해당 기준을 충족한다는 의미입니다. 1 부분적으로 또는 하나의 중단점에서만, 0 그것이 실패하거나 존재하지 않는다는 것을 의미합니다.

감사를 실시하십시오 이 템플릿한 가지 제품이 아니라, 서로 다른 방식으로 스트레스를 주는 세 가지 SKU를 선택하세요. 간단한 제품, 다양한 옵션이 있는 제품, 그리고 재고가 부분적으로 부족한 제품 등을 선택하고, 각 항목별로 가장 낮은 점수를 받은 제품을 고르세요. 쉬운 SKU에만 효과적인 PDP는 제대로 작동하는 PDP가 아닙니다.

밴드 : 20-24템플릿 자체는 문제가 없으며, 변환 문제는 다른 곳에 있는 것 같습니다. 14-19다른 테스트를 실행하기 전에 여기에서 0을 수정하세요. 0-13템플릿이 병목 현상을 일으키고, 그 위에 요소를 테스트하면 제대로 된 결과가 나오지 않을 것입니다.

첫 번째 관문: 제품이 무엇인지 이해할 수 있을까요?

확인 1 - 이미지 설정 및 확대/축소. 필수 조건: 모든 면을 포함하는 최소 5장의 이미지, 재질 수준의 디테일 샷 1장, 크기를 가늠할 수 있는 이미지 1장, 그리고 세부 사항을 확인할 수 있는 확대 이미지 1장. 베이마드(Baymard) 조사에 따르면, 조사 대상의 25%는 해상도나 확대 이미지가 부족하고, 37%는 크기를 고려한 이미지를 전혀 제공하지 않는 것으로 나타났습니다. 특히 크기 비교는 많은 팀이 간과하는 부분이지만, 실질적인 성과를 내는 핵심 요소입니다.

점검 2 - 모바일에서의 이미지 검색 가능성. 임계값: 추가 이미지는 사용자가 스와이프하여 존재를 확인하기 전에 썸네일이나 위치 표시기로 표시됩니다. 모바일 사이트의 76%는 썸네일을 제공하지 않으므로, 사용자가 직접 추측하지 않는 한 갤러리를 볼 수 없습니다.

3단계 - 설명 및 사양의 가독성 확인. 기준점: 설명은 해당 카테고리에 대해 지원 메일함에 가장 많이 들어오는 다섯 가지 질문에 대한 답변을 제공하고, 사양은 장황한 설명이 아닌 쉽게 훑어볼 수 있는 속성 목록으로 표시됩니다. Baymard는 사이트의 50%가 사양의 가독성을 제대로 갖추지 못했다고 평가합니다. 이 다섯 가지 질문은 워크숍이 아닌 티켓이나 사이트 검색에서 가져오세요.

2번 관문: 그들은 올바른 선택지를 고를 수 있을까요?

확인 4 - 변형 제어 기능이 표시됩니다. 임계값: 크기, 색상 및 기타 옵션은 사용자가 열어야 하는 드롭다운 메뉴가 아닌, 보이는 버튼이나 견본으로 표시됩니다. 웹사이트의 57%는 크기 선택에 버튼을 사용하지 않습니다. 닫힌 드롭다운 메뉴는 옵션과 사용 불가능한 옵션을 숨깁니다.

점검 5 - 변형 데이터 동기화. 임계값: 옵션을 선택하면 가격, 이미지, 재고 상태 및 배송 예상일이 동시에 업데이트되며 화면에 오래된 값이 표시되지 않습니다. 사이트의 28%는 옵션 간 데이터 동기화에 실패합니다. 이는 일반적으로 디자인 문제가 아니라 프런트엔드 아키텍처 문제를 나타냅니다.

체크 6 - 사용 불가능한 변형 처리. 기준: 품절된 상품은 명시된 사유와 함께 계속 표시되고 비활성화되며, 페이지에는 다음 조치 중 하나(재입고 알림, 가장 유사한 대체 상품, 예약 주문)가 제공됩니다. 웹사이트의 68%는 일시적으로 품절된 상품을 사용자가 구매할 수 없도록 되어 있습니다. 구매 옵션을 조용히 삭제하는 것은 최악의 경우입니다. 사용자는 해당 사이즈의 재고 여부를 알 수 없기 때문입니다.

3번 관문: 그들은 실제 총액을 계산할 수 있을까요?

이 단계는 가장 많은 수익과 가장 많은 규제 위험을 수반합니다. Baymard는 50개의 연구를 종합하여 평균 장바구니 포기율을 다음과 같이 추정했습니다. 70.22%명시된 이유 중 추가 비용이 너무 높다는 점이 40%를 차지합니다. 이러한 비용의 대부분은 제품 개발 페이지(PDP)에서 확인할 수 있으며, 결제 시점에 공개됩니다.

장바구니에 담기 전에 7번 항목 - 배송비와 배송 예정일을 확인하세요. 임계값: 사용자의 예상 위치를 기준으로 예상 배송비와 도착 예정일을 표시하고, 사용자가 직접 조작하지 않아도 볼 수 있도록 해야 합니다. 사이트의 43%는 예상 배송비를 표시하지 않습니다. 배송비가 주소에 따라 달라지는 경우, 기본 지역을 기준으로 한 예상 배송비를 표시하고 레이블을 지정해야 합니다.

점검 8 - 가격 표시 및 할인 참조. 기준: 표시된 총액에는 모든 세금이 포함되어야 합니다. 모든 "과거/현재" 비교에는 타당한 기준 가격이 사용되어야 합니다. 할부 금액이 표시되는 경우, 총 가격, 할부 횟수 및 할부 금액이 읽기 쉬운 크기로 함께 표시되어야 합니다.

두 가지 규칙이 여기서 만납니다. EU에서는 지침 98/6/EC 제6a조에 따라 가격 인하를 발표할 때 이전 가격을 명시해야 하는데, 여기서 이전 가격은 최소 30일 전까지 적용되었던 최저 가격으로 정의됩니다. 터키의 광고 규정도 동일한 30일 최저 가격 원칙을 적용하며, 추가적으로 할부 가격 표시를 규제합니다. 이 조항은 단순한 형식적인 규정이 아닙니다. 규제 당국이 할부 결제를 특별히 명시한 이유는 터키 전자상거래에서 할부 결제가 매우 일반적이기 때문이며, 따라서 제품 상세 페이지(PDP)에서 할부 금액을 모달 창 뒤에 숨기는 것은 구매자가 선택하는 금액을 가리는 결과를 초래하기 때문입니다.

체크 9 - 1회 거래 내 반품 정책. Threshold: 반품 기간 및 반품 배송비 부담 주체 정보가 바닥글이 아닌 탭 한 번으로 바로 접근 가능해야 합니다. 웹사이트의 44%는 제품 페이지에 반품 정책을 표시하거나 링크하지 않으며, 불만족스러운 반품 정책은 사용자 이탈의 주요 원인 중 하나입니다.

4번 게이트: 누구나 실제로 조작할 수 있나요?

체크 10 - 목표 크기. 기준: 모든 인터랙티브 컨트롤(색상 견본, 수량 조절 버튼, 갤러리 화살표, 리뷰 필터)은 최소 24x24 CSS 픽셀 크기이거나, 중심이 24픽셀인 원이 인접한 컨트롤과 겹치지 않도록 배치되어야 합니다. 이는 WCAG 2.2 SC 2.5.8, 레벨 AA에 해당합니다. 색상 견본과 수량 조절 버튼은 이 기준을 충족하지 못하는 경우가 가장 많습니다.

점검 11 - 상호작용 반응성. 임계값: PDP 템플릿의 현장 데이터에서 75번째 백분위수에 해당하는 다음 페인트와의 상호 작용 시간이 200ms 이하이면 성능이 불량한 것으로 간주됩니다. 실험실 실행 데이터가 아닌 현장 데이터를 사용하십시오. 변형 전환 및 갤러리 상호 작용은 PDP INP 성능이 저하되는 부분이며, 합성 테스트에서는 이러한 부분을 다루지 않습니다.

점검 12 - 증거의 질을 검토하십시오. 기준: 평점 분포 요약이 제공되고, 리뷰 이미지를 여러 리뷰에서 볼 수 있으며, 리뷰 수집 방법과 검증 여부가 명시되어 있어야 합니다. 이 기준을 충족하는 사이트의 65%는 평점 분포를 잘못 파악하고 있습니다. 5점과 1점으로 이루어진 4.4점짜리 제품과 4점과 5점으로 이루어진 4.4점짜리 제품은 완전히 다른 제품입니다.

채점표

#	체크	합격 기준 (점수 2점)	문
1	이미지 설정 및 확대/축소	5개 이상의 이미지, 그중 하나는 실제 크기이며, 확대하면 더 자세한 내용을 볼 수 있습니다.	알다
2	모바일 이미지 검색 기능	썸네일 또는 위치 표시기가 표시됩니다	알다
3	제품 설명 및 사양	자주 묻는 질문 5가지에 대한 답변; 사양 스캔 가능	알다
4	변형 제어	옵션은 버튼 또는 색상 견본으로 표시됩니다.	선택
5	변형 동기화	가격, 이미지, 재고, 배송 정보가 동시에 업데이트됩니다.	선택
6	사용 불가능한 변형	표시됨, 비활성화됨, 사유 제시됨, 다음 조치 하나	선택
7	배송비 및 배송일	둘 다 상호작용 없이 PDP에서 추정됨	총 비용
8	가격 및 할인 참고 자료	세금 포함; 30일 최저 금리 기준; 할부 3종 세트	총 비용
9	반품 정책	창구와 누가 지불할 것인가, 단 한 번의 상호 작용으로 결정됩니다.	총 비용
10	목표 크기	24x24 CSS 픽셀 또는 이와 동등한 간격(WCAG 2.2 AA)	운영
11	응답	필드 INP p75는 200ms 이하입니다.	운영
12	증거를 검토하세요	배포 현황 표시, 이미지 열람 가능, 컬렉션 공개	운영

풀이 예시

위의 실패 패턴을 바탕으로 구성된 예시적인 합성 이미지이며, 실제 고객 감사 결과를 반영한 것은 아닙니다. 중견 의류 소매업체, 3개 SKU, 각 점검 항목별 최저 점수.

이해도: 2 + 0 (무작위 스와이프) + 1 (설명문으로 된 사양) = 3/6. 선택도: 2 + 1 (배송 예상일 미기재) + 0 (사이즈 정보 사라짐) = 3/6. 총 비용: 0 + 1 (할부 총액이 모달 창에만 표시됨) + 1 (반품 정보가 바닥글에 표시됨) = 2/6. 작동도: 0 (20px 크기의 색상 견본) + 1 (INP 페이지 75, 340ms) + 1 (배송 정보 없음) = 2/6.

총합: 10/24. 그것은 "헤드라인 테스트 실행"이 아닙니다. 배송 예상일, 사라지는 사이즈, 견본의 목표 사이즈, 모바일 갤러리라는 네 가지 핵심 요소에 초점을 맞춘 템플릿 수정 작업입니다. 이 중 세 가지는 디자인 작업이 아니라 엔지니어링 티켓에 해당하며, 실제 발견 사항은 대개 디자인 작업에 있습니다. [내부 데이터 필요: 감사 대상 PDP 전반에 걸친 Switas의 중간 게이트 점수 및 게이트 3 수정 후 전환율 변화.]

점수를 어떻게 처리해야 할까요?

페이지의 어떤 항목이든 테스트하기 전에 모든 0을 수정하세요. 오류가 있는 단계에서 실행되는 실험은 가설이 아닌 오류 자체를 측정하는 것입니다. 1은 테스트 백로그를 나타냅니다. 실제 오류이지만 수정 가능성은 열려 있습니다. 수정 사항이 적용된 후 동일한 세 가지 SKU에 대해 다시 점수를 매기세요.

이 평가 기준이 무너지는 부분

Gate 3는 실물 상품 소매업에 맞춰 설계되었습니다. 디지털 상품, 구독 서비스, 여행 상품, 맞춤형 B2B 제품은 결정적인 속성이 다르며, Gate 3는 이러한 속성을 반영하지 못합니다. 예를 들어 호텔이나 항공편 페이지는 날짜에 따라 가격이 변동될 수 있는데, Gate 3는 이러한 변화를 모델링하지 않습니다. 또한, 사용자 확보 측면도 고려하지 않습니다. 판매자 등록 자격에 중요한 구조화된 데이터의 완전성을 평가하는 기능이 없습니다. 게다가, 특정 사용자가 망설인 이유가 아니라, 명시된 기준을 충족하지 못한 항목만 알려줍니다. 이는 사용자 경험 테스트가 아닌, 의견 수렴 과정을 대체하는 것입니다.

FAQ

이 감사는 얼마나 걸리나요?

임계값이 합의되면 SKU당 약 40분 정도 소요되므로 템플릿 하나를 만드는 데 대략 2시간 정도 걸립니다. 이 시간의 대부분은 제품 유형에 따라 배송 및 할부 방식이 다르기 때문에 3단계 심사에 소요됩니다.

누가 운영해야 할까요?

두 사람이 동일한 세 가지 SKU에 대해 독립적으로 점수를 매긴 다음, 점수 차이가 1점 이상인 경우에만 점수를 일치시킵니다. 단일 평가자의 점수는 해당 평가자가 중요하게 생각하는 요소 쪽으로 치우치는 경향이 있습니다.

낮은 지지율이 PDP가 우리에게 손해를 끼치고 있다는 것을 증명하는 것일까요?

아니요. 이 표는 발표된 연구 결과를 바탕으로 도출된 기준치를 충족하지 못하는 단계를 보여줍니다. 수익 연결은 자체 퍼널 데이터를 기반으로 합니다. 표는 어디를 살펴봐야 하는지를 알려주는 것이지, 그 가치를 알려주는 것이 아닙니다.

이것은 접근성 감사와 어떻게 다른가요?

체크 10만 공식적인 적합성 기준입니다. 전체 WCAG 심사에는 키보드 조작, 포커스 순서, 대비 및 폼 레이블링도 포함됩니다. 체크 10은 접근성 심사가 필요하다는 신호일 뿐, 심사를 통과했다는 증거는 아닙니다.

저희 PDP는 마켓플레이스 또는 SaaS 플랫폼을 통해 제공됩니다. 이러한 방식이 여전히 유용할까요?

네, 범위를 좁혀서요. 모든 항목에 점수를 매긴 다음, 결과를 본인이 관리하는 부분(이미지, 설명, 사양, 리뷰 수집)과 플랫폼이 관리하는 부분으로 나누세요. 플랫폼이 관리하는 부분에서 0점이 나온 경우, 증거 자료를 첨부하여 공급업체와 논의하세요.

국내 판매만 하는 경우에도 터키의 가격 표시 규정이 적용되나요?

네, 판매처와 관계없이 30일 최저 기준 가격 및 할부 표시 요건을 포함하여 모든 판매처에 적용됩니다. EU 규정은 EU 내 판매 시에만 적용되며, 양쪽 모두에 판매하는 경우에는 더 엄격한 기준을 한 번만 적용하면 됩니다.

자체 카탈로그에서 실행하세요

이번 주에는 직접 제작한 PDP 템플릿에서 SKU 3개의 점수를 매겨 예상했던 수치와 일치하는지 확인해 보세요. 엔지니어링 티켓과 퍼널 데이터가 첨부된 제대로 된 분석 결과를 원하신다면, UX 감사에 대해 저희와 상담하세요.

제품 상세 페이지를 12가지 항목으로 감사하고, 각 항목에는 합격 기준이 있습니다.