I have a UITableView of UITableViewStylePlain with sections titled as districts (neighborhoods) in New York City. I am struggling how to implement the indexes (quick "links" on the right). Should they be:

  1. The first letter of the district (Upper West Side -> U)
  2. The first letter of each word of the district (Upper West Side -> UWS)
  3. Show all the letters but some don't "work" (no "J" district)

Pluses of each:

  1. No duplicate letters (Upper West Side and Upper East Side are both U), simple list with a low number of elements
  2. Distinct entry for each district, easier to associate each district
  3. Full list looks better

Pitfalls of each:

  1. To get to Upper West Side, it would first go to U (Upper East Side)
  2. Three (even two) letters looks weird. Especially when selected.
  3. UX elements that have no response (not good practice)

I have attached a screenshot in case this is hard to understand. Any ideas/suggestions?

enter image description here

Edit: (as per @daniel eckmann's request)

Without going into too much detail, the app is a listing of shops (50-100) around NYC that offer a very specific product and/or service. This screen is the main/lainding page for it and lists all the items. The user can also search, view them on a map (seperate screen) and filter the view based on certain criteria.

  • 1
    Can you tell what use it is supposed for this list? To choose the area of residence, to establish what areas are located a row, as the reference on areas? Here some decisions are possible... Commented Apr 4, 2012 at 6:48
  • What are the "quick links on the right"? When you said indexes I assumed you meant the header rows for each grouping.
    – Zelda
    Commented Apr 4, 2012 at 14:14

1 Answer 1


Your second suggestion (and as per your image) are perfectly usable and meets the requirement to be able to browse the list and jump to a specific point.

Usability trumps 'looking a bit weird' in this instance.

However, depending on your use case, another option would be to split all the neighborhood into expandable panels so that the user can scroll up and down the list of neighborhood and find the one they wanted and expand that. It's less scrolling but potentially one extra click.


download bmml source – Wireframes created with Balsamiq Mockups

It really depends on what you want to use this list for. If it's browsing all the available items then your suggestion is probably better because you can see everything at once, but if it's for easily finding a particular item in a neighborhood then this option may be worth considering.

  • This seems ideal for the use case Joe outlined. In this mode users will likely know what neighborhood they're interested in and can see all the options for that area. I think it will complement the search and map options well. Commented Apr 16, 2012 at 17:55

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.