Usability problem on the Widgets admin interface

[vteixeira]

On the widgets page, when I have lots of widgets available it's a nightmare to drag and drop one by one on the intended sidebar.
I have to scroll down and up the page while keeping the mouse button pressed.
When someone is using a Notebook and no mouse it's really a pain.
And with all that netbooks today it's even worse.

What I think could be done: just put a toggle button (like the dashboard widgets) on each widget and when someone press this toggle button it opens a menu with some links like: add to sidebar 1, add to sidebar 2,...

This would really be a usability improvement since it's not usable the way it is now.
And off course the drag and drop doesn't need to be replaced. People should be able to use it either way.
If you have a big monitor, go for drag and drop since you should be able to view all your available widgets on multiple columns without the need to scroll down the page.
Otherwise just click the toggle and Add to sidebar.

[Denis-de-Bernardy]

oh, that would be very very nice to have...

[azaozz]

When you try dragging a widget off the edge of the browser window it auto-scrolls in that direction. If that's too hard to achieve you can always enable the Accessibility Mode which adds an "Add" link to each widget and two steps widgets configuration (similar to what you're suggesting).

[cfinke]

Keeps the active widgets drop target visible on the screen as the user scrolls.

[cfinke]

Most entry-level users don't know that dragging something to the edge of the screen will scroll the page, and it's a difficult action to complete for anyone with limited motor skills.

I've attached a patch that solves the problem without introducing any new UI. It keeps the active widgets drop target at least partially visible on screen using this algorithm:

• If the top of the widgets section is visible, the drop target is placed at the top of the widgets section. This is the default view when the page is loaded.

• If the user scrolls down and there's empty space underneath the drop target, the drop target is moved down until there is no empty space underneath.

• If the user scrolls up and there's space above the drop target, the drop target is moved up until there is no empty space above.

• If the user is dragging something, the drop target won't be moved.

[azaozz]

Replying to cfinke:

Been thinking about this for a while too, however went into a slightly different direction.

After seeing ​@lessbloat's videos, seems the most important UX enhancement for the widgets screen is to clearly mark the drop-zones when a new widget is being dragged and keep them in the viewport.

This would change the look on the right side of the screen a lot (which may be a bit drastic) but will make it very clear what's happening and where the widget can go. Another benefit is that a first-time user will not be able to "ignore" the drop-zones (as they will appear on drag-start).

[azaozz]

In the above screenshot: the right side with the drop-zones would stay visible (position: fixed) and the height of each drop-zone is calculated in percent so all registered sidebars are shown. This may make it a bit busy on small screens when there are 10+ sidebars but it's still a lot easier to use.

The drop-zones are shown after starting to drag a widget from the left side of the screen and revert back to the usual display when the widget is dropped. If the widget is dropped in a drop-zone, that sidebar and the widget are expanded so the options can be set, etc. (same as expanding a newly dropped widget now).

[ocean90]

#23081 was marked as a duplicate.

[ocean90]

Could be solved with the ​Widgets³ project.

[donmhico]

Marking this ticket as closed since the issue reported in this ticket is already addressed very nicely by how the Widget section work now. Feel free to re-open this up if anyone feels the need to revive this concern.