List data segmentation

Question

The interaction is like this: The user is trying to find an employee's name in a very long list sorted alphabetically. He/she only knows the employee's name starts with an "F". How to design the segmentation/pagination of the list?

I have some proposal below.

Select the starting letter from the drop-down list which contains 26 letters.

Select a range from the drop-down list

Use the left hand side to jump to names starting with selected letter

Similar selector but divided by ranges

Any other ideas?

Answer 1

The "Slide" selector option you have shown is a UX convention common in IOS. In IO the bar is on the left, and sits above the list on the z-index. I think it is a solid approach.

I tend to avoid drop down selectors at all costs, especially the standard form controls, not for any good reason other than I find them aesthetically dated, and the interaction not inspiring in anyway.

It should always be the goal to minimize the number of possible interactions(clicks and selects) and objects on the page while making everything in the viewport usable.

Without knowing the intended use(Devices, User, etc...) I cannot really suggest other options.

Answer 2

I dont really get why you are not using autocomplete as an option. Since your employee list is already sorted in alphabetical order,all you need to do is to pull up the data for the particular letter when the user types the first alphabet

This would work much better than using a dropdown as all the user has to do is to type the letter to pull up the data rather having to scroll through a dropdown to get the letter he wants or rather the segmentation he wants. Further more there are significant usability issues with using dropdowns as mentioned by this article in smashing magazine

Multiple problems are related to scrolling large drop-downs. If your mouse cursor is outside of the drop-down, you will most likely scroll down the entire page, hiding the drop-down options from the screen. In other browsers, however, the drop-down will actually scroll as long as it has focus, likely leaving you with erroneous data.