Difference between revisions of "Pagination"
Jump to navigation
Jump to search
| Line 25: | Line 25: | ||
<li>A minimum of 2 pages is required to use this pattern.</li> | <li>A minimum of 2 pages is required to use this pattern.</li> | ||
</ul> | </ul> | ||
====Do not use when=== | ====Do not use when==== | ||
<ul><li>Pagination is showing result sets of multiple items. Use the Prev/Next with Item Counts pattern instead.</li> | <ul><li>Pagination is showing result sets of multiple items. Use the Prev/Next with Item Counts pattern instead.</li> | ||
<li>If less than 2 pages, | <li>If less than 2 pages, do not paginate.</li></ul> | ||
====Behavior==== | ====Behavior==== | ||
<ul><li>On page 1, Previous is disabled (but displays).</li> | <ul><li>On page 1, Previous is disabled (but displays).</li> | ||
<li>On the last page, Next is disabled (but displays).</li> | <li>On the last page, Next is disabled (but displays).</li> | ||
<li>In all in-between pages, both buttons are enabled.</li></ul> | <li>In all in-between pages, both buttons are enabled.</li></ul> | ||
===Prev/Next with item counts=== | |||
</h3><p data-renderer-start-pos="4048">This pattern consists of a Previous button to move to the beginning of a list of data items, a Next button to move to the next set of results, and in between a count of the items showing and the total number of items. For example, on the Manage Process Reporting page, we paginate the list of processes into blocks of 25 at a time. The pagination, currently in the bottom right corner, displays the number of items being displayed (26-50 of 204, for example) between the previous and next buttons. </p><h4 id="Use-when:.1"><div class="heading-anchor-wrapper"><div class="sc-dqBHgY fEBKbJ"><div><button class="sc-gxMtzJ gMcnWS"><span class="sc-fjdhpX cEfgOz" role="img" aria-label="copy"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></span></button></div></div></div>Use when:</h4><ul class="ak-ul"><li><p data-renderer-start-pos="4559">Paginating through a data set where informing the user of the number of items in the data set (and which ones they're viewing) adds context. </p></li><li><p data-renderer-start-pos="4704">A minimum of 1 result in the data set is required to use this pattern. </p></li></ul><h4 id="Do-not-use-when:.1"><div class="heading-anchor-wrapper"><div class="sc-dqBHgY fEBKbJ"><div><button class="sc-gxMtzJ gMcnWS"><span class="sc-fjdhpX cEfgOz" role="img" aria-label="copy"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></span></button></div></div></div>Do not use when:</h4><ul class="ak-ul"><li><p data-renderer-start-pos="4799">The content you're paginating is paged content (ie. paragraphs of stuff or single records). Use the Prev/Next only pattern in that case. </p></li><li><p data-renderer-start-pos="4940">If there are no results, display the no results message in the table and <strong>do not display the pagination. </strong></p></li></ul><h4 id="Behavior:.1"><div class="heading-anchor-wrapper"><div class="sc-dqBHgY fEBKbJ"><div><button class="sc-gxMtzJ gMcnWS"><span class="sc-fjdhpX cEfgOz" role="img" aria-label="copy"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></span></button></div></div></div>Behavior:</h4><ul class="ak-ul"><li><p data-renderer-start-pos="5061">On page 1, Previous is disabled (but displays).</p></li><li><p data-renderer-start-pos="5112">On the last page, Next is disabled (but displays).</p></li><li><p data-renderer-start-pos="5166">In all in-between pages, both buttons are enabled.</p></li><li><p data-renderer-start-pos="5220">Display the number of items in plain text. </p></li></ul><h4 id="Optional--addition"><div class="heading-anchor-wrapper"><div class="sc-dqBHgY fEBKbJ"><div><button class="sc-gxMtzJ gMcnWS"><span class="sc-fjdhpX cEfgOz" role="img" aria-label="copy"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></span></button></div></div></div>Optional addition</h4><p data-renderer-start-pos="5289">Bracket the Previous and Next buttons with First and Last links if the user is likely to need to rapidly move to the front of the list. (If the user is more likely to go somewhere else 99% of the time, don't include these, because they're clutter if the use case isn't regularly exercised.) When on the first or last page, do not display those links (because "disabled link" shouldn't be a thing.) </p><div class="media-single image-center sc-kfGgVZ fUfchs sc-gzOgki jLXHWG" width="370" data-node-type="mediaSingle" data-layout="center"><div class="sc-boHNyh jfWTVQ"><div class="sc-fgITWd dfzgdF" data-testid="media-card-view"><div class="sc-kDkoGq lXGOL sc-gXPbch hxUyHf" data-testid="media-file-card-view" data-test-media-name="http://doc.lab.boomi.com/download/attachments/25069335/prev+next+buttons+with+item+count.png?version=1&modificationDate=1499727691000" data-test-status="complete"><div class="wrapper"><div class="img-wrapper"><img class="sc-hBAczQ fQGYhq" data-testid="media-image" draggable="false" src="http://doc.lab.boomi.com/download/attachments/25069335/prev+next+buttons+with+item+count.png?version=1&modificationDate=1499727691000" style="transform: translate(-50%, -50%); width: 100%;"></div></div></div></div></div></div><h2 id="Additional-Resources"><div class="heading-anchor-wrapper"><div class="sc-dqBHgY fEBKbJ"><div><button class="sc-gxMtzJ gMcnWS"><span class="sc-fjdhpX cEfgOz" role="img" aria-label="copy"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></span></button></div></div></div>Additional Resources</h2><ul class="ak-ul"><li><p data-renderer-start-pos="5714"><a class="sc-kIPQKe gRuEgX" href="https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1" title="https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1">Infinite scrolling vs pagination</a> by Nick Babich on UX Planet. The summary: there's only a few places infinite scrolling is appropriate and not annoying. Don't overuse it. </p></li><li><p data-renderer-start-pos="5889"><a class="sc-kIPQKe gRuEgX" href="https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/" title="https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/">Pagination - examples and good practices</a> by Sven Lennartz on Smashing Magazine. This one's from 2007 but the examples are still frighteningly valid. </p></li><li><p data-renderer-start-pos="6042"><a class="sc-kIPQKe gRuEgX" href="http://uxmovement.com/navigation/avoid-the-pains-of-pagination/" title="http://uxmovement.com/navigation/avoid-the-pains-of-pagination/">Avoid the pains of pagination</a> on <a class="sc-kIPQKe gRuEgX" href="http://UXMovement.com" title="http://UXMovement.com">UXMovement.com</a></p></li><li><p data-renderer-start-pos="6093"><a class="sc-kIPQKe gRuEgX" href="https://www.bennadel.com/blog/2951-the-user-experience-ux-of-pagination.htm" title="https://www.bennadel.com/blog/2951-the-user-experience-ux-of-pagination.htm">The User Experience of Pagination</a> by Ben Nadel</p></li><li><p data-renderer-start-pos="6143"><a class="sc-kIPQKe gRuEgX" href="https://www.nngroup.com/articles/item-list-view-all/" title="https://www.nngroup.com/articles/item-list-view-all/">Users' Pagination Preferences and "View All"</a> by Jakob Nielsen on Nielsen Norman Group. </p></li><li><p data-renderer-start-pos="6234"><a class="sc-kIPQKe gRuEgX" href="https://gist.github.com/brajeshwar/2802235" title="https://gist.github.com/brajeshwar/2802235">Pagination Best Practices</a> by Faruk Ateş</p></li></ul><p data-renderer-start-pos="6279"><br><br></p></div></div></div></div></div></div></div></div><div class="ViewPage_likesAndLabelsContainer_nyS" id="likes-and-labels-container" data-test-id="likes-and-labels-container"><div><div><span class="sc-tilXH lbUYVi"><span><button class="sc-cSHVUG fUsTYC"><span class="sc-fjdhpX foygSs" role="presentation"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><path d="M4 12v7a.971.971 0 0 0 .278.704.99.99 0 0 0 .701.296H6v-9H4.98a.99.99 0 0 0-.701.296A.971.971 0 0 0 4 12zm15.281-.96a3.046 3.046 0 0 0-2.321-1.061h-2.634c.04-.181.08-.36.11-.532.515-2.934 0-4-.504-4.594A2.432 2.432 0 0 0 12.075 4a3.078 3.078 0 0 0-2.968 2.751c-.393 1.839-.454 2-.968 2.725l-.768 1.089a2.011 2.011 0 0 0-.363 1.141v6.273c.001.532.216 1.041.596 1.416s.896.585 1.433.584h7.247a3.014 3.014 0 0 0 2.997-2.507l.677-4a2.963 2.963 0 0 0-.677-2.432zm-1.998 6.1a1.007 1.007 0 0 1-1 .835H9.038v-6.269l.767-1.089a7.577 7.577 0 0 0 1.302-3.509c.036-.543.255-1.209.969-1.108.714.1.575 1.916.363 3.1a19.712 19.712 0 0 1-.868 2.882l5.39-.008c.297-.001.58.128.773.352a.993.993 0 0 1 .226.813l-.676 4.001z" fill="currentColor" fill-rule="evenodd"></path></svg></span><span><span>Like</span></span></button><span class="sc-fYxtnH gBQpNg"></span></span><span data-test-id="likes-summary-span"><span>Be the first to like this</span></span></span></div></div><div class="ViewPage_labelsSection_3nD"><div class="sc-iHhHRJ jnXgrr"><div class="label-list"><section class="labels-content"><div class="sc-hcnlBt deqNiu"><span>No labels</span></div><div class="sc-jRhVzh cGoEsH"><div class="sc-guztPN guYVSQ"><a class="sc-cFlXAS iqMrjA" title="Add labels"><span class="sc-fjdhpX dsOTIq" role="img" aria-label="Add labels"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><path d="M11.433 5.428l-4.207.6A2 2 0 0 0 5.53 7.727l-.6 4.207a1 1 0 0 0 .281.849l6.895 6.894a.999.999 0 0 0 1.414 0l5.657-5.657a1 1 0 0 0 0-1.414L12.282 5.71a.998.998 0 0 0-.849-.283m-.647 5.858A1.666 1.666 0 1 1 8.43 8.929a1.666 1.666 0 0 1 2.357 2.357" fill="currentColor" fill-rule="evenodd"></path></svg></span></a></div></div></section></div></div></div></div><div id="comments-section-fabric" data-test-id="comments-section-fabric-new" class="css-1x2gd0h e1xamcc80"><div class="comment-threads top-level css-odz94x e9xvevt0" id="page-comments" data-test-id="page-comments"></div><div id="addcomment" class="css-1b2c913 e2juydw2"><div class="css-1bibldb e2juydw3"><div class="sc-jlyJG fNmdHF"><div style="display: inline-block; position: relative; outline: 0px; height: 36px; width: 36px;"><span class="sc-ckVGcZ gJCenN"><span role="img" style="background-color: transparent; background-image: url("https://avatar-management--avatars.us-west-2.prod.public.atl-paas.net/557058:e3907d24-c832-4945-8b9c-5ebff7817bb2/1133d468-edb2-490c-aac6-985d1844b48e/128"); background-size: cover; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; display: flex; flex: 1 1 100%; height: 100%; width: 100%; background-position: center center; background-repeat: no-repeat no-repeat;"></span></span></div></div></div><div class="css-1do3hbd e2juydw5"><div data-test-id="add-comment-button" title="Add a Comment" class="css-1lxkjvr e102he6i1"><span>Write a comment…</span></div></div></div></div></div></div> | |||
Revision as of 13:53, 1 June 2020
Pagination is an in-page navigation element that allows users to move between multiple pages of data for a single data set. It can also be used to provide multiple pages of an article, but that's not necessarily a best practice.
There are literally thousands of ways to display pagination, but good pagination has a few things in common:
- Page lengths are reasonable.
- Some users want to "view all" and that's a valid choice so long as it won't take down our servers or their browsers. Performance is a big factor here in both directions -- users might want to display all just so they only have to deal with load times once, and on the other hand the load times for "all" may be atrocious.
- For content, users would prefer to scroll down a page than click and wait for content to load.
- For data tables, or a list of products or items (aka Amazon) 25-75 items is reasonable for a list of products or items.
- Global search results for a website generally don't climb above 20.
- Items that can be visually compared (such as eBay search results) may range as high as 300.
- Infinite scroll is rarely the right answer for a website like Boomi's but for something like Pinterest, it may be the right answer.
- The controls are easy to tap or click. We want them easy to locate and easy to hit. If providing numbers for pages (i.e 1 2 3 4) make sure they're spaced far enough apart that they can easily be clicked.
- The current page is clearly identified. This is very important for data tables, but if paginating through multiple pages of content, the page's content will do.
- Provide "Previous" and "Next" links. Labels work better than just iconography, especially if it's small.
- Make sure it's keyboard accessible.
- Give the user an idea of the size of the results. For short result sets this might be done by providing clickable numbers between the navigation buttons ( <Previous 1 2 3 4 Next >) and for long lists this might be done by providing current location (<Previous Page 5 of 15 Next> or <Previous 1-15 of 30 Next >)
Nick Babich recommends against providing First and Last links in his article [href="https://uxplanet.org/pagination-best-practices-76fbd3f5a78d Pagination Best Practices], but I'mnot so sure he's got that one right.
Pagination design patterns
Prev/Next only
A Previous button to move backwards in the results, and a Next button to move forward.
Use when
- Paginating through content or a list of items where the number of items (or pages) is obvious through other means on the page.
- A minimum of 2 pages is required to use this pattern.
Do not use when
- Pagination is showing result sets of multiple items. Use the Prev/Next with Item Counts pattern instead.
- If less than 2 pages, do not paginate.
Behavior
- On page 1, Previous is disabled (but displays).
- On the last page, Next is disabled (but displays).
- In all in-between pages, both buttons are enabled.
Prev/Next with item counts
This pattern consists of a Previous button to move to the beginning of a list of data items, a Next button to move to the next set of results, and in between a count of the items showing and the total number of items. For example, on the Manage Process Reporting page, we paginate the list of processes into blocks of 25 at a time. The pagination, currently in the bottom right corner, displays the number of items being displayed (26-50 of 204, for example) between the previous and next buttons.
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>Use when:
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>
Paginating through a data set where informing the user of the number of items in the data set (and which ones they're viewing) adds context.
A minimum of 1 result in the data set is required to use this pattern.
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>Do not use when:
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>
The content you're paginating is paged content (ie. paragraphs of stuff or single records). Use the Prev/Next only pattern in that case.
If there are no results, display the no results message in the table and do not display the pagination.
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>Behavior:
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>
On page 1, Previous is disabled (but displays).
On the last page, Next is disabled (but displays).
In all in-between pages, both buttons are enabled.
Display the number of items in plain text.
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>Optional addition
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>
Bracket the Previous and Next buttons with First and Last links if the user is likely to need to rapidly move to the front of the list. (If the user is more likely to go somewhere else 99% of the time, don't include these, because they're clutter if the use case isn't regularly exercised.) When on the first or last page, do not display those links (because "disabled link" shouldn't be a thing.)
<img class="sc-hBAczQ fQGYhq" data-testid="media-image" draggable="false" src="http://doc.lab.boomi.com/download/attachments/25069335/prev+next+buttons+with+item+count.png?version=1&modificationDate=1499727691000" style="transform: translate(-50%, -50%); width: 100%;">
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>Additional Resources
<button class="sc-gxMtzJ gMcnWS"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><g fill="currentColor" fill-rule="evenodd"><path d="M12.856 5.457l-.937.92a1.002 1.002 0 0 0 0 1.437 1.047 1.047 0 0 0 1.463 0l.984-.966c.967-.95 2.542-1.135 3.602-.288a2.54 2.54 0 0 1 .203 3.81l-2.903 2.852a2.646 2.646 0 0 1-3.696 0l-1.11-1.09L9 13.57l1.108 1.089c1.822 1.788 4.802 1.788 6.622 0l2.905-2.852a4.558 4.558 0 0 0-.357-6.82c-1.893-1.517-4.695-1.226-6.422.47"></path><path d="M11.144 19.543l.937-.92a1.002 1.002 0 0 0 0-1.437 1.047 1.047 0 0 0-1.462 0l-.985.966c-.967.95-2.542 1.135-3.602.288a2.54 2.54 0 0 1-.203-3.81l2.903-2.852a2.646 2.646 0 0 1 3.696 0l1.11 1.09L15 11.43l-1.108-1.089c-1.822-1.788-4.802-1.788-6.622 0l-2.905 2.852a4.558 4.558 0 0 0 .357 6.82c1.893 1.517 4.695 1.226 6.422-.47"></path></g></svg></button>
<a class="sc-kIPQKe gRuEgX" href="https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1" title="https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1">Infinite scrolling vs pagination</a> by Nick Babich on UX Planet. The summary: there's only a few places infinite scrolling is appropriate and not annoying. Don't overuse it.
<a class="sc-kIPQKe gRuEgX" href="https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/" title="https://www.smashingmagazine.com/2007/11/pagination-gallery-examples-and-good-practices/">Pagination - examples and good practices</a> by Sven Lennartz on Smashing Magazine. This one's from 2007 but the examples are still frighteningly valid.
<a class="sc-kIPQKe gRuEgX" href="http://uxmovement.com/navigation/avoid-the-pains-of-pagination/" title="http://uxmovement.com/navigation/avoid-the-pains-of-pagination/">Avoid the pains of pagination</a> on <a class="sc-kIPQKe gRuEgX" href="http://UXMovement.com" title="http://UXMovement.com">UXMovement.com</a>
<a class="sc-kIPQKe gRuEgX" href="https://www.bennadel.com/blog/2951-the-user-experience-ux-of-pagination.htm" title="https://www.bennadel.com/blog/2951-the-user-experience-ux-of-pagination.htm">The User Experience of Pagination</a> by Ben Nadel
<a class="sc-kIPQKe gRuEgX" href="https://www.nngroup.com/articles/item-list-view-all/" title="https://www.nngroup.com/articles/item-list-view-all/">Users' Pagination Preferences and "View All"</a> by Jakob Nielsen on Nielsen Norman Group.
<a class="sc-kIPQKe gRuEgX" href="https://gist.github.com/brajeshwar/2802235" title="https://gist.github.com/brajeshwar/2802235">Pagination Best Practices</a> by Faruk Ateş
<button class="sc-cSHVUG fUsTYC"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><path d="M4 12v7a.971.971 0 0 0 .278.704.99.99 0 0 0 .701.296H6v-9H4.98a.99.99 0 0 0-.701.296A.971.971 0 0 0 4 12zm15.281-.96a3.046 3.046 0 0 0-2.321-1.061h-2.634c.04-.181.08-.36.11-.532.515-2.934 0-4-.504-4.594A2.432 2.432 0 0 0 12.075 4a3.078 3.078 0 0 0-2.968 2.751c-.393 1.839-.454 2-.968 2.725l-.768 1.089a2.011 2.011 0 0 0-.363 1.141v6.273c.001.532.216 1.041.596 1.416s.896.585 1.433.584h7.247a3.014 3.014 0 0 0 2.997-2.507l.677-4a2.963 2.963 0 0 0-.677-2.432zm-1.998 6.1a1.007 1.007 0 0 1-1 .835H9.038v-6.269l.767-1.089a7.577 7.577 0 0 0 1.302-3.509c.036-.543.255-1.209.969-1.108.714.1.575 1.916.363 3.1a19.712 19.712 0 0 1-.868 2.882l5.39-.008c.297-.001.58.128.773.352a.993.993 0 0 1 .226.813l-.676 4.001z" fill="currentColor" fill-rule="evenodd"></path></svg>Like</button>Be the first to like this
<section class="labels-content"></section>
No labels
<a class="sc-cFlXAS iqMrjA" title="Add labels"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" role="presentation"><path d="M11.433 5.428l-4.207.6A2 2 0 0 0 5.53 7.727l-.6 4.207a1 1 0 0 0 .281.849l6.895 6.894a.999.999 0 0 0 1.414 0l5.657-5.657a1 1 0 0 0 0-1.414L12.282 5.71a.998.998 0 0 0-.849-.283m-.647 5.858A1.666 1.666 0 1 1 8.43 8.929a1.666 1.666 0 0 1 2.357 2.357" fill="currentColor" fill-rule="evenodd"></path></svg></a>
Write a comment…