태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2011.12.13 18:24

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

이 글을 웹에서 보고 계시다면 페이지의 맨 아래에 페이지 번호가 쭉 나열된 걸 보실 수 있을텐데요. 이런 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이란 파란 화살표 버튼을 누르면 상세 기능이 펼쳐지도록(상세페이지이동) 합니다.


실제로 구현을 해보면 모바일에서는 이전 다음을 하단에 배치하는 것보다 이전을 목록의 상단에 두고 목록을 계속 추가하는게 사용이 더 편리했습니다.





지금도 목록을 만들고 그냥 생각없이 페이지 번호를 그려넣고 있지는 않나요?




[참고##Pagination##]
신고

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 11
  1. 이 재용 2011.12.13 20:47 신고 address edit & del reply

    매우 훌륭한 아이디어라고 생각합니다. 다만, 이렇게 한꺼번에 모든 링크를 보여줄 거라면, 페이지 번호를 현재부터 1,2,3 이라고 매기는 대신, 맨 뒤에서부터 매긴다면 더 편리할 듯 합니다. 과거에 읽었던 글이 몇 번째 페이지에 있는지 기억한다면 (물론 매우 예외적인 경우이긴 하지만, 이 글에서 다루는 케이스 자체가 매우 예외적인 것이니까요) 더 편리하겠죠. 자주 참조하는 글이라면 몇 페이지에 있었는지 기억할 수 있을 것 같아요. 현재의 구조에선 계속 페이지 번호가 바뀌니까 불가능하고요.

  2. 無異 2011.12.15 12:28 신고 address edit & del reply

    예. 저도 그런 고민을 해보았는데요. 기존 넘버링 방식을 바꿔서 초래되는 혼동에 비해 얻는게 적을 것 같습니다. 책처럼 페이지 수가 고정된게 아니면, 시간 순으로 페이지 번호를 붙일때 기준이 모든 블로그마다 달라서 (블로그 생성일,블로깅 빈도) 페이지 번호를 통해 예측 할 수 있는 정보가 적어질 것 같습니다. 또 게시판이나 블로그의 글들은 책과는 달리 순차적인 흐름과 상관없이(연재물이 아니면) 독립적이어서 오래된 글보다는 최신 글이 더 가치가 높은 경우가 많으니까요.
    현재 기준으로 2페이지에 있다는게 언젠진 모르겠지만 블로그 개설 후 437페이지에 있다는 것 보다 더 이해하기 쉽고 유의미한 정보이지 않나요?

    • 이 재용 2011.12.18 23:29 신고 address edit & del

      정말 그러네요... 제 생각이 짧았습니다. 게시판에 글 올라오는 속도에 따라 다소 다르긴 하겠지만, 어느 경우나 (특히 오래된 게시판이라면 더욱) 현재에서부터 숫자를 세는 것이 더 나을 것 같습니다.

  3. 無異 2011.12.15 12:45 신고 address edit & del reply

    논지와는 벗어나서 함께 쓰다 말았는데 네이버 블로그 글 목록의 페이징 UI 가 가장 최악입니다. 1. 다음 페이지로 가지 않는 멍텅구리 '다음' 링크 2. 전체 페이지 수를 알 수도 없고 3. 맨 처음(시간순)으로 이동 할 수도 없고 4. 번호의 클릭 영역도 너무 작아요.

    • 이 재용 2011.12.18 23:30 신고 address edit & del

      이 내용은 독립된 글로 하나 쓰시는 것이 좋을 듯 합니다. 이미지 없이 보니깐 잘 이해가 안 갑니다.

  4. 김태원 2012.02.19 23:42 신고 address edit & del reply

    이 글을 보면서 문뜩 생각이 나서 댓글을 달게 되었습니다. 질문이기도 하구요. 페이지 수가 한 화면에 출력하기도 벅찰 정도로 많다면 어떻게 해야하는가요?

    • 無異 2012.03.07 11:07 신고 address edit & del

      페이지로 직접 이동하는 경우가 빈번하지 않다는 가정이 이런 디자인의 방향이 되었는데요. 그래서 평상시는 가려져있는 상태고요.
      필요에 따라 페이지 번호 바로가기를 펼쳤을때 화면을 넘어가게 많다고 하여도 스크롤하면 되니까 크게 문제가 되지는 않을 것 같습니다.

      실제로 저는 네이버 블로그를 이런식으로 리디자인된 형태로만 보고 있는데요. 2-3년간 사용하는 동안 페이징 번호가 100개를 넘는 블로그를 페이징으로 직접 이동했던 경우는 서너번 정도 밖에 없었던 것 같아요.

  5. 이 재용 2012.03.29 10:30 신고 address edit & del reply

    http://ui-patterns.com/patterns/Pagination 참고하세요.

  6. 이야기꾼 2013.09.16 09:23 신고 address edit & del reply

    페이지네이션은 원하는 문서를 찾기에는 사실 가장 무식하고 단순한 방법인데, 이제는 전보다 웹기술이 더 발전했으니
    페이지 넘버에 마우스오버를 했을때 해당 페이지에 있는 글 목록을 Ajax로 불러와 툴팁으로 보여준다거나, 커뮤니티 사이트 등에서는 로그인을 했을 경우 내 글이 있는 페이지 넘버에는 하이라이트를 준다거나 하는 알고리즘은 어떨까 고민해봅니다.

    기능은 다르지만, 크롬브라우저에서는 웹문서 검색을 할 때 우측 스크롤바에 해당 단어가 있는 위치를 노란색으로 표시를 해주는 것처럼 직관적이면 어떨까요.

  7. lxf 2013.09.16 11:41 신고 address edit & del reply

    http://d.pr/v/q63U 디테일은 좀 부족해 보이지만 이런 컨셉은 어떤가요?

    • 無異 2013.09.16 14:57 신고 address edit & del

      특정 페이지 이동 시에 동적인 스크롤로 개선된 부분이 있지만 여전히 아쉬운 부분이 보입니다.

      현재 페이지네이션의 가장 문제라고 생각되는 건 맥락상 다음 페이지로 이동하는 경우의 빈도가 월등히 높음에도 1/n 로 조작을 불편하게 만든다는 점이거든요.

      또 특정 페이지로 이동하기 위해 스크롤 할 때는 별도의 모드니까 굳이 한 줄의 좁은 영역으로 제한 할 필요는 없을 것 같습니다.

      그리고 가장 최근 글목록의 번호가 1부터 거꾸로 시작하는지 않고 증가하는 방식인데요. 이에 대해서도 최근이라는 정보를 쉽게 알 수 있게 1부터 넘버링하는게 좋다고 생각합니다. 이에 대해서는 이 글의 첫 댓글인 이재용님의 의견에 대해서 답을 한 부분이 있습니다.

Ad Test...