Realtime Session toolbar

[tkrieck]

Hi everyone,

Note:

• This discussion is also based on its Cristal counterpart, here.
• More details can be seen in the proposal page: https://design.xwiki.org/xwiki/bin/view/Proposal/RealtimeEditingSession

Currently, the action buttons bar, at the bottom of the document, loses a bit of sense on a Real-time editing context. After all, the document is always saving itself, so there’s no need for individual save buttons.

Also, the active users in the session is overlaping page title.

Discussing with @mflorea we got to the results below, which we believe will improve the experience when using the Realtime Editor.

Proposal

Editing Alone:

Editing with other users:

Sections

Offline
When offline, most of the buttons disappear, only the reconnect action is available. XWiki still tries to reconnect on the background, but there’s the option of a manual attempt. The “?” icon explains this behavior.

Pop overs

Here’s a list of buttons that expands to show different sections:

Done
Has an option to condense auto-save revisions, object of this discussion by @mflorea

Participant list:

To save space, only some participants are shown. To see the full list, the user must click this space. Also in this pop over, there’s the option to leave the Realtime Session.

Clicking the avatar of a participant will take the cursor to where that user is editing. If a user is editing in more than one place in the document (in a different tab for example) after each click the cursor is cycled between these locations.

Quick History

Here we list the most recent revisions to allow the user to go back to a point in time and rollback unwanted editions. Clicking each revision opens a dialog showing the document at that point in time, in the same way as the history tab, with an option to rollback.

Thank you for reading, what do you think of the proposed changes?

[mflorea]

Hi Thiago,

Thank you for working on this.

@tkrieck

You haven’t mentioned, but the “Summarize Changes” button is supposed to open a modal where the user can specify a change summary (text area). I think this can evolve into a “Review Changes” button where the opened modal has two tabs:

• one to specify the change summary
• one to see the diff (changes) between the last manually saved version (so excluding auto-saves) and the current state of the edited document (including unsaved changes)

@tkrieck

Also in this pop over, there’s the option to leave the Realtime Session.

I realized after our discussion that there’s a problem with this: the popover is not available if there are less than N number of participants, because the `+X`` toggle is not shown. For this reason I’m thinking, at least for the first iteration, to move the “Leave Collaboration” button inside the “Done” button dropdown. You’re not exactly ending the editing, but you’re leaving the realtime session so it’s kind of related.

@tkrieck

Clicking each revision opens a dialog showing the document at that point in time, in the same way as the history tab, with an option to rollback.

Note that if we want to show the document rendered we’ll have to use an iframe in order to avoid any interference between the old revision and the current one, in terms of CSS and JavaScript. This modal could also evolve to:

• show the diff between the selected version and the previous version, using a tabbed UI
• have some controls to move through the history, i.e. check the previuous / next version without the need to cose the modal

Thiago hasn’t mention, but the main need for this is to “replace” the removal of the Cancel button.

Thanks,
Marius

[tkrieck]

@mflorea

You haven’t mentioned, but the “Summarize Changes” button is supposed to open a modal where the user can specify a change summary (text area).

I completely forgot about it, thank you.

@mflorea

I realized after our discussion that there’s a problem with this: the popover is not available if there are less than N number of participants, because the `+X`` toggle is not shown.

I am thinking about making the whole participant area clickable. So there’s no interaction on individual avatars.

@mflorea

For this reason I’m thinking, at least for the first iteration, to move the “Leave Collaboration” button inside the “Done” button dropdown.

It’s a good place as well. Let’s gather some feedback.

@mflorea

• show the diff between the selected version and the previous version, using a tabbed UI
• have some controls to move through the history, i.e. check the previuous / next version without the need to cose the modal

I tried to use the current UI for comparing versions, but it’s not very well suited for this task, so I jumped ship on this idea for now. I plan on getting back to it with improvements to the UI of versions itself, but that’s not the main point here.

Thanks!

[mflorea]

@tkrieck

I am thinking about making the whole participant area clickable. So there’s no interaction on individual avatars.

The downside of this is that you need to click twice to see where a given participant is editing (once to open the popover and once on the name). This may be annoying when there are only a few participants (often I guess) and you see the avatar of the user you’re interested in directly on the toolbar.

[tkrieck]

@mflorea

The downside of this is that you need to click twice to see where a given participant is editing (once to open the popover and once on the name). This may be annoying when there are only a few participants (often I guess) and you see the avatar of the user you’re interested in directly on the toolbar.

I see, indeed, that might not be interesting. I updated my design to reflect this change.

[mflorea]

Hi everyone,

Here’s what I have so far Up1 . There are a couple of differences compared to Thiago’s proposal:

• Done dropdown
  • “Condense Auto-save Revisions” has been replaced by “Summarize & Done” which opens a modal that allows you to:
    • end the editing with a change summary
    • indicate whether to generate a minor or a major version
    • see the changes (diff)
  • There’s no Reconnect button, but a status is displayed after the Done button when the connection status changes (disconnected or re-connecting), in which case the list of users is hidden, and the Done button is disabled.
• User List
  • users are not grouped (the same user will appear multiple times if they join the realtime editing session multiple times in separate browser tabs)
  • users don’t have a color associated; currently the primary button color (blue) is used as the background for the username abbreviation. The abbreviation is computed like this:
    • if the user has a single name, then the first two letters are used (first one in upper case)
    • if the user has multiple names, the first letter from the first and last name are used, both in upper case
• Save status
  • I haven’t used the checked (green) icon in front of the save status
• Recent versions dropdown
  • I used the clock icon because the history icon is not mapped currently in our icon theme.
  • I moved the “Summarize Changes” button inside it because it’s not a common action
  • I haven’t used the “Version” prefix because I felt it is redundant. I applied bold style on the version number.
  • I used the version author avatar instead of the clock icon
• Version modal:
  • I’m displaying the version info (number, author, date) in the modal title

Let me know what you think of this and if there is any important change that should be done before 17.3.0RC1.

Thanks,
Marius

[douakli]

Hi all,

Thanks for working on improving the UI for realtime.
This looks like a polished product when it used to look like a prototype!

Only thing I’d say is I don’t find the “Done” terminology to be self explanatory, unlike the “Save and View” that we currently have.
I get it can be confusing to save a Document that is already saved but I think it would be nice to clarify within the UI itself what “Done” means. Will it save the document if it is not saved yet?
Maybe this could be clarified through a hover note? A subtext in the “Done” dropdown? An information bubble next to the “Done” button? Or maybe a tour when first using realtime editing?

I would also suggest that when Offline, the user should be able to leave the collaborative session.

Finally, I wanted to ask if you thought it would affect the switching to source feature? Would the temporary leaving the realtime session be handled in a particular way with regard to the toolbar?

Thanks,

Dorian

[vmassol]

@mflorea

Here’s what I have so far Up1

Looks nice! Well done.

@douakli

Only thing I’d say is I don’t find the “Done” terminology to be self explanatory, unlike the “Save and View” that we currently have.

I agree that “Done” is not 100% explicit. Idea: use another word, like “Leave” or “Leave Editing”?

[mflorea]

@douakli

I get it can be confusing to save a Document that is already saved but I think it would be nice to clarify within the UI itself what “Done” means. Will it save the document if it is not saved yet?

The Done button currently behaves exactly as the Save & View button: it always saves the edited document. In fact, a click on the Done button is currently simply forwarded to the hidden Save & View button.

Initially my plan was to avoid saving on Done when there are no changes and the document is not new, but not all the form fields are synchronized in realtime or observed for changes (e.g. title, hidden field), so in order to avoid losing changes on Done I opted for now to always trigger a save. Currently triggering a save always leads to a new revision on the server-side, but in the future we could decide to create new revisions only when there are actual changes.

@douakli

Maybe this could be clarified through a hover note?

The Done button currently has this hint: “Save and return to view mode”.

@douakli

I would also suggest that when Offline, the user should be able to leave the collaborative session.

It’s already the case. The Done button is disabled, but you can still open the dropdown and select Leave Collaboration.

@douakli

Finally, I wanted to ask if you thought it would affect the switching to source feature? Would the temporary leaving the realtime session be handled in a particular way with regard to the toolbar?

The user still gets disconnected when switching to source. This means that when editing the source the user will have to use the old toolbar.

Thanks,
Marius

[lukasM]

Hey guys,

all in all great improvements over the status quo
Just a quick question: Will these changes also be backported to the current LTS?
I know its a rather big change but it also would make LTS feasible for my current installation as I would be much more confident in our users not being confused with the handling

Thanks

[vmassol]

@lukasM

I know its a rather big change but it also would make LTS feasible for my current installation as I would be much more confident in our users not being confused with the handling

You’re in luck, this is our intent We’ll need to validate it works well on the latest versions first but the idea is to backport it to the LTS at some point, as we consider that the current usability of the RT in LTS is not the best.

Thx

[vmassol]

Note: This was done in Loading...