Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widget Editor: confusing Move to icon seen in toolbar #32119

Open
paaljoachim opened this issue May 21, 2021 · 6 comments
Open

Widget Editor: confusing Move to icon seen in toolbar #32119

paaljoachim opened this issue May 21, 2021 · 6 comments
Labels
[Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets. [Feature] Widgets Screen The block-based screen that replaced widgets.php. Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.

Comments

@paaljoachim
Copy link
Contributor

paaljoachim commented May 21, 2021

Description

There is a new icon in the Widget Editor block toolbars:

Widget-screen-toolbar

The curvy icon which is used for the Move to is very confusing. It reminds me of a "slalom slope".

I went online and searched for a move to icon and here is one I located.

Mockup-new-move-to-icon


I originally posted a comment on the merged PR.
#30826 (comment)


I activated the theme Twenty Twenty as it has Footer 1 and Footer 2 widget areas to compare the Move to feature vs the drag and drop. But as @critterverse Channing mentioned here: #30826 (comment)
Is this a primary action or a secondary action? If we see it as a secondary action then it feels natural to remove it from the toolbar and only have it located in the ellipsis drop down.

Screen Shot 2021-05-22 at 01 12 40

I do also think that accessibility should take a closer look.

Btw
I tried the drag & drop and dragging a block from one widget area to another the blue line is not seen. I believe we already have an issue for the drag & drop where these things have been discussed.

@paaljoachim
Copy link
Contributor Author

paaljoachim commented May 21, 2021

Conclusion is to remove the Move to from the toolbar, and instead have a similar version in the ellipsis drop down. Updating the Move to feature located there.

Here is a quick mockup (using the same feature as is located in the toolbar):
Move-to-updated-feature

Here I removed the Move to toolbar icon:

Move-to-updated-feature-2

@paaljoachim paaljoachim added [Feature] Widgets Screen The block-based screen that replaced widgets.php. [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. labels May 21, 2021
@talldan
Copy link
Contributor

talldan commented May 24, 2021

Linking to the design from @critterverse - #30826 (comment)

@noisysocks noisysocks removed the Needs Design Feedback Needs general design feedback. label Jun 10, 2021
@paaljoachim
Copy link
Contributor Author

Another option instead of the icon is use the words "Move" (@jasmussen Joen's idea)
In general using a word instead of an icon where it is possible feels like the best choice (or might be the best choice).

Close up:
Widgets-tool-bar-Move-text

Farther away:
Widgets-move-text-2

Using the example I used above:
Widgets-toolbar-move-3

@paaljoachim paaljoachim added the Needs Dev Ready for, and needs developer efforts label Jun 22, 2021
@paaljoachim
Copy link
Contributor Author

paaljoachim commented Jun 22, 2021

I believe the easiest and most straight forward patch is to switch the current icon with the word "Move."
As we could still leave the Move option in place in the toolbar. Having it easily available for users.

@talldan talldan added [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later and removed Needs Dev Ready for, and needs developer efforts labels Jun 23, 2021
@noisysocks
Copy link
Member

We're not in any rush now so let's go with the design @critterverse shared in #30826 (comment).

Hey all, I'm questioning whether this should be treated as a primary action that lives in the toolbar. What if it goes into the ellipses menu with other secondary actions? In this case, we could treat the widget area selection as a modal (vs. how it currently appears as a popover from the toolbar):

move-step1
move-step2

I think this could help because we've got a lot of different arrow-based icons which starts to get confusing, and "move to widget area" is a tricky thing to communicate clearly in icon format.

@noisysocks noisysocks added [Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets. Needs Dev Ready for, and needs developer efforts and removed [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later labels Feb 4, 2022
@paaljoachim
Copy link
Contributor Author

paaljoachim commented Feb 4, 2022

Today we have the up and down arrows (move within the same widget area) and the icon for moving between widget areas. Removing the move between widget area icon and instead adding it to the ellipses menu sounds like a good idea....

It would also be natural to extend the up and down arrows so that a widget can be moved between all widget areas. As one clicks the down arrow one can initially see it move within the same area if there are additional widgets there, and at the bottom of the widget area it would be moved to the next area. Making it easier to move various widgets.
I have earlier created an issue for it here:
Up/Down arrows - move blocks independent of relation to placement inside/outside a container
#24328 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Widgets Customizer Ability to add and edit blocks in Customize → Widgets. [Feature] Widgets Screen The block-based screen that replaced widgets.php. Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants