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.
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 pagination can make navigating more efficient and less overwhelming. It may take more time and effort to execute than a numerical pagination, but it’s worth it if it gives users a better experience.
Book
Affiliate
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.
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!
…That’s why client side pagination using the jQuery accordion is probably the standard way to implement it.
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.
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.
Hi Anthony,
Have you got any material that’ll shed some light on how to properly implement this? They look great!
– Will
Will, check out this article on how to do this with jQuery: http://www.learningjquery.com/2007/02/more-showing-more-hiding
Interesting article by Luke W – http://www.alistapart.com/articles/testing-accordion-forms/
Nice article. Interesting suggestion. One side-effect: such pagination will potentially increase the bounce-rate, hence decreasing Google’s ranking.
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!
@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.
Nice idea, have you thought a non-JS fallback? Besides just allowing the content to flow into a big long page again.
Seems this pattern would only be usable for a few pages, still I’ll put it in the bank 🙂