2

TL;DR: Given an old list that the user has scrolled to index i and a new list that replaces the old list by adding/removing filters, what should the new scroll index be?

Details: I have a list of strings visible to user. The user has scrolled to some point in that list. There's also some filter controls. The user enabling or disabling filter controls causes the list to grow or shrink to only the items that match the filter.

Is there some standard algorithm for figuring out where to position the scrollbar when the list is modified? It seems obvious that if the user was scrolled all the way to the top of the list, when I reduce the list, I should keep the scroll at the top. Likewise, if the user was at the end, when I reduce the list, I should keep the scroll pinned at the end of the list, wherever that ends up. But for all the points in the middle, I'm not sure. It seems like I somehow want to maximize the number of previously visible items on screen still on screen so that the user doesn't lose their place in a large list.

I have been designing a few different variations of how to pick the new scroll position that keeps the user in as close to the same place as they were as the list gets modified. But I am thinking (hoping!) that this is probably a solved problem.

Is there a standard algorithm for computing the new scroll position in a modified list?

I am not looking for code in any particular language. I am looking for pseudocode that describes how the new scroll position should be calculated for best user experience. An ideal answer will include citation of UI studies that looked at different ways to update the scroll position and identified the best experience for most users. But in the absence of that, I'll take answers that describe good experiences you know about.

3
  • 1
    why not ask your UI/UX designer, or the PM to coordinate with the client about the requirement? If there are no requirements, do what you think makes most sense. Asking for citations might be a tad bit of "do my research for me and digest it for me too"
    – Shark
    Mar 21 at 13:25
  • Asking for citations for an expert opinion is how we make sure that the answer on Stack Overflow is actually authoritative. It's a pretty common request. @shark Also, I am the UX designer. The client has asked for "a better experience than just jumping to the top". I'm trying to find industry standards for that better experience.
    – Inquisitor
    Mar 21 at 15:06
  • But to try and take my jab on the question - i don't think it makes sense to keep the scroll position. If the initial list has 50 items, and you've scrolled half way through it (already seen 25 items) before it's modified, you've scrolled to half. Then the list is modified by adding 50 more items. If you scroll back to "the number of items i've seen" then you'll scroll to the quarter of the list. If you retain the scroll position, you'll be at half but there are 25 items you will not have seen. Important question to ask is, is the data (re)sorted before displaying it? Think about this edgecase
    – Shark
    Mar 21 at 15:20

2 Answers 2

2

Ideally, if the user scrolls to some point in the list that is not the top, then you should remember the first visible item: POS = at_top ? null : first_visible()

Then, when the list changes, if POS == null, then scroll to the top. Otherwise, keep the first item >= POS in the first visible position, unless that would make you scroll past the end. In that case just scroll to the end.

Do not reset POS when the list changes. If the user changes filters back to what they were when he scrolled, you should end up back at the position he scrolled to.

If you support smooth scrolling, then you should also remember the exact pixel position of POS and try to maintain that as the list changes.

This is the ideal behavior if the user is working through the list considering items, because when he scrolls he tells you that he is done with all the items that he scrolled past, and you should remember and respect that.

If the user does something that makes the list "new", though, like changing the category of items he's looking at instead of modifying a filter, then you can just scroll to the top.

1
  • 1
    This is one of the ideas that I had. I appreciate the validation, but I'd like it better if you have a citation from some UI study that says this is the best user experience. Any links? I haven't found any.
    – Inquisitor
    Mar 21 at 13:17
0

If I filter the data it makes no sense to keep the selection. If you want to allow users to access previous selections make history or allow them to stick some selections at top of the list, so they can quickly access them. (Put a star around the items if they click it move the item to the top) I looked at the Gmail software and when I filter something they delete the selections.

1
  • I'm not trying to maintain the selection. I'm trying to maintain scroll position. It's a display list. Think like a list of airline arrivals at an airport and they reduce it to only airlines with a five-star rating. It makes lots of sense to not lose their scroll position.
    – Inquisitor
    Mar 21 at 15:05

Your Answer

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

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