무한 스크롤 vs 페이지네이션 vs '더보기' 버튼
이커머스에서 어떤 로딩 방법을 사용하면 좋을지에 대한 UT 결과
(출처 : [Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing Magazine]의 기사를 번역 및 가공한 컨텐츠 입니다.)
이커머스 웹 사이트에 제품을 표시하는 데 가장 좋은 UX 패턴은 무엇일까요?
페이지네이션 일까요? 혹은 “더보기” 버튼이나 무한 스크롤일까요?
Baymard Institute에서는 50개 이상의 주요 이커머스 웹 사이트에 대해 1년에 걸친 대규모 사용 가능성 연구를 수행했습니다.
우리는 이 사용성 연구에서 주제로 데스크톱 및 모바일에서 제품 로드를 위한 세 가지 디자인 패턴(무한 스크롤,페이지네이션, "더보기" 버튼)을 테스트했습니다.
페이지네이션은 거의 모든 이커머스 플랫폼에서 기본적으로 제공되는, 웹 사이트에 새 항목을 로드하는 가장 일반적인 방법입니다.
그러나 우리의 사용성 테스트에서는 항목을 로드하는데 약간의 지연이 있는 “더보기” 버튼이 더 우수한 방법으로 나타났고, 이 방식이 페이지네이션보다 더 매끄러운 사용자 경험을 제공한다는 것을 알려주려 합니다.
이 외에도 다른 방식인 무한 스크롤은 사용성에 큰 해를 끼칠 수 있습니다. 특히 검색 결과를 보여주는 뷰와 모바일에서 더 큰 해를 끼칩니다.
그러나 각 방법의 적용은 페이지의 컨텍스트에 따라 달라지기 때문에 완벽히 맞는 방법론적 해답은 없다는 것을 염두에 두고 기사를 읽어주셨으면 좋겠습니다.
이 기사에서는 Baymard Institute의 “더보기”버튼, 무한 스크롤 및 페이지네이션에 대한 모바일 및 데스크톱에서의 유저빌리티 연구 결과를 제시합니다.
주요 이커머스 웹 사이트의 구현 및 사례를 통해 몇 가지 장단점을 살펴보겠습니다.
테스트를 통해 알게 된 점
이커머스 제품 목록 및 필터링에 대한 대규모 유저빌리티 연구에서 수많은 사용자가 페이지네이션에 대해 많은 불만을 나타냈습니다.
테스트 대상자는 일반적으로 페이지네이션이 느린 것으로 인식하였고 적은 수의 페이지네이션 링크가 있으면 제품 목록을 끝까지 다 볼 의욕을 잃어버립니다.
더욱 중요한 것은 테스트 대상자가 "더 보기” 버튼 혹은 무한 스크롤에 의존하는 웹 사이트보다 전체 제품 목록을 훨씬 덜 탐색한다는 점입니다.
그들은 전체적으로 훑어보기보다는 결과의 첫 번째 페이지 상단에서 상대적으로 많은 시간을 보냈습니다.
^ 많은 사용자가 페이지네이션 링크를 사용하여 총 결과 갯수를 어림잡았습니다. 페이지네이션 링크는 특정 결과 세트(5개 단위, 혹은 10개 단위)로 점프하기 위해 더 통제되는 기능을 제공하지만 테스트하는 동안 실제로 사용하는 사용자는 거의 없었습니다. 대신, 그들은 거의 "다음"과 "이전"버튼을 사용했습니다.
끝없이 스크롤 되는 무한 스크롤의 경우, (수백 가지 제품 로드의 성능 저하 없이 로드될 경우) 사용자가 대부분의 페이지에서 모든 제품을 한 번에 볼 기세로 막힘없이 경험합니다.
따라서 무한 스크롤이 잘 구현된다면 놀라 울 정도로 부드럽고 매끄러운 환경을 만들 수 있습니다.
사용자는 중단없이 제품 목록을 스크롤 할 수 있을 뿐 아니라, 페이지를 아래로 스크롤 하면 제품이 표시되고 그 외에 인터렉션은 하나도 필요하지 않은 간단하고 좋은 솔루션이 될 수 있습니다.
사용자가 페이지네이션 또는 “더보기” 버튼이 있는 웹 사이트보다 무한 스크롤을 사용하여 웹 사이트에서 훨씬 더 많은 제품을 탐색하는 것은 놀랄 일이 아닙니다.
무한 스크롤은 전체 범주의 항목을 신속하게 표시하는 데 이상적입니다.
하지만 스크롤 할 때 멈추지 못하므로 목록에서 개별 제품에 대해 더 많이 스캔하고 집중해야 하는 경향이 있습니다.
^ 무한 스크롤을 사용할 때엔 스크롤 바의 길이를 확인해야 합니다.
무한 스크롤링을 하는 웹 사이트에서 테스트 대상자는 종종 100개 이상의 제품을 탐색했는데 페이지네이션이있는 웹 사이트에서는 거의 페이지네이션을 사용하지 않았으며 `더보기`버튼이 있는 웹 사이트에서도 거의 더보기 버튼을 사용하지 않았습니다.
하지만 무한 스크롤 또한 처음 50~150 제품에 효율적이었을 뿐, 일부 사용자는 목록이 멈추지 않으면 개별 제품에 집중하지 않고 목록을 계속 스크롤 하여 무한 스크롤의 초기 이점을 상쇄되게 만들었습니다,
무한 스크롤은 때에 따라 웹 사이트의 푸터에 대한 사용자의 접근을 방해합니다. 이는 무한 스크롤의 주요 설계 과제 중 하나입니다.
사용자가 목록의 맨 아래로 접근할 때 결과가 지속적으로 로드되기 때문에 사용자는 다음 스크롤의 집합이 로드되어 나타나기 전까지 1~2초 사이에만 푸터를 보게 됩니다. 이럴 경우 푸터를 뷰의 바깥에 위치하도록 해야 합니다.
목록에 많은 항목 (검색 및 카테고리의 경우가 많음)이 있으면 사용자가 푸터에 접근하는 것을 더더욱 어렵게 할 수 있습니다.
푸터에는 중요한 도움말 페이지, 회사소개, 고객 지원, 배송 및 반환 같은 유저에게 꼭 필요한 정보가 포함되어 있기 때문에 크리티컬한 문제가 될 수 있습니다.
테스트 된 웹 사이트 중 일부에서만 "더보기"버튼이 사용되었지만, 사용자들은 “더보기” 버튼에 호감을 보였습니다. 실제로 미국의 이커머스 웹 사이트 50위를 벤치마킹할 때 "더 보기 “방식을 사용하는 사이트는 8%에 불과했습니다.
"더보기"는 사용자가 어떤 페이지로 갈지 알아 내려고 하지 않고 간단히 "더 많은 결과를 보고 싶니?"라는 질문만 던지는 매우 단순한 디자인입니다.
이는 매우 간단하고 심플한 인터페이스이로 사용자에게는 최소의 인지 부하만 요구하는 방법입니다.
일반적으로 사용자들은 페이지네이션이 있는 사이트보다 `더보기`버튼이 많은 웹 사이트에서 더 많은 제품을 탐색했지만, 추가로 제품을 로드 할 때 여전히 적극적인 클릭이 필요했기 때문에 이 세 방식 중 무한 스크롤링에서 가장 많은 제품을 탐색했습니다.
^American Eagle Outfitters와 같은 "더보기"버튼이 있는 웹 사이트에서는 사용자가 페이지네이션이있는 웹 사이트보다 더 많은 제품을 탐색했지만, 무한 스크롤처럼 빠르게 스캔하지는 못했습니다.
"더보기"및 무한 스크롤 구현의 장점 중 하나는 결과가 다른 페이지로 대체되는 대신 제품 목록이 늘어나는 것입니다. 이는 전체 목록에서 더 쉽게 제품을 비교할 수 있다는 의미입니다.
하나의 통합 된 제품 목록을 보유함으로써 사용자가 어떤 제품을 선택하는 것이 가장 좋을지를 평가하기가 훨씬 쉬워졌으며 결과적으로 전체 제품군을 확인할 가능성이 커졌습니다.
그래서 우리는 어떤 로딩 방법을 사용해야 할까요?
이상적으로, “더보기”의 변형을 사용해야 합니다.
테스트 결과 모든 경우에 단일 방법은 완벽하지 않다는 것이 입증되었습니다.
이 기사의 나머지 부분에서는 다음 세 가지 변형을 다룰 것입니다.
카테고리의 경우 "더보기”와 ‘지연되는 로딩’의 조합을 사용하는 것이 좋습니다.
검색하려면 `더보기`버튼을 사용해야 합니다. 검색결과의 연관성에 따라 검색결과의 수가 동적으로 변하는 페이지가 반환되는 것이 이상적입니다.
모바일에서는 `더보기`버튼을 사용하지만, 기본적으로 더 적은 수의 제품을 로드해야 합니다.
참고 :이 결과는 이커머스 웹 사이트를 테스트한 결과입니다. 다른 유형의 웹 사이트에 서는 결과가 다를 수 있습니다.
카테고리 링크의 경우 "더보기"
이커머스 홈페이지 및 카테고리 탐색에 대한 대규모 유저빌리티 연구에서 우리는 “더보기” 버튼과 ‘지연되는 로딩’ 형태의 무한 스크롤의 교차점에서 새로운 제품을 로드하기 위한 최적의 솔루션을 발견했습니다.
초기 페이지 로드 시 10~30개 제품을 표시한 다음 50~100개 제품에 도달할 때까지 다른 10~30개 제품을 지연 로드 한 다음 "더보기"버튼을 표시합니다.
일단 버튼을 클릭하면 또 다른 10~30개의 제품을로드하고 다음 50~100개의 제품이 로드 될 때까지 지연 로드를 다시 시작합니다. 이 시점에서 "더보기"버튼을 다시 한 번 표시합니다.
50 - 100항목의 "더보기"버튼의 임곗값은 사용자에게 페이지 탐색을 잠시 중단하는 동시에, 성능 최적화를 통해 로딩 시간과 서버 로드를 줄입니다.
로드 할 제품의 수는 의도적으로 설계할 수 있습니다.
테스트 결과에 따르면 이상적인 수치는 웹 사이트의 컨텍스트 및 업계에 따라 달라집니다.
제품의 카테고리가 사양 중심의 제품 (대부분의 소비자 전자 제품, 하드웨어, 부품 및 소모품)이라면 낮은 개수의 범위를 사용하고, 시각적 제품 (의류, 가구, 장식 등)이라면 더 많은 수의 항목을 보여주는 것이 좋습니다.
^ Crutchfield는 ‘지연되는 로딩’과 함께 "더보기"버튼을 구현합니다.
기본적으로 처음에 20개의 제품이 로드됩니다. 사용자가 10번째 제품으로 스크롤 하면 Crutchfield는 20개의 추가 제품을 지연로드합니다. 40번째 제품이 끝나면 사용자에게 `더보기`버튼이 표시됩니다.
이렇게 하면 초기에 로드되는 제품이 극히 적기 때문에 페이지가 빠르게 로드됩니다.
더 중요한 것은 적당하거나 작은 규모를 가진 카테고리의 경우 ‘지연되는 로딩’(lazy-loading)를 통해 사용자는 페이지네이션같은 중단없이 간단한 쉼으로 제품 전체를 탐색할 수 있습니다.
또한, 사용자가 필터를 적용하면 가장 잘 정의된 적은 항목의 "모두 보기"를 볼 수 있습니다.
더 긴 목록의 경우 사용자는 "더보기"버튼을 만납니다. 사용자가 원하는 경우 계속해서 더 많은 제품을 계속 볼 수 있지만, 스크롤을 중단하면 사용자가 해당 항목에 쉽게 접근할 수 있습니다. 또한, 이는 사용자가 푸터에 쉽게 접근 할 수 있게 하고 수백 가지 제품을 계속 스크롤 하는 것보다 필터를 적용하는 것이 더 좋을지 고려할 수 있는 순간을 제공합니다.
‘지연되는 로딩’과 무한 스크롤의 약점 중 하나는 페이지의 높이가 로딩할수록 길어지는 것입니다. 사용자가 스크롤을 아래쪽으로 드래그하면 푸터에 도달하여 다음 항목이 로드 되기 전, 1~2초 동안에만 푸터를 볼 수 있습니다. 이 짧은 1~2초가 지나면 새 항목이 목록에 추가되고 푸터가 아래로 밀리고 스크롤 막대가 확장됩니다.
"더보기"조합을 사용하면 점프 또는 점프 후 사용자에게 쉴 시간이 발생하므로 이 문제는 대부분 해결됩니다.
그러나 구현을 완벽하게 하려면, 상품들이 아직 로딩되지 않았어도 리스트의 높이에 다음 "추가 로드"버튼까지의 행 수를 곱하여 페이지의 높이를 "위조"하는 것을 고려하십시오.
이 가짜 페이지 높이는 스크롤 막대에 처음부터 적절한 공간을 제공하여 목록의 실제 높이를 보다 정확하게 나타냅니다. 또한, 사용자에게 아무런 점프 없이 푸터에 대한 접근을 제공합니다. 그리고 lazy-loading은 이전처럼 페이지를 확장하는 대신 빈 공간을 차지하면서도 계속 제품을 로드합니다.
검색 결과 링크를 위한 "더보기"
검색의 개방성으로 인해 유저들은 단순히 카테고리를 탐색하는 것보다 검색했을 때 훨씬 더 많은 검색 결과를 얻는 경향이 있습니다. 이커머스 검색에 관한 사용성 연구에서 수백 건의 검색 결과는 흔하지 않았으며 대량 판매자 웹 사이트에서 수천 건의 검색 결과가 보이는 경우가 많았습니다.
검색을 통한 결과는 관련성에 따라 정렬됩니다.
다섯 번째 결과는 일반적으로 백 번째 결과보다 사용자와 훨씬 관련성이 높습니다. 즉, 사용자가 검색할 때 100개 이상의 제품을 스캔하지 않아도 된다는 의미입니다. 우리는 사용자에게 100개의 검색을 다 보기 보다 첫 번째 항목을 신중하게 보게 하도록 하는 것이 좋습니다.
따라서 검색 결과는 기본적으로 25~75 개 제품만 로드해야하며 무한 스크롤을 검색 결과에 사용해서는 안 됩니다.
무한 스크롤에 대한 Etsy의 유명한 A / B 분할 테스트는 검색 경험에 큰 타격을 주었습니다.
페이지네이션 또는 "더보기"버튼은 무한스크롤 방식보다 검색 결과에 더 좋을 것입니다.
많은 수의 제품을 로딩하지만, 사용자가 첫 번째 결과를 보는 데 더 집중하게 해주기 때문입니다. 검색결과의 항목이 적다면 ‘지연되는 로딩’은 필수 사항은 아닙니다. (항목이 많은 전반적인 카테고리를 탐색하는 용으로 구현되고 있는 경우는 여기에서도 사용할 수 있습니다.)
^ LL Bean에서 본 “더보기” 버튼을 사용하면 무한 스크롤과 달리 결과의 관련성이 낮아지는 항목들에 대해서 자연스러운 휴식을 취할 수 있고 페이지네이션과 달리 첫 번째 결과 집합과 두 번째 결과 집합을 비교할 수 있는 옵션이 여전히 남아 있습니다.
다음 세트로 넘어가기 위해 로드되는 제품 수에 대한 값은 검색 결과의 관련성 점수에 따라 조정될 수 있습니다. 대부분의 검색 엔진은 각 결과를 검색 값과 관련성 점수로 순위를 지정하고 관련성이 가장 높은 검색 엔진을 먼저 반환됩니다.
이 점수는 사용자가 처음 몇 개의 결과만 스캔하도록 권장할지, 광범위한 항목을 탐색하도록 권장할지에 따라 로드되는 제품 수를 늘리거나 줄이는 개수들을 결정하는 데 사용할 수 있습니다.
실제로 이 방식은 사용자의 검색 결과에 대한 관련성 점수가 하락하는 지점을 감지하고 이러한 하락에 따라 특정 검색 쿼리에 대해 반환 할 결과의 최적의 수를 결정함으로써 좀 더 나은 사용자 환경을 만들 수 있습니다.
예를 들어, 관련성 점수가 처음 28개 결과 이후 급격하게 떨어지기 시작하면 로드되는 제품 수를 줄여 해당 항목에 대한 집중도를 높일 수 있습니다. 그러나 처음 100개의 결과가 모두 관련성 점수가 높으면 로드 된 제품 수를 늘려 사용자의 탐색을 더 원활하게 도와 줄 수 있습니다.
모바일을 위한 "더보기"버튼
페이지네이션 링크는 서로 가깝게 위치하기 때문에 정확한 위치를 터치하기가 어렵습니다. 또한, 모바일 사용자는 페이지 새로 고침을 기다리는 것을 싫어하기 때문에 페이지네이션을 좋아하지 않습니다.
긴 제품 목록을 무한대로 스크롤 하면 새로운 결과가 지속해서 로드되어 푸터에 액세스 할 수 없게 됩니다.
모바일 이커머스에 대한 1년 동안의 연구에서 페이지네이션은 링크를 정확하게 터치하기 어렵고 일반적으로 새로운 페이지로드를 발생시킨다는 것을 발견했습니다. 한편, 무한 스크롤링은 사용자가 많은 제품을 탐색하게 하는 데 매우 효과적이라는 것을 입증했습니다.
(실제로 테스트 사용자들은 무한스크롤 방식일 때 페이지네이션 보다 두 배 이상 많은 상품을 보았습니다)
그러나 언급 한 바와 같이, 그 방식은 푸터에 접근 할 수 없게 만들 수 있습니다. 모바일 테스트 중 “PC 버전으로 보기”, "FAQ"및 "배송"등 중요한 모바일 푸터 링크는 테스트 사용자들이 접근할 수 없었으며, 사용자들은 이러한 링크에 대한 필요성을 느끼고 있었습니다.
Lowe's에서 사용된 "더보기"버튼은 푸터에 접근할 수 있으면서 무한 스크롤의 많은 이점을 제공합니다.
따라서 가장 좋은 해결책은 제품 목록 끝에 하나의 큰 "더보기"버튼을 두는 것입니다. 그러나 모바일에는 몇 가지 제약 조건이 있습니다.
적은 화면 공간
모바일 화면이 훨씬 작기 때문에 목록의 항목들은 PC보다 상대적으로 많은 부분을 차지하며 일반적으로 2~3 개의 항목만 표시됩니다. 50 개 정도 되는 항목은 데스크톱 컴퓨터보다 모바일 장치에서 더 많은 높이를 차지합니다.
다시 말해서, 사용자는 데스크탑상의 제품리스트보다 모바일에서 더 많은 스크롤을 해야 합니다.
스크롤링 제약 조건
터치 장치에서 사용자는 대부분 손가락만 사용해 드래그하여 스와이프 합니다.
마우스의 스크롤 휠 (또는 트랙 패드 스와이프), 드래그할 수 있는 UI 스크롤 바 및 다양한 키보드 입력 (위아래 화살표, 페이지 위아래, 스페이스 바 등)과 같이 스크롤 입력방법이 일반적으로 많은 데스크톱과 비교해봤을 때 모바일은 더 제약이 많습니다.
느린 스크롤링
우리의 테스트는 사용자가 제품 목록에 연속적으로 스크롤이 일어나는 것을 컨트롤 하기 힘들다는 것을 알게되었습니다. 사용자 중 일부는 화면에 계속해서 손가락을 드래그해야 하므로 스크롤이 너무 느려지게 됩니다. 이 경우 50개의 제품 목록도 탐색하는 데 시간이 오래 걸립니다.
다른 한편으로, 일부 사용자는 목록을 너무 빨리 스크롤 할 수 있습니다. 실수로 빠르게 연속적으로 스와이프 하여 모멘텀 스크롤을 불러옵니다. 이 경우에, 그들은 그들이 필요로 했던 많은 제품을 놓치게 됩니다.
자바 스크립트 이벤트
마지막으로 대부분의 터치 장치에서 JavaScript 이벤트가 실행되는 방식은 동적 ‘지연되는 로딩’ 기술을 종종 구현할 수 없다는 것을 의미합니다. 자바 스크립트 이벤트는 사용자의 스크롤이 끝나면 시작됩니다. 따라서 사용자가 스크롤 하는 동안 제품을 가져올 수 없으며 스크롤을 중지해야만 제품을 가져올 수 있습니다.
이러한 이유로 `더보기`버튼을 표시하기 전에 ‘지연되는 로딩’이 아닌 모바일에 15~30개의 제품을 로드 한 다음 한 번에 로드하는 것이 좋습니다.
핵심 디테일 : history.pushState를 통한 뒤로 버튼 지원
우리는 7년간의 사용성 테스트에서 새로운 페이지를 로딩하는 기술적인 구현과 새로운 페이지 로딩에 대한 사용자의 기대가 이커머스 사이트에서 항상 일치하지 않는 것을 보았습니다.
오버레이, 아코디언, 필터 및 AJAX로 로드된 제품과 같은 동적으로 로드되는 콘텐츠는 종종 `뒤로 가기`버튼에 대한 사용자의 기대를 뒤집어 버립니다. (`사용자의 뒤로 가기 버튼에 대한 기대` 전체 연구 결과)
"더보기” 버튼 방법을 구현하려면 ‘뒤로 가기’ 버튼에 대한 동작을 신중하게 고려해야 합니다.
사용자가 제품 목록에서 특정 제품 페이지를 방문한 후에는 브라우저의 뒤로 버튼을 클릭해서 해당 목록의 동일한 위치로 되돌아가는 것이 중요합니다. "더보기"버튼이 있는 이커머스 웹 사이트 중 90% 이상이 이를 잘못 사용하고 있습니다.
이것은 사용자가 제품 목록과 제품 페이지 간에 앞뒤로 이동하는 것을 방해할 뿐 아니라 심각한 사용성 문제입니다.
^ Skechers는 사용자가 `더보기`버튼을 클릭할 때마다 URL을 다시 작성하여 `뒤로 가기` 버튼 문제를 적극적으로 해결합니다. 사용자가 '뒤로 가기'를 클릭하여 제품 페이지에서 돌아가면 제품 목록의 올바른 위치로 이동합니다.
적절한 `뒤로 가기`버튼의 동작을 지원할 기술이 없다면 "더보기"버튼을 실험하지 말고 페이지네이션 방식을 사용하는 것이 좋습니다.
"더보기"가 최우선 관심사가 되어서는 안됩니다.
무한 스크롤 vs 페이지네이션에 대한 논쟁이 수년간 논의되어 왔지만 제품 로드 방법은 이커머스 업체가 리소스를 사용하는 첫 번째 방법이 아니어야 합니다.
지난 7년 동안 우리는 대다수의 이커머스 웹 사이트에서 일어나는 심각한 UX 문제들을 기사화했습니다.
이커머스 검색, 카테고리 탐색, 필터링, 체크 아웃 및 모바일 경험 등의 문제들을 Smashing Magazine의 지난 기사에서 살펴보았고, 이처럼 많은 영향을 미치는 이슈는 견고한 "Load more"구현을 개발하는 것보다 훨씬 적은 리소스가 필요합니다.
로딩 방법이 중요하지 않다는 것이 아닙니다. 우리는 테스트가 진행되는 동안 제품을 탐색하는 방식을 크게 바꿀 수 있다는 것을 알게 되었습니다.
하지만 "더보기"는 UX의 완성을 위해 노력하는 웹 사이트를 위해 고민되어야 하며 처음부터 이 방식을 고민하기보다는 다른 중요한 문제들에 더 집중해야 합니다.
"더보기" 버튼 vs 무한 스크롤 vs 페이지네이션
사용성 테스트에서 "더보기" 버튼은 페이지네이션에서 관찰되었던 사용자가 제품 목록을 잘 탐색하지 않고 결과 페이지에서 전체 제품을 비교하는 것이 어려운 사용성 문제를 해결했습니다.
또한 "더보기"버튼은 무한 스크롤에서 관찰되었던 푸터 접근성에 대한 문제도 해결했습니다.
그러나 "더보기"버튼은 브라우저의 `뒤로 가기` 버튼 문제가 history.pushState ()를 통해 처리 될 때만 더 효과적이며, 목록의 개수나 구현이 사용자의 컨텍스트에 따라 조정되는 경우 이상적입니다.
다음 세 가지 상황별 조정이 "더보기"버튼 성능 향상의 핵심 요소입니다.
카테고리 탐색을 위해서는 "더보기"버튼과 ‘지연되는 로딩’ 조합을 사용하고, "더보기"버튼의 임곗값을 50~100 개 항목으로 설정하는 것이 좋습니다.
검색 결과의 경우 `더보기`버튼을 사용하지만, 임곗값을 25~75 개의 결과로만 설정하고 추후에 검색 결과의 관련성 점수가 떨어지는 경우, 검색 결과 목록에 대한 임곗값을 조정해야 합니다.
모바일에서는 `더보기`버튼을 사용하더라도 스크롤 및 화면 크기 문제를 고려해 15~30개 제품으로 임곗값을 설정합니다. 또한, JavaScript 이벤트가 발생하는 방식과 임곗값이 낮으므로 ‘지연되는 로딩’ 대신 모든 제품을 한 번에 로드해야 합니다.
제품 목록 사용 편의성에 대한 93가지 테스트 결과는 "제품 목록 및 필터링"보고서에서 찾을 수 있습니다
