제품 페이지에 영상을 배치하는 위치 및 방법
제품 페이지 영상에 대한 UX 연구
UX DAYS SEOUL설문 조사
항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.
예상 소요 시간 : 30초
설문조사 URL
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2019년 5월 14일의 기사입니다)
값비싼 영상 제작에 리소스를 투자하고 전자 상거래 사이트에 구현했는데 사용자가 영상을 시청하지 않는다고 상상해 보십시오! 그런데 영상을 시청하지 않는 이유가 보고 싶지 않기보다는 제품 페이지에서 찾을 수 없기 때문이라고 상상해 보십시오. 주요 전자 상거래 사이트의 35%가 잘못된 방법으로 제품 페이지에 영상을 배치하고 있습니다.
대규모 제품 페이지 사용성 테스트 중에 사용자의 41%가 제품 영상을 시청했습니다. 사용자의 59%는 영상 형식을 싫어하거나 매우 드물게 제품 영상을 시청하거나 영상을 시청하지 않았습니다. 그러나 영상을 찾은 사용자의 41%는 콘텐츠가 제품 페이지 경험에 큰 변화를 가져왔고 제품이 자신의 생활에 어떻게 영향을 받을지 상상하는 데 많은 도움이 되었습니다.
따라서 영상 콘텐츠는 제품 페이지에 큰 도움 이 될 수 있지만 사용자가 영상을 찾을 수 없다면 가치가 없는 콘텐츠가 됩니다. 사용성 리서치에 따르면 영상의 배치와 디자인은 검색 가능성에 큰 영향을 미쳤습니다.
이 기사에서는 사용자가 쉽게 찾을 수 있도록 제품 페이지에 영상을 배치하는 위치와 방법에 대한 연구결과를 살펴보겠습니다.
제품 페이지에서 영상을 배치할 위치
영상은 탐색에 있어서 중요한 역할을 하는데 중요한 것은 영상 으를 찾을 수 있어야 합니다.
제품 페이지의 이미지 갤러리에서 멀리 떨어진 곳에 영상이 배치되었을 때 일부 사용자는 테스트 중에 영상 콘텐츠를 찾는 데 어려움을 겪었습니다. 제품 페이지 아래에 있는 영상을 우연히 발견한 사용자는 다음과 같이 말했습니다. “많이 스크롤을 해야 하고 제가 전혀 예상하지 못했습니다.”
여기 Build에서 볼 수 있는 것처럼 영상이 이미지 갤러리 옆에(또는 일부로) 배치되지 않았을 때 일부 사용자는 영상을 찾는 데 어려움을 겪었습니다. 한 사용자가 테스트 중에 이미지 갤러리에서 영상을 찾지 못한 후 다음과 같이 말했습니다.
사용성 테스트에 따르면 사용자는 일반적으로 제품 이미지에 대한 보충 자료로 영상과 360° 보기를 보기 때문에 이미지, 영상, 360° 보기 및 유사한 시각적 콘텐츠가 제품 페이지에 함께 배치되기를 기대합니다. 따라서 사용자는 제품 페이지의 기본 제품 이미지 옆에 있는 영상을 찾을 것으로 기대합니다.
또한 테스트를 통해 제품 페이지 상단에 이미지 갤러리를 배치하는 웹 규칙이 사실상 사용자의 기대임을 확인했습니다. 테스트하는 동안 사용자는 제품 페이지를 방문할 때 거의 이미지 갤러리를 보았습니다. 따라서 여기에 영상이 있으면 검색 가능성이 크게 높아집니다.
동영상 및 360° 보기는 제품 페이지 상단에 배치되어야 하며, 제품 이미지 갤러리와 혼합되거나 그 옆에 배치되어야 합니다. (일부 영상이 아니라 모든 영상을 여기에 배치해야 합니다. 테스트된 사이트 중 일부는 제품에 사용할 수 있는 여러 영상이 있음에도 불구하고 기본 이미지 갤러리에 하나의 영상만 포함했습니다.)
Crate & Barrel이 이미지 갤러리에 동일한 영상을 삽입한 다음 나중에 제품 페이지에 다시 삽입하는 방법을 살펴보세요. 이것은 훌륭한 영상 콘텐츠 구현 전략입니다.
제품 페이지의 다른 곳에서 영상을 반복해도 무방합니다. 영상이 이미지 갤러리에서도 제공되는 한 제품 페이지 전체의 콘텐츠 섹션에도 영상을 포함하는 것이 좋습니다.
영상 축소판을 통합하고 디자인하는 방법
영상을 일반 이미지 갤러리 썸네일에 혼합하고 "재생" 아이콘으로 오버레이 하면 황금색이 됩니다.
제품 페이지에서 15분을 소비했음에도 불구하고 두 개의 영상을 찾는 데 어려움을 겪은 Crutchfield의 테스트 사용자는 “이 제품에는 영상이 있지만 찾기가 쉽지 않았습니다.”라고 말했습니다.
한 영상을 본 또 다른 피험자는 그가 본 첫 번째 영상 바로 옆에 있는 미리 보기 이미지인 두 번째 영상을 다시 찾을 수 없었습니다. 영상 썸네일에 "재생" 아이콘이 없어 일반 이미지 썸네일과 구별하기 어렵습니다.
이미지 갤러리에서 탭을 사용하여 영상과 이미지 축소판을 분리하지 마십시오. 테스트를 거친 사용자의 3분의 1이 이 디자인에 문제가 있었습니다. (일반적으로 탭 은 심각한 검색 가능성 문제를 일으키는 경우가 많습니다.)
테스트에 따르면 영상과 이미지 미리 보기 이미지를 분리할 필요가 없었습니다. 사용자는 일종의 "재생" 아이콘이 있고 옆에 또는 일부로 표시되는 한 제품 영상을 이미지에서 완벽하게 찾고 구별할 수 있었습니다.
아디다스에서 볼 수 있듯이 이미지 갤러리 썸네일과 혼합된 "재생" 아이콘이 오버레이 된 영상의 프레임은 완벽하게 좋은 디자인입니다.
Musician's Friend의 접근 방식은 "영상 재생"이라는 텍스트와 함께 독립 실행형 "재생" 아이콘을 표시하는 방식으로 테스트 중에도 똑같이 잘 작동했습니다.
Northern Tool이 이미지 갤러리에서 360° 보기에 대한 축소판도 포함하는 방법을 살펴보세요.
영상과 마찬가지로 사용성 테스트에서 사용자는 이미지 갤러리에서 360° 보기를 찾을 것으로 기대하는 것으로 나타났습니다.
썸네일 디자인 자체의 경우 테스트 결과 영상에 일종의 '재생' 아이콘 이 있다는 것이 중요한 것으로 나타났습니다. 썸네일에 "재생" 아이콘이 오버레이 된 영상의 스틸 프레임도 포함되어 있으면 괜찮았지만 그럴 필요는 없었습니다. 독립 실행형 "재생" 아이콘도 똑같이 잘 작동했습니다.
요약하자면 제품 영상을 찾는 사용자가 실제로 찾을 수 있도록 하려면 다음을 수행하십시오.
제품 이미지 썸네일 안이나 옆에 영상을 배치하세요.
영상 미리 보기 이미지에 '재생' 아이콘이 있는지 확인하세요.
제품 페이지의 다른 콘텐츠 섹션에서 자유롭게 영상을 반복할 수 있습니다.
지나치게 복잡하지는 않지만 사이트 구현을 다시 확인하는 것이 좋습니다. 벤치마킹에 따르면 주요 전자 상거래 사이트의 35%가 이러한 세부 정보를 제대로 파악하지 못하는 것으로 나타났습니다.
저는 아마존을 자주 사용하는데 베이마드가 제시하고 있는 영상의 배치가 잘 되어 있다는 것을 알 수 있습니다. 제품 페이지의 이미지 갤러리에 포함되어 있을 뿐만 아니라 '재생'아이콘의 배치로 영상 콘텐츠가 포함되어 있는지도 바로 파악 수 있습니다. 또한, 상세 페이지 내에도 배치되기도 하며 사용자 구입 리뷰에도 영상을 게시할 수 있도록 허용하고 있습니다.
영상은 이미지로만 알 수 없는 여러 각도로의 형태를 확인하거나 사용 경험을 이미지 할 수 있어 실제 구입으로 이어지는 큰 영향력을 가지고 있기 때문에 베이마드가 제시하는 영상의 배치에 대해 고민하고 검토할 필요가 있습니다.
