Overview Issue: General Elements of WP.org

[pablohoneyhoney]

This is an overview of all (identified) issues that relate to general, shared elements of the site, in particular in relation to the latest implementations, so we can refine them and scale them correctly to the rest.

Mobile is indicated where applicable (tested in Safari, iPhone 12 Pro Max). When no indication, both desktop and mobile apply. Section and page specific notes coming up in their own overview issue.

Search

• Search and menu icons need to align in between states (resting, pressed), currently their position alter. Mobile and desktop.
• Search field remove UI (x) is out of place. Its position shall be more refined and aligned with the other icons.
• Align the different search fields across pages are using different icons and placeholder styles.
• The label can be more specific: Search in WordPress. Placeholder can be more suggestive of the behavior or as a paradigm.
• With Search open, if I scroll/swipe (which ideally I shouldn’t), the overlay breaks and the background scrolls. (Search: Mobile overlay does not properly lock the screen in place wporg-mu-plugins#371)
• We could also suggest the most searched terms. (discussed in Search: Update label and placeholder, consider suggesting terms wporg-mu-plugins#367 )

Navigation

• When in subpages, the top nav highlights the main page. Worth removing to not mislead the user with wayfinding.
• (Mobile) Get WP in menu panel is different than other buttons style. Worth aligning.
• (Mobile) News is permanently underlined, even when other instances are active.
• When the specific page is white, the wayfinding doesn’t work and sections/pages aren’t marked.
• When in /developers for example, the nav changes slightly.
• (Mobile) Top bar nav is broken in /gutenberg. 
WP logo differs in size, position, and shape from the normal nav in the rest of the site.
• 
(Mobile) When a category is active (ie:Learn), the whole category of nav instances move position.
• (Mobile) The behavior of active instances isn’t consistent (ie: Get WP vs Learn WP).
• Ideally we signal what nav instances are external versus intrinsic to the site (with a timid arrow). Now they are mixed and there’s a harsh transition to certain properties (ie: Openverse).
• Logo shall have hover as well, and correct the one in /gutenberg.
• There’s duplication of nav instances (ie: Download&Extend, Get WP, and Get WP), while the footer doesn’t have it. Worth revising through the IA exercise.
• Certain instances are verbally obscure. Revise naming conventions (ie: Mobile versus Get Apps or WordPress Apps).
• Dropdown shall have some bottom padding in the menu – when the last item is active it looks visually stressed.
• The dropdown flyout is 1px off to the left.

Footer

• Logo needs to align with social links vertically.
• (Mobile) Footer, in homepage: There’s a tall gap between CTA and footer links that can be a bit more conservative.
• There’s a discrepancy between the top nav instances and the footer ones. It’s ok to have more footer but they are also grouped differently wich doesn’t help with a mental map. Some things are also called differently. (Footer: Revisit footer links and categorize wporg-mu-plugins#364)
• We need to surface the categories in footer, or try to map them closer to the top nav system. (Footer: Revisit footer links and categorize wporg-mu-plugins#364)

Login

• Top bar has a different color and styles (ie: hovers), worth exploring to integrate the register/log in instances better with the rest of the nav. (Navigation: Hide the adminbar in most cases, explore how to better integrate the register/login links wporg-mu-plugins#355)
• Align styles of [https://login.wordpress.org] with the newer pages. (Login: Redesign the page #241)

Misc

• Highlight color text is in red/orange/coral #f86368 looks like wrongly alerting, too dark, and doesn’t have the links flipped to dark.
• In certain pages (especially when displaying older ones), top bar Get WP hover state has a bug.
• Headings and breadcrumbs and subnavs aren’t consistent or connected across pages. We’ll address these per section/page.
• There are inconsistencies in line heights and the formatting of typography that we’ll cover by section/page.
• The language banner, when multiple official languages are available in the locale, let’s list them equally, instead of parenthesis. And use the same capitalization (not consistent in Spain, for example).

[jasmussen]

Good summary. I'm extracting some individual issues and adding more context. Note that I'm not able to check the boxes or edit this issue, perhaps I need elevated permissions?

Search

• Align icons: Search on mobile: Align icons wporg-mu-plugins#369
• X to clear is out of place: Search: X to clear is out of place, and wrong icon wporg-mu-plugins#368
• Label, placeholder: Search: Update label and placeholder, consider suggesting terms wporg-mu-plugins#367
• Align search inputs across the site: Search: Align every search field across the site for consistency. #228

I was not able to reproduce this one:

With Search open, if I scroll/swipe (which ideally I shouldn’t), the overlay breaks and the background scrolls.

[pablohoneyhoney]

Added a small one worth fixing related to the languages banner.

And here's a recording of the Search overlay behavior issue in Safari. @jasmussen

Upload.from.GitHub.for.iOS.MOV

[jasmussen]

Ah, good one. Opened WordPress/wporg-mu-plugins#371 for that one.

[jasmussen]

Navigation

• Remove navigation highlights when on subpages/posts, Navigation: Remove navigation highlights when on subpages/posts wporg-mu-plugins#370
• Align Get WP buttons between desktop and mobile: Navigation: Mobile overlay "Get WP" button details wporg-mu-plugins#363
• News item always underlined: Navigation: Explore clearer focus style that doesn't look like an active section, and don't show on mobile wporg-mu-plugins#372

[jasmussen]

When the specific page is white, the wayfinding doesn’t work and sections/pages aren’t marked.

Can you expand on this one? Etiquette would be a good example. Etiquette is highlighted in the breadcrumbs, as is the main About parent. Per WordPress/wporg-mu-plugins#370 we can remove the latter.

When in /developers for example, the nav changes slightly.

Can you exand on this one as well?

(Mobile) Top bar nav is broken in /gutenberg. 
WP logo differs in size, position, and shape from the normal nav in the rest of the site.
Logo shall have hover as well, and correct the one in /gutenberg.

• Unify logo appearance, add hover style: Header: Add hover style behind logo wporg-mu-plugins#366
• Related: Hide the admin bar wporg-gutenberg#51

[jasmussen]

When in /developers for example, the nav changes slightly.

(Mobile) When a category is active (ie:Learn), the whole category of nav instances move position.

Potentially related, as compared to the homepage, these show the adminbar even when logged out. Created WordPress/wporg-mu-plugins#355 to suggest hiding the adminbar unless there's a good reason to show it.

[jasmussen]

(Mobile) The behavior of active instances isn’t consistent (ie: Get WP vs Learn WP).

Navigation: Active states isn’t consistent #358

Ideally we signal what nav instances are external versus intrinsic to the site (with a timid arrow). Now they are mixed and there’s a harsh transition to certain properties (ie: Openverse).

Navigation: Signal external links WordPress/wporg-mu-plugins#359

There’s duplication of nav instances (ie: Download&Extend, Get WP, and Get WP), while the footer doesn’t have it. Worth revising through the IA exercise.

and

Certain instances are verbally obscure. Revise naming conventions (ie: Mobile versus Get Apps or WordPress Apps).

Navigation: Rephrase a few items, reconsider sorting WordPress/wporg-mu-plugins#360

Dropdown shall have some bottom padding in the menu – when the last item is active it looks visually stressed.
The dropdown flyout is 1px off to the left.

Navigation: Refine and polish the dropdown menus WordPress/wporg-mu-plugins#361

[jasmussen]

Footer

Logo needs to align with social links vertically.

Footer: Align logo with social links vertically WordPress/wporg-mu-plugins#362

(Mobile) Footer, in homepage: There’s a tall gap between CTA and footer links that can be a bit more conservative.

Footer: Reduce gap between homepage CTA and footer #239

There’s a discrepancy between the top nav instances and the footer ones. It’s ok to have more footer but they are also grouped differently wich doesn’t help with a mental map.
Some things are also called differently.
We need to surface the categories in footer, or try to map them closer to the top nav system.

Footer: Revisit footer links and categorize WordPress/wporg-mu-plugins#364

Login

Top bar has a different color and styles (ie: hovers), worth exploring to integrate the register/log in instances better with the rest of the nav.

avigation: Hide the adminbar in most cases, explore how to better integrate the register/login links WordPress/wporg-mu-plugins#355

Also related: Unify logo appearance and size, add hover style WordPress/wporg-mu-plugins#366

Align styles of [https://login.wordpress.org] with the newer pages.

Login: Redesign the page #241 — includes a first pass at the new visuals.

Misc

Highlight color text is in red/orange/coral #f86368 looks like wrongly alerting, too dark, and doesn’t have the links flipped to dark.

Misc: Revisit the text highlight color WordPress/wporg-parent-2021#80

In certain pages (especially when displaying older ones), top bar Get WP hover state has a bug.

Can you expand on this one? On which page are you seeing this?

Headings and breadcrumbs and subnavs aren’t consistent or connected across pages. We’ll address these per section/page.

There are inconsistencies in line heights and the formatting of typography that we’ll cover by section/page.

I haven't created a separate issue for these yet, I know we'll follow up with additional per-page issues and will be there for that.

The language banner, when multiple official languages are available in the locale, let’s list them equally, instead of parenthesis. And use the same capitalization (not consistent in Spain, for example).

Language banner: list languages equally without parenthesis. WordPress/wporg-mu-plugins#365

[ryelle]

@jasmussen I think at this point, all of these issues have been fixed (except for the iOS-specific search modal scrolling). Would you or someone else from @WordPress/meta-design be able to check over this issue to see if we can close it?

[fcoveram]

I see a draft state of wporg-mu-plugins#382 that seems to address the problem better. I'm not sure how to continue and give feedback @ryelle

[jasmussen]

When the specific page is white, the wayfinding doesn’t work and sections/pages aren’t marked.

Coming back to this one, I went ahead and checked the box as addressed. Let me know if that was in error. The parent page highlight has been fixed i WordPress/wporg-mu-plugins#370.

I think there's still an ongoing issue, tracked mainly in WordPress/wporg-mu-plugins#360, about whether the "Download & Extend" item should be highlighted when you are in the download section, or whether that should be extracted to be separate:

There's still an issue related to the About page, which I opened separately here: #255

[jasmussen]

When in /developers for example, the nav changes slightly.

I checked this box, but with the caveat that there are some followup adminbar questions in WordPress/wporg-mu-plugins#355 (comment)

[jasmussen]

(Mobile) Top bar nav is broken in /gutenberg. 
WP logo differs in size, position, and shape from the normal nav in the rest of the site.

I checked this box, with the caveat that I found a new issue on this page, when logged in and on mobile. But I've added that to the main issue for the Gutenberg header.

In other words, it's not addressed, but it's tracked separately.

[jasmussen]


(Mobile) When a category is active (ie:Learn), the whole category of nav instances move position.

Given recent changes to ancestor or taxonomy highlights, I'm not sure if I'm entirely capturing this one. But a few things come to mind. When learn is active, both the top level learn, and the first menu item are active, and there's a big left border:

Compare that with when another sub item is active:

For me personally, I'm drawn to the latter, especially on mobile. That is, removing the left border to indicate the ancestor, primarily, and then mainly highlighting the child item.

It also overlaps a bit, I think, with this one:

(Mobile) The behavior of active instances isn’t consistent (ie: Get WP vs Learn WP).

I keep pointing to WordPress/wporg-mu-plugins#360 as a conversation on whether "Download & Extend" Should become just "Extend", and Download a separate item.

I also recall a conversation with @panchovm around how it might be useful to revisit these taxonomies and make them click-only menus. That is, the top level button does not take you to the "main" page for that section, it only opens the submenu. I.e. this:

Should we open a new issue about this?

Edit: if we open a new issue, that might also be a way to address this one:

There’s duplication of nav instances (ie: Download&Extend, Get WP, and Get WP), while the footer doesn’t have it. Worth revising through the IA exercise.

[jasmussen]

Speaking of the mobile menu, I'm seeing the old dotted focus style when I initially open the menu on mobile:

I would expect to see the new style, if any:

[jasmussen]

Logo shall have hover as well, and correct the one in /gutenberg.

I checked this one, even if the logo is still wrong in /gutenberg. I checked it because it's tracked in WordPress/wporg-gutenberg#55, so we can fix it there and not let this thead be blocked from wrapping.

[jasmussen]

Certain instances are verbally obscure. Revise naming conventions (ie: Mobile versus Get Apps or WordPress Apps).

Stills says Mobile:

I guess we can check it since it's tracked separately in WordPress/wporg-mu-plugins#360. Let's just not forget it.

[jasmussen]

In certain pages (especially when displaying older ones), top bar Get WP hover state has a bug.

Checked this one as I can't reproduce (anymore?)

That leaves us with this one:

Headings and breadcrumbs and subnavs aren’t consistent or connected across pages. We’ll address these per section/page.

Related to #255, and perhaps we can evolve that issue into a more general conversation on a breadcrumb system. I know that as part of @panchovm's IA work he's put a lot of thought into this. So with a new issue, or an updating of 255, plus a rename of "Mobile", I think we can probably close this tracking issue. What do you think?

[fcoveram]

I posted an idea (wporg-main-2022#255) for the header that covers, at different extends, the following points:

• When the specific page is white, the wayfinding doesn’t work and sections/pages aren’t marked.
• Headings and breadcrumbs and subnavs aren’t consistent or connected across pages. We’ll address these per section/page.
• When in /developers for example, the nav changes slightly.
• (Mobile) When a category is active (ie:Learn), the whole category of nav instances move position.
• (Mobile) The behavior of active instances isn’t consistent (ie: Get WP vs Learn WP).

[ryelle]

I'm seeing the old dotted focus style when I initially open the menu on mobile:

Ah, this only happens on classic themes due to an inherited style. Opened WordPress/wporg-mu-plugins#394.

So with a new issue, or an updating of 255, plus a rename of "Mobile"

#255 is About-specific, but for updating that local nav bar pattern globally, I'll create an issue in wporg-parent-2021.

I think all the global nav updates can be tracked in WordPress/wporg-mu-plugins#360, since the organization of pages will probably impact the interaction pattern (and vice-versa). That issue and WordPress/wporg-mu-plugins#364 need content (or design?) owners who can make final decisions.

I think we can probably close this tracking issue

Agreed.

[jasmussen]

There’s duplication of nav instances (ie: Download&Extend, Get WP, and Get WP), while the footer doesn’t have it. Worth revising through the IA exercise.

Many of the items, including this one, refer to the IA exercise. @fcoveram I know you sketched out some wireframes for primary and secondary navigation. I wonder if the footer and some of the taxonomy-changes to the top menu items (Extend instead of Download & Extend, perhaps a new top level Showcase menu item to coincide with a relaunch) and links in the footer would be good to extract into a separate issue with wireframe sketches?

Certain instances are verbally obscure. Revise naming conventions (ie: Mobile versus Get Apps or WordPress Apps).

If nothing is blocking us from doing it, I think we should just go ahead and rename the "Mobile" link to "WordPress Apps" as a starting point. We don't need to change the slug, so the rename should be simple.

[StevenDufresne]

If nothing is blocking us from doing it, I think we should just go ahead and rename the "Mobile" link to "WordPress Apps" as a starting point. We don't need to change the slug, so the rename should be simple.

To be honest I don't understand the pluralization here, although it's inline with the content. 🤔

[jasmussen]

Well there are apps for both Android and iOS, hence the pluralization. I could see households that use both platforms, and would look for apps, so I'd personally be more confused by the singular. What do you think?

[ryelle]

There's already some discussion about renaming Mobile on WordPress/wporg-mu-plugins#360, can we keep the conversation there? I'm going to close this tracking issue since we seemed to be in agreement last week.