? ?
avatar coolcat-creations
coolcat-creations
4 Sep 2018

What needs to be fixed

The new menu does not allow hover and click on the same button.
The idea was to have the dashboard on click and the submenu on hover.
Which, according to a11y team and spoken with @dgrammatiko, @ciar4n and @wilsonge couldn't be solved with the current layout due to accessibility issues.

This new menudesign was discussed in the Joomla 4 Skype Chat and agreed on to work on it.
The colors can be changed - however now they are accessible. If someone has an idea for a different colorscheme that is accessible on the menu background, suggestions are welcome.

The colors help visually orientated people to find their items easier.
On Item hover you have a dashboard icon if a dashboard is available for this item. On Item hover you have also an add item icon if add item is available for this item.

Some will recognize the menu logic from modern applications like ringcentral and airmail.

Menu closed:

menu - closed

Menu opened

menu - opened

Menu different states on one screen (Just an example, read the notes on the right in the image)

menu - states

avatar coolcat-creations coolcat-creations - open - 4 Sep 2018
avatar joomla-cms-bot joomla-cms-bot - edited - 4 Sep 2018
avatar joomla-cms-bot joomla-cms-bot - unlabeled - 4 Sep 2018
avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Sep 2018
Category Templates (admin)
avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Sep 2018
Status New Discussion
avatar franz-wohlkoenig franz-wohlkoenig - change - 4 Sep 2018
Title
[Joomla 4 backend Template] New Menudesign
[4.0] [Backend Template] New Menudesign
avatar joomla-cms-bot joomla-cms-bot - edited - 4 Sep 2018
avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

IMHO Users should be buried somewhere, Certainly not first in the menu... Lets concentrate on CONTENT :)

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

I’m saying that maybe it should not be the first menu item - we should be concentrating on CONTENT not Administration :) Move/hide/demote User Management as a task that is less important than CONTENT creation :)

On 4 Sep 2018, at 13:04, Elisa Foltyn notifications@github.com wrote:

Users is the first item in the menu? Or how do you mean?


You are receiving this because you commented.
Reply to this email directly, view it on GitHub #22005 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/AAYa3N5vj8i9ISmsDao68dwdZQ7y_2aUks5uXmxWgaJpZM4WY10n.

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

That might be true for your projects, it definetly needs usertesting and/or a survey people asking how they use their sites. For 75% of my client websites users are a very important part. But if thats just for me like that we can discuss to move it somewhere else...

We can also discuss about the order of the main items - of course.

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

So you are saying that User Management is more important than Content creation in the majority of Joomla projects? I disagree.

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

No i did not say that, even not before my edits ;)

For 75% of my client websites users are a very important part. But if thats just for me like that we can discuss to move it somewhere else...

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

Anyway... this is kind of more like about the general design implementation. For the right items to be in the right order @wilsonge already said that there will be some user testing done.

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

If the admin menu is built like the frontend menu is then you would have control over the ordering of the admin menu items anyway :-) I just dont think Users should be prioritised over creation of content by default.

avatar zero-24 zero-24 - change - 4 Sep 2018
Labels Added: ? ?
avatar zero-24 zero-24 - labeled - 4 Sep 2018
avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

You can do that since joomla 3.6 or 3.7 and build your own admin menu.

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

But 99% of people don't.

Joomla 4 should allow a rethink on the importance of the default items, ordering, and significance in the Administrator Menu. IMHO (Which counts for very little I know ;))

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

This is mostly about the layout , maybe post a separate issue about the structure and a proposal how you‘d it to be. So we can discuss there.

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

What is the search box for? Is that a new Joomla feature or just a "throw this into the design like a customer would, and expect developers to provide that functionality?" ???

I think the menu layout is very lacking. It looks like it was mocked up in seconds. Sorry if that sounds harsh, but I think people are expecting Joomla 4 to be MUCH better than this.

Again, just my opinion, and I'm no UX/UI expert at all. Its not personal. If this were the final design/layout then I personally would be disappointed. Collapsed the top level left menu looks cool - but expanded its lacking :-(

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

Compare what you are proposing against https://adminlte.io/themes/AdminLTE/index2.html and I think its clear that "we" can do much better :)

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

Submit your own proposal below. I am not an UX Expert either. If there is a better idea I am sure the community will embrace it.

avatar brianteeman brianteeman - change - 4 Sep 2018
Labels Added: J4 Issue
avatar brianteeman brianteeman - labeled - 4 Sep 2018
avatar brianteeman
brianteeman - comment - 4 Sep 2018

As Phil says "what is the search box for"?

avatar micker
micker - comment - 4 Sep 2018

i like new design but content at first joomla is a ContentMS not UserMS

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

What is the search box for? Is that a new Joomla feature or just a "throw this into the design like a customer would, and expect developers to provide that functionality?"

Thats a proposal I thought was great from Shirs side - it was about to search through the menu items, I can remove it from the Issue if you all want to.

avatar PhilETaylor
PhilETaylor - comment - 4 Sep 2018

it was about to search through the menu items

If anything at all, it should search EVERYWHERE and return results from every kind of thing (menus, content, custom modules)

avatar brianteeman
brianteeman - comment - 4 Sep 2018

Well it is confusing for.an issue that is about design to include significant new functionality without any comment or description

avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

For the confused ones here I will update the screens.

avatar brianteeman
brianteeman - comment - 4 Sep 2018

Please don't be patronising and making personal attacks.

avatar coolcat-creations coolcat-creations - change - 4 Sep 2018
The description was changed
avatar coolcat-creations coolcat-creations - edited - 4 Sep 2018
avatar coolcat-creations
coolcat-creations - comment - 4 Sep 2018

HAHA

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 5 Sep 2018

About the new Backend-Approach: Thanks all working on this. I can't wait to play with it.

avatar micker
micker - comment - 5 Sep 2018

I like the contrast of background good for accessibility but not sure about texte size maybe too light
i link to see a menu without too many entry at first
Juste 1 question you remove retract menu only with icône ?

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Juste 1 question you remove retract menu only with icône ?
In this issue yes, but it would be sure nice to toggle it. Maybe someone can add a styling how this could look like.
For the fontsize I did benchmark with some modern Applications, if its too small it would be great to have a setting in the backend template to increase fonts in general.

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Compare what you are proposing against https://adminlte.io/themes/AdminLTE/index2.html and I think its clear that "we" can do much better :)

Your example has not the "add" and "dashboard" features that are included in this draft and I am not sure how this could be merged into your example...

avatar PhilETaylor
PhilETaylor - comment - 5 Sep 2018

It was just an example that shows clearly that your proposed is utterly unbecoming of a mass market CMS major release that has to wow people on first contact... The + button would be easily added just like your did, and I dont know what you mean by "dashboard" feature.

At the moment literally any design would be better than what is proposed :-(

Here is some inspiration: https://wrapbootstrap.com/themes/admin - infact search google for admin templates and you will see millions of designs of left menu bars that are better than the proposed.

I think you have failed to grasp that the final chosen design will be around for about 10 years on a major CMS series that is attempting to blow the socks off people when they use it - at the moment its totally underwhelming ...

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

As said before, please post a better example so people can finally work on it. I am not insisting on the design posted above. It would be an option to access the dashboards and the add feature.

Please read the concept here to get the whole picture: https://magazine.joomla.org/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Actually we can leave the menu maybe also like it is now. Because for accessibility the submenu can be reached on the dashboard anyway.

avatar PhilETaylor
PhilETaylor - comment - 5 Sep 2018

As said before, please post a better example so people can finally work on it.

It should be ok to disagree without having to provide a competing design. I'm not a designer or accessibility expert, I'm a developer - big difference.

My opinion probably doesn't even count but I would be very very sad to see Joomla 4 go with a design that doesn't scream "this is exciting, modern, useable and future proof and customisable"...

Having the (+) button is a cool idea - nothing stopping that still happening with a better design.

useable

Simply moving sub menus further and further right, leaving less and less room for the actual text is not really a good design. Making the font smaller to allow this is just bad. This will also not be very useful when developers start using the menu structure for their own extensions. That would also be three layers down, Extensions -> Akeeba Backup -> Backups -> Backup Now for example.... (I made that up, but its not unreasonable to expect developers to do stuff like this)

customisable

E.g If I were to add another top level menu (Like Virtuemart and other extensions do), the icon needs to be customisable, The extension needs a way to also specify a route to a (+) button, and specify if that should show on any given menu item in its extension. The 3pd can/and do have multiple sub menus and sub-sub menus - the menu structure needs to be able to cope with UNLIMITED levels of menus, and then what is a submenu of a sub menu wants a (+) button callout next to it or the dashboard icon next to it? that also needs to be thought of and a new api provided to 3pd (and core extensions!)

There is much here that has not been thought through at all :)

Search box

What exactly would this search, how would that be exposed to 3rd party developers though API

avatar brianteeman
brianteeman - comment - 5 Sep 2018

I have been trying to use the original invisionapp mockup to see the part that you say can not be accessible in the original menu concept. I am struggling (probably because I am not familiar with invisionapp and it is very slow for me) to see where the bit that cant be made accessible is. Can you please either share some screenshots or make a short recording

avatar micker
micker - comment - 5 Sep 2018

the better idea of this propose is to kill the third level of menu

  • win some place for mainzone
  • more simple to use
  • no slide effect
  • for me better accessibility
    the place of search is interesting only if seach works in all admin part
    about design of submenu maybe less padding at left for link with more caracteres
avatar PhilETaylor
PhilETaylor - comment - 5 Sep 2018

the better idea of this propose is to kill the third level of menu

But Joomla supports unlimited menu nesting!

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

I have been trying to use the original invisionapp mockup to see the part that you say can not be accessible in the original menu concept. I am struggling (probably because I am not familiar with invisionapp and it is very slow for me) to see where the bit that cant be made accessible is. Can you please either share some screenshots or make a short recording

From the conceptdescription at https://magazine.joomla.org/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend "Every main level item has a submenu and its own landing page. That means in detail, that if you hover over the first level item, you can access all areas from the submenu. You can also directly click on the main item, and you have a nice overview of the options for that specific area."

According to a11y team you cannot do hover for one action and click for another action.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Can you please either share some screenshots or make a short recording

avatar micker
micker - comment - 5 Sep 2018

@PhilETaylor multilevel is a nightmare
-for end user
-for accessibilty .. not realy for validation, try to use keyboard or navigation+zoom*200 ...

avatar PhilETaylor
PhilETaylor - comment - 5 Sep 2018

@micker yes, but currently Joomla supports unlimited nested menu structures. If you are going to break that compatibility then that decision needs careful thought, and accurate, timely communication to 3rd Party Developers, (even if using a major series SEMVER Type change to change the functionality.)

All I'm hearing from most people recently (for years haha) is that we cannot have "nice things" because "accessibility"... all I'm asking is for "nice things" AND "accessibility" :-)

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Can you please either share some screenshots or make a short recording

Its not easy to click it in the mockup because invision does not support two actions on one button either.
http://recordit.co/AWeATVnSl5
Again: On click = Dashboard, On Hover=Submenu ≠ Accessible

avatar micker
micker - comment - 5 Sep 2018

@PhilETaylor i understand !
accessibility not only aspect problem but we to check usuability
i realy think we are in good way for this thanks @coolcat-creations

avatar PhilETaylor
PhilETaylor - comment - 5 Sep 2018

This kind of "dashboard" view makes no sense anyway... It looks horrid and is just going to get worse as more extensions are installed

I dont understand its value/use

Maybe if there were a search/filter to find the extension

Remember - users can, and will, install 100+ extensions :-)

screen shot 2018-09-05 at 14 12 14

avatar PhilETaylor
PhilETaylor - comment - 5 Sep 2018

Maybe if the dashboard view had ALL the menu items, for each extension in each box that would make more sense?

E.g:

Akeeba Backup . (+)

  • Profiles
  • Backups
    -- Backup Now
    --- Settings

At the moment I fail to comprehend this screen otherwise.

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

This kind of "dashboard" view makes no sense anyway... It looks horrid and is just going to get worse as more extensions are installed

I dont understand its value/use

Maybe if there were a search/filter to find the extension

Remember - users can, and will, install 100+ extensions :-)

If you read the issue for that you see that I am also not happy with this view for components. Please do me the favor to read the whole concept in the link i am posting over and over again: https://magazine.joomla.org/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend

https://github.com/joomla/joomla-cms/issues?utf8=%E2%9C%93&q=Dashboard

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Ah I think I understand what you mean now - please confirm I got it right

When you hover over the icon (top level menu) the page changes to the landing page for that component in the background and expands to reveal the submenu which is clickable.

If that is correct then no it cannot be made accessible BUT it wont work anyway (and why you cant even show a mockup). You are trying to load a new page in exactly the same amount of time as it takes to expand a menu. That's a technically impossible achievement. So not doing that is nothing to do with accessibility it's not going to be practical ever. That's why no one spotted this issue before - because they never imagined that this was what you were trying to achieve as it can't be done.

Having said all of that I still don't see the need for having a "landing" page and a submenu at the same time. It makes sense if you just have a landing page eg the current J4 home, system and help pages that there is a landing page. But having a landing page AND a submenu doesnt make any sense to me.

From my memory of the discussions the concept of the landing page was to REMOVE the need for the sub-sub menu. So that you would go
Components -> expand - googlemaps
And when selected that would either open the googlemaps component OR if it had further menu items they would be displayed on a "landing" page instead of another sub-sub-menu

I even remember discussing that we would need to provide code that would dynamically convert an extensions sub-sub menu into a landing page and documentation so that instead of them doing that they could create their own landing page

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Maybe if the dashboard view had ALL the menu items, for each extension in each box that would make more sense?

@PhilETaylor that was always my understanding of what this could be

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

When you hover over the icon (top level menu) the page changes to the landing page for that component in the background and expands to reveal the submenu which is clickable

No,
When you CLICK the main item you go to the dashboard
When you HOVER the main item you see the submenu
this is not possible to make accessible

Having said all of that I still don't see the need for having a "landing" page and a submenu at the same time.

Because you can add there area specific Informations too and make it possible to access submenu items with a mouthstick easier. See all "Dashboard" related issues that have been created.

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Its possible with a similiar approach like done in Ringcentral app though... Thats why i posted this new proposal to solve the a11y issue.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

When you CLICK the main item you go to the dashboard
When you HOVER the main item you see the submenu

So you want two different events on the same text based onhover or onclick - I didnt think that was even possible.

However we already do something similar in J4 with the save button. Activate the main part and action is performed. Activate the icon and a dropdown opens.

That same technique can be used with the current J4 admin menu and the design from 11 months ago

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Maybe thats what you are doing in this new design but I cant work it out from the screenshots

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 5 Sep 2018

can the Backend-Template transferred here so it can be tested?

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

So you want two different events on the same text based onhover or onclick - I didnt think that was even possible.

it's possible codewise, .item:hover .submenu {display:block;} - but have a link on the item. But again: its not possible for a11y.

The save button is splitted. That's something completely different. How would you split the menuitem icons and have that still accessible?

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 5 Sep 2018

The code still has to be written

Ah, forgot its Mockups.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

@franz-wohlkoenig it doesn't exist its just a picture

@coolcat-creations in exactly the same way - why not?

.item:hover .submenu {display:block;} - but have a link on the item.

Really?

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

@coolcat-creations in exactly the same way - why not?

.item:hover .submenu {display:block;} - but have a link on the item.

Really?

Sorry I don't understand your question.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

It was

  1. Why couldnt you create the menu the same way you create the save menu
    and
  2. "really - that works ? " referring to the css you quoted

Reading it back again it was indeed confusing. And comment 2 isnt important anyway

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018
  1. How
  2. What do you think a dropdown menu works like? :-D If you hover the main item the dropdown appears and if you click it you end up on the page (if an url is set on that item)
avatar brianteeman
brianteeman - comment - 5 Sep 2018

sorry - juggling too many different thoughts in my head I was wrong

Demo accessible menu with links on the parent and opening submenu from a button

https://codepen.io/brianteeman/pen/NLvvoz

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Demo accessible menu with links on the parent and opening submenu from a button

https://codepen.io/brianteeman/pen/NLvvoz

When I click there on "Space Bears", nothing happens. But there is also no link in the code so nothing can happen. Are you sure that is the right demo? @dgrammatiko was very sure we cannot have two actions on one item.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Do you not see this

image

You can also try the example directly at the w3c web site

avatar brianteeman
brianteeman - comment - 5 Sep 2018

I have updated the links to something more obvious

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Do you not see this

image
You can also try the example directly at the w3c web site

That is not a link that is an anchor to enable the dropdown....

A link would lead to another website. Your example will not work when an URL is given there because then the Flyout does not work.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

I updated it to use real links to prove it works

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

I have updated the links to something more obvious

Ok then if its still accessible then we can stay with the current menu.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

I did say that the current menu could be made accessible some weeks ago - it was when we were discussing the value of making regular reports so that people new what was happening and could help if they knew where the problems were

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

According to the people involved in the discussion on Twitter you were asked directly to join the discussion about the menu but did not react.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

If I was I don't remember seeing it - could you share a link to that invite

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

@dgrammatiko can surely share a screenshot

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Do you mean this
image

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Yes

avatar brianteeman
brianteeman - comment - 5 Sep 2018

Well there was no follow up to that so I could only assume that I was not invited

avatar dgrammatiko
dgrammatiko - comment - 5 Sep 2018

@dgrammatiko was very sure we cannot have two actions on one item.

IIRC I said that you cannot assign 2 different action on the click event and that is quite true as well now. Anyways the accessible code is here: https://codepen.io/dgrammatiko/pen/MXZLMa
The js still needs some love and I think the dashboard links are missing

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

I thought that the tweet said that he asked you if it would be ok to add you back to the chat, which you left.

avatar coolcat-creations
coolcat-creations - comment - 5 Sep 2018

Could you submit the code as a PR @dgrammatiko then we can close the discussion here.

avatar brianteeman
brianteeman - comment - 5 Sep 2018

well it didnt ;)

I was certain I didnt miss anything

That codepen doesn't work at all for me

avatar coolcat-creations
coolcat-creations - comment - 8 Sep 2018

The current menu is not usable at all. Usability is failing completely... The Submenu stays open and overlays important parts. You have to click always the small X to close the submenu. This needs a huge improvement.

avatar PhilETaylor
PhilETaylor - comment - 9 Sep 2018

Could you submit the code as a PR @dgrammatiko then we can close the discussion here.

From what I have read, @dgrammatiko is no longer investing in this project. Did he change his mind?

avatar frogydiak
frogydiak - comment - 24 Sep 2018

Seems like the J4's backend template is still stagnant at this point. I'd like to ask, it might be a stupid question to some but I'll ask anyways. Which a11y standard J4 is using? Do we have a guidelines posted somewhere?

The current menu is not usable at all. Usability is failing completely...

I certainly agree with @coolcat-creations on this, IMO, if only a11y compliance is what's stopping a team to move forward. I would say, push the compliance to 4.1 release.

PhilETaylor posted above

Compare what you are proposing against https://adminlte.io/themes/AdminLTE/index2.html and I think its clear that "we" can do much better :)

Well, apparently :D , the current menu system is not even close to better that the AdminLTE which handles up to 3rd level menu. IMO, AdminLTE Menu UI looks great and does make more sense (but not fully A11Y compliant I guess - I don't know A11Y until Brian mentioned it in one the post I made).

It seems to me, accordion is not being considered because of A11Y (correct me if I'm wrong) but accordion creates a tidy way of hiding and showing elements which does not occupy a lot of space and it looks great in mobile layout.

Does J4 needs to be unique from most commonly accepted UI?

avatar coolcat-creations
coolcat-creations - comment - 8 Mar 2019

WIP - not this design as the statements above made clear that you don't want it. But the current staging menu of this repo is getting the desired dashboard and add function and we ellaborate the a11y

avatar infograf768
infograf768 - comment - 10 Mar 2019

@coolcat-creations
I suggest to close this and open a new PR/proposal when things get testable or new screenshots of the various pages are posted.

avatar coolcat-creations coolcat-creations - change - 10 Mar 2019
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2019-03-10 16:25:17
Closed_By coolcat-creations
avatar coolcat-creations
coolcat-creations - comment - 10 Mar 2019

Ok thanks

avatar coolcat-creations coolcat-creations - close - 10 Mar 2019
avatar franz-wohlkoenig franz-wohlkoenig - change - 20 Apr 2019
Labels Removed: J4 Issue
avatar franz-wohlkoenig franz-wohlkoenig - unlabeled - 20 Apr 2019

Add a Comment

Login with GitHub to post a comment