WordPress.org

Make WordPress Core

Opened 6 months ago

Last modified 5 months ago

#41611 new enhancement

Customizer: Make "Add a Widget" button easier to find

Reported by: melchoyce Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Customize Keywords:
Focuses: ui Cc:

Description

While testing out the image widget, I found that many of the folks I was testing with struggled to find the "Add a Widget" button.

We should consider different ways of making the "add a widget" button easier to find, including moving placement, changing to primary, or increasing size (this is my “gut” pick).

Attachments (1)

add-widget-button.png (88.9 KB) - added by melchoyce 6 months ago.

Download all attachments as: .zip

Change History (12)

#1 @westonruter
6 months ago

What about moving it to the top of the sidebar? Or also what about adding two of them, at the top and bottom, when scrollbars would cause the button to scroll out of view?

#2 @melchoyce
6 months ago

Yeah, moving to the top would help, but I'd worry that moving to the top would imply that the widgets are being added to the top of the list. Same with having two buttons, one at each side — that might further reinforce that the top button adds to the top of the list and the bottom button adds to the bottom of the list.

This is just conjecture though ¯\_(ツ)_/¯

#3 @westonruter
6 months ago

Drag & drop of available widgets could help with positioning too, somehow: #39910.

#4 @alexvorn2
6 months ago

maybe to change the color of the button to blue.

#5 @melchoyce
6 months ago

Let's test out two ideas:

  • Moving the button to top of the list.
  • Making the button a little bit larger.

Attaching quick mockups.

Button padding is 5px 10px 4px.

#6 @JoshuaWold
6 months ago

Short of changing the widget to a primary color (blue background, white text), nothing else is coming to mind to increase visibility right now. I like what you've done in the last attachment to increase the size a bit. Probably still liking the button below vs above.

#7 @melchoyce
6 months ago

I think I'd like to avoid having two primary buttons in such close proximity, so I'm leaning against turning the button blue.

#8 follow-up: @westonruter
6 months ago

@melchoyce what if the reorder and “Add a Widget” row were docked to the bottom of the scrollable panel so that it is always in view?

#9 in reply to: ↑ 8 @melchoyce
5 months ago

Replying to westonruter:

@melchoyce what if the reorder and “Add a Widget” row were docked to the bottom of the scrollable panel so that it is always in view?

This could work in cases where there are more widgets onscreen than the height of your browser, but I don't think it would work otherwise. I definitely want to try making the button bigger; maybe we could also try testing out a version where the button docks if you add more widgets than your viewport can display.

#10 @westonruter
5 months ago

  • Milestone changed from Awaiting Review to Future Release

#11 @melchoyce
5 months ago

Created a PR to make the buttons bigger and bolder: https://github.com/xwp/wordpress-develop/pull/275

Note: See TracTickets for help on using tickets.