[번역] 상품 상세 페이지(PDP) UX

※ 의/오역 있음, 문제 시 삭제합니다.

[상품 상세 페이지 레이아웃]

수평 탭 레이아웃의 단점
- 원하는 정보에 대한 불명확한 투자(탐색) 대비 수익
- 탐색에 방해
- 제목에 대한 오해
요약: 콘텐츠를 그룹핑하고 공간을 절약하는데 효과적이지만 탭에 숨겨져 있기 때문에 사용자가 정보를 예측하고 수집하는데 실패할 수 있다.

수평 탭 레이아웃의 대안
(1) 수직 축소 섹션
- 모바일에서 유리
- 충분히 설명할 수 있는 긴 제목
- 긴 페이지에서 오버 뷰와 숏컷 기능

(2) TOC(Table Of Contents) 제공
- 긴 페이지에서 오버 뷰와 숏컷 기능

PDP UX: Core Product Content Is Overlooked in ‘Horizontal Tabs’ Layouts (Yet 28% of Sites Have This Layout)

---

부제: '수평 탭' 레이아웃에 위치한 핵심 상품 콘텐츠는 간과됩니다 (하지만 28%의 사이트는 이러한 레이아웃을 사용한다)

언뜻 봤을 때At first glance, '수평 탭' 상품 상세 페이지(PDP) 레이아웃은 상품 페이지 콘텐츠를 그룹핑하는 효율적인 방법으로 보일 수 있습니다.

게다가, 구분된 탭에 콘텐츠를 숨김으로써, 상품 페이지는 더 짧아질 수 있습니다. 또는 절약된 공간은 다른 주요한featured 콘텐츠를 강조하는데 사용될 수 있습니다.

그러나, 대규모의 상세 페이지 사용성 테스트가 사용자의 27%는 숨겨진 콘텐츠를 간과한다는 것을 밝혔습니다reveals. 이는 심각한dire 결과를 낳을 수 있습니다.

'수평 탭' 레이아웃에 숨겨진 콘텐츠는 종종 사용자들의 구매 결정에 결정적입니다. 예를 들어, 사용자 리뷰, 스펙, FAQ, 교차상품, 매뉴얼 등. 이 테스트는 해당 콘텐츠에 정착하지 못하는 (그럼에도 적극적으로 찾아다니는) 몇몇 사용자들이 인식된perceived 정보 부족의 직접적인 결과로 인해 상품 탐색이나 사이트 이용을 중단할 것임을 보여줍니다.

이 글에서, 우리는 '수평 탭' 상품 페이지 레이아웃과 관련된 상세 페이지 사용성 연구 테스트 결과에 대해 논의할 것입니다.

• 사용자들이 '수평 탭' 레이아웃에서 콘텐츠 실수를 했을 때 일어나는 심각한 문제들
• 사용자들이 '수평 탭' 레이아웃을 발견하더라도 그 레이아웃은 충분한 정보의 단서를 제공하는데 실패하고, 오해하기 쉽고 탐색을 방해하기 때문에 여전히 문제를 일으킨다.
• 더 나은 성과를 낸다고 검증된 다른 상세 페이지 레이아웃

발견되지 않은 콘텐츠는 거기 없을 수도 있다

테스트를 진행하는 동안 대부분의 사용자들이 수평 탭에 숨겨진 콘텐츠를 찾았다는 사실을 기억해야 합니다. 이 그룹에게 탭은 페이지 내비게이션으로써 효율적으로 여겨졌습니다.

Bad "내가 놓치지 않는 한 말하지 않습니다It doesn’t say unless I’m missing it. 어딘가 분명 배송에 관한 무언가가 있을 것입니다." 한 사용자는 상세 페이지에서 배송에 대한 정보를 열심히 찾아본 후 말했습니다. 그녀는 그 답이 제공된 "배송&반품" 탭을 포함하여 수평 탭에 있는 콘텐츠를 완전히 간과했습니다. 게다가, 성분이 얼마나 중요한지 열심히 말했던 거에 비해, 그녀는 "성분" 탭의 콘텐츠를 탐색하지 않았습니다. 세포라에서 18%의 사용자들은 탭을 스쳐지나갑니다. 탭에 포함한 바로 그very 콘텐츠를 찾으려고 노력함에도 불구하고요.

Bad Crutchfield를 테스트하면서, 탭에 있는 바로 그 콘텐츠를 찾으려고 노력함에도 불구하고 사용자의 21%는 수평 탭을 스쳐지나갔습니다. (심지어 아이콘이 있었고, 이론적으로 그들의 가시성visibility을 높였지만) 게다가, 몇몇 사용자들은 늘어난 시간 동안에 "그저" 탭을 스쳐 지나갔습니다. 그리고 그들은 시작하자마자 자세한 정보의 부족에 대해 매우 명백히 불만을 표시했습니다.

그러나, 상세 페이지 테스트의 콘텐츠를 찾지 못한 27% 사용자들은 당연하게도 좌절하고 당황하고perplexed, 짜증을 냈습니다.

다음 테스트 동안 사용자들이 제품에 대한 결정을 내리기 위해 상품 이미지와 짧은 묘사 이상을 필요로 한다는 것이 몇번이고 입증되었습니다. 제품을 고민하는 사용자들은 스펙, 제품에 대한 풍부한 묘사, 리뷰, 그리고 심지어 매뉴얼과 다른 보조적인auxiliary 콘텐츠를 고려함으로써 더욱 자잘한granular 수준에서 상세 페이지에 빠져들 필요가 있었습니다. 그들이 이러한 콘텐츠를 발견할 수 없었을 때, 그들은 당황하거나 혼란스러운 채로 끝을 맺었습니다.

더 나아가면, 이는 사용자들이 그들이 보고있는 현재의 제품을 인식하는 방법뿐만 아니라 심지어는 그들이 사이트를 인식하는 방법에 대한 결과입니다.

Bad "나는 단지 숫자 (온도) 를 찾았습니다. 이는 침낭을 구입하는데 아주 중요합니다." 사용자는 REI를 분노에 가득차 그만두기 전에 이렇게 말했습니다. REI 사용자의 43%는 완전히 수평 탭을 스쳐 지나갔습니다. '스펙'과 '리뷰' 탭에서만 확인할 수 있는 정보를 열심히 찾아 헤맸지만.

만약 사용자들이 제품 정보를 찾을 수 없다면, 누군가는 단순하게 그들의 제품에 대한 충분한 정보를 이용할 수 없다고 추측할 것입니다. 만약 사용자 리뷰와 같은 정보가 아주 중요하다면, 궁극적으로 그들이 사이트를 떠나게 만들고 경쟁사에 가게 할 수 있습니다.

'수평 탭'에 의한 다른 문제들

게다가 탭을 간과하는 하위 그룹의 사용자의 심각한 문제는, 수평 탭 역시 다른 수많은 교차intersecting 문제들을 가진다고 관찰되기 때문입니다.

Bad 테스트 중, 한 사용자는 수평 탭에 숨겨진 콘텐츠에 의한 어려움을 말했습니다. "이것은 단지 하나의 카피 블록을 가진 웹사이트를 위해 사용되었습니다. 그리고 이제 웹사이트는 탭으로 구분하고 있고now websites are kind of tabbing it out, 그래서 나는 내가 그 속에 깊이 들어가기 전에 얼마나 많은 추가적인 정보가 이 탭에 있는지 알고 싶습니다." 콘텐츠가 축소collapsed 되었을 때, 사용자는 상세 페이지가 실제로 얼마나 되는지 가늠하기 어렵습니다.

Bad "나는 이 리뷰들을 볼 수 있습니다." 한 사용자가 첫 번째 이미지의 '리뷰' 탭을 누르며 말했습니다. 그러나 리뷰 섹션에서 콘텐츠를 발견할 수 없었습니다. 사용자는 실망했습니다: "그렇다면, 리뷰는 없는거네요. 나는 여기 있을거라고 생각했습니다."

Bad 디폴트 탭에서 제품 묘사를 훑어본 후, '스펙'과 '리뷰' 탭을 모두 고려한 사용자가 있습니다. (첫 번째 이미지에서 시선 데이터로 보여준) 그는 리뷰 섹션을 선택했고, 리뷰가 없었기 때문에 막다른 길에 도달했습니다. (두 번째 이미지)

불명확한 투자 대비 수익
'수평 탭'에 제품 페이지 콘텐츠를 숨기는 것은 사용자들이 각각의 섹션이 클릭할만한 '가치가 있는지' 알기 어렵습니다. 결과적으로, 몇몇 사용자들은 콘텐츠를 열기 위해 클릭하지 않을 것입니다. 비록 그들이 제품에 대해 갖고 있는 질문에 대한 답이 있는 콘텐츠를 보았더라도. 다른 사용자들은 콘텐츠를 열기 위해 클릭하지만, 오직 거기에 이용 가능한 콘텐츠가 없을 때 혹은 너무 빈약해서 유용하지 않을 때만or it’s too meager to be useful실망합니다.

Bad "'About 브랜드'는 나에게 그다지 흥미롭지 않습니다." 탭 콘텐츠를 탐색하지 않은 한 사용자가 말했습니다.

Bad Gilt에서 탭은 역시 스킵되었습니다. "나는 디자이너에 대해 관심이 없습니다. 단지 어떻게 생겼는지에 관심 있어요." "at a glance"나 "디자이너" 탭에 있는 콘텐츠를 전혀 탐색하지 않은 사용자가 말했습니다. 특히, "우연한 발견" 은 상품 페이지 레이아웃에서 더 낮게 발견되었습니다. 그 콘텐츠 섹션은 접혀있었고, 특히 '수평 탭'에 위치했습니다.

탐색에 방해Hindrance.
콘텐츠가 '수평' 레이아웃에 숨겨져 있을 때, 사용자가 그들의 구매 결정에 매우 중요한 역할을 할 수 있는 콘텐츠에 대해 "실패stumble" 하기 매우 어렵습니다. 예를 들어, 사용된 성분에 대한 충분한 묘사나 생산 윤리에 대한 논의 (사용자들이 제품 상세 페이지를 탐색하다가 발견되면 행복한 "우연한 발견"으로 여겨지는)

사용자들은 보려는 콘텐츠를 클릭하기 위해 열심히 골라야 합니다. 그들의 결정에 영향을 미치는 제목만 있는 경우 그들은 클릭하지 않는 경우가 많습니다.

Bad "Bose보다 더 별로입니다." 한 사용자가 Crutchfield에서 "디테일" 탭을 누른 후 말했습니다. 그는 "사용을 위한 팁" 에 대한 정보를 찾으려고 했습니다. 그러나 그 정보는 오직 "오버 뷰" 탭에서만 이용 가능했습니다. 이후 테스트 퍼실리에이터에게 "오버 뷰" 탭을 탐색했느냐고 물었을 때, 그녀는 콘텐츠를 발견하고 "모든 걸 바꾸었네요, 사실 더 많은 정보가 있었어요." 라고 말했습니다. 다른 사용자들도 비슷하게 제품 정보를 찾기 위해 "디테일" 탭에 갔습니다. (예를 들어, 스피커의 크기dimension을 찾으려고 할 때-이는 역시 오직 "오버 뷰" 탭에만 있었습니다.)

제목에 대한 오해
제품 상세 페이지 콘텐츠를 숨기면 섹션의 제목에 더욱 부담이 가중되며, 사용자들이 클릭하기에 충분히 유혹enticing적이고 설명적이어야 합니다.

수평 탭은 서로의 옆에 위치해있기 때문에, 그들은 각자가 소비할 수 있는 폭에 있어 제한을 가집니다. 일반적으로, 이는 수평 탭 제목이 너무 짧아진다는 부작용을 낳습니다. 그 결과 사용자들은 오해하게 되고 하나에서 세개의 단어를 임의로 읽게 됩니다.

제한된 수평 탭의 폭으로 인한 문제를 해결하기 위해 (더 긴 제목을 제공하기 위해), 사이트는 탭 형태의 인터페이스 바깥에 제품 페이지 섹션을 위치시키려고 할지도 모릅니다.

그러나, 메인 상품 페이지 내비게이션의 바깥에 콘텐츠 섹션을 이동시키는 것은 테스트 기간 동안 매우 안 좋은 성과를 보였습니다. 이것은 몇몇 사용자들이 제품 페이지 콘텐츠의 "중심" 바깥에 위치한 콘텐츠를 간과함과 동시에, 반면 다른 사람들은 같은 상품 페이지에 두 가지 다른 내비게이션 패턴이 존재함으로 인해 발생한 복잡함이 증가하기 때문입니다.

대신 고려해 볼만한 다른 상품 페이지 레이아웃

테스트 기간동안, 두 상품 페이지 레이아웃이 상품 타입과 산업에 걸쳐 일반적으로 좋은 성과를 낸다는 것을 알았습니다. "수직 축소 섹션"과 "달라붙는 TOC를 가진 긴 단일 페이지" 레이아웃입니다.

'수직 축소 섹션' 레이아웃은 테스팅 동안 좋은 성과를 증명했습니다. 왜냐하면 이 레이아웃은 콘텐츠를 간과하는 하위 그룹의 사용자들에게 상품 페이지 섹션 오버 뷰를 제공하기 때문입니다.

"수직 축소 섹션"
수직 축소 섹션은 사용자들에게 상품 페이지 콘텐츠 오버 뷰 제공과 숨겨진 콘텐츠의 발견 가능성 보장을 포함해서 많은 이점을 제공합니다. 게다가 이것은 일반적으로 모바일 사이트에서 가장 좋은 성과를 낸다고 알려진 패턴입니다. 하지만 피해야할 두 가지 함정은Two pitfalls to avoid, (1)모든 상품 페이지 콘텐츠에 일관적으로consistently 패턴을 사용하지 않는 것 (2)각 섹션에 설명적이고 흥미를 유발하는 타이틀 제공에 실패하는 것.

제목에 대한 문제는 '수평 탭' 레이아웃과 동일합니다. 그러나 '수직 축소 섹션' 레이아웃은 그 문제가 덜합니다. 더 길수록, 더 설명적인 제목은 더 많은 정보를 제공할 수 있습니다.

결정적으로 테스트에서 '수직 축소 섹션'은 오직 8%의 사용자가 콘텐츠를 스쳐 지나갔습니다. ('수평 탭'이 27% 였던 것에 비교하여)

충분한 디테일과 이러한 상품 페이지 레이아웃에 대한 더 깊은 논의를 위해 Baymard Premium의 가이드라인 751을 확인하세요.

Good Sears에서, 상품 페이지 상단에 있는 세 가지의 내비게이션 링크를 즉각적으로 포착한 대부분의 사용자들은 콘텐츠 섹션으로 연결되었습니다. 이것은 그들에게 즉각적인 페이지 콘텐츠의 오버 뷰를 제공함으로써 좋은 시작을 제공했습니다. 링크 역시 사용자들이 해당하는 콘텐츠 섹션으로 이동할 수 있게 함으로써 내비게이션의 숏컷 역할을 했습니다. 예를 들어 한 사용자가 먼저 이미지 갤러리를 탐색한 즉시, 곧바로 '리뷰'로 이동하고, '묘사'와 '스펙'으로 이동했습니다.

"달라붙는 TOC(Table Of Contents)를 가진 긴 단일 페이지"

출처: TISTORY에 Toc 적용하기 (https://goax.tistory.com/10#%EA%B2%B0%EA%B3%BC)

'수직 축소 섹션'과 유사하게, '달라붙는 TOC를 가진 긴 단일 페이지' 레이아웃은 사용자에게 페이지 콘텐츠의 좋은 오버 뷰를 제공합니다. 게다가 지속적으로 보여지는 TOC는 사용자가 페이지 스크롤 다운을 하더라도 쉽게 다른 섹션으로 접근할 수 있는 링크를 제공합니다.

더 나아가서, 만약 사용자가 달라붙는 TOC를 잘못 놓치는 일이 생겨도 (거의 그렇지 않지만, 오직 7% 의 사용자가 상품 페이지에서 TOC를 스쳐 지나갔다), 디폴트로 모든 섹션이 확장되어 있다는 사실은 좋은 폴백fallback을 제공합니다. 사용자들은 페이지 스크롤 다운 시 섹션들을 보게 될 것이기 때문입니다.

(주목: TOC가 없는 "긴 단일 페이지" 레이아웃은 시각적인 콘텐츠를 주로 전달하는 단순한 제품의 경우에만 좋은 성과를 낸다고 밝혀졌습니다. Premiun의 가이드라인 757을 확인하세요.)

충분한 디테일과 이러한 상품 페이지 레이아웃에 대한 더 깊은 논의를 위해 달라붙는 TOC 레이아웃에 대한 가이드라인과 Baymard Premium의 달라붙는 TOC 레이아웃의 충분한 디테일 가이드라인을 확인하세요.

사용자가 상품 페이지 콘텐츠를 찾을 수 있도록 확신시키기

Bad B&H Photo의 '수평 탭' 레이아웃에 숨겨진 섹션을 발견하는데 실패한 사용자들은 스펙, 비교 기능, 리뷰, Q&A, upsells, 교차 상품 등을 포함한 콘텐츠의 가치를 놓칠지도 모릅니다. B&H가 각 섹션에 수많은 리뷰와 Q&A를 제공함으로써 어느 정도to some extent 정보 문제를 해결하려고 시도했음을 주목해야 합니다. 하지만 이는 단순히 콘텐츠를 전반적으로 훑어보려는 사용자들에게는 도움이 되지 않을 것입니다.

28%의 사이트는 이 레이아웃을 사용하는 테스트 동안 밝혀진 문제에도 불구하고 여전히 '수평적 탭' 레이아웃을 사용합니다. 중요한 문제는 사용자의 대다수의 상위 그룹이 완전히 탭을 지나친다는 것입니다.

이 문제는 일반적인 사이트는 이러한 레이아웃을 완전히 피해야 한다는 사실을 보여줍니다.

특히 각 레이아웃에 대한 여러 구현 세부 정보를 준수한다고 가정할 때 "Sticky TOC가 있는 긴 페이지" 및 "수직 축소 섹션" 레이아웃에 더 나은 대안을 사용할 수 있다는 점을 고려할 때 더욱 그렇습니다.

핵심 상품 콘텐츠에 대해 더 높은 발견성을 가지는 레이아웃을 채택하는 것은 사용자들이 이러한 결정적인 콘텐츠를 찾아낼 수 있음을 보증하는데 도움이 될 것입니다. 그리고 그들은 다른 곳을 찾아보기로 결정하지 않을 것입니다.