모바일 웹 : 가로 모드에서의 이미지 크기 조정
UX/UI
UX DAYS SEOUL설문 조사
항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.
예상 소요 시간 : 30초
설문조사 URL
이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2018년 5월 22일의 기사입니다)
제품 이미지는 가장 많이 활용되는 제품 페이지 콘텐츠 중 하나이며 온라인 쇼핑에 있어서 매우 중요합니다.
제품 이미지는 사용자가 제품을 확인하고 평가하는 주요 방법입니다. 실제 사용자가 제품 페이지에 도달했을 때 가장 먼저 하는 행동의 56%는 이미지를 확인하는 것입니다.
모바일 장치가 가로 모드일 때 비례적으로 크기를 조정해야 하는 것을 포함하여 몇 가지 특별한 요구 사항이 있습니다.
그러나 대규모 사용성 테스트에 따르면 사이트의 52%가 가로 모드로 전환할 때 비례적으로 제품 이미지를 확장하지 않는 것으로 나타났습니다. 모바일 장치를 가로 모드로 회전하는 행위는 이미지가 너무 작거나 세로 모드에서 제한을 느꼈을 때 반복적으로 나온 사용자의 행동이었습니다.
이 기사에서는 가로 모드에서 제품 이미지 크기 조정과 관련된 모바일 전자 상거래 사용성 리서치의 결과에 대해 전합니다.
모바일 랜드스케이프 모드에서 이미지가 비례적으로 확장되어야 하는 이유
모바일 사용성 테스트는 대부분의 사이트가 제품 이미지의 중요성을 이해하고 있으며 사용자에게 제품에 대한 좋은 시각적 개요를 제공하는 고해상도 이미지를 생성하는 데 리소스를 투자한 것으로 나타났습니다. 실제로 대부분의 사이트는 모바일 장치에서 충분히 큰(82%) 이미지를 제공하고 제품에 대한 자세한 보기(62%)를 제공합니다.
그러나 테스트를 통해 대부분의 모바일 전자 상거래 구현에서 사용자가 세로 모드에서 가로 모드로 전환할 때 제품 이미지를 표시하는 방법에 대해 충분히 고려하지 않았음이 분명합니다.
많은 사용자가 더 큰 제품 이미지를 확인하려고 시도할 때 테스트에서 관찰된 일반적인 모바일 관련 동작 은 사용자가 세로 모드에서 가로 모드로 전환하는 것이었습니다.
❌ Overstock에서 사무실 의자는 가로 모드에서 볼 때 확장되지 않습니다. 최대 50%의 모바일 사용자가 주로 더 큰 이미지를 얻기 위해 가로 모드로 전환하기 때문에 가로 모드에서 이미지 크기가 비례적으로 조정되지 않으면 사용자는 실망할 것입니다.
실제로 작은 크기의 제품 이미지에 만족하지 못한 모바일 사용자의 50%는 테스트 중에 모바일 장치를 세로 모드에서 가로 모드로 전환하려고 한 번 이상 시도했습니다. 또한 일부 사용자는 카테고리 및 검색 결과 목록을 세로 모드(개요 보기)로 일관되게 탐색한 다음 제품 페이지를 방문할 때 즉시 가로 모드로 전환했습니다(제품 이미지를 최대한 크게 보기 위해).
❌ 마찬가지로 Nordstrom에서 재킷도 가로 모드에서 볼 때 확장되지 않습니다.
모바일 전자 상거래 사이트의 52%는 이미지가 가로 모드에서 확장되지 않아 제품에 대한 적절한 시각적 인상을 얻는 데 제한을 느꼈습니다.
가로 모드로 전환하는 이러한 일반적인 사용자 동작은 지원되어야 합니다. 제품을 시각적으로 평가할 수 없다는 것을 알게 되면(어떤 경우에는 제품 구매 여부를 결정하는 가장 중요한 기준이 됨) 좌절감에 포기할 가능성이 있습니다.
⭕️ Costco에서 컴퓨터 이미지는 가로 모드에서 볼 때 비례하여 크기가 조정되므로 사용자가 제품을 더 잘 시각적으로 확인하고 평가할 수 있습니다.
가로 모드에서 이미지 크기를 조정하는 것은 이미지 크기를 뷰포트의 상대적 너비로 정의하는 것만큼 간단할 수 있습니다. 그러면 제품 페이지의 이미지가 가로 모드로 전환될 때 확대되어 사용자가 현재 필요에 따라 세로 모드와 가로 모드 사이를 전환할 수 있습니다.
가로 모드에서 제품 이미지를 비례적으로 조정하여 사용자 기대에 부응
지난 몇 년 동안 전자 상거래 사이트에 대한 모바일 트래픽과 데스크톱 트래픽의 비율이 크게 증가했음에도 불구하고 모바일 장치에서의 쇼핑은 여전히 어려운 경험입니다.
실제로 우리 연구에 따르면 많은 사용자가 모바일 장치에서 쇼핑을 시작하지만 61%는 모바일 결제 프로세스를 완료해야 할 때 가끔 또는 항상 데스크톱으로 전환합니다.
❌ Sears에서는 가로 모드에서 이미지가 확대되지만 해상도가 낮아 제품의 좋은 시각적 감각을 얻기가 어렵습니다.
또한 사이트는 일반적으로 모바일 이미지의 크기와 품질(예: 모바일 사이트의 80% 는 화면 너비의 90% 이상에 기본 제품 이미지가 있음)과 관련하여 좋은 성능을 보이지만 모바일에서는 문제를 보입니다.
40% 는 제품 이미지에서 핀치 또는 탭 하여 확대/축소와 같은 터치 제스처를 지원하지 않으며 52%는 가로 모드에서 이미지 크기를 비례적으로 조정하지 않습니다.
최종 결과는 일부 사용자가 제품이 자신의 요구 사항에 맞는지 결정하는 데 필요한 시각적 정보를 수집하는 데 어려움을 겪는다는 것입니다.
⭕️ Williams-Sonoma에서 사용자는 가로 모드로 볼 때 더 큰 이미지를 얻을 수 있으며 해상도는 제품 세부 정보를 볼 수 있을 정도로 충분합니다.
따라서 사용자가 세로 모드에서 가로 모드로 전환할 때 이미지를 확대하여 모바일 장치에서 제품 이미지가 어떻게 작동해야 하는지에 대한 사용자의 기대에 부응하는 것이 중요합니다. 그러나 모바일 사이트의 52%는 그렇지 않습니다.
