7

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.

|improve this question

migrated from stackoverflow.com Apr 4 '12 at 3:03

This question came from our site for professional and enthusiast programmers.

  • 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... – denis.efremov Apr 4 '12 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. – Ben Brocka Apr 4 '12 at 14:14
2

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.

mockup

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.

|improve this answer
  • 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. – Andrew Shipe Apr 16 '12 at 17:55

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.