WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 3 days ago

#47012 new enhancement

Proposal: Simplify WordPress Admin Navigation

Reported by: lessbloat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design needs-design-feedback dev-feedback
Focuses: ui, accessibility Cc:

Description

About 3 months ago joen shared some rough mockups in Slack for proposed changes to the left sidebar navigation in core.

My goal below (with Joen’s blessing) is to resurface those mockups a little more publicly to see if we can gather some more feedback and potentially gain a little more momentum with this project.

Summary

The current sidebar has served us well for a long time. But with a few improvements, we can improve accessibility and usability, and allow it to better scale to extensions.

Challenges with the current design

  • The hover/flyout menus are difficult to make accessible, and they do not scale well to mobile interfaces.
  • There are a lot of top-level menu items that are rarely if ever used, contributing to cognitive weight by still being permanently visible.
  • Given the additional menu items that plugin add, people are likely to end up with many menu items, despite a large number of them perhaps not being used that often.

Mockup

Important disclaimer: this is just an initial concept, it is subject to feedback and discussion and iterations:

Menu Mockup

Props to joen for coming up with this v1 concept.

Major Changes

  • Flyout menus are replaced with accordion behavior. This scales all the way from mobile to desktop, and affords better accessibility.
  • Menu is made 80px wider (240px vs. 160), affording a 14px minimum font size for all items, perhaps bigger icons in the future, more relaxed spacing, enhancing usability and accessibility.
  • Sidebar is grouped in major sections, “Site”, “Design”, “Tools” and “Manage”.
  • “Updates” are moved to a subsection of “Manage”, making Home a single item.
  • Items related to content on your site (such as “Posts” and “Pages”) are moved under “Site”.
  • Clicking major menu items just opens or closes the accordion, as opposed to go directly to the first subsection. This unifies the mobile and desktop behavior. You can keep the accordion open if you use it all the time (each click will save state, so you’ll see the same open/closed sections upon page refresh).
  • All “Settings” subsections are moved under “Manage”, along with “Plugins & Blocks” and “Users”.
  • Separators group major categories, like “Site” and “Design” together
  • Dashboard is renamed “Home”, because all of WordPress is a Dashboard, and “Home” is where you can get an overview at a glance.

Custom Post Types & Taxonomies

  • Custom Post Types show up below Pages (top item) and Posts (2nd item).
  • A separator cordons these off from Media & Comments, which show content from all.
  • Categories & Tags, and even custom taxonomies, are accessible from each section, as opposed to having a permanent presence in the sidebar. For example if you have a taxonomy called “Ingredients” tied to “Recipes”, you first click “Recipes”, and on the archive page you can manage existing Ingredients under a tab. The argument for putting them under this page is that taxonomies are usually added in the editor itself, and only managed on the archive pages.
  • When you have custom post types, an additional, short, separator shows up below the post types.

Where's the "Add New" menu item?

One idea would be to make this permanently visible in the top toolbar.

Add New Button Mockup

Clicking this button produces a dropdown. By moving it there, you have a single destination to create new content, and we reduce the amount of tab-stops in the navigation menu, especially for sites with a lot of custom post types.

Helen opened this ticket over 4 years ago. There are a number of different ideas and threads in that ticket. If someone decides that these two tickets should be merged, that is fine.

Feedback

Please keep in mind that this is just a very early, exploratory concept. Nothing here is set in stone. The goal of this exercise would be to improve the overall usability and accessibility of the left nav.

What thoughts, concerns, questions, and feedback do you have?

Attachments (4)

menu-mockup.png (292.9 KB) - added by lessbloat 4 weeks ago.
Menu Mockup
add-button.png (29.0 KB) - added by lessbloat 4 weeks ago.
Add New Button Mockup
Iteration 2 feedback.png (235.6 KB) - added by Joen 2 weeks ago.
Iteration 2
Taxonomy Pages.png (149.1 KB) - added by Joen 3 days ago.

Download all attachments as: .zip

Change History (24)

@lessbloat
4 weeks ago

Menu Mockup

@lessbloat
4 weeks ago

Add New Button Mockup

#1 @johnbillion
4 weeks ago

  • Component changed from General to Administration

I'd like to see some exploration of what the menu could look like for the different default user roles, and whether it could behave differently for different roles.

For example the mockup above is what an Administrator sees, but an Editor or Author will mainly only see items relating to content (the items under Site), and a Contributor or Subscriber will see even fewer menu items.

How could that affect the appearance, grouping, and behaviour of the admin menu items?

There are a few admin menu plugins out there too that should be considered, for example OrganizeWP.

#2 @lessbloat
4 weeks ago

@johnbillion thanks for the comment. That's an excellent point. I'll circle back once I have something to share there.

#3 @boemedia
4 weeks ago

I’m really looking forward to changing the wp-admin menu, since it’s very confusing to a lot of users.

I like the mockups, they appear to have a very clean interface. However, first thing I didn’t understand was ‘Site’. ‘Content’ would be more logic from my perspective. Also, I never understood Settings and Tools. Now it’s tools and manage. I don’t see an extra need for the Tools menu item, would it be an idea to merge Tools & Settings into one ‘Manage/settings’ menu item?

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 weeks ago

#5 @mapk
4 weeks ago

Really great work! I gravitate quickly to the open and light feeling of the proposal and wonder if it's influencing my vote for this. First, I love the grouping here and feel this is a more logical IA than our current nav.

But secondly, it might help to view this proposal on the darker background, styled similarly to how it's expected to be implemented. This would provide a more apples-to-apples comparison with our existing nav.

#6 @afercia
4 weeks ago

  • Focuses accessibility added

#7 @nrqsnchz
4 weeks ago

I really like these explorations. It feels more simple and structured.

Maybe a crazy idea, but I was wondering what if the functionality of the top/admin bar could be integrated into this new sidebar. I think it could take us a step further into simplifying the UI and keeping everything contained in one place. I'll be the first one to say that we risk loosing the simplicity already accomplished on this exploration by adding more stuff to the sidebar, but I think that with this new structured IA, we can find ways to make it work.

#8 @ChiefAlchemist
4 weeks ago

To @johnbillion's point, the biggest problem isn't the width of the column or font-size, but the fact that it's OSFA (one size fits all). That is, there's no personalization. A 10-12+ item list (often longer for admins), most of which at any given moment are irrelevant, is taxing. There's no sense of hierarchy, priority or importance. On top of that, plugins / themes get to jam themselves in anywhere.

Aesthetics are an issue, but not really the crux of the (UX) friction(s) imho.

#9 @afercia
3 weeks ago

Related: #47124

#10 @afercia
3 weeks ago

Related: #47125.

#11 @mrahmadawais
2 weeks ago

I just wanted to say that I love the idea of making the entire admin layout simple. It's dated at best and we already have some sort of guideline via Gutenberg's design. Love the simple mockups.

Peace! ✌️

#12 @Bueltge
2 weeks ago

Short: really great idea and first proposal.

The menu items have currently not different enough capabilities to show the right one for each role. I mean this proposal is much easier to release with a enhancement of capabilities and changes on the menu items, so that the users only see, what she need. I'm also the author of the Admin-Organize-Plugin 'Adminimize' and the support is hard, because the users need more flexibility to remove menu items to simplify the admin area.

This proposal should also add different mockups in each role, so that we see how is the result in each role.

It would be great if we get a plugin to work and test on this idea.

Last edited 2 weeks ago by Bueltge (previous) (diff)

#13 @Horttcore
2 weeks ago

A mock-up for the network administration menu a should also be made, as this new sidebar should also reflect these changes there.

#14 @DeFries
2 weeks ago

Very good first attempt at cleaning up the Dashboard menu! I strongly agree with @boemedia in that Content describes much better what is found in those specific submenus.

The mockup looks very light and clean – I suppose that comes with the territory if one's username is @lessbloat 😏– but I'm not sure about the grey background color in the mockup. If this is an indication for a new color scheme in the Dashboard, I feel like we'd be going back to pre MP6 times with regards to contrast. And I think that would be a shame.

#15 @lessbloat
2 weeks ago

Looks like this got some coverage recently which is exciting to see. I just wanted to drop a quick update to mention a few things:

1) A huge thanks to everyone who has already weighed in with feedback. Keep the feedback coming! This is all super helpful.

2) Next steps will be to share some additional mockups based on various roles (and yes even network admin! 😉), then to come up with a proof of concept plugin.

The mockup looks very light and clean – I suppose that comes with the territory if one's username is @lessbloat 😏– but I'm not sure about the grey background color in the mockup. If this is an indication for a new color scheme in the Dashboard, I feel like we'd be going back to pre MP6 times with regards to contrast. And I think that would be a shame.

3) @DeFries thanks for bringing that up. The light color was used to simply try and convey that these are early mockups. To clarify, there are no plans to change the colors in this particular proposal. 👍

#16 @afercia
2 weeks ago

The hover/flyout menus are difficult to make accessible

Seems to me this statement without any additional context comes a bit out of the blue. I'd like to hear more details about the specific accessibility concerns. Is there any data? Any user testing? While the current "flyouts" can be problematic for some accessibility needs, they're perfectly OK for other users. For example, screen reader users don't even perceive the "flyouts", as the menu sub-items can be normally navigated with Tabs or arrowing and they're all correctly announced.

Instead, accordions would make the interaction less intuitive and less natural, for the simple fact they require an additional click. Not to mention accordions would bring WordPress back to 3.2 🙂

On a general note, I'd tend to think any design proposal should be based on an in-depth analysis of the current functionalities/features and have solid basement in data and user testing. Ideally, this should happen before any visual mockup.

Which of the current admin menu functionalities and features should be kept? Which ones can be removed? For example, I don't see any analysis about the four different states the menu can have:

  1. fully expanded (on large screens)
  2. auto-folded (automatically kicks in at intermediate viewports)
  3. collapsed (triggered by the user)
  4. responsive

Worth also reminding plugins can add menu sections and items and this is based on a system of "priorities": basically plugins can add menu sections almost everywhere. I don't see this taken into considerations in the visual mockups nor in the proposed menu grouping.

A few more things I'd like to see before any visual mockups:

  • a complete analysis of all the pending Trac tickets related to the admin menu: I see this as an essential step, in order to have a better idea of what the pending issues are, enhancements, feature requests, etc.
  • in-depth user testing of the current admin menu
  • the user testing group include users with accessibility needs
  • analysis of the features/functionalities for multisite
  • analysis of the features/functionalities with regards to capabilities
  • mobile first

@Joen
2 weeks ago

Iteration 2

#17 @Joen
2 weeks ago

Thank you everyone, for the feedback, and keep it coming. I would reiterate that these are still mockups, and subject both to feedback, and hopefully if things go well, user testing once we have a proof of concept plugin.

The mockups that I've created today address a few items of feedback, but not all your feedback:

  • Various user roles from subscriber to administrator
  • Network administration
  • Custom post types

Feedback still to be addressed includes the menu titles, and some of the intricacies of how plugins can add menu items. The lack of mockups for these does not mean we won't get to it, just that we haven't yet. Specifically around how adding menu items works, it's possibly also worth discussing that after there's some consensus on the layout of the base user role menus, as well as the menu item titles.

https://core.trac.wordpress.org/attachment/ticket/47012/Iteration%202%20feedback.png

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


13 days ago

#19 @TimothyBlynJacobs
13 days ago

Categories & Tags, and even custom taxonomies, are accessible from each section, as opposed to having a permanent presence in the sidebar.

What does this mean in practice? And how will things work for custom sites that have far more than just the categories and tags menus inside a CPT menu.

Where's the "Add New" menu item?
One idea would be to make this permanently visible in the top toolbar.

Worth noting that we do have this today in the "+ New" admin bar, though I rarely see users actually use it ( anecdata ).


I'm also curious what this looks like with a lot of plugins on a site. In my experience, the stock WP install's menu isn't very overwhelming, but once you get a few plugins going that add their own menu items it starts getting quite complex. Plugins do a lot ( the need for their own menus and submenus is real ). But is there a way that this could be done better?

@Joen
3 days ago

#20 @Joen
3 days ago

What does this mean in practice? And how will things work for custom sites that have far more than just the categories and tags menus inside a CPT menu.

Good thoughts, worth clarifying. I took a quick stab at a mockup to clarify what I meant by this. Lots of feedback to still tackle, but felt this one deserved to be taken a stab at first.

If you'd like to provide me with a particularly gnarly cpt menu configuration you'd like to see "converted" to this style, feel free to send it my way and I can make a mockup. It would make a good "acid test" of the layout.

Note: See TracTickets for help on using tickets.