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:
A------------------------------
Andrew Bloggs
Amy Johnson
B------------------------------
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.
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:
A
Andrew Bloggs
Amy Johnson
B
Bob Marley
Billy Bob
Page break
B (continued)
Brian McGee
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.
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.
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.
