태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'primary action'에 해당되는 글 1건

  1. 2011.12.13 [정보디자인] pagination 안티패턴 (11) by 無異
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
Ad Test...