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

[melchoyce]

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).

[westonruter]

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?

[melchoyce]

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 ¯\_(ツ)_/¯

[westonruter]

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

[alexvorn2]

maybe to change the color of the button to blue.

[melchoyce]

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.

[JoshuaWold]

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.

[melchoyce]

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

[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?

[melchoyce]

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.

[melchoyce]

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