Accordion Pagination: A Faster, Smoother Way to Paginate

by on 11/24/10 at 10:33 am

When you put too much content on your pages, users can easily get overwhelmed. To avoid this, most sites use a numerical pagination to divide content across different pages. This form of pagination might work well when you have a large set of pages, but when you have a small set of pages there’s a better way to paginate that could give your users a slicker and more intuitive experience.

By combining an accordion menu with a numerical pagination, you can create an accordion pagination that allows users to paginate faster and smoother. Accordion pagination uses the accordion menu’s AJAX functionality to load new content on the same page. As a result, users no longer have to wait for a new page to load when they paginate to the next one. The new content loads and displays on the user’s same page.

Accordion pagination is not only efficient, but it’s also engaging. When users use an accordion pagination, it gives the intuitive feeling of “flipping” the page. This is because each time the user “flips” the page, the page numbers visually stack up making it easy to see the page progression. Most users avoid clicking too deep into paginations. But by making your pagination more engaging with an accordion pagination, you could encourage users to click deeper into your pagination.

Perhaps the biggest benefit with accordion paginations is that they save you a lot of space. When one page opens up, the other one collapses. This allows you to display content to users without overwhelming them. It also prevents users from skipping ahead, which is particularly useful for multi-page forms.

Accordion paginations can make pagination more efficient and less overwhelming. It may take a little more time and effort to execute than a numerical pagination, but it’s worth it if it gives users a better experience overall.

14 Responses to “Accordion Pagination: A Faster, Smoother Way to Paginate”

  1. mario

    Nov 26th, 2010

    Man, I seriously hate pagination. But this looks somewhat useful actually. In particular because the page numbering is big and reachable and not teensy-weensy.

    • anthony

      Nov 28th, 2010

      Page number visibility and feedback is definitely one of the advantages of accordion pagination over regular pagination. I can’t stand the tiny number links either.

  2. Ricardo Saavedra

    Nov 26th, 2010

    I think it’s a good idea paginate dynamically. But we cannot forget that put different ideas in the same page doesn’t work for SEO.

    For SEO reasons it’s recommended put different concepts in different pages.

    Anyway, that’s a good alternative!

    • Sagi

      Nov 26th, 2010

      …That’s why client side pagination using the jQuery accordion is probably the standard way to implement it.

  3. Steve

    Nov 26th, 2010

    Accordion pagination is a great way to break content up. I know for me, if I see a gigantic block of text I just skip over it because it seems like it’ll take SO long to read through all of it, but if it’s broken up I’d be more inclined to read it.

    I think it’ll be a while before we see mainstream adoption of this, though, because people like to break things up so they can generate more ad views. I’m not sure why they have this mindset because dynamic loading and tracking of ad views could easily be implemented. I just think it takes a while to get away from the status quo which is unfortunate, especially in this case.

    • anthony

      Nov 28th, 2010

      Breaking up pages for the purpose of generating more ad views didn’t occur to me. I thought viewing an ad multiple times by the same user would only count as 1 unique view.

      We probably won’t see mainstream adoption of this not for a long time if ever. Either way, I think the advantages of it outweigh the advantages of the conventional alternative, at least for multiple page articles and forms.

  4. Will Quick

    Nov 29th, 2010

    Hi Anthony,

    Have you got any material that’ll shed some light on how to properly implement this? They look great!

    - Will

  5. Andrew

    Nov 30th, 2010

  6. Renat Zubairov

    Nov 30th, 2010

    Nice article. Interesting suggestion. One side-effect: such pagination will potentially increase the bounce-rate, hence decreasing Google’s ranking.

  7. Reed Botwright

    Dec 1st, 2010

    Very interesting concept! I especially like the idea of making pagination much more approachable. For one, I don’t think enough effort is put into details of usability such as pagination. Usability ends up being the entire experience one has with an interface, including the details.

    We love touches like this. I hope we can consider it for a not too distant project!

  8. Jimson

    Dec 2nd, 2010

    @Steve

    The flipside to this is that by hiding copy users are also more likely ignore it. It’s pretty much ‘swings and roundabouts’ , benefits to long-copy, pagination and accordion separation. It’s about choosing the right solution given the context.

    SEO arguments aren’t actually applicable to a lot of online businesses to be honest (where organic search is trivial) so if you’re presenting a large block of copy then it either needs to read as a block; or be condensed for it’s purpose. Pagination for this kind of content is a band-aid, not a solution.

  9. Benjamin Reid

    Dec 6th, 2010

    Nice idea, have you thought a non-JS fallback? Besides just allowing the content to flow into a big long page again.

  10. Tonant

    Feb 18th, 2011

    Seems this pattern would only be usable for a few pages, still I’ll put it in the bank :)

Leave a Comment