This list needs to allow the user to jump from one letter to another (say, from A's to Q's). But we're not paginating, but loading everything onto a single page.

  • Do you plan to have a locked A-Z nav bar? Nov 28, 2016 at 20:08
  • Do you mean in a similar fashion to Music on iOS? Also in that respect, are we talking web, mobile? Nov 28, 2016 at 20:18
  • @bloodyKnuckles: whatever navigation we use to access A-Z will be locked. Whether that's something across the top, or down the right side the way iOS does it, remains to be seen. Nov 28, 2016 at 23:03
  • @DarrylGodden: We were thinking to do something similar to Music or Contacts in iOS. However, this is responsive/adaptive web, not native mobile. We want a pattern that will make sense for both iOS and Android users. The letters going down the right side appears in both iOS and Android. However, I've never seen that used on the web before. Nov 28, 2016 at 23:08
  • No, me neither would it possible to create a few mock-ups and carry out some user testing? Nov 29, 2016 at 9:14

3 Answers 3


Not saying it's the best way, to display an infinitely scrolling, alphabetized list - in fact, there may be no 'best' way, to display this kind of list. I do however, want to point to to an example of where this happens, in (a previous version of) Snapchat.

I know that you're not making a native mobile app, rather a responsive web app, but I still think that you could apply the same design pattern.

It's something to consider, but a few things I like about this pattern, are that the letters (links), mimic the actual alphabetized list in a top to bottom layout. I also like that it highlights the letters as you move between sections.

Like I say, I'm just posting this as a suggestion, and something that may help you to find the solution that best suits your situation.

enter image description here


I guess ideally you will want one solution that works on desktop and another which utilises the mobile OS default approach.

However if you are looking for one solution which works the same on all devices the I would use a dynamic horizontal A - Z, where the letters are links based on the letters used in your dataset, i.e. Depending on your data you probably don't need to show all 26 letters in the alphabet, e.g.

enter image description here

Obviously this could become a problem on a mobile device due to the limited width, especially if you are using most letters in the alphabet, but you could allow them to wrap on to two lines if needed, mainly because you need to ensure the tap targets for each letter are large enough on a smaller viewport.

enter image description here


Imagine the following test data (https://www.mockaroo.com):

Anne,Gutierrez Anne,Watkins Antonio,Griffin Barbara,Collins Bobby,White Clarence,Stevens Douglas,Meyer Edward,White Ernest,Jackson Evelyn,Dixon Gregory,Palmer James,Shaw Jeffrey,Roberts Jimmy,Hayes Julia,Sanchez Justin,Knight Karen,Duncan Larry,Harper Larry,Powell Lawrence,Shaw Lillian,Bailey Lillian,Boyd Linda,Johnston Lori,Knight Mark,West Martin,Mason Patricia,Thomas Sandra,Bishop Sara,Robertson Steven,Fields

Checking the first letter we have the following number of entries starting with:

3 A 2 B 3 E 5 J 7 L 2 M 3 S

The most intuitive (in my opinion) would be to present a following slider:

A B E J L M S . |--|-|--|-___|_____-|-|--

where the user can smoothly slide on. If the page can accommodate only 10 entries (out of 30) I'd start with the one at position 30 x [percent value of the slider] and have the sliding bar (underscores instead of min) covering shown entries (Jimmy,Hayes would be shown first in the page, Linda,Johnston last).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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