Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Discuss: Changes to the menu structure #164

Closed
andersnoren opened this issue Sep 9, 2019 · 13 comments

Comments

@andersnoren
Copy link
Contributor

commented Sep 9, 2019

This issue continues a Slack discussion about the structure of the menu locations in the Twenty Twenty site header. The primary goals with the discussion is to answer the following questions:

  • Is the current menu structure too complex?
  • If so, how can it be simplified?

The current header menu structure relies on three menu locations. There’s a previous issue (#74 ) for ironing out which names to use for them, but the placeholder names are:

  • Mobile menu
  • Shortcut menu
  • Modal menu

Twenty Twenty Menu Structure

On mobile, the ”Mobile menu” is accessed through the menu toggle in the header. Nothing out of the ordinary there.

On desktop, there are basically two primary menus. The ”Shortcuts menu” is a traditional, horizontal list of menu items in the header. The ”Modal Menu”, when clicked, takes over the screen and slides in a menu from the right, as depicted below.

Twenty Twenty Menu Structure Expanded Modal Menu

By including these as two separate menu locations, we allow the user to use them in combination, like in the first screenshot. But by including them as separate menu locations, we also need a separate mobile menu location, since someone who uses both in combination would want to be able to choose which one to show on mobile devices. I think confusion stemming from this can be alleviated somewhat by finding good names for the menu locations.

(In the Slack discussion, it was also suggested that the mobile menu can fall back to either the horizontal menu of the modal menu, if the mobile menu location hasn’t been set.)

If we decide that this is an overly complicated approach, I think there are two different options:

  1. Decide on one of these menus to keep, and discard the other one.
    • Pros: We could use a single menu location in the header: ”Main menu”.
    • Cons: It would remove the users ability to choose between either the modal menu or the more traditional menu.
  2. Give the user a choice between the ”Modal Menu” and the ”Shortcuts menu” in the Customizer.
    • Pros: We could use a single menu location in the header: ”Main menu”. Users are given a choice between the two menu options.
    • Cons: Users will not be able to use a combination of the two menus, as depicted in the images above.

Of these two, I strongly prefer option two, but I would lean towards including all three menu locations to give the user more flexibility in how to structure their header.

@joyously

This comment has been minimized.

Copy link

commented Sep 9, 2019

I'm glad you labeled them in the image, since I thought it was the other way around. (so the names aren't meaningful to me, anyway)

With all three, each menu would be in the page, and hidden? (so page weight increases)

Since the term "menu" comes from what restaurants do, can we say it would be like having a dinner menu and a deserts menu? You know, the one is used by everyone and the other by a very small subset.
To me, it makes more sense to have all the navigation in one place. The theme can decide which way to present it or provide an option of two ways to present it, but having all the choices together is way easier for visitors to the site.

I don't like modal menus on desktop, but since you don't want to add a normal sidebar, I can see making a modal sidebar instead.

@onuro

This comment has been minimized.

Copy link

commented Sep 9, 2019

I'm using the same type of approach on my theme. I agree there's a confusion of double drawer menu types doing the same thing but this some kind of a trend for supportive/secondary menus being accessible on navigations, and mostly help avoid too long menus.

What I do is in the customizer, let the user choose whether they want to show the drawer menu. And if they do, they can assign a custom menu to that drawer/mobile menu.

And if no menu is assigned, drawer menu falls back to the primary menu, both for mobile and desktop device view.

Screen Recording 2019-09-10 at 01 50 AM

@ZebulanStanphill

This comment has been minimized.

Copy link

commented Sep 9, 2019

Is there any reason why Twenty Twenty can't just use a similar menu style as Twenty Nineteen, where menu options automatically move into an overflow menu depending on the available space?

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

@onuro Thanks for sharing! Having the modal menu location be opt-in in the Customizer is definitely another alternative.

@ZebulanStanphill Given the amount of horizontal space available to the more traditional menu on desktop, I don't think an overflow menu would be needed.

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

@joyously

With all three, each menu would be in the page, and hidden? (so page weight increases)

  • If we give the user a choice between either one of the two desktop menus, there are two scenarios:
    • The horizontal menu is used on desktop, and two menu elements are output.
    • The modal menu is used on desktop, and a single menu element is output.
  • If we go with allowing them to set all three menu locations, and they set a different menu in each one, three menu elements would be output. If they only use two, two at most or one if the modal menu and mobile menu have the same menu set.
@MDWolinski

This comment has been minimized.

Copy link

commented Sep 10, 2019

I would be hesitant to assume a desktop has enough horizontal space for the Shortcuts menu, because although the desktops are large, it's not a good assumption (as I've found in many designs) that people don't necessarily keep their windows that wide.

From your description, do I take it that you're suggesting that the modal menu essentially be a slide in sidebar? If I then select to use the modal menu instead of the Shortcuts menu, what happens on mobile? Do I get both a mobile menu and a modal menu?

If not, then it becomes an inconsistent experience between the desktop view and the mobile view, ie I might have designed the modal menu with different functionality then the shortcuts menu would have, in your example, the modal menu has social icons on it whereas the shortcuts menu does not.

I like that idea, but I also like the idea that the shortcuts menu would incrementally collapse into the modal menu and the mobile menu would essentially be a fully collapsed shortcuts menu with modal.

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 10, 2019

@MDWolinski The menu should still collapse as gracefully as possible on small windows (or sites with huge menus), so the menu wouldn't look broken if it had to extend across two or (in extreme cases) three lines in the header.

The modal menu and the mobile menu are essentially the same – they share the same container and contain the same types of elements (a menu, either Mobile Menu or Modal Menu, and the social menu, which is shared). If you set both a mobile menu and modal menu, you would get the modal menu on desktop and the mobile menu on mobile. Based on the discussion in Slack, we would also use a fallback to display either the modal menu or the shortcuts menu on mobile, if no menu is set to the mobile menu location.

I think the current modal menu structure is too big to work as an overflow solution in the vein of the Twenty Nineteen solution. That one worked because it was pretty small and compact, and more clearly connected to the menu it extended. It also mostly functioned as a mobile menu in Twenty Nineteen, whereas Twenty Twenty has a separate mobile menu altogether (and doesn't display the "desktop" menu until → 1000px).

@MDWolinski

This comment has been minimized.

Copy link

commented Sep 10, 2019

@andersnoren Thanks for that. Just wanted to be more clear on your thought process on that.

@byalextran

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2019

i'm inclined to keep all three options for the flexibility it provides. as you mentioned, i think a lot can cleared up with descriptive naming.

some possible alternatives:

  • Shortcuts Menu => [Main, Primary] Menu
  • Modal Menu => [Secondary, Hidden, Hamburger (if changed to the hamburger icon), Ellipsis, Three Dot, More] Menu
  • Mobile Menu => Clear as-is.

And possibly even introducing "Desktop" to the naming so it's even clearer where that menu is used (e.g. Main Desktop Menu, Secondary Desktop Menu).

granted, the above suggestions assume the shortcuts menu is considered the primary menu whereas some sites might opt not to have a shortcuts menu and view the modal as the primary. given that, some more ideas ...

  • Shortcuts Menu => Horizontal Menu
  • Modal Menu => [Vertical, Slide-Out] Menu
@jarretc

This comment has been minimized.

Copy link

commented Sep 11, 2019

While the Modal menu does provide a lot of flexibility for the end user, based upon the complexity of implementing it properly, the limited time frame to get TwentyTwenty ready and that this is the default theme I think it should be scrapped.

As already shown in the naming suggestions issue, this feature alone is causing a lot of discussion which isn't always necessarily a bad thing but time isn't on our side in this case.

This specific menu feature isn't available in any other popular theme that I'm aware of so end users would not be used to how it works.

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 11, 2019

@jarretc The modal menu shares its container, toggle functionality and most of the styling with the mobile menu, so the implementation questions around it (other than the ones covered in this issue, mostly a11y ones) would still need to be solved for the mobile menu. It's also implemented in the theme already.

Edit: I didn't mean to come off as dismissive, which I think I did, reading my response a second time. It's a tight deadline, and your concerns are valid. We might need to kill some darlings to make it in time.

@acosmin

This comment has been minimized.

Copy link
Contributor

commented Sep 11, 2019

I think users are used to Primary Menu instead of Shortcuts Menu and it should remain that way. As for the Modal/Mobile one 😃 I think we can go crazy with it and just name it Hamburger Menu or Three Dots Menu, it reflects multiple states (modal/mobile/hidden) and the actual icon representation.

@carolinan carolinan added the menu label Sep 12, 2019

@andersnoren

This comment has been minimized.

Copy link
Contributor Author

commented Sep 13, 2019

Thanks to all of you for taking part in this discussion. I wish we could let it go on for a bit longer, but with the September 23 deadline getting closer, we need to make a decision and start building. I’ll created a separate issue for the implementation of the header structure, which can be found here: #246. I’ll duplicate some of the contents of that issue here.

In short, we’ll use the structure with the three menu locations, with names that communicate as clearly as possible what each menu location is, IDs that help map any existing menus the user has to the Twenty Twenty meny locations, and fallbacks that ensure that the mobile menu outputs a menu even if only the desktop menus have one set.

These are the menu locations, ID followed by name:

  • primary Desktop Horizontal Menu
  • expanded Desktop Expanded Menu
  • mobile Mobile Menu
  • footer Footer Menu
  • social Social Menu

For existing users switching from another theme to Twenty Twenty, WordPress will try to automatically map their existing main menu (set to one of the following locations 'primary', 'menu-1', 'main', 'header', 'navigation', 'top') to the primary location. Any existing secondary menu ('secondary', 'menu-2', 'footer', 'subsidiary', 'bottom') will be mapped to the footer location. By using a more unique ID for the expanded menu location, that one will effectively be opt-in for all users.

We’ll include a fallback for the mobile menu location, so if that specific location isn’t set, the menu set to either the primary (first fallback) or expanded (second fallback) locations will be displayed there instead. That means that users who switch to Twenty Twenty should have a menu being output in both the horizontal menu and the mobile menu from the start.

As for users who create a new WordPress site with Twenty Twenty as its first theme, we’ll have to rely on the menu location names being clear enough that they communicate what function they serve. Adding the Mobile and Desktop prefix to each should help users understand that they are displayed in different contexts. And again, if they only set either the horizontal menu or the expanded menu, and not the mobile menu, the mobile menu will still display a menu they have selected. If no menu locations have menus set, wp_list_pages() will be used as a final fallback for both the primary and mobile menu locations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.