[정보디자인] pagination 안티패턴

[정보디자인] pagination 안티패턴

2011. 12. 13. 18:24ㆍRe-design!
無異

이 글을 웹에서 보고 계시다면 페이지의 맨 아래에 페이지 번호가 쭉 나열된 걸 보실 수 있을텐데요. 이런 UI 요소를 pagination 이라고 합니다. 블로그 글 목록이나 검색 처럼 자료의 양이 많으면 한 번에 표현하기 어려운데요. 페이지 단위의 청크로 나눠 보여주고 쉽게 원하는 부분으로 이동할 수 있도록 하는 UI 패턴입니다.

좀 더 많은 pagination 디자인 유형은 스매슁매거진 기사에 잘 정리가 되어 있습니다.
http://www.smashingmagazine.com/2007/11/16/pagination-gallery-examples-and-good-practices/

익숙하지만 나쁜 UI

이렇게 페이지 숫자들과 이전,다음이 나열되어 있는 형태는 상당히 많이 쓰이는 익숙한 UI인데요. 관습적으로 쓰일 뿐이지 사용성 측면에서는 실제 사용 행태를 반영하지 않은 나쁜 UI 패턴이라고 생각합니다. (사용 맥락에 따라서 다를 수 있으므로 블로그 글 목록으로 한정합니다.)

페이징 사용 행태

페이징 사용 행태는 다음(이전) 목록을 순차적으로 보는 것이 가장 빈번하고 특정 페이지로 점프하는 경우는 상대적으로 적습니다. 대부분 경우 어떤 항목이나 글이 있는지 예상을 못하기 때문에 목록을 순차적으로 훑어보게 됩니다. 목록의 처음이나 끝으로 이동한다든지 새로운 글을 보기 위해 마지막 봤던 페이지로 이동하든지, 관심없는 글들을 스킵하거나 예전에 봤던 글을 찾기 위해 해당 날짜로 빨리 이동 한다든지, 무언가 예측 가능한 경우에만 특정 페이지로 점프하고요. 그렇게 사용하시죠?

이렇게 주 사용 행위가 나머지 행위의 사용 빈도 차이가 큰 경우에 primary action이라는 패턴을 사용합니다. 자주 쓰는 건 크게 강조하고 잘 안 쓰는 건 약하게 표시해야 보기도 편하고 조작도 쉬워집니다.
강조라는 것은 상대적이어서 중요한 걸 크게 하는 것보다 중요도가 적은 것에 주의가 적게 가도록 하고 노이즈를 줄여 주는게 더 효과적입니다. 선택지가 많으면 반응 시간이 느려질 테니까요. http://en.wikipedia.org/wiki/Hick's_law

페이지 번호 나열을 보여줄 필요가 있나요?

이런 사용 행태를 고려하면 페이지 번호 나열을 없애는게 좋습니다. 페이지 번호 나열은 대부분의 경우에 불필요한 노이즈입니다. 검색 결과나 빈번하게 업데이트되는 SNS timeline 같은 경우는 페이지를 예측하기 어려우니까 특정 페이지로 점프하는 기능을 없애고 단순히 더 보기만을 사용하는 UI 사용이 늘고 있습니다. 네이버 블로그나 티스토리의 모바일 페이지가 이런 패턴을 사용하고 있는데요. 하지만 이것 또한 잘 못된 사용입니다. 블로그는 검색이나 타임라인과는 성격이 달라 극단적으로 페이지 이동을 없애면 불편합니다. 검색을 통해 접근한 블로그를 목록과는 반대로 시간순으로 훑어보려고 해도 페이지 이동이 안되니 답답합니다.

링크를 다 보여주세요

페이지 번호 나열의 또 나쁜 점은 페이지라는 청크를 다시 10개 정도의 페이지 번호 청크로 나누어 인접 영역으로만 이동하도록하는 귀찮은 구조이기 때문입니다. 특정 페이지로 이동하려는 경우에 복잡한 페이징 구조를 만들게 아니라 그냥 전체 페이지 링크를 다 보여주는게 간결하고 좋습니다. 테이블 형태로 전체 페이지를 표시하면 현재 위치를 확인하는데도 수월하고요. 물론 항상 전체 페이지를 모두 보여주면 복잡하니까 처음에는 가려 두었다 필요한 경우에 펼쳐 보이도록 합니다. ios의 리스트에서도 primary action 은 항목을 탭하는 것으로, secondary actions은 기능을 감추어 두었다가 detail disclosure button이란 파란 화살표 버튼을 누르면 상세 기능이 펼쳐지도록(상세페이지이동) 합니다.