페이지 매김 모범 사례
잠재적으로 매우 커질 수있는 테이블에서 수행 해야하는 일부 페이지 매김을 처리하는 가장 좋은 방법은 확실하지 않습니다 (5,000 행 더하기).
첫 번째 질문은 페이지 당 표시되는 행의 양이 레이아웃에 의해서만 지시되거나 페이지의 양도 고려해야하는 것입니다. 예를 들어 <1000 show 20 rows,> = 1000 show 30 rows?
다음 질문은 사용자가 테이블을 가능한 한 많이 필터링했으며 50 페이지의 정보가 남아 있다고 가정하면 45 페이지로 이동하기 위해 입력 상자를 가져야합니까? 아니면 skip (1) skip (5) 버튼으로 충분합니까? 현재 최종 사용자가 테이블을 어떻게 사용하는지 알지 못하므로 먼저 시도해 볼 수있는 옵션이 확실하지 않습니다.
마지막으로 누구나 공유 할 수있는 페이지 매김에 대한 좋은 예가 있습니까? 나는 항상 좋은 참고 자료를 찾고 있습니다!
페이지 매김이 올바르게 수행되거나 수행되지 않을 수 있지만 웹 앱에서 페이지 매김을 수행하는 방법은 다음과 같습니다.
|< First, << Previous, Page [5] of 12, Next >>, Last >|
외부의 네 가지 옵션은 링크이고 Page [5] of 12는 [5]를 입력 필드로 사용하는 형식입니다. JavaScript를 사용하는 사용자의 경우 제출 버튼을 숨기고 초점이 맞지 않는 이벤트에 양식을 제출하거나 키를 누르십시오. 사용자는 표시하려는 행 수에 대한 옵션이 있으며 드롭 다운 메뉴에서 선택할 수 있습니다 (10, 20, 50, 100, 모두). 또한 페이지 매김 외에도 결과 정렬 및 필터링을 제공하지만 모든 상황에서 의미가있는 것은 아닙니다.
편집 :
다음은 더 나은 아이디어를 제공하기 위해 웹 응용 프로그램 모형의 스 니펫입니다. 이 버전에서는 단어가 버튼에서 생략되었지만 약간의 지연 후에 마우스를 놓으면 툴팁으로 나타납니다. 그러나 단어를 유지하면 사용성 수준이 높아질 수 있습니다.
지적해야 할 몇 가지 다른 것들 :
- "첫 번째"및 "이전"버튼은 첫 페이지이므로 비활성화되었습니다.
- 파란색은 활성 버튼을 나타냅니다 (색맹 사용자가 차이를 알 수 있도록하려면 색상 검사기를 통해이 특정 테마를 실행해야합니다).
- 버튼은 비활성화되어 있어도 항상 유지됩니다. 이것은 인터페이스 일관성을 제공합니다.
- 스케일로 인해 드롭 다운 선택 상자 대신 입력 필드를 선택했습니다. 3000 페이지가 있다면 아래로 스크롤하여 페이지를 찾지 않으려는 경우
- 페이지 매김은 단일 시각적 구성 요소로 그룹화되어 목적 상 유사성을 나타냅니다.
그러한 답변에 대해 죄송하지만 에 따라 다릅니다 . 어떤 유형의 콘텐츠가 있고 사용자가 찾고있는 것은 무엇입니까? 사용자의 목표는 무엇입니까? 웹 사이트입니까 아니면 응용 프로그램입니까?
예를 들어 무한 스크롤을 사용하면 페이지 매김을 피할 수있는 경우가 많습니다 ( Google 이미지 검색 의 검색 결과 참조).
페이지 매김의 문제점은 페이지 자체가 의미가 없다는 것입니다. 왜 45 페이지로 가야합니까? 왜 38이 아닌가? 내용이 정렬되어 있으면 페이지에 의미있는 이름 (알파벳 또는 날짜 범위의 문자 또는 의미가있는 다른 이름)을 줄 수 있습니다. 스크롤은 일반적으로 페이지를 탐색하는 것보다 훨씬 나은 경험을 제공하기 때문에 페이지 당 행 수는 최대한 커야합니다 (단, 일반적인 규칙은 아니며 예외가 있습니다).
그리고 예제와 모범 사례에 대해서는 great article 입니다.
일반적으로 페이지 당 항목 수는 다음 기준에 따라 결정됩니다.
- 어떤 종류의 데이터를 표시하고 있으며 주어진 수의 항목으로 페이지를 얼마나 오래 만들 수 있습니까?
- 페이지의 X 항목이 앱 성능에 어떤 영향을 미칩니 까?
- 사용자가 페이지 당 표시되는 항목 수를 사용자 정의 할 수 있도록 하시겠습니까?
- 인터 페이지 탐색에 관심이있는 경우 (예를 들어 사용자가 특정 페이지 번호 512로 이동하는 것에 관심이 있습니까?) 페이지 당 항목 수는 페이지 매김의 탐색 가능성에 어떤 영향을 줍니까?
- 어떤 페이지 매김 컨트롤을 사용할 수 있습니까?
위의 질문에 대답하면 두 번째 질문에 대한 답변으로 멋지게 이어질 것입니다. 페이지 매김은 보유한 데이터와 표시하는 항목 수의 곱입니다. 내 조언은 사용자가보고 싶은 페이지를 지정할지 여부를 결정하는 것입니다. 사용자 테스트를 수행하고 어떤 종류의 정보가 나열되는지 생각하여이를 파악할 수 있습니다. 예를 들어, 검색 결과는 일반적으로 암호화 된 불투명 알고리즘으로 정렬되므로 "47 페이지로 이동하고 싶습니다"라고 말할 수있을 정도로 구체적이지 않습니다. 그러나 알파벳 순서로 이름을 나열하는 경우 47 페이지로 이동하는 것이 매우 직관적 일 수 있습니다.
마찬가지로 표시하는 데이터 형식도 탐색에 영향을 줄 수 있으며 패싯 탐색 디자인 패턴을 고려하여 작업을 단순화 할 수 있습니다. 방금 알파벳 이름을 지정한 예에서 데이터가 많은 경우 문자 (A | B | C | D 등)와 각 문자 내의 페이지를 사용하여 페이지 매김을 고려할 수 있습니다.
구체적으로 :
- 사용자가 원하는 사실을 알지 않는 한 사용자에게 너무 구체적인 제어권을 부여하지 않는 것이 좋습니다
- 대신 현재 페이지 주위에 패딩을 제공하십시오 (1 .. 7 8 [9] 10 11 .. 28)
- 성능상의 이유로 불가능한 경우를 제외하고 알고리즘을 기준으로 정렬하는 경우 첫 페이지와 마지막 페이지를 포함하십시오.
- 알고리즘을 기준으로 정렬하는 경우 데이터 정렬에 따라 다양한 정렬 옵션 (예 : 정렬 순서 역전)을 고려하십시오.
페이지 매김의 예 :
- Flickr -선택된, 비활성 및 링크 상태 간의 명확한 구분; 접근 가능한 색상; 클릭률이 좋은 패딩 링크 현재 페이지 주위에 좋은 패딩; 지나치게 복잡하지 않습니다. 개인적인 마음에 드는 것.
- Funda.nl -페이지 매김에 반영되는 크고 단순하며 읽기 쉬운 디자인의 네덜란드 부동산 웹 사이트
- Bing -BS 없음, 미니멀리스트 타이포그래피 디자인으로 페이지 매김이 매우 미묘하지만 동시에 사용하기 쉽다는 의미
- Google (분명히)-일종의 변칙적이지만 많은 옵션이 있음에도 불구하고 여전히 단순하다고 느끼고 얼굴에 미소를 짓습니다.
- Chris Messina는 Flickr의 디자인 패턴 앨범에서 매우 훌륭한 페이지 매김 을 가지고 있습니다.
사용자는 스크롤 후 페이징을 선호합니다. 작은 탐색 링크를 목표로하는 것보다 스크롤 휠을 조작하는 것이 훨씬 쉽습니다.