We love scrolling our Circles, don't we?

I know, I love it too. And I even understand why we do it technically, but... not acceptable UX I'd say this displaying the chat scrolled to the top, and then bringing me to the very bottom in a split of a second. I almost makes me nauseous :-)

An easy workaround would be to hide the loader only when the chat has scrolled down, which would already be a much better UX. If we can find a way to start from the bottom directly even better.

changed milestone to %Previously done stuff

By Alexandre on 2020-02-26T22:02:01 (imported from GitLab project)

added 1 deleted label

assigned to @dele

@alexandre > If we can find a way to start from the bottom directly even better.

What about the behavior when there are unread messages: do we want to start at the bottom in that case too?

I am not sure we can start at the bottom as the chatbox is opened before all messages are loaded. We could keep the panel invisible until the jump to the bottom. The risk is that if the event to jump fails or is missed for whatever reason, then the chat will un-useable as compared to it being irritating right now.

Another approach could be to use a smooth scroll-down to the bottom in JavaScript with Element.scrollIntoView.

I can raise the change on Converse as a PR and make it configurable for "jump", "scroll" or "fade"

removed 1 deleted label

@rachel I think the right UX for that is to scroll to the first unread message.

By Alexandre on 2020-02-27T15:15:57 (imported from GitLab project)

Why would the event to jump fails or is missed?

Another approach could be to use a smooth scroll-down to the bottom in JavaScript with Element.scrollIntoView.

To me it would be worse. As a user, I want to see the relevant part of the conversation, ideally the first unread message. If we can't do that, bottom of the conversation straight up is better in my opinion.

By Alexandre on 2020-02-27T15:17:58 (imported from GitLab project)

If we can't do that, bottom of the conversation straight up is better in my opinion.

I agree with you, but when the chatbox is opened, the bottom and the top are the same place. Converse asks for the last N messages, displays them, calculates the bottom and then jumps there.

We talk about this with @jbpasquier and agreed that :

I can raise the change on Converse as a PR and make it configurable for "jump", "scroll" or "fade"

is the way to go for now here @dele

This would allow us to test the 3 options and decide what's best. It might even help on #404 (closed)

Oh sure, if by fade we mean fade in the chat window once it has scrolled, then I also agree it is the best strategy.

By Alexandre on 2020-02-27T15:32:41 (imported from GitLab project)

@alexandre it's interesting. Note that Slack and Rocket chat are first showing you the last message with a button enabling two options: 1. jump to the last unread message. 2. Mark all previous unread message as read. But scrolling to the first unread message can be a first step before this kind of behavior.

You rock, valid point.

I'd just mimick Slack then, betting they UX tested it.

By Alexandre on 2020-02-27T15:37:12 (imported from GitLab project)

mentioned in issue #404 (closed)

changed milestone to %Circles part I

I have implemented the two new options "scroll" or "fade" and this is what I discovered

• fade has no effect. Converse is already hiding the chat history and does not display it until the fetching is complete. It then sets the scrollTop of the chat history element to effect the jump. When I tried to keep it hidden until after the setting, it had no visible effect. You can see the jump effect.

• scroll does produce a better user experience (UX). I set the chat hsitory element CSS scrollBehavior to "smooth" and that produces the desired effect.

I recomend we go for a single new setting called "smooth_scroll" that has a value of true or false.

PR for this issue has been submitted - https://github.com/conversejs/converse.js/pull/1940