Recently the WordPress.com design team deployed an update to the primary navigation portion of Calypso (the javascript-powered interface that WordPress.com customers interact with). This exercise in reorganisation and subtraction reduced an overwhelming side panel that previously contained ~10 items, several buttons, and sub headings down to a succinct 6 items with logical groupings and patterns.

Is it time to look at WordPress community to look at wp-admin through the same lens?

The problem

The current wp-admin navigation is poorly designed in the sense that there are too few principles, patterns, and APIs to guide plugin authors on extending it.

Consequently once you add a few plugins, particularly “ecosystem plugins” like WooCommerce, the navigation begins to feel very unorganised and overwhelming. In short – it doesn’t scale.

Earlier in the year, a trac ticket was opened (and subsequent WPTavern article published) to surface this problem and illustrate the solution employed on WordPress.com, and how that might inspire a direction for core.

Momentum has fallen off a little bit, but the general sentiment around the idea of simplifying the navigation in wp-admin seems positive. There’s an appetite for change.

Exploration in menus

As a member of the WooCommerce design team, I got to thinking about how a large plugin like WooCommerce might integrate, or even help form the foundation of a new core navigation system.

Indeed it’s a challenge we’ll have to negotiate at some point as a part of our WooCommerce Admin project.

Side note: If you’re a WooCommerce user that hasn’t checked out WooCommerce Admin yet, please do – we’d love to hear your thoughts. You can read more about WooCommerce Admin on our development blog.

So I spent some time working with the proposed navigation structure and came up with a few concepts.

• One that adds a single “WooCommerce” top level menu item;
• One that adds several top level menu items and creates a more eCommerce-first experience;
• One that embraces the panels & sections pattern that exists in the Customizer which has usability tested fairly well.

• 

• 

• 

• 

Each option has it’s own merits depending on your perspective, but all of them are flawed for one reason or another. Whether it’s forcing poor UX on the user due to a limited depth of navigation. Or breaking principle(s) that the new core navigation will attempt to establish such as all content living in the “Site” menu item. Or simply taking over the whole menu and ending up back where we started.

Things get more complicated (and consequently worse) when you add more plugins, or plugins for plugins – like WooCommerce extensions.

A potential solution: Meta menus

No – not mega menus, meta menus.

Perhaps the solution isn’t that plugins integrate seamlessly with the new navigation. Instead, what if plugins had the ability to add an abstracted, “meta” level of navigation, adjacent to general site management, not within it?

This is not a new concept, in fact the following mockup will no doubt look familiar to Slack users:

Here, instead of plugins injecting top level menu items all over the place, they add a single meta navigation item, the contents of which are all contextually relevant to the plugin in question.

You switch to “WooCommerce mode” and all the menu items within are inherently landmarked to guide the user and shape expectations. IE the Analytics section in WooCommerce mode will reveal eCommerce related reports. The settings section will reveal eCommerce related settings, and so on.

This context switching is a powerful concept that works vice versa. Finished a new product listing and want to publish a blog post announcing it? Switch out of WooCommerce context directly in to Site Management context – in a single click – and start writing.

With the prevalence of larger ecosystem plugins of this nature, WordPress is beginning to feel more like an operating system than “just” a CMS. I mention this because the concept above is not only used in apps like Slack, but in operating systems as well. Think about the application shortcuts on your desktop / dock. Or your smartphone – you no doubt have a variety of different apps installed, all of which are accessed via icons on home screens. This is an intuitive way to interact with – and navigate between – different pieces of software.

On the flip-side think about the App settings section in iOS – messy right? Perhaps in this situation it’s excusable – users don’t generally interact with that particular screen so often. But imagine always having to navigate your apps this way – that’s what wp-admin users are forced to do every day.

A perfect solution?

Nothing is perfect, and this concept is no exception. It adds a layer of visual noise and as always is open to “abuse” from third party developers. I can already imagine authors using animated gifs for their plugin thumbnails 😒

As a design change it would be significant and dramatically affect how we think about information architecture in the WordPress ecosystem. It might be a step too far. Then again, it might not.

Clearly there’s a lot of exploration and research to be done before finding a solid direction. I’d love to hypothesise how this structure would scale with other plugins of different scales activated. Or how we might employ Material design patterns to enhance the holistic navigation experience throughout wp-admin. And how the admin bar / notifications might be better integrated.

Either way, I’ve had a lot of fun exploring these concepts so far. While perhaps not ready for prime time yet, I thought it was be neat to document my findings regardless.

---

Photo credit: Denys Nevozhai