Project

General

Profile

Actions

Epic #96592

open

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

Added by Tanel Põld about 2 years ago. Updated 10 months ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
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


Related issues 1 (1 open0 closed)

Related to TYPO3 Core - Feature #97257: Improve user experience when adding a new page via drag and drop in page treeNew2022-03-30

Actions
Actions #1

Updated by Tanel Põld about 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.

Actions #2

Updated by Benni Mack about 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

Actions #3

Updated by Michael Schams about 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.

Actions #4

Updated by Tanel Põld about 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)

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.

Actions #5

Updated by Tanel Põld about 2 years 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.

Actions #6

Updated by Riccardo De Contardi about 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

Actions #7

Updated by Tanel Põld about 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.

Actions #8

Updated by Riccardo De Contardi over 1 year ago

  • Related to Feature #97257: Improve user experience when adding a new page via drag and drop in page tree added
Actions #9

Updated by Benni Mack 10 months ago

  • Target version changed from 12 LTS to Candidate for patchlevel
Actions

Also available in: Atom PDF