Make WordPress Core

Opened 6 years ago

Last modified 3 months ago

#10364 reopened enhancement

Usability problem on the Widgets admin interface

Reported by: vteixeira Owned by: azaozz
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-patch
Focuses: Cc:


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.

Attachments (2)

widget-sidebar.diff (1.5 KB) - added by cfinke 3 years ago.
Keeps the active widgets drop target visible on the screen as the user scrolls.
widgets-screen.png (81.4 KB) - added by azaozz 3 years ago.

Download all attachments as: .zip

Change History (14)

#1 @Denis-de-Bernardy
6 years ago

  • Milestone changed from 2.8.2 to 2.9

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

#2 @Denis-de-Bernardy
6 years ago

  • Component changed from UI to Widgets
  • Owner set to azaozz

#3 @azaozz
6 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

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

3 years ago

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

#4 @cfinke
3 years ago

  • Keywords has-patch added
  • Resolution wontfix deleted
  • Severity changed from normal to minor
  • Status changed from closed to reopened
  • Version 2.8 deleted

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.

#5 @SergeyBiryukov
3 years ago

  • Milestone changed from 2.9 to Awaiting Review

3 years ago

#6 @azaozz
3 years ago

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

Last edited 3 years ago by azaozz (previous) (diff)

#7 @azaozz
3 years ago

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

#8 @ocean90
3 years ago

#23081 was marked as a duplicate.

#9 @toscho
3 years ago

  • Cc info@… added

#10 @ocean90
2 years ago

  • Cc shaunandrews added

Could be solved with the Widgets³ project.

#11 @buffler
2 years ago

  • Cc jeremy.buller@… added

#12 @chriscct7
3 months ago

  • Priority changed from high to normal
  • Severity changed from minor to normal
Note: See TracTickets for help on using tickets.