Desktop patterns for displaying long lists of sorted data

Question

On mobile devices, we have an alphabet scroll thumb. What is an appropriate substitute for a web page viewed on a desktop? I don't want to interfere with the native scroll bar or overwhelm the interface with awkward navigational queues next to it.

I'm after generic advice as well as some that applies specifically to my scenario: corpus search for linguistic analysis. They want their searches for a particular term usage to produce literally hundreds or thousands of results on the same page, sorted by right collocates (words following the search term) alphabetically. Drill-down, data segmentation and grouping have all been discussed (and then discarded) for reasons beyond my understanding of linguists' needs.

A sticky A-Z bar with a progress indicator seems kosher (think stretched-out Discourse "finite scrolling" indicator at the bottom right of your screen; also note the URL update neatness when scrolling!), is there a conventional approach here?

Answer 1

The pattern you are referring to is called Table View (descibed here: iOS Human Interface Guidelines).

Maybe a combination of these two would be of some use for you:

1. Using an overlay to inform user about where s/he is on the list at the moment - like in iPod Classic when using clickwheel to very quickly scroll long lists (user is presented the starting letter - it can be anything else, though, a date, number, color, whatever).

2. Dragging the cursor away from the scrollbar when scrolling to change resolution (speed) of scrolling (also: displaying e.g. another level of accuracy to resemble this).

3. Using a drag bar instead of scrollbar, where you drag a handle and drag it up or down. You drag it up or down from the central position.

Here's my idea:

Fig. A: You display a visual cue to show user where s/he is while s/he drags the dragbar up/down. This is because list elements scroll so fast that user cannot actually notice what they are.

Fig. B. The speed of scrolling through the list changes while moving the mouse pointer left from the dragbar, so that the list scrolls more slowly, yet user is still presented the visual cue (at more precise level), so even if s/he still cannot see the items, s/he knows where s/he is.

You can go deeper, alowing for e.g. 5 levels of scroll accuracy. As I said, you can use it for any sorted list where you can define these levels of accuracy (e.g. year-month-day-hour-minute, numbers from big ones down to their decimals, even for colors). Plus, it allows you to load more data in the background, as there is no scrollbar fooling user that s/he is in some place on the list.

Answer 2

In general, scrolling can be a slow, jarring, headache-inducing way to find content. The reason we do so much of it on mobile devices is partly due to 1) the lack of better options on a device so small, 2) a weakened jarring effect due to the smaller screen size, and 3) due to the lesser usability of its keyboard.

General

On a desktop browser, the following strategies would be worth considering:

1. Focusing on keyboard entry as the primary search tool, which produces a steadily reducing number of matches.
2. Starting with a word (or image) driven set of options, which serve to narrow the number of options.
3. Offering a short list of scrollable options - there's a reason websites all over the place limit their initial offerings to 25/50/100 results at a time.

Linguistics Case

No drill-down, data segmentation, or grouping certainly makes things harder. I would suggest here a visual bar on one side of the screen that traces through a 'top-down view' of the entire dataset as you scroll. This way, the user has some idea where they are within the whole if they are 40% down the page.