Overhaul the admin main menu

[jonrz]

Rework the admin main menu, focusing on new information architecture and layout.

Use this document as a starting point, or comment with alternative ideas. Also, please view this issue for work already done in that regard.

One thing should be clear: Sidebar menu is here to stay. Top menu is not coming back. A sidebar not only is more expandable, but the experience is very similar to the mobile version, so muscle memory is kept across screens.

Tasks order - instructions and discussion on each task issue:

• [ ] Information Architecture #18
• [ ] Initial designs #17
• [ ] Prototype
• [ ] Internal usability testing
• [ ] Surveys
• [ ] Public testing

[dgrammatiko]

As this is a crucial feature for the back end, we (the J4 front end team) together with the a11y team started on a clean base with some usable html markup: https://github.com/joomla/joomla-cms/compare/4.0-dev...dgt41:§4.0-dev-sidebar-menu?expand=1

The styling, structure etc is still up to the UX team to decide (either designs or actual code is fine for us).

Please also review this: https://github.com/joomla/joomla-cms/pull/15660

[jonrz]

Document updated. Sorry about the mistake.

[jonrz]

@dgt41 Dimitri, thanks for the links. What we really need, and was not addressed on previous attempts, is to reorganize the interface in a logical way. We may even end up using the current layout, albeit I'd prefer larger icons for top level menus, but the structure needs change. I'm keeping to the notion that "advanced users will always adapt if the interface is well done", so no, we will not dumb down Joomla, or go around changing names.

[jonrz]

@dgt41 Sorry I didn't answer your specific concern before. Since this is mostly a reorganization, I believe most of the current markup can be used. I feel there may be some extra markup needed for the sub-menus, though.

[jayblaq]

We just introduced a customizable top menu and J4 we have a side menu. Here comes my two cents: what if the side menu was pure Joomla and we added a custom top menu and give the super admin the ability to hide the side menu? This could make things so easy for clients and admins! Of course, the top menu is optional etc.

[brianpeat]

Neat idea, but now you have some users getting used to the side menu, and some getting used to the top. Might get really confusing.

[jayblaq]

Change is coming.. oh yeah winter too please!

On Wed, Aug 9, 2017 at 11:29 PM brianpeat notifications@github.com wrote:

Neat idea, but now you have some users getting used to the side menu, and some getting used to the top. Might get really confusing.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/joomla/joomla-ux/issues/4#issuecomment-321440856, or mute the thread https://github.com/notifications/unsubscribe-auth/AGgNFDDLFiIolXS1wMuuevtvuor0fDGvks5sWnkWgaJpZM4OunU- .

-- Jason Nickerson

Monev Software LLC / JoomlaXTC.com Open Source Florida / JoomlaDay Florida TampaBay Joomla User Group JED QC Tester Joomla Site Showcase Team

[jayblaq]

Please understand ,J4 needs to be very different and new. We need a fresh start. I am so used to the top menu, but welcome change.

[brianpeat]

Oh I'm not arguing against the side menu, that battle has moved on. I'm saying if we let site builders configure too much it could turn into a big mess. Maybe not, but I just think if your product is so configurable is barely has a "native state" you could really end up confusing everyone.

[jayblaq]

I was saying the top menu could be custom - this is why we all moved to CMSes in the first place to give a friendly admin for our clients etc- just my two cents. I think the menu should be customizable and why not leave the side menu there but with an optional top menu and option to turn the side off only for developers?

[jonrz]

@brianpeat Thank you.

I'm really glad that the really bad idea that is the"fully customizable admin menu" that was implemented on 3.7 takes so much work (because you have to create a new menu and start adding items from scratch) that just a few people would actually use it. I hope it never becomes easier. A fully customized menu totally annihilates the "Google, how do I do X thing on Joomla?" that is the life saver for most new users.

Anyway, I would love the sidebar menu to offer a partial approach which is a "my site" top level menu that will act as sort of a favorites for your most used actions.

@jayblaq A side bar will offer a solid experience across interfaces (desktop and mobile). Maybe some extension developer will end up offering something like a top bar at some point in time though.

What, if I may ask, do you think is better on a top bar menu? Clickable area is generally smaller, third level menu always opens kinda sideways (that is a major point of pain for less dexterous users), etc.

"If the interface is good enough, experienced users will always adapt, and the vast majority will welcome the changes". Some people don't want change until it happens.

[jonrz]

Also, I forgot to add, developers will build the site, but it's the users who will use it. We should stop putting the developers first when thinking about user interface. There is Drupal for that...

[C-Lodder]

I really don't know why there's a discussion about a sidebar AND top menu. In J4, we've moved from the top menu to the sidebar menu as it's overall a better experience for mobiles and doesn't require the dirty hacks I had to add in J3 to add scrolling if there are too many items in the dropdown.

In J4, the top menu is no longer there and we have no plan to add it back in. Having 2 separate menus, 1 for Joomla and the other for 3PD's to hook into just sounds terrible. You will then also have to think about what will happen on a mobile. You'll end up having 2 hamburger icons, both of which open 2 separate menus. That doesn't take a UX expert to say that's poor UX

Keep it as it is.

[mbabker]

I'm really glad that the really bad idea that is the"fully customizable admin menu" that was implemented on 3.7 takes so much work (because you have to create a new menu and start adding items from scratch) that just a few people would actually use it. I hope it never becomes easier.

You need to take a look at 3.8 then. It has support for menu presets which can be used as the admin menu module's display option, or when you go in to create a new admin menu it can be seeded from a preset (and we ship a preset with the existing menu structure). So as much as it might be painful for documentation and support, fact is it's not a "super painful only super smart users can do this" feature.

Also, I forgot to add, developers will build the site, but it's the users who will use it.

The customizable menus are for the end user. You can give a menu structure to your clients that they are comfortable with and can understand, yes this means deviation from the standard but if the developer/integrator and the client working together end up at a state where having a customized menu makes the client's lives easier, then so be it.

[jonrz]

@C-Lodder Thanks. @mbabker It was part rant, and I'll stop it now.

[jonrz]

@mbabker OK, so now that there are presets, I feel we are even more free to do something different and break the norm. Of course, it is not our intention to completely disorient current users, au contraire, I want current users to like it and use it, but so far I was trying to maintain the maximum compatibility, both in IA and markup.

Is there any existing system/option/switch/whatever that would allow the end user (the one with very little tech knowledge) to populate a "my site" top level menu with his most used menu items? (those will be menu aliases, by the way). We can add support for targeted/filtered menu items in the future (ex.: New article within categ X).

[mbabker]

They would have to build a custom menu, and if you're really adament about it not being displayed in the sidebar with the rest of the menu (I honestly wouldn't suggest that just for the sake of UI consistency, if you really want that type of menu "container" just make it the first thing in the menu), add another menu module, and put it in position. We also do zero user activity tracking, so we couldn't add a "click here to create a 'my site' menu with your favorite shortcuts" action.

[brianpeat]

I could totally see a first item in the side bar being a favorites menu. As far as putting it at the top, it really depends on what that bar does now as you collapse it. Even then, I'm okay with knowledgable admins modifying the side menu for their clients, but I'm not sure adding another menu to the top is that great an idea in the long run. Honestly what I'd rather see is an option to add shortcuts to the dashboard. My clients love it when I install an admin icon component and put a bunch of large buttons to things that are the first thing they see when they log in. For basic users, they don't mind clicking the joomla icon when they're done with a task to go back to the buttons, and power users will learn the menu system as is anyway, so I'm honestly not sure a custom favorites menu is really needed. It's something I'd rather see us allow an third party extension builder to add.

[C-Lodder]

@brianpeat - thats what quickicons are for

[brianpeat]

Correct, but not every thing has a quickicon, so I install a third party module/component to let me make whatever I want. Is that changing in J4? My clients love the Asikart QuickIcons extension.

[mbabker]

It's easy to whip up a plugin to make quick icons. Don't know what that particular plugin does, but if it lets users make quick icons themselves, then even better.

[C-Lodder]

Extensions can hook into the quickicons, but I did want users to be able to add their own via the module

[brianpeat]

Yeah, it basically gives them a nice user interface to create an icon and upload or choose a fontawesome icon and then it displays them as large buttons in a module in the control panel. Here's a sample:

[jonrz]

@mbabker I must have expressed me wrong. I do want it as part of the menu, maybe as the first menu item or second (first being "dashboard"). What I would like to know is if there is an easier way than having a custom menu, and requiring users to work on the menu interface to set it up.

Maybe a switch somewhere with "add to my site" or "pin to my site", I'm just not sure where at this point.

@brianpeat I would like to turn this new menu into some kind of mini-dashboard. Kinda like the new start menu on windows 10, but of course better looking and more organized. What I mean is a double wide menu, with a better layout and blocks organization, some larger icons (system config, media manager, etc), and so on. On mobile it would break down to one column, and reduce elements size to minimize scroll.

This way the users won't have to come back to the actual dashboard to do stuff (especially with "my site"), and we could use the dash for nicer looking information blocks.

[brianpeat]

So you're thinking some way when you're on a menu item, to flag it as a favorite and have it show up in this shortcut/favorite menu, and possibly have it be more of a graphical popup menu instead of just a list? To me this still sounds like something a 3rd party could tackle, but I'm not against it.

[dgrammatiko]

I would like to turn this new menu into some kind of mini-dashboard

@jonrz for the love of god, please DONT!

[jonrz]

@brianpeat Yes, that would be cool.

@dgt41 Dimitri, why not?

Alternative: It just occurred me that a module with drag and drop would be a good way for the users to manage "my site". By editing the module, the user would see a replica of the current menu to the side, and would be able to drag and drop menu items and sub-blocks into the "my site" area. Internally, this would create menu aliases.

[dgrammatiko]

Simplicity is the ultimate design:

[brianpeat]

Honestly I'm more for simplicity and less options, and opening it up so 3rd party extension makers can create cool things that don't have to be hacked in to work. That way we help the eco system and don't clutter up the core with fluff.

[jonrz]

That kind of simplicity is not what you think. You will scare new users away. Simplicity with clarity, usability, and good looks is the ultimate design. Otherwise don't you think most web systems would be looking like an OS right now, instead of running desperately to the opposite direction? In fact, even OSes are running in the opposite direction. An OS is a whole different beast. The user won't throw his laptop away, because:

1. He needs it to do a lof of things in his modern life
2. He have the time to get used to it
3. It costs money
4. The only three options looks almost the same (mobile being the good looking alternative)

Joomla doesn't have either of those advantages.

[brianpeat]

Well really we're looking at two things:

1 making the menu so easy to use that they find stuff and remember where it is

2 making it appear like maybe we think the menu is too complicated, so we add this thing that allows users to bypass it and make their own.

While I love the idea of making your own menu easily, doesn't it sort of do what I mention in #2? I guess I'll have to think more on it or see a demo of it in action before I'm sold. It would have to be super easy to do and fit the design of the admin template really well for me to be sold.

[jonrz]

Yes, #1 will definitely make my site not needed. I'm thinking of it more in terms of grouping tasks from the most used components, so muscle memory takes the user to the same place, instead of browsing around (even if the user knows exactly where to go).

[C-Lodder]

I'm with @dgt41 on this. Turning it into some dashboard is NOT to way forward. Microsoft tried this with Windows 8.0 and it failed on every single level.

[jonrz]

Maybe a middle ground then, let's see where it goes, and what users think of it at the surveys and usability tests.

But please, you can't honestly think this is simple for a new or basic user: This is not even simple for a starting developer. For you it may be just convenient, because you need to fit dozens of things into your screen, but it takes a lot of practice and memorization.

[C-Lodder]

@jonrz - It obviously is simple, considering the market share for MACs

[brianpeat]

the reversed color and window next to it makes it a lot more busy that it normally looks to brand new users. Here's mine with nothing around it (and in the finder instead of the Mail app)

[brianpeat]

Before we get into adding nifty features, lets focus on restructuring the menu to see if we can just fix it by making the menu really easy to discover and remember things. Then maybe we can revisit some sort of favorites system.

The big reason I like the quickicons is the control panel tends to be tons of wasted space and it's nice and friendly for new users to come back to, but even then I don't mind installing a component to get what I need for that too.

[jonrz]

Lmftfy: It is simple for an OS. We're not building one. Win10 start menu was a reference for a visually oriented mini-dashboard. I want to skip the step of having to go back to the dash, and at the same time eliminate the "where the hell do I go to do what I need in Joomla" factor. Have you ever sit, quietly, beside a new user using Joomla?

[jonrz]

@brianpeat sane suggestion. Let's add "improve design" between restructuring and favorites.

[C-Lodder]

@jonrz - This is why we'll have the User Guidance system in place, so that users know where to find essentials.

Yes, I have sat next to a complete newbie. I recommended she use Joomla for her site, she got a little assistance from me and Rowan, then was purposely thrown in the deep end (on her own), and she managed to figure out where to go to achieve what she wanted.

And if we went with @dgt41's menu suggestion, by which we simplify it, it would be even easier!

[jonrz]

A little assistance goes a long way. Most users won't have that.

Making something visually appealing (and organized) breaks the "this is effing complex" first impression that Joomla (and OSes) currently give.

[C-Lodder]

Most users won't have that.

They will in J4!

[jonrz]

I certainly hope so.

I'm here to do my very best to reverse this trend:

Current approach is certainly not working. Number of downloads means nothing if our numbers grow slower than the competition. Users keep flocking to the new shiny visual simplified CMS. Thing is, none of the shiny things have the power of Joomla. As I said before: Joomla is the CMS with the best potential to become truly awesome in short term. It won't happen if we do more of the same, as trends clearly indicate.

[brianpeat]

Part of our issue though, isn't just the interface, it's wooing back those who assume Joomla hasn't changed at all since the last time they used it. Pile that on with people who for the same reason hate Apple and love Android, they Hate Joomla and love WP even if they've never used it, so they crap on it publicly in comments. Or they read some hit piece from a WP lover who thinks Joomla is insecure and writes about it.

So yes, we need fix some things in the core and make things easier, more discoverable, easier to wrap your brain around, but we have a bigger problem that marketing and evangelism is going to have to fix I think.

We need to convince people the Joomla way is better (and make it better), not just make the Joomla way easier.

[rgmears]

Something is left out of this discussion.

Regardless how it is customized, the Admin Menu is a bunch of code. Whether it displays horizontally or vertically it is in more or less the same position in the HTML markup of the appropriate file. As such it can be set to display horizontally or vertically with the corresponding CSS. A simple choice on the part of the end user.

[rgmears]

@jonrz It's a little early to assign this to me as I still need to learn how to use GitHub. I am happy, though, to work on this.

[C-Lodder]

@rgmears - Letting the user decide whether they want a sidebar or top menu?

[brianpeat]

The issue is, with the side menu in view, we DO have stop in the top bar. What happens to the top bar stuff if you flip the menu to the top? Do we just do a double row with the menu on the lower row?

I actually DO like this idea, because if people HATE the side bar, they can flip back to a top menu and mostly get back something that TO THEM feels more like Joomla.

In the end, when we introduce any sort of customization for the user, screen casts and things go out the window. BUT, if the top menu basically has the same order and structure that the side menu has at least it'll look familiar, so this really isn't a bad idea. It sure would keep the loyal die hards from jumping ship if they see that side bar menu and don't like it.

[mbabker]

OK, we need to be VERY careful here. If we start shoving too many options in to the system, what are we really fixing or improving? I honestly don't think we can make the admin template's primary navigation control an either/or thing, either we do sidebar or we do top menu and we go all in on one or the other.

[C-Lodder]

@mbabker - yeah dw, letting the user decide whether or or not they want a sidebar or top menu ISN'T going to happen, simply because there isn't a top menu anymore. It was purposely moved away from, so we're not reintroducing it.

@brianpeat as it stands, the current top menu is shit.

At the end of the day, if we introduce somthing and have evidence to backup WHY it's better, be it shit code, poor UX, etc, then it's down to us/marketing/Joomla to sell it and explain why we did what we did. We can't satisfy every single person