Epic #96592

[UX] Page tree drag and drop is horrible to use and needs improvement

Added by Tanel Põld 6 months ago. Updated 5 months ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
Start date:
2022-01-19
Due date:
% Done:

0%

Estimated time:
Sprint Focus:

Description

Drag and drop is the most natural way to create new pages and it's a great feature if it does what it supposed to.
It gives a good sense where does the page go in structure.

I have been using it since it was introduced 4 or 5 years ago?
Till today 4 times out of 5 the page lands in wrong place. And it happens daily as it's probably one of the most often used feature for me.

So how do we make it better?


Files

Screenshot 2022-01-20 at 10.24.25.png (415 KB) Screenshot 2022-01-20 at 10.24.25.png Tanel Põld, 2022-01-20 08:22
drag-ndrop-in-10-px.m4v (139 KB) drag-ndrop-in-10-px.m4v Tanel Põld, 2022-01-20 20:23
#1

Updated by Tanel Põld 6 months ago

In Neos CMS it's easy to get it right, and it's a very similar solution. Maybe it's something to look at.

#2

Updated by Benni Mack 6 months ago

Tanel Põld wrote in #note-1:

In Neos CMS it's easy to get it right, and it's a very similar solution. Maybe it's something to look at.

Hey,

check out some ideas from my colleague: https://b13.com/core-insights/ideas-concepts/ux-concept-for-the-typo3-page-tree

#3

Updated by Michael Schams 6 months ago

I don't know if the following suggestion is achievable but it would be cool if backend users could drag'n drop elements from the content area into the page tree.

In TYPO3 v11 LTS and earlier, moving records to other pages requires a cut'n paste process. Drag'n drop capabilities across the content area and the page tree would simplify this. Simple records that don't need a colPos or other page-specific information should be straight forward. However, records such as content elements might be more complicated to drag'n drop into a page in the page tree.

#4

Updated by Tanel Põld 6 months ago

Here's some ideas I have been having in mind and some I got from analysing great work from Laura work that Benni linked above.

Goals
  • Improving the features already present instead of adding completely new ones
  • Add desired page type drag and drop but have enough feedback where it lands after dropping
  • Page can be landed/added as first in list of subpages
  • Utilise page type selection icons for adding pages by clicking. It’s already present on top of the page tree.
  • Add desired page type with two clicks
  • Initiate ‘add multiple pages’ using drag and drop or the same two click path by using add multiple type icon (illustrated with green)
  • Editing page properties should be driven by demand not offer
    • No opening wizards right after adding a page
    • No pop-up offer to copy or move while dragging page into a new place in the tree. Copying should be initiated by the user (holding down a key?) or using regular copy paste from context menu.

Explaining actions on the screen shot
(Screenshot 2022-01-20 at 10.24.25)

2. Selected/dragged page type to be added
  • page type icon could be a selector or drag handle
  • if selected could stay active until deselected

2.1 While dragging a page type icon to the tree add buttons act as drop zones

3. On copy or cut from context menu or dragging to move the page
  • the + icon in add buttons would replace accordingly (copy, paste, move)

Surely enough overall design of the page tree needs improving to be spacious enough to make actions like this possible.

#5

Updated by Tanel Põld 6 months ago

Here I have added a video with one of the issues of drag and drop in TYPO3 v11 right now.

In moving cursor up and down in less than 10px, 3 different things can happen. It's almost impossible to get it right.

And visual feedback is far from enough.

#6

Updated by Riccardo De Contardi 5 months ago

This https://mbraak.github.io/jqTree/examples/03_drag_and_drop/ makes a better usage of the drop zones and is more clear where the items will be moved

#7

Updated by Tanel Põld 5 months ago

Riccardo De Contardi wrote in #note-6:

This https://mbraak.github.io/jqTree/examples/03_drag_and_drop/ makes a better usage of the drop zones and is more clear where the items will be moved

That would be already a great improvement indeed.

Also available in: Atom PDF