Epic #96592
closed[UX] Page tree drag and drop is horrible to use and needs improvement
0%
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
Updated by Tanel Põld over 2 years 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.
Updated by Benni Mack over 2 years 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
Updated by Michael Schams over 2 years 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.
Updated by Tanel Põld over 2 years 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)
- 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.
Updated by Tanel Põld over 2 years ago
- File drag-ndrop-in-10-px.m4v drag-ndrop-in-10-px.m4v added
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.
Updated by Riccardo De Contardi over 2 years 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
Updated by Tanel Põld over 2 years 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.
Updated by Riccardo De Contardi almost 2 years ago
- Related to Feature #97257: Improve user experience when adding a new page via drag and drop in page tree added
Updated by Benni Mack about 1 year ago
- Target version changed from 12 LTS to Candidate for patchlevel
Updated by Riccardo De Contardi 3 months ago
Version 13 has greatly improved the D&D interaction on the pageTree, also the feedback.
Can be considered sufficient?
Updated by Riccardo De Contardi 2 months ago
- Status changed from New to Closed
- Target version deleted (
Candidate for patchlevel)
I am closing this issue as on TYPO3 13 the experience with drag and drop on pageTree has greatly improved and now the drop target areas feel comfortable to work with.
If you think that there is still space to improve, please open a new issue describing your ideas. Thank you.