📁 Infinite Scrolling vs Pagination

[이미지 출처: https://www.indiehackers.com/post/ux-infinite-scrolling-vs-pagination-summary-4893f937de]

🗒 Infinite Scrolling(무한 스크롤)

사용자가 페이지를 아래로 스크롤 할 때 더 많은 컨텐츠가 하단에 지속적으로 나타나는 웹 디자인 기법

무한 스크롤의 장점

사용자 참여(user engagement)의 증가

• 무한 스크롤은 사용자의 흐름을 유지하고하고 웹 페이지의 컨텐츠로 끌어들여 사용자 참여가 증가할 수 있다.
• 이로 인해 사용자가 웹 사이트에 머무르는 시간이 증가하여 bounce rate(이탈률)가 낮아진다.

bounce rate(이탈률) : 특정 사이트에 방문한 사용자가 다른 페이지로 이동하지 않고 떠난 비율

사용자의 추가적인 액션이 필요하지 않다.

• 사용자가 "다음 페이지" 버튼을 누르지 않고 웹 서핑을 할 수 있고, 컨텐츠를 쉽게 소비할 수 있다.
• 스크롤은 클릭(clicking)/탭(tapping)보다 상호작용 비용(interaction cost)이 낮다.
• 연속적이고 긴 컨텐츠의 경우 스크롤은 여러 개의 개별 화면이나 페이지로 나누는 것보다 더 나은 사용성을 제공한다.

모바일 기기에 적합하다.

• 모바일 기기의 제스처 컨트롤은 스크롤링을 직관적이고 사용하기 쉽게 만든다.
• 화면이 작아직수록 스크롤이 길어지므로 모바일 기기 사용자는 더 좋은 브라우징 경험을 즐길 수 있다.

무한 스크롤의 단점

페이지 성능이 느려진다.

• 여러 사용자가 페이지를 아래로 스크롤 할 때마다 더 많은 컨텐츠를 동일한 페이지에 로드해야 하므로 페이지의 성능이 점점 느려진다.

특정 위치로 이동하기 어렵다.

• 무한 스크롤에서 특정 위치를 북마크할 수 없다. 따라서 다시 특정 위치로 이동하기 위해 전체 컨텐츠를 다시 소비해야한다.
• 또한, 계속 아래로 스크롤 할 때, 맨 위로 이동하는 것이 어려워진다.

컨텐츠 수량이 얼마나 되는지 알 수 없다.

• 지속적인 스크롤링은 사용자가 지루하게 느낄 수 있다.
• 컨텐츠가 부족할 경우 금방 끝이 나버린다는 단점이 있다.

🗒 Pagination(페이지네이션)

컨텐츠를 별도의 페이지로 나누는 사용자 인터페이스 패턴으로 하단에 페이지를 숫자로 표시한다.

페이지네이션의 장점

특정 항목 검색하기 쉽다.

• 페이지네이션은 컨텐츠의 양이 많은 경우 내용을 구성하는 좋은 방법으로 페이지를 사용하여 사용자 환경을 개선할 수 있다.
• 사용자가 단순히 내용을 검색하는 것이 아니라 결과 목록에서 특정 항목을 더 쉽게 찾을 수 있게 한다.

북마크

• 페이지네이션을 통해 얼마나 많은 컨텐츠를 사용했는지 쉽게 추적할 수 있다.
• 이미 살펴본 페이지를 다시 살펴볼 필요가 없다.
• 특정 페이지로 직접 이동할 수 있으며 나중에 다시 사용할 수 있도록 원하는 페이지를 북마크 할 수 있다.

페이지네이션의 단점

사용자의 추가적인 액션이 필요하다.

• 다른 페이지로 이동하려면 해당 페이지의 링크를 클릭 해야한다.
• 새 페이지가 로드될 때까지 기다려야 하고, 흐름이 끊기면서 사용자 경험을 방해하기도 한다.

Infinite Scrolling vs Pagination

무한 스크롤과 페이지네이션은 모두 장단점을 가지고 있으므로, 웹사이트의 목적과 컨텐츠의 성격에 따라 두가지 방식을 적절히 사용해야한다.

• 무한 스크롤은 사용자가 특별한 목적 없이 탐색할 때 콘텐츠를 추천을 위한 형태로 적합
• 페이지네이션의 경우 특정 목적을 가지고 탐색하는 경우 적합

참고 링크

• UX: Infinite Scrolling vs. Pagination
• 무한 스크롤 VS 페이지네이션
• Infinite Scroll Vs Pagination in UX Design