Menu and breakpoint improvement in new header

[fcoveram]

Problem

After the implementation of the new header, there are three needs we need to tackle as improvements.

1. Internal pages

The current site has internal pages that were not included in the new header design as the content discussions did not settle and ended up in a insufficient list of item in the new mockup.

Due to the above, @obulat revisited the content of each page and shared with me questions and thoughts.

2. Active state

The new header did not consider an active state for the page link.

3. List extension in breakpoints

On the other hand, the page list overlaps Openverse logo in md breakpoint whereas in cases with available space, the full-page menu covers the device screen unnecessarily.

The second point does not show a UX problem, but it does have room for reaching a cleanest design.

Issues related

• Update the About page to add the text from "External sources" page #1989
• Add Sources and Search Guide pages to the new header #1987

---

Proposal

Menu pages

After reviewing the content of each page in the menu, I propose having these pages in the following order:

1. About: To show Openverse story and link to ways of contributing.
2. Licenses: It has made sense to link a Creative Commons page, but I envision users not knowing exactly what CC licenses mean. In that vein, I like having a page explaining the CC licenses’ scope. This page can also gather future licenses if we aim to add more.
3. Sources: To list current sources and guide visitors on suggesting new ones. I remember that time ago, we talked about writing a guide for non-expert folks on how to connect their database to Openverse.
4. Search guide: To get search tips. In the future, we can delete this page to suggest search tips during the search experience.
5. Get involved (external): In the new header, this link lands in the Openverse handbook.
6. API (external): Directing to the API site.
7. Privacy: To describe our privacy approach and link to WordPress pages if necessary.
8. Feedback: To report bugs and send miscellaneous feedback.

The order proposed goes from generic to specific: The project story (About); describe the content displayed (Licenses, Sources); tips on searching (Search guide); how to contribute at a more expert level (Get involved, API); and finally the privacy approach and asking for feedback.

I removed the “External sources” page from the list as I think we can put the content in the About page. It relates to the Openverse ethos of why we want to highlight sources not connected yet; it can also be moved to the Sources page. But linking a page from the header to this feature looks vague and needs more context.

Since the menu has a mirrored version in the footer component (content version), the proposal includes a footer update as well.

Header internal

• Update header internal styles

Footer content

“Link” component

For the active state needed, I created a new "Link" component with resting, hover, and disabled states for its active and inactive versions. The component can be reused in other areas as is consistent with other actions across the site.

Breakpoint change

To show all pages correctly in every breakpoint, the design proposes using the burger version in both sm and md breakpoints. However, the full-screen menu is shown differently in md to tap into the viewport's available space.

The menu popover has Popover item components to be consistent with the Design Library’s elements available. At the same time, the label of each item is based on the “Link” component mentioned above to keep consistency.

< sm breakpoint

sm, md breakpoints

Mockups

• Header component: Design Library, upcoming header page.
• Footer component: Design Library, upcoming footer page.
• Link component: Design Library.
• Header interaction and examples: New header component, same as New header component #1669 design issue.

Implementation

• Update footer layout #2012
• Update header internal to use a popover between sm and md #2013
• Add a new VNavLink component openverse#486

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.

[AetherUnbound]

The proposed footers and drop-down menu for mobile look great!

[bengreeley]

Thank you for the screenshots, @panchovm! This is very helpful to visualize what the full experience will be like.

[sarayourfriend]

@panchovm These look great so far. Can you add mockups of the full version that includes a hover and focus states for the links including the following edge cases?

• First item focused/hovered
• Last item focused/hovered
• One item focused and another hovered (at the same time)

[jasmussen]

Lots to like here, nice work as always.

One small niggle I have personally is with the "external link" icons. When intermixed with the other items, they clash between being both first and second class citizens at the same time. I'd love to find a way to remove them (which shouldn't block any efforts here, but is mainly shared for posterity). I understand they are there because technically they link to openverse.engineering. But I'm curious if we could just omit the icons still: if I've decided to click "API", I'd probably expect going somewhere technical, and I can always press "back". Screenreaders would still read the link to be external, of course.

Alternately, you could create a landing page on the main site to link to, without the external link — a "meta get started" page, and then link externally from there. This might also be a better experience for menu items intermixed with consumer-first items.

[fcoveram]

I like the idea of landing pages to introduce certain topics, but I also like how Get involved takes you to the WordPress site and reinforces the project relationship. It is definitely food for thought, which visitors' data can enlighten once we start collecting analytics.

[fcoveram]

I did not understand your request correctly @sarayourfriend, but I added a new section called Link states in the Header file where I put the states you mention. Here is a screenshot for a quick glance.

I did not add a Link states section in footer as it lives in the Design Library. Nonetheless, here is a mockup echoing the header example.

---

Note

You can see the Link component's details used in Header and Footer components in Figma. Select the Footer component, open the internal layers, select the Link component, and open the component in the Inspect tab.

1. Select the "Link" component in "Footer" component

2. Open the "Link" component from the Inspect tab

[sarayourfriend]

That is perfect, thank you, Francisco.

[obulat]

@panchovm, I wanted to confirm with you before closing this issue. We can close it now, right?

[fcoveram]

Yes. We can close it. The outcome looks excellent ❤️