Think & Built Bigger Faster Better

The enormous effort of updating WordPress’ dated admin interface is beginning to take shape as contributors started looking at some early designs this week. This administrative redesign is a step in Gutenberg’s Phase 3 road map, which is centered on collaboration.

To get things started, Automattic-sponsored product designer Saxon Fletcher uploaded some photos and videos with a design that looks like it evolved from the editor’s user interface to become a more organic element of the admin. He criticized plugin creators who released their own admin interfaces while waiting for WordPress to give this project priority, saying that this was one of the driving forces behind the project:
The author of the plugins is bringing their own obsolete user interface, which poses an additional risk and further fragments the WordPress experience.

These mockups, according to Fletcher, are “broad strokes and the first of many iterations.” Fletcher’s structural ideas were divided into three categories:
“The frame can be used for previewing any type of content, including your entire site, templates, patterns etc,” Fletcher said. “Plugins can decide as to whether they benefit from having the frame in view while a task is being worked on, or hidden away. If a plugin doesn’t make use of the main content area, the frame will be in its expanded state.”

The admin bar may also be getting a makeover as part of this project, although Fletcher did not elaborate on how it might change. The admin bar doesn’t appear in any of the mockups.
“We have an opportunity to re-think what transitioning between the front and back of your site looks like,” he added. “With the introduction of the frame, which represents the front-end of your site.”

Fletcher noted that the difficulties of going up and down the submenus were more difficult, but the initial sketches explore the idea of building a drill down navigation UI that can also be utilized to hold basic content. Contributors to the design are looking into solutions for this, such as adding breadcrumbs or highlighting recently visited sections.
Developers are worried that this idea for drill-down navigation may make navigating too difficult, which is why it has garnered the most negative response in the post’s comments.

The current benefit of our current menu system is that it is very fast to switch from one plugin to another or to another area of WordPress with very few clicks, designer Adam Pickering said. “Not a fan of hiding all the Admin Menus behind a maze of Breadcrumbs, also there are many complex UIs that will not convert well this idea for the menu system,” he added. The user experience is significantly more time-consuming and frustrating as a result of this suggestion for the new admin menu. Even if a proposal arises that would replace the prior menu
Others worry that the drill-down menu involves too many clicks and that there should be a popup menu that appears on hover or long touch on mobile devices and offers additional alternatives. Developer Anthony Hortin noted the navigation’s resemblance to the Customizer’s:

As others have stated, using this “drill down navigation pattern” would be extremely frustrating for both new and seasoned users. The user must repeatedly click on each menu item, exit, click on the next menu item, exit, and so forth until they locate the screen they’re looking for because they can’t see what options are under each menu. I frequently have to linger over menus to remind myself where things are even though I’ve been using WordPress for more than 17 years.

The Customizer, which has used this method of navigation for years, exhibits this as well. It might be extremely difficult to locate options in the Customizer while working on a new client’s website if they use a theme that you are unfamiliar with. I detest the idea of the Dashboard moving in the same direction as a whole.

The Frame approach for the admin was also criticized by participants in the discussion because few admin duties lend themselves to frontend previews.

Developer Jon Brown remarked, “I’m most suspicious of the’surfaces’ approach and switching to a ‘front end first’ approach to things. “Almost nothing I do in wp-admin requires or would be improved by a front-end view, aside from theme adjustments. On a WC site, I most definitely don’t need or want to see the front end if I’m managing orders. Again, there is no front end while I’m changing plugin settings. For creating new stuff, I understand why it makes sense, but that’s about it.

Fletcher also suggested, as part of the Collaboration phase, that the admin be made more adaptable for various use cases, so that its navigation and system variables would make carrying out certain activities for blogs, e-commerce, portfolios, and multisite, for instance, more efficient. He also made a suggestion that members of the community might be able to exchange setups.

More so than it already is, he added, “We’d like to see WordPress become a fun platform to build multiuser products on top of.”

In order to make their extensions compatible with the new admin, WordPress extension developers will face a significant transformation. Some people and groups are in a better position than others to take that next step. In Fletcher’s proposal, it is acknowledged that maintaining backwards compatibility will be crucial to avoid breaking settings pages for plugins that aren’t updated.
The trickiest component of the program, according to Fletcher, is bringing out administrative changes in a way that is incremental, doesn’t disrupt current operations, and promotes progressive adoption. “The site editor has given us a place to play around, including the ability to browse your site’s pages in the most recent 6.3 release, and that may extend to other important admin pages like site settings, but eventually we’ll need to ‘break out’ of the editor to avoid too much duplication. Additionally, we must handle plugin pages that may never be updated in a smooth manner.

The debate rages on, and the developer community is urged to offer their opinions on the basic ideas and organizational components put forth in the post.