Proposal for the "Panels" screen in Global Administration

[tkrieck]

Hey everyone, I would like to propose some changes to the Panels screen inside “Look and Feel” in the Global Administration section of XWiki. Below, a list of a few reasons for these changes and after that, the proposals themselves. There are quite a few changes, some easier than others but as always, feel free to give you feedback on each of them.

Current Issues:

• Unclear drag-and-drop functionality: It’s not obvious that you can drag and drop panels from the list into the sidebars. While the cursor pointer changes, it’s still unclear where panels should be placed.
• Panel previews: Each panel comes with a preview that appears interactive, but it’s not. The lack of interactivity is fine, but it’s not well communicated. It can also make the visual communication misleading. For example, the “Quick Links” panel is not configured with default values so the preview is empty with a non-working link “(Edit this panel)” and a (working) “Edit” link below it, very confusing all in all.
• Panel list and configuration tabs: The panel list is separated from the main configurations, which is confusing and lacks a clear reason.
• Complex configuration process: To use the fields “Panels displayed on the left” and “Panels displayed on the right” users must know the exact name of each panel and enter it manually into a text field. This might be ok for a very experienced user, but it’s not beginner friendly at all.

Having these in mind, I would like to propose some changes to this screen:

1. • Combine “Panel Layout” and “Panel List” tabs: Merge these into a single view for a more intuitive experience.
2. • Layout selector accessibility: Add a radio box to the layout selector with to improve accessibility.
3. • Concise text revisions: Shorten and simplify the texts to make them more direct.
4. • Optimize width selector layout: On desktop, display the width selector side by side to save space.
5. • New Panel Configuration Section: Incorporate the removed “Panel List” tab into this section.
     5.1. Panels will have a fixed height and show their description instead of a content preview.
     5.2. Controls for editing panels will appear on mouse hover and will always be visible on mobile.
     5.3. A drag handle will appear when hovering over each panel. The entire panel remains draggable. And the cursor for the drag action will be a hand instead of the move icon.
     5.4. Minor CSS adjustments will be made to the accordion for visual improvements.
6. • Panel drag-and-drop visual aid: When moving a panel, the interface becomes slightly transparent, highlighting valid drop zones to guide the user.
7. • Hover feedback for valid drop zones: While hovering over a valid drop position, a box will appear at the new location of the panel. Currently, this is only indicated by spacing.

Mockups

Note: These mockups are from Penpot and almost all icons are a circular shape. This is for layout spacing purposes only, I am not proposing to change these icons.

Below you can see the main layout changes. Here we have:

• The unification of both tabs,
• The radio button applied on layout selection
• The proposed hover effects on the sidebar and also on the “Tips” panel from the accordion.
• Width selection for each sidebar, side by side.
• The “Advanced configuration” link that contains the current inputs for the comma separated list of panels.

Advanced Configuration

The “Advanced Configuration” link, under Panel Configuration will open the section containing the two text inputs “Panels displayed on the left” and “Panels displayed on the right” so we don’t remove the functionality.

It’s hidden by default, so we don’t lead the user into believing that these inputs are the only way of configuring the sidebars.

After clicking the “Advanced Configuration” link:

Drag and drop changes

When moving a panel, the interface becomes slightly transparent except for places where the user can drop a panel.

When near a drop point, a visual aid is shown indicating clearly what will happen on drop.

These are the main changes I’m suggesting, and I believe they would make this section of the Administration more intuitive and user-friendly. I’d really appreciate your feedback—do you think these points address the issues effectively, or do you have any additional thoughts or concerns?

Thank you all for your attention.

[CharpentierLucas]

I didn’t go through your whole proposal yet. I just noticed that you assumed we’d keep the drag and drop feature in there. I agree that in most cases we want to keep the UI features, but IMO this one should be at least questioned.

To me the drag and drop we have today in this section is a bit out of place. I do not think the benefits of drag and drop warant its implementation and maintenance here.

In order to understand this feature and why it was needed better, I dug a bit in the Git history:
first trace of this drag and drop feature I could find is XWIKI-481 : Added early version of the xwiki10B1 skin. · xwiki/xwiki-platform@495650e · GitHub (panelEditor.js).
I’m not sure if this was voted or not, I could not find any discussion around 2006 when querying panel drag and drop on our mailing list archive.
From what I could find so far, it was implemented because it was a fancy tech thing to do, without much of a UX discussion around it. @vmassol Do you know if there was a specific reason to have drag and drop here?

---

Do we need to keep this drag and drop feature as is?

---

Sorry for starting this topic a bit off-track. I’ll get back to you about the proposal itself soon,
Lucas C.

[CharpentierLucas]

@tkrieck

Combine “Panel Layout” and “Panel List” tabs: Merge these into a single view for a more intuitive experience.

+1, as far as I understand, the Panel List tab was just a more convenient UI to edit the list of panels.

@tkrieck

Layout selector accessibility: Add a radio box to the layout selector with to improve accessibility.

+1. I only saw the elephant in the room, which is the drag and drop and the popup text, but completely missed this one (and it wasn’t reported by automated tools because it’s a semantic issue). Good catch

@tkrieck

Optimize width selector layout: On desktop, display the width selector side by side to save space.

+1, in the context of the whole page this makes sense, but I wouldn’t do this change by itself.

@tkrieck

5.1. Panels will have a fixed height and show their description instead of a content preview.

+1 On paper this is was a nice feature but it was too complex and heavy to maintain so at least in my opinion it was useless.

@tkrieck

5.2. Controls for editing panels will appear on mouse hover and will always be visible on mobile.

I misunderstood this at first, I thought you were talking about the description of controls. You’re talking about the handles and buttons on the panels in the columns.
+1, I like this idea. To go even further, I think we could make clear that those Panels became interactive elements even without hovering them. Putting them in a box would help convey this change in behavior. There’s no need to put all the controls, but a slight indication that “there’s something special here” would improve usability IMO.

@tkrieck

5.3. A drag handle will appear when hovering over each panel. The entire panel remains draggable. And the cursor for the drag action will be a hand instead of the move icon.

+1

@tkrieck

• • Panel drag-and-drop visual aid: When moving a panel, the interface becomes slightly transparent, highlighting valid drop zones to guide the user.
• • Hover feedback for valid drop zones: While hovering over a valid drop position, a box will appear at the new location of the panel. Currently, this is only indicated by spacing.

+1, I’m not sure how to make this slightly transparent effect but we can definitely come up with something. The easiest implementation will probably be to fake transparency by covering everything with a semi transparent panel with the same color as the background.

@tkrieck

Advanced Configuration

The “Advanced Configuration” link, under Panel Configuration will open the section containing the two text inputs “Panels displayed on the left” and “Panels displayed on the right” so we don’t remove the functionality.

Why not put the column widths in this advanced configuration too? I don’t have a strong reason except that I think the main feature here that’d be useful for most usecases is to change the side contents and not to change the panel widths.

---

I agree that some improvements should be done for this UI.
Overall +1 for your proposal, but I’d like to discuss the few points mentioned above to be sure we don’t miss anything.

Thanks,
Lucas

[Simpel]

Hi.

I’m glad someone worked on this. It was and is one of those pages I always struggle(d).

I’m +1 for all your proposals. But I think that one thing could be more clear. It’s not really obvious to me that those example boxes (panels) could be dragged and dropped left or right. Maybe it could be done by wording? Something like “just drag and drop those panel boxes below to the left or right side (outside this administration page)”? Not the best english I fear.

[tkrieck]

@CharpentierLucas

Do we need to keep this drag and drop feature as is?

Interesting, I wasn’t advocating for removing the feature. But it can be interesting to come up with a solution requiring less dexterity on the part of the user. I will give it some thought. Thanks for investigating this.

@CharpentierLucas

+1, in the context of the whole page this makes sense, but I wouldn’t do this change by itself.

I’m not sure if I understand. You wouldn’t do this change for any reason in particular?

@CharpentierLucas

+1, I like this idea. To go even further, I think we could make clear that those Panels became interactive elements even without hovering them. Putting them in a box would help convey this change in behavior. There’s no need to put all the controls, but a slight indication that “there’s something special here” would improve usability IMO.

We can put the controls inside an ellipsis button (like the ‘more’ button on the page).

@CharpentierLucas

I’m not sure how to make this slightly transparent effect but we can definitely come up with something.

We could use the opacity css rule, but targeting what receives the opacity can indeed be tricky.

@CharpentierLucas

Why not put the column widths in this advanced configuration too?

I feel that we would hide this feature too much. It’s the only way of changing the width, while the two text inputs for the content are not the only way of putting content inside the sidebar.

@Simpel

But I think that one thing could be more clear. It’s not really obvious to me that those example boxes (panels) could be dragged and dropped left or right.

This goes hand-in-hand with what @CharpentierLucas said above about the drag and drop feature. Maybe we’ll need something better to customize the sidebars that don’t rely on drag and drop OR knowing each panel name (for the input boxes).

[CharpentierLucas]

@tkrieck

@CharpentierLucas

+1, in the context of the whole page this makes sense, but I wouldn’t do this change by itself.

I’m not sure if I understand. You wouldn’t do this change for any reason in particular?

If the width selector display side by side was the only change, I don’t think it would be an improvement. With all the other changes proposed, I agree with it. When I first read it, I was against the idea, but when I actually saw it in the prototype it looked better than without

[tkrieck]

@CharpentierLucas

If the width selector display side by side was the only change, I don’t think it would be an improvement. With all the other changes proposed, I agree with it. When I first read it, I was against the idea, but when I actually saw it in the prototype it looked better than without

Ah, got it. Thanks for the clarification

[mflorea]

Hi @tkrieck,

Thanks for working on this. I agree with @CharpentierLucas that drag & drop is not needed for adding the panels to the left / right columns. But I think drag & drop is still useful to reorder the panels inside the left / right column.

If we drop the panel preview then IMO the most natural / simple solution is to use a live data to list the panels. The columns I see are: Panel (for the panel title), Description, Category and Actions. The Actions column would have actions such as: edit, add to left, add to right. This has some advantages:

• easy to filter / search for the panel you want to add
• easy to access the panel page (link on the panel title)
• easy to add the found panel to the left / right side using the Actions column

WDYT?

Thanks,
Marius

[tkrieck]

@mflorea

If we drop the panel preview then IMO the most natural / simple solution is to use a live data to list the panels. The columns I see are: Panel (for the panel title), Description, Category and Actions. The Actions column would have actions such as: edit, add to left, add to right.

This is an interesting take and I think it can work. Especially, removing the need for a separate screen just to list these panels. I guess this defines my next step. I will adjust my proposal, try to use LiveData and rework the ordering of panels on the sidebars as well, to make it more accessible.