상품 상세 페이지 내에서 하위 페이지 사용을 피하십시오
Mobile UX
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2020년 11월 2일의 기사입니다)
모바일 상품 페이지에서 사용할 수 있는 콘텐츠의 양으로 인해 많은 사용자가 방향 감각을 유지하는 것이 쉽지 않습니다.
대규모 모바일 사용성 테스트 중에 이 문제를 완화하기 위해 일부 사이트에서 일부 상품 페이지 콘텐츠를 하위 페이지에 배치했습니다.
그러나 상품 페이지 정보에 대해 "하위 페이지"를 사용한 사이트에서 테스트 중 일부 사용자는 이 정보를 찾을 수 없었고 정보를 찾은 다른 사용자는 방향 감각을 유지하거나 상품 페이지 "메인"으로 다시 탐색하는 데 어려움을 겪었습니다.
그러나 최신 모바일 벤치마크에 따르면 모바일 사이트의 26% 가 일부 상품 페이지 콘텐츠에 대해 하위 페이지를 사용하는 것으로 나타났습니다.
사용자가 상품 페이지에서 중요한 정보를 찾지 못하면 일부 사용자는 자신의 요구 사항을 충족하지 못할 것이라고 잘못 생각하고 포기할 것입니다.
이 기사에서는 모바일 상품 페이지의 하위 페이지에 대한 모바일 리서치 결과를 다룹니다.
하위 페이지가 상품 페이지 정보를 구성하는 데 있어서 매력적인 방법으로 보이는 이유
상품 페이지에 하위 페이지의 구성을 피해야 하는 이유
하위 페이지가 정보 탐색에 있어서 어려운 이유
"아코디언 섹션"을 사용해 문제를 해결하는 방법
모바일 상품 페이지의 딜레마 - 많은 콘텐츠, 적은 공간
모바일 상품 페이지에는 종종 Sephora에서 볼 수 있는 것처럼 풍부한 정보가 포함되어 있습니다. 이는 액세스 및 탐색이 쉬울 경우 사용자에게 좋습니다.
상품 페이지 하위 페이지는 모바일 상품 페이지에 콘텐츠를 제공하는 딜레마를 해결하기 위한 시도입니다.
사용자가 필요한 상품 세부 정보를 얻을 수 있도록 충분한 콘텐츠가 제공되어야 합니다.
상품 페이지에 직접적으로 너무 많은 콘텐츠를 제공하면 사용자가 지칠 수 있습니다.
첫째, 사용자가 구매 결정을 내리는 데 도움이 될 수 있는 모든 콘텐츠(이미지, 비디오, 리뷰, Q&A, 설명서, 상품 하이라이트 등)를 제공해야 한다는 점에 유의하는 것이 중요합니다.
우리가 진행한 테스트에서는 사용자가 특히 구매 결정을 내릴 준비가 될 때 가장 유용한 콘텐츠에 집중하고 올바른 콘텐츠가 구매 결정의 핵심 요소로 종종 관찰된다는 것을 일관되게 보여주었습니다.
상품(예: "냉장고가 키친 공간에 잘 맞을지에 대한 확신이 없었지만 영상 콘텐츠를 통해 잘 맞을 것이라고 확신할 수 있었습니다.")
따라서 금방 지칠지도 모르는 사용자를 두려워하여 모바일 상품 페이지에서 콘텐츠를 생략하는 것은 결코 좋은 생각이 아닙니다.
하지만 딜레마의 두 번째 부분은 해결되지 않은 채로 남아 있습니다. 사용자를 지치게 하지 않고 모든 관련 콘텐츠를 제공하는 방법입니다.
모바일 상품 페이지에 "이건 너무해" 또는 "여기에 너무 많은 것이 있어... 내가 원하는 것을 찾을 수 없어"와 같은 사용자의 의견이 일반적이기 때문에 사용자가 지치는 것은 실제 존재하는 리스크입니다.
이러한 사용자 중 일부는 콘텐츠가 표시되는 방식에 압도되어 모바일 상품 페이지를 확인을 포기하기도 합니다.
모바일 벤치마크를 한 사이트의 26%는 이 딜레마를 해결하기 위해 "기본"상품 페이지에 일부 상품 페이지 콘텐츠를 제공하고 나머지는 하위 페이지에 숨깁니다.
이론적으로 하위 페이지를 제공함으로써 이 문제를 해결할 수는 있습니다. 숨겨진 콘텐츠에 관심이 없는 사용자에게 방해하지 않음과 동시에 추가 정보를 보기 위한 사용자는 링크를 탭 하여 해당 콘텐츠를 확인할 수 있기 때문입니다.
그러나 실제로 테스트하는 동안 2가지 심각한 문제가 발생했습니다.
문제 1: 콘텐츠를 찾지 못하면 무용지물입니다.
“이런! 그들은 많은 정보를 제공하지 않습니다.” Newegg의 테스트에서 상품에 대한 추가 정보를 원했지만 하위 페이지의 정보를 보기 위해 화살표를 택할 생각은 하지 않았습니다. 그녀는 이것 때문에 상품 구매를 포기했습니다.
"별점을 찾고 있었어요." Amazon의 테스트도 마찬가지로 화살표를 탭 하여 그가 찾고 있던 별점이 포함된 리뷰의 하위 페이지를 보지 않았습니다.
테스트 중에 모바일 하위 페이지로 인해 발생한 가장 심각한 문제는 일부 사용자가 하위 페이지의 링크를 놓친 것이었습니다.
이것은 그들이 사용할 수 있는 유일한 콘텐츠가 상품 페이지의 "메인 페이지의 콘텐츠"라고 생각했기 때문에 매우 부정적인 콘텐츠 경험을 얻었습니다.
많은 사람들이 상품 콘텐츠에 대해 궁금한 점을 해결하지 못하거나 상세 내용을 알 수 없어서 이 시점에서 포기하는 경우가 발생했습니다.
또한 상품 세부 정보 페이지 내에 하위 페이지를 포함하는 개념은 20년 이상 데스크톱에 존재해 온 "하나의 상품 = 하나의 상품 세부 정보 페이지"라는 웹 규칙과 어긋난다는 점을 지적할 가치가 있습니다.
서브페이지를 사용하는 많은 사이트는 모바일 구현을 위해서만 서브페이지를 사용합니다. 여기에서 Adidas가 상품 세부 정보 설명 섹션(첫 번째 이미지)을 위해 모바일에서 하위 페이지를 사용하지만 데스크톱에서는 사용하지 않는 방법(두 번째 이미지)에 주목하세요.
또한 서브페이지를 사용하는 많은 사이트는 모바일 구현에서만 사용합니다. Newegg, Staples 및 Adidas와 같은 모바일 서브페이지가 있는 테스트 사이트 4개 중 3개는 동일한 상품 페이지 섹션에 대해 서브페이지 구현을 사용하지 않았습니다. 즉 플랫폼 간에 일관되지 않은 경험을 제공합니다.
이것은 또한 하위 사용자 그룹이 단순히 하위 페이지를 기대하지 않기 때문에 지속적으로 하위 페이지를 간과하는 이유에 기여하는 요인일 수 있습니다.
문제 2: 하위 페이지에서 "뒤로" 이동하면 종종 방향 감각이 상실됨
“앗. 잊어버렸어! 99달러였나?… 피험자는 '뒤로'를 눌렀을 때 이전에 봤던 의자로 돌아가서 방향을 잃지 않았으면 좋겠다"라고 말했다. Staples의 사용자는 하위 페이지(첫 번째 이미지)의 리뷰를 보고 마음에 드는 의자를 찾았습니다. 그러나 브라우저의 "뒤로" 화살표를 탭한 후 그녀는 상품 목록(두 번째 이미지)으로 돌아갔습니다. 게다가 그녀는 상품 목록의 맨 위로 돌아가서 방금 탐색하던 목록 항목을 다시 찾아야 했습니다. 그녀가 하위 페이지(첫 번째 이미지, 왼쪽)에서 나가기 위해 대신 "X"를 탭 했다면 그녀는 기본 상품 페이지로 돌아갔을 것입니다.
“아, [상품 목록]에서 다시 생각하게 하는 것이 짜증 나네요. 상품의 스펙을 보고 싶었습니다. 다시 살펴봐야 하는 것은 매우 성가신 일입니다… [상품 목록]으로 이동되니까 [상품 페이지 하위 페이지]를 클릭할 가능성을 줄여줄 것입니다.” Adidas의 한 사용자는 사이트에서 제공하는 "뒤로" 버튼을 사용하여 상품 페이지로 돌아가지 않고 대신 "뒤로" 버튼을 사용하여 비슷한 문제를 겪었습니다. 이것은 그를 상품 목록으로 되돌려 놓았습니다. 그는 3분 이상 동안 6번 반복했습니다.
테스트 중에 발생한 두 번째 문제는 사용자가 모바일 상품 페이지 하위 페이지에서 기본 상품 페이지로 다시 이동하는 데 문제 가 있다는 것입니다.
특히, 테스트 중에 여러 사용자 가 사이트에서 제공한 "뒤로" 버튼(사용 가능한 경우)을 놓쳤습니다. 이 링크는 상품 페이지 하위 페이지에서 상품 페이지 메인 페이지로 돌아가는 "올바른" 방법이었지만 디바이스의 "뒤로" 버튼을 사용했습니다.
그러나 "뒤로"를 택한 후 많은 사용자가 기본 상품 페이지로 돌아가지 않고 "2단계 뒤인 상품 목록”으로 돌아가게 됩니다.
설상가상으로 2단계 뒤로 보내는 것 외에도 때때로 사용자는 상품 목록의 맨 위로 돌아가는 바람에 탐색했던 상품을 다시 찾아야 했습니다.
따라서 하위 페이지는 모바일 상품 브라우징 경험에 탐색 복잡성을 추가하게 됩니다.
많은 사용자의 최종 결과는 상품 목록, 상품 페이지 및 상품 페이지 하위 페이지를 탐색하려고 할 때 방향 감각 상실과 좌절감을 느끼게 된다는 것입니다.
상품 페이지 콘텐츠를 많이 제공하는 경우 "아코디언 형식"을 사용하는 것을 권장합니다.
이점은 다음과 같습니다.
대부분의 콘텐츠가 접혀 있으므로 정보 양에 압도되는 것을 완화할 수 있습니다.
섹션 헤더를 스캔하고 원치 않는 콘텐츠를 축소할 수 있으므로 페이지 개요를 설정하고 유지하는 것이 더 쉽습니다.
섹션은 "가로 탭 형식"에 비해 간과될 가능성이 적습니다.
각 축소된 섹션 헤더는 자체 줄에 있으므로 헤더에 포함된 상품 정보의 유형에 대한 추가 정보를 포함할 수 있습니다.
페이지 길이가 많은 "One Long Page" 레이아웃의 길이보다 잘 관리되므로 사용자가 바닥글에 매우 쉽게 접근하거나 교차 판매할 수 있습니다(접힌 섹션 아래에 배치되는 경우).
Under Armer는 주 상품 페이지 콘텐츠에 "아코디언 형식" 레이아웃을 사용합니다. 사용자가 콘텐츠 유형에 대한 개요를 얻고 "크기 차트" 섹션 다음에 "적합" 섹션이 있음을 확인할 수 있는 적절한 기회를 얻을 수 있는 방법에 주목하십시오.
따라서 "아코디언 형식"의 레이아웃이 제공하는 주요 이점은 전반적인 단순성입니다. 주요 상품 페이지 콘텐츠는 일반적으로 1개 또는 2개의 뷰포트에 표시되며 일반적으로 콘텐츠에 액세스 하는 방법 또는 원하는 경우 숨기는 방법이 명확합니다.
그러나 "아코디언 형식" 레이아웃이 사용자가 잘 이해하기 위한 참고사항이 있습니다.
레이아웃은 모든 주요 상품 페이지 섹션에 일관되게 사용해야 합니다.
섹션 제목은 정보를 제공하고 쉽게 해석되어야 합니다.
레이아웃은 모든 주요 상품 페이지 섹션에 일관되게 사용해야 합니다
Overstock의 "아코디언 형식"은 일관되지 않게 구현되고 광고 및 교차 판매로 나뉩니다. "아코디언 형식" 레이아웃이 제공하는 이점이 제대로 구현되지 않으면 큰 리스크가 발생합니다.
많은 사용자가 페이지 구조를 직관적으로 이해하고 내부 화하지 못하고 콘텐츠 탐색 및 상품 세부 정보 탐색이 어렵다는 것을 느끼게 될 것입니다.
"아코디언 형식"의 일관된 구현은 사용자가 디자인 패턴을 빠르게 이해하는 능력의 핵심입니다.
"아코디언 형식"이 부분적으로만 구현된 경우(예: 상품 설명이 "아코디언 형식"으로 구현되었지만 리뷰가 하위 페이지에 있는 경우) 사용자가 페이지 구조를 빠르게 내부 화하기가 더 어렵습니다.
특히 주요 상품 페이지 섹션 은 모두 "아코디언 형식"으로 구현되어야 합니다. 섹션 제목은 유익하고 쉽게 해석되어야 합니다.
상품 설명
사용자 후기
Q&A
배송 정보
명세서
기타 모든 상품 유형별 콘텐츠(예: "성분", "핏" 등)
섹션 제목은 정보를 제공하고 쉽게 해석되어야 합니다
Under Armour에서 "아코디언 형식"의 제목은 이해하기 쉽습니다. "상품 DNA"도 목록의 첫 번째이고 기본적으로 확장되므로 문제없이 대다수의 사용자가 이해할 수 있습니다("상품 설명"과 같은 보다 표준적인 제목을 사용하여 모든 의심을 제거할 수 있습니다).
"아코디언 형식"의 콘텐츠는 일반적으로 숨겨져 있기 때문에 사용자가 섹션을 열기 전에 섹션에 어떤 콘텐츠가 포함되어 있는지 알 수 있도록 유익한 섹션 제목을 갖는 것이 중요합니다.
또한 사용 가능한 콘텐츠 수를 제공하는 것이 도움이 되는 섹션의 경우(일반적으로 리뷰 및 Q&A, 매뉴얼이나 비디오와 같은 잠재적으로 다른 보조 콘텐츠가 있음에도 불구하고) 섹션 제목에도 제공해야 합니다.
마지막으로 동적 콘텐츠가 포함된 섹션의 경우 섹션 제목도 동적이어야 한다는 점에 유의하세요.
사용자가 찾고 있는 모든 콘텐츠를 찾도록 지원
Hayneedle은 효과적인 분리를 통해 상품 페이지의 과도한 정보 제공을 피하는 동시에 하위 페이지도 피해가고 있습니다.
하위 페이지의 배치로 인해 사용자의 하위 그룹이 완전히 누락된 상품 페이지 콘텐츠의 심각한 문제를 고려할 때 상품 페이지 섹션에 하위 페이지를 사용하지 마십시오.
특히, 주요 상품 페이지 섹션은 모두 메인 상품 페이지에 있어야 하며, 예를 들어, 매장 위치나 특별 행사 안내가 서브 페이지로 구현된다면 그나마 괜찮습니다.
대신 모바일 상품 페이지에 제공할 콘텐츠가 많을 경우 "아코디언 형식"을 사용하는 것을 고려해 보십시오. 모든 주요 상품 페이지 섹션에 대해 디자인 패턴을 일관되게 사용하고 섹션 제목을 쉽게 이해하고 해석할 수 있도록 하십시오.
일부 상품 페이지 콘텐츠에 상품 페이지 하위 페이지를 사용하는 데 내재된 분명한 함정에도 불구하고 사이트의 26%가 이 디자인 패턴을 사용하므로 사용자 중 하위 그룹이 중요한 상품 페이지 콘텐츠를 절대 찾을 수 없습니다.
가장 매력적이고 유익한 상품 페이지 내용을 일부 사용자가 완전히 간과하기 때문에, 이는 사용자를 포기하는 결과를 초래할 수 있으며, 더 나아가 자원 낭비이기도 합니다.
