WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 8 months ago

#51419 assigned defect (bug)

Reconsider the UX impact of up/down arrows on meta boxes

Reported by: johnbillion Owned by: sarahricker
Milestone: Future Release Priority: normal
Severity: normal Version: 5.5
Component: Editor Keywords: needs-design
Focuses: accessibility Cc:

Description

In #39074 an accessibility problem was fixed whereby it was not possible to reorder meta boxes using only the keyboard. This is an important fix because it allows a keyboard-only user to reorder boxes in order to improve the tab order of these boxes.

Unfortunately this created a side-effect where it's now easy to accidentally reorder a meta box by clicking on one of the up/down arrows, whereas previously you had to drag the meta box to another position to reorder it.

There are a few UX issues related to this on the post editing screen:

  • Accidentally clicking the "up" arrow on the topmost sidebar meta box will cause it to move below the main post editing panel, which makes it easy to miss as it will commonly move well below the fold. I've just been dealing with reports from two separate users who did this and were unable to find the meta box.
  • Clicking anywhere on the meta box title expands/collapses it, but now there is also an up/down button that causes it to move position instead, in addition to the dedicated expand/collapse button. Users who are used to clicking the title now have to be careful where they click.
  • It's not possible to move block editor meta boxes (which are React components). This causes a significant visual discrepancy between "classic" meta boxes and block editor meta boxes, and causes especially strange behaviour when a user moves a meta box "up" and it doesn't actually move up to within the block editor meta boxes.

"Classic" meta boxes aren't going away any time soon, so I think the last point is an important one.

Change History (17)

#1 @afercia
12 months ago

Related: #51284.

#2 @SergeyBiryukov
12 months ago

Related: #50699. The latest patch there aims to only show the UI for reordering meta boxes when the Screen Options tab is open. Looks like that would solve the first two issues?

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


10 months ago

#4 @ryokuhi
10 months ago

  • Milestone changed from Awaiting Review to 5.7

This ticket was mentioned in Slack in #core by lukecarbis. View the logs.


10 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


9 months ago

#7 @ryokuhi
9 months ago

  • Owner set to sarahricker
  • Status changed from new to assigned

This ticket was mentioned in Slack in #accessibility by alexstine. View the logs.


9 months ago

#9 @poena
9 months ago

Why are people accidently reordering? Are they trying to collapse the section? - Can this be avoided by moving the icons further away from the collapse icon?

#10 @joedolson
9 months ago

Added comments to #50699 about the accessibility team's thoughts on how that should move forward; hopefully that ticket would resolve part of this ticket's concerns.

The others are trickier. Moving metaboxes between columns is complicated; the linearized order is predictable, but can be unexpected if you don't know how this works. It should be learnable, however.

The alternative would be adding even more mover buttons to move left and right between columns; I'm not sure that extra UX burden is worth the cost vs. learning the movement process.

The behavior within Gutenberg is pretty strange. I could move a metabox *out* of the Gutenberg sidebar using the mover buttons, but I couldn't move it back in. That needs some adjustment - the buttons should probably only allow movement within current container in Gutenberg unless they can move both directions.

#11 in reply to: ↑ description @abrain
8 months ago

Replying to johnbillion:

  • Accidentally clicking the "up" arrow on the topmost sidebar meta box will cause it to move below the main post editing panel, which makes it easy to miss as it will commonly move well below the fold. I've just been dealing with reports from two separate users who did this and were unable to find the meta box.

I have the opposite problem, that users move the meta box from below the content editor into the sidebar and wonder where it went. When I sent them instructions on how to move the meta box back, they said it would not work.

Turns out: In the Block Editor you have to click the "up" button on the topmost sidebar meta box to move it below the content editor, in the Classic Editor you have to click the "down" button on the bottommost meta box in the sidebar.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


8 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


8 months ago

#14 follow-up: @sarahricker
8 months ago

Re #1: "Accidentally clicking the "up" arrow on the topmost sidebar meta box will cause it to move below the main post editing panel, which makes it easy to miss as it will commonly move well below the fold. I've just been dealing with reports from two separate users who did this and were unable to find the meta box."

I'm not able to replicate that, can you confirm if that is still an issue, @johnbillion?

@hedgefield - Noting that there is some overlap with https://core.trac.wordpress.org/ticket/51419 and https://core.trac.wordpress.org/ticket/50699. These issues need some input from design before we can move forward.

Main items remaining to be resolved:
1 - Should Gutenberg sidebar metaboxes be re-orderable?
2 - What icon should be used to open vs re-order (would be best if the were the same in both spots)
3 - Should drag n'drop of metaboxes below content be limited to to that area? (I was not able to move them to the sidebar myself, but their there was some UI issues that made if feel like I could).

Last edited 8 months ago by sarahricker (previous) (diff)

#15 @sarahricker
8 months ago

  • Milestone changed from 5.7 to Future Release

Punting this from 5.7 to future release, as it is rather unlikely to be resolved before Beta 1.

#16 in reply to: ↑ 14 @johnbillion
8 months ago

Replying to sarahricker:

I'm not able to replicate that, can you confirm if that is still an issue, @johnbillion?

Yes it's still an issue, but it appears you need at least one side meta box and one advanced meta box registered for it to happen. Example code:

add_action( 'add_meta_boxes', function() {
	add_meta_box(
		'test-side',
		'Side',
		function() {
			echo 'I am on the side';
		},
		'post',
		'side'
	);
	add_meta_box(
		'test-advanced',
		'Bottom',
		function() {
			echo 'I am at the bottom';
		},
		'post',
		'advanced'
	);
} );

#17 @hedgefield
8 months ago

Do you have an example of a plugin that has legacy metaboxes? I don't have any on my sites so I've never seen the mover arrows in the block editor.

For the classic editor, it sure is a problem. The metabox title bar now has so many affordances, I think we need to streamline that a little bit.

I like what @joedolson suggests in #50699, to be able to toggle the mover arrows on and off in Screen Options. This should also disable drag and drop. But the arrows should indeed be there initially for discoverability.

Let's only show the drop areas when the Screen Options are open, or when you start to drag a metabox.

Let's not also add sideways arrows. Instead, can we focus on the metabox you're moving the same way as we do with blocks that you move in the block editor? Then you'll always be able to see where it ended up.

Then, I think we need to bin being able to click on the title to collapse while the movers are enabled. There's a dedicated UI button for it, if we want to limit accidental clicks, this makes the most sense to me. That frees up the title area to only accomodate the drag and drop affordance. When move and drag are disabled, the only possible action is collapse/expand, so then I'm fine with it.

Note: See TracTickets for help on using tickets.