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.
Category | ⇒ | Templates (admin) |
Status | New | ⇒ | Discussion |
Title |
|
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.
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.
So you are saying that User Management is more important than Content creation in the majority of Joomla projects? I disagree.
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...
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.
Labels |
Added:
?
?
|
You can do that since joomla 3.6 or 3.7 and build your own admin menu.
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 ;))
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.
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 :-(
Compare what you are proposing against https://adminlte.io/themes/AdminLTE/index2.html and I think its clear that "we" can do much better :)
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.
Labels |
Added:
J4 Issue
|
As Phil says "what is the search box for"?
i like new design but content at first joomla is a ContentMS not UserMS
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.
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)
Well it is confusing for.an issue that is about design to include significant new functionality without any comment or description
For the confused ones here I will update the screens.
Please don't be patronising and making personal attacks.
HAHA
About the new Backend-Approach: Thanks all working on this. I can't wait to play with it.
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 ?
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.
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...
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 ...
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
Actually we can leave the menu maybe also like it is now. Because for accessibility the submenu can be reached on the dashboard anyway.
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
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
the better idea of this propose is to kill the third level of menu
the better idea of this propose is to kill the third level of menu
But Joomla supports unlimited menu nesting!
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.
Can you please either share some screenshots or make a short recording
@PhilETaylor multilevel is a nightmare
-for end user
-for accessibilty .. not realy for validation, try to use keyboard or navigation+zoom*200 ...
@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" :-)
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
@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
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 . (+)
At the moment I fail to comprehend this screen otherwise.
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
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
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
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.
Its possible with a similiar approach like done in Ringcentral app though... Thats why i posted this new proposal to solve the a11y issue.
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
Maybe thats what you are doing in this new design but I cant work it out from the screenshots
can the Backend-Template transferred here so it can be tested?
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?
The code still has to be written
Ah, forgot its Mockups.
@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?
@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.
It was
Reading it back again it was indeed confusing. And comment 2 isnt important anyway
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
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.
I have updated the links to something more obvious
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.
I updated it to use real links to prove it works
I have updated the links to something more obvious
Ok then if its still accessible then we can stay with the current menu.
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
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.
If I was I don't remember seeing it - could you share a link to that invite
@dgrammatiko can surely share a screenshot
Yes
Well there was no follow up to that so I could only assume that I was not invited
@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
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.
Could you submit the code as a PR @dgrammatiko then we can close the discussion here.
well it didnt ;)
I was certain I didnt miss anything
That codepen doesn't work at all for me
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.
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?
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?
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
@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.
Status | Discussion | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-03-10 16:25:17 |
Closed_By | ⇒ | coolcat-creations |
Ok thanks
Labels |
Removed:
J4 Issue
|
IMHO Users should be buried somewhere, Certainly not first in the menu... Lets concentrate on CONTENT :)