I am in the process of creating an interface for browsing contacts in a CRM. I have the contacts displayed in alphabetical groups. like so:


Andrew Bloggs

Amy Johnson


Bob Marley

Billy Bob

My question is: What is the best way to add pagination to alphabetically grouped lists? Does anyone have experience with this?


A technique used in lexicas with several books is to list the letter(s) of the first and last entry of a single book. In your case, that would translate to pages, not books, with a limited number of entries. enter image description here

Translated to your name list, this could look like:


download bmml source – Wireframes created with Balsamiq Mockups

Imagine more buttons for l-t, I just didn't want to spent my day drawing..

In this mockup you have a list of names under each letter, and I picked the particular view of a letter extending from one page to the next (if you choose to have a specific number of entries per page, rather than letters per page). In additon to the letter-buttons you could have a first and previous button on the left side before a-d and a next and last button on the right after t-z-.

Even better would be to limit the entries per pages not by number but by finished letter, so you would not have to deal with cases of one letter continuing to the next page.

For the in-page sections @Kit Grose provides a clear solution.


The same way physical directories do:


Andrew Bloggs

Amy Johnson


Bob Marley

Billy Bob

Page break

B (continued)

Brian McGee

  • Hi Kit, thanks for the response. This is the way I have always implemented something like this, but unfortunately in this instance I've been instructed to approach it from a different angle. – DaveE Dec 14 '12 at 13:49

I would try and avoid pagination by using infinite scroll.

If the list could be fairly long I would use clickable / tapable index on the right to maki it simpler to get to the item of interest.

grouped list with index

A good search bar will help with very long lists. Contacts on an iOS or Android device handle this well, and their concepts can be used on pc interfaces as well.

  • I have Android and am familiar with this directory listing. The only problem I have is that the index letters on the right are so small as to be frustrating to use. – a coder Dec 14 '12 at 14:13
  • It's tricky, but you can do a magnifying view similar to the dock on Mac OS. It's not easy to implement though. – JohnGB Dec 14 '12 at 15:04

Don t forget to have possibilty of two sorts the fisrt by firstname and the second by name with one by default saved in user preferences and possibility to change the default sort and the possibilty to change type of sort during the display.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.