Make WordPress Core

Opened 14 years ago

Closed 3 years ago

#10364 closed enhancement (worksforme)

Usability problem on the Widgets admin interface

Reported by: vteixeira's profile vteixeira Owned by: azaozz's profile azaozz
Milestone: Priority: normal
Severity: normal Version:
Component: Widgets Keywords: close
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 (3)

widget-sidebar.diff (1.5 KB) - added by cfinke 11 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 11 years ago.
Screen Shot 2020-04-08 at 7.13.24 PM.png (118.1 KB) - added by donmhico 3 years ago.

Download all attachments as: .zip

Change History (17)

#1 @Denis-de-Bernardy
14 years ago

  • Milestone changed from 2.8.2 to 2.9

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

#2 @Denis-de-Bernardy
14 years ago

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

#3 @azaozz
14 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).

11 years ago

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

#4 @cfinke
11 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
11 years ago

  • Milestone changed from 2.9 to Awaiting Review

#6 @azaozz
11 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 11 years ago by azaozz (previous) (diff)

#7 @azaozz
11 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
11 years ago

#23081 was marked as a duplicate.

#9 @toscho
11 years ago

  • Cc info@… added

#10 @ocean90
10 years ago

  • Cc shaunandrews added

Could be solved with the Widgets³ project.

#11 @buffler
10 years ago

  • Cc jeremy.buller@… added

#12 @chriscct7
8 years ago

  • Priority changed from high to normal
  • Severity changed from minor to normal

#13 @swissspidy
8 years ago

  • Keywords needs-patch added; has-patch removed

#14 @donmhico
3 years ago

  • Keywords close added; needs-patch removed
  • Resolution set to worksforme
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.