Interacting with a dynamically sorted list

Question

I currently have a list that will be populated with song requests. Each song request appears as a list item with a title and artist name, and is accompanied with upvote and downvote buttons (similar to Reddit). The list of song requests is being constantly dynamically reordered by vote count. When a user attempts to upvote or downvote a song request (to indicate whether they want to hear it or not), that song request animates by flashing green if upvoted or flashing red if downvoted, and the list scrolls to focus on the new position that song request has now taken, in order to provide informative feedback for the user as to what their voting action did.

The current problem is that because the list is being dynamically sorted, it may reorder at any arbitrary moment, which leads to an unstable list for users to be interacting with. At any given moment, a user may attempt to interact with a song request but the list may reorder at that point in time, thus confusing the user and creating a lot of 'jumpiness' that is destabilizing.

One potential solution would be to scrap the constant dynamic reordering and instead offer a refresh button to put the user in control of displaying the new reordering of song requests (perhaps with animations included to see how the positions of the song requests have changed within the list since the last refresh). However, this seems like quite a lot of work for the user and during the time that the user does not refresh the list, he or she is dealing with an inaccurate ordering of song requests.

Another potential solution would be to disable reordering when the user's mouse is hovered over the song request list. However, there is no equivalent detection like this on a mobile device.

A final potential solution would be to offer some sort of pause button that the user could use as a toggle for real time sorting. When paused, real time reordering is disabled and the user can interact with a stable, static list. When unpaused, dynamic reordering is once again enabled.

I am curious to see what other solutions there are for this problem that are compatible for both mobile and desktop environments.

Answer 1

Presumably, the update process is on some kind of timer (e.g. every 5 seconds). If so, then make any interaction with the list (scrolling on a desktop, dragging up/down on a mobile) reset the time to zero: the idea being that if the user is actively doing something, they're less likely to want to see updates disturb that process. (If updates are "live" -- i.e. pushed from a server and normally acted on immediately, then make any interaction delay updates for a proscribed period).

Additionally, (inspired by the sidebar idea in Adarsh Sosale's answer) you might have the voting buttons not present by default... they only appear either when you swipe from the right (mobile) and/or click some toggle-button/icon (desktop or mobile). When the voting buttons are visible, then all updates would be suspended. Closing/hiding the voting buttons would restore the normal updating process. (Depending on whether you expect users to vote on multiple entries at a time or not, you might make the buttons auto-hide when the user does vote).

Answer 2

I think the key here is that while the list is unstable, there are only two states:

• the song I wanted to tap is in the location it started in

• the song I wanted to tap has moved

My solution would be twofold.

1. Use heavyhanded and gratuitous animation to make it clear when a list item is about to change state, is changing state, and is in the new state. So maybe you fade the background color to something bright, visually move the element, then fade back to normal.
2. Debounce the list update so it happens at predictable intervals. Maybe it keeps track of changes to make and makes those changes every 30 seconds

Answer 3

You might want to consider taking the dynamic aspects of your application into a modal or a separate page. Everytime the user visits this part of the application, the order of the listing might change to reflect the list in real time. An animation on page load, that is quick and reflects the updates on the existing listing may also help reinforce the dynamic nature of the listing. You may also add a refresh button here to force a refresh.

Another less elegant option would be to have a sidebar like implementation to show the real time status of the list and a button to refresh and sync the listing with the latest list.

Having an actionable list that changes dynamically is indeed frustrating!