2

This is a bit of a difficult question to explain in the title but hopefully it will make more sense after reading the question.

I'm in the process of designing a web app with a basic design consisting of a continuous-scrolling content stream and a sidebar that allows the user to jump to specific points in the content stream. If the user requests to jump to a specific point in the content stream, the content area is cleared and the new content from the requested point downwards is loaded (also note that the user is able to scroll upwards to view content higher up the stream, if they've entered part-way through in this manner).

Now, if the content around the point in the content stream that the user has requested to jump to is already loaded, it would be possible to scroll directly to that point without clearing and reloading the content area, but this would mean that in some cases the user is taken directly to the content and in other cases the existing content would vanish and they would have to wait for the new content to load. Although scrolling directly to the content provides a more seamless experience, I can imagine the user becoming frustrated when the behavior seems to differ at random.

So is it better to keep the behavior consistent, even though the user may have the inconvenience of waiting when it isn't necessary, or is it better to give the user the convenience of getting straight to the requested content but then surprising them when they have to wait unexpectedly?

Note also that the sidebar indicates where the user currently is in relation to the possible "jump points" in the content stream, so if they learn that using the sidebar always incurs a wait then over time they may elect to manually scroll to nearby content to shortcut the wait with the hope that the content is already loaded.

1
  • Elegance and consistency do not have to be competing criteria :)
    – Michael Lai
    Dec 6, 2020 at 23:10

3 Answers 3

1

How about keeping the "scroll directly" effect in both cases. Show the scroll effect and if system need time to load, then use placeholders for your ui (same as Facebook do).
I think that seamless experience is a keeper.

4
  • Sounds very complicated to handle, especially as the number of items and their physical size on the screen is not known at the time that the scrolling takes place. Oct 17, 2018 at 13:47
  • However the real reason why this won't work in my case is because the content stream is potentially infinite in length and the user can jump to any point in the stream. This would require loading every single item between the previous point the point being jumped to in order to provide continuity (otherwise there will be gaps in the displayed stream which will need more loading later on with even more technical complications to handle them). Loading a potentially very large amount of content from the backend at once is not an option. Oct 17, 2018 at 13:48
  • That said, the idea did cross my mind and I agree that, without any technical complications or limitations, it would probably be the most elegant solution. It allows the user to get directly to the requested content when possible and doesn't throw an "everything vanished and now I have to wait for stuff" moment at them when they don't expect it. Oct 17, 2018 at 13:49
  • If you use as a loding screen a gif of very fast scroling it will give a user the feel of auto scroling and also show that he/she is going far. Then you just need a little bit of content in places when actuall autoscroling apear. After the begining and before destination. (my english dictionary don't work on tablet, sory if I made some mistakes in speling.)
    – Ada
    Oct 17, 2018 at 18:34
1

Technically the easiest way is to display waiting spinner in contents area each time when user presses sidebar link. But you should avoid to do this to often because it may become annoying.

Another way is to clearly indicate that content is already loaded is highlighting selected link in sidebar in some way that makes clear to user that content is ready.

3
  • Displaying a spinner is exactly what I am currently doing. I thought of using a different highlight to indicate that the content is available immediately but I figured that this might create confusion as users wonder what the different highlights mean and they won't necessarily realise the relation between highlight style and waiting times unless it is explicitly explained which is too technical for most users to concern themselves with. Oct 17, 2018 at 15:49
  • I mean you may display spinner regardles of loading new contents or it's ready. The second way is displaying of sidebar link - you can look for Adobe Acrobat Reader as an example.
    – Serg
    Oct 17, 2018 at 15:57
  • This is what I am currently doing, displaying the spinner and reloading the content every time, even if the content is already loaded (if it is, it is discarded and loaded again, but that's a technical detail). Also I can't introduce another highlight style as I am already using three different styles (I can't explain this further without going into detail about my web app). Oct 17, 2018 at 19:14
1

Do not underestimate the user. It may be in fact odd, if I click on a link that I know, I just visited (for example) and the site reloads and acts dumb.

I would serve the user as fast as possible in both cases. You could indicate somehow which content is already loaded. Similar as YouTube indicates which part of the video is loaded.

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.