ElkArte Community

2,0 Main Menu

May 31, 2021, 06:32:51 pm

While working on the CSS changes for 2.0, which included the updating of the main menu to be less JS dependent, I wanted to discuss one of the "problems" we have.

Our top menu, where we have the dropdown menus, are also navigation links.  Clicking on community takes you to the board index, while hovering over it will show you help, search, calendar, etc.

This has a few issues,
- its not clear those items are links
- its messy when you go to a touchscreen device, now its tap once to open the menu and double tap to follow the link
- Its not accessibility friendly
- and more

What to do?  I'm not sure, a couple of thoughts are:
- include that top level link in the dropdown and eliminate the double clip action.  Click on a link with a pulldown would show the pulldown, click on a link with no pulldown simply follows the link.
- Separate the link from the pulldown.  This means the pulldown would appear when you hover over and/or click  the dropdown indicator (yeah we don't have that here, but its in the menu changes I've been working on) and the text area is a link just like all of the other top links that don't have the pulldown.

The first one is what I'll likely have set up on the demo site, simply because I think its easier to do ATM, but we should do what is the best for usability.  So thoughts?  I've seen the use of the second option on a few sites so that may be the norm these days.

Re: 2,0 Main Menu

Reply #1 – May 31, 2021, 10:29:54 pm

I remember when I switched to Elkarte a couple of members asked me about the menu and how is supposed to work on mobile. Now nobody asks about it, probably they get used with it. For me the solution we have now (one tap open dropdown, double tap go to link) is not so intuitive, probably because is not a solution adopted by many websites. Despite this, I still like how menu is displayed on mobile, and I think is very comfortable to use on mobile, (once you get used with the icons) they are always visible and ready to be used. The only limit I can see in the Elkarte menu is when you'll want to add new menu items (ex: Gallery, Downloads, etc) you cannot use icons for all these menu items, and you cannot put them under the Community menu where nobody expects to find it.

From the solutions you posted I would say the second one, but I have doubts on how it will work on mobile. There isn't enough space to show the current icons and add dropdow indicators. So at this point the first solution is probably better. I know, I am not very useful  with this post.

From all software forums I prefer the solution adopted by XF in displaying the menu on mobile:
- they know that quick icons are comfortable to use, so they keep them only for Profile, PM, Notifications, New posts and Search
- the rest of menu items are in a burger menu. In this way you can add whatever you want on your menu, without worrying how it will show up on mobile.

Re: 2,0 Main Menu

Reply #2 – June 01, 2021, 12:03:57 am

Thanks!

I had somewhat forgotten about the icon only menu for small screens.  There is room for (7) with a large enough touch zone. The dropdown target indicator would only be on large screens, say iPad and above.  So for the icon menu it would have to be like the first option, or better what you suggested and use a hamburger (like we do on the moderate topic menu).

I just took a look a xenforo and they use the dropdown indicator click to show the dropdown and the text click as a direct link, pretty much option 2.  I've seen design that elsewhere and it seems like a good accessibly choice for folks use those technologies.

Re: 2,0 Main Menu

Reply #3 – June 01, 2021, 12:52:13 am

I don't know if it's any help - but I can suggest what we've been experimenting with. We took some design cues from Dziner Studio's old Peacock theme, with a persistent icon bar down the side (which I really must put the text cues back on sometime) with the top bar being for other stuff.

Specifically, we have the sidebar with home/search/PM menu/bookmarks/our version of member list/other pages of note/log out (while logged in), which collapses to a hamburger on mobile, with the icons aligning to a sort of grid there.

Then the space used for the top bar contains other stuff - the profile menu, the characters menu, alerts, the things that are most important for people to routinely get at, and always persist on mobile, though the layout changes. Happy to provide screenshots if it would be of use.

(The characters menu is because we're a roleplay site, and characters - subaccounts done right - is a major feature that people care about. Getting at that menu is probably one of the most important navigational cues)

What I would suggest: hamburger as a call to action to summon the menu from somewhere, whether that's expanding the current navigation, or pulling from off viewport, whatever you fancy, but on mobile I'd probably be inclined to not bother to have a drop menu at all.

So we have the PM menu (as SMF 2.1 has) and a crude admin menu as popup menus, populated on click via AJAX on desktop, and skipped entirely on mobile, just taking you to the page in question because the sidebar 'menu' is full of things we've learned from our users as 'important but not necessarily my primary navigational needs'

The other thing we did in general for navigation was completely refit how the generic menu worked because there you have a similar problem. First thing we did was stop trying to have it as a dropdown; the menu is now tabbed and behaves like tabs, with a list of links down the side for navigation inside that tab. (There's no AJAX or fancy effects here, the tabs are regular links.) And then the tabs are handled on mobile too by turning it into a pair of hamburger menus, but with clear visual cues that this is what is going on.

I was going to provide pictures, but I got the 'there was a problem and your attachment couldn't be saved' warning. (Not trying to advertise my site, that's not the point, just 'here is what I did to solve this problem and I think if you're already thinking about the problem, consider a wider selection of choices and possibilities than not')

Re: 2,0 Main Menu

Reply #4 – June 01, 2021, 01:12:47 am

Attachment error can only mean that is 6/1 in Germany, should be fixed now.

Thanks for the extra ideas and details, sounds like you have put a lot of thought into the problem.  I think I have the Peacock theme around here somewhere, well I'm sure I do, just of matter of where.  I'll be sure to take a look at that for some inspiration.

Always tried to making the things that matter most, easy to quickly get to and the rest an extra affair.  Had not even begun to think about the generic menu items.  I know some pages have the Main, then a generic and maybe even a tab view.  That's a lot of click points trying to grab attention which is not a good situation for ease of use.  Lots to do!

Re: 2,0 Main Menu

Reply #5 – June 01, 2021, 07:35:09 pm

Yup, attachments work now!

OK so here's what I did with the tab menu on both desktop and mobile. I just came to find over the years that the dropdowns didn't work for me (or for other people) and that going both stylistically and semantically as tabs, it feels better (to me) to use, and it is possible to provide a mobile interface that isn't entirely horrible.

Re: 2,0 Main Menu

Reply #6 – June 03, 2021, 03:48:17 am

Cool !

Thanks for sharing what you have done.  Always good to see another approach / solution to the problem. Thus far I've not (yet) done anything new with the menu layout. I've only been working on de-jquery-ifing and other cleanup.

I've made it through the main menu, hover intent replaced with css and superfish replaced with css and some plain JS.  Needed the JS to "convert" the hover to click (css class add/remove).  That was easy enough but then you want to add all the aria screen reader clues (aria-expanded, aria-hidden, etc).  Then you kind of get wrapped up in everything and want to add some keyboard functions like ESC to close open drop downs, enter to select, arrows to navigate.

Now onto the other menu areas (admin_menu, sidebar_menu, poster, quickbuttons, etc) to see if the changes work everywhere as expected.  Then finally back to the main menu desktop/mobile layout considerations.

I was looking xenforo and ipboard (may have just been that theme), but they both used the separate links for the top menu, the disclose indicator exposed the menu, the menu name was a link.  It seemed fine ONCE you know that is what they do, but TBH I did not find it intuitive.  Of course if you have the big guys doing it the lemming effect starts to take over.