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

Footer: Revisit footer links and categorize #364

Closed
jasmussen opened this issue Mar 28, 2023 · 24 comments · Fixed by #464
Closed

Footer: Revisit footer links and categorize #364

jasmussen opened this issue Mar 28, 2023 · 24 comments · Fixed by #464

Comments

 @jasmussen
Copy link
Collaborator

jasmussen commented Mar 28, 2023

From WordPress/wporg-main-2022#221

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.

The top navigation includes, at the moment, these links:

 Screenshot 2023-03-28 at 13 39 55

The footer includes these:

 Screenshot 2023-03-28 at 13 40 04

A few things going on:

  • There's overlap between many items, especially in the first three columns.
  • The last two columns are external links, some of them (WordCamp, WordPress.TV) are also present in the top header, others are not.
  • There's a mix of internal and external links — most external in the last two columns, but "Swag" in the first column is also an external link.
  • Many of these item are shown in an flat, uncategorized structure, whereas the top level navigation categorizes in Extend, community, About, etc.
  • Some links are present in the main navigation (such as Get WordPress) but are not in the footer. See also Navigation: Rephrase a few items, reconsider sorting  #360 .
  • External links are not denoted with a timid symbol (such as ↗).
  • Some things are phrased differently, i.e. "Swag" instead of "WordPress Swag Store", "Community" is called "Get Involved".

Keeping in mind that there's a historical context to the addition of some of these links, it would be good to do a pass at the content here, perhaps especially the first three columns as they refer to the main navigation, and decide which to keep, which to omit, or which to add, as well as decide whether the external link indicator is useful here. As part of this pass, it would be good to either surface this categorization in the footer, or at least try to map them closer to the top nav system.

 @jasmussen jasmussen added [Type] Enhancement New feature or request [Type] Question Further information is requested labels Mar 28, 2023
 @jasmussen
Copy link
Collaborator Author

CC: @thetinyl and @fcoveram , in case you have input or this affects the sitemap.

 @ryelle ryelle transferred this issue from WordPress/wporg-main-2022 Mar 28, 2023
 @ryelle ryelle added [Status] In Discussion The implementation of this idea is still being worked out [Status] Needs Copy Feedback and removed [Type] Question Further information is requested labels Mar 28, 2023
 @coffee2code
Copy link
Contributor

Prologue

There are four main categories in the top nav: Extend, Learn, Community, About.
The footer is essentially: About, Learn, Extend, Related Projects, External/Misc.

Assuming the footer maintains 5 columns, and that the 5th column (which consists of links unique to the footer) is retained, then everything mostly lines up except that the Related Projects footer column replaces a would-be Community column. Therefore, the Community links get reorganized into the existing columns as appropriate. More details below.

Existing footer

Here's my take on how the footer is currently organized:

  • Column 1: Project/site-specific information
  • Column 2: Documentation & learning resources (includes learning how to get involved)
  • Column 3: Resources that can extend WP/be downloaded (plugins, themes, patterns, and eventually photos). Showcase is admittedly an outlier here and fits better in column 1 (which would make it consistent with its top nav placement.)
  • Column 4: Sibling projects, maintained under the umbrella of WordPress.org but fairly standalone and on separate domains
  • Column 5: External links. "Privacy" is an outlier here, again more appropriate for column 1 given the existing implied categorization.

As compared to the top nav, there is also the added desire to keep the footer columns relatively equal in height/quantity for aesthetics. The recently added "Swag" link creates 5 items in column 1 versus the 4 items in the other columns, but that addition was required. See #134 / #319 for a proposal to even out the columns by adding links that should be present (Mobile, Photos, Openverse, Job Board).

Regarding issues raised by OP

  • There's overlap between many items, especially in the first three columns.

I'm unsure of the intent behind this statement. Is this meant to imply that there shouldn't be overlap between links found in the top nav and the footer? Or that there needs to be full overlap?

  • The last two columns are external links, some of them (WordCamp, WordPress.TV) are also present in the top header, others are not.

I don't think the omitted links in the 4th column (BuddyPress, bbPress) justify inclusion in the top nav as they would only dilute focus for the more likely needs that the top nav should try to address.

  • There's a mix of internal and external links — most external in the last two columns, but "Swag" in the first column is also an external link.

The implied categorization does make it so that columns 4 and 5 are all external links. "Privacy" is the only exception and may be better suited for column 1.

As well, "Swag" could be moved to one of the last two columns. However, in the top nav "WordPress Swag Store" is in the "About" section, equivalent to footer column 1 as it is placed now.

I think it's fine that the top nav has more links than the footer. The top nav can accommodate more links. A "Get WordPress" footer link wouldn't be amiss.

As for the other links from the top nav not included in the footer:

  • External links are not denoted with a timid symbol (such as ↗).

Adding the indicator seems reasonable, but what is considered external? And should the same be done for the top nav links?

Just to be clear, these are all technically external sites (not having wordpress.org in their domain): Openverse, WordPress.tv, WordCamp, Meetups, Job Board.

Sites that are subdomains of wordpress.org are: Swag Store, Learn, and Developer (though the Swag Store is much more external than the other two, separate in just about all but domain). If Swag Store is considered external (as OP does), are the other two as well?

Unless we intend for external to mean "not managed by WordPress.org". In which case, only these footer links would apply: WordPress.com, Matt, Public Code, and Meetups (if added).

  • Some things are phrased differently, i.e. "Swag" instead of "WordPress Swag Store", "Community" is called "Get Involved".

For consistency, we should probably use "Swag Store" -- it's still short, clarifies it links to a store, omits the implied "WordPress", and is less likely than the full three word phrase to wrap.

And I think it's more accurate to say "Get Involved" is called "Make WordPress" in the top nav, which won't mean much for those who aren't already familiar. "Make WordPress" should be renamed "Get Involved". "Community" seems appropriate as a top-level menu option for community-related links, but changing that to "Get Involved" as well would be reasonable. Changing the footer link text to either "Community" (too imprecise for the singular location it is referring to) or "Make WordPress" (too vague for the uninitiated) wouldn't be for the better.

Epilogue

I'm going to cross-post some thoughts to #360 , since which overlaps with some of what I said above.

 @coffee2code
Copy link
Contributor

  • External links are not denoted with a timid symbol (such as ↗).

Adding the indicator seems reasonable, but what is considered external? And should the same be done for the top nav links?

See #359 for denoting external links in the top navigation menu, which should be mirrored in the footer.

The current proposal there is for external to mean sites that do not make use of the global WP.org header, which is a reasonable way to go about it.

 @jasmussen
Copy link
Collaborator Author

I'm unsure of the intent behind this statement. Is this meant to imply that there shouldn't be overlap between links found in the top nav and the footer? Or that there needs to be full overlap?

Opening that for discussion and input, moreso than dictating. I'm personally assuming there's a great deal of context for the existing links, that I don't want to accidentally regress with uninformed suggestions. But the disconnect at the moment does feel like it could be improved.

Adding the indicator seems reasonable, but what is considered external? And should the same be done for the top nav links?

I created a lot of issues yesterday as I was focusing on this, and I should've included here a link to #359 , but I see that you found it. Sorry for the omission here.

I realize that isn't a truly clear delineation, and it can quickly get a little semantic — does a subdomain count as internal? Would anything hosted on wordpress.net count as internal? What if it had the same global header as wp.org?

So to expand a bit on the main motivation, it's easiest to discuss this submenu:

 Screenshot 2023-03-29 at 09 00 54

As is, the 1st, 4th, and 6th link maintain the global wp.org header, all the others do not, and when those links are grouped together in a single dropdown, navigating those items in sequence becomes a jarring experience.

Whether we actually need this same visual denomination of "external" links in the footer, I've no strong opinion — maybe it's enough that external links are categorized in a single column together (with Privacy, to your point, being worth then moving perhaps).

 @bengreeley
Copy link

Something @mtias pointed out is that 'Blocks' are missing from the menus. It would make sense to add a link for https://wordpress.org/plugins/browse/blocks/ to the footer, and possibly even from the 'Download and Extend' menu (if we feel the page is of good enough quality) to be that prominent.

That page isn't very exciting and doesn't do a great job of explaining what blocks are, but I think will work best for now. Alternatively, there are pages like https://wordpress.org/documentation/article/wordpress-block-editor/ but it doesn't really fit the utility of the pages that are linked in this area. For example, we aren't linking to an article explaining what plugins are - we link directly to the plugin directory.

Separately, I created an issue to explore creating a landing page for blocks to take the place of this link to the blocks filter in the plugin directory. WordPress/wporg-main-2022#245

 @jasmussen
Copy link
Collaborator Author

Good note, it seems useful to have a blocks landing page.

I'm not sure it's useful to have a link to just the blocks filter in the mean time. On one hand it does add the term "Blocks" to the homepage if you search, which is useful since it's such a powerful concept in modern WordPress. But on the other hand, the page you land on has very little context unless you arrive at it from the Plugins page.

 @bengreeley
Copy link

Sounds good and I agree - that page needs some context if we are going to prominently link to it. We can focus on building a block landing page as a first step.

 @ryelle
Copy link
Contributor

This issue and #360 will be part of the larger information mapping project, so I'm pulling it out of the "General element cleanup" sprint. If there are specific changes to make to the footer in the meantime, we can tackle that in a new issue.

 @ndiego
Copy link
Member

In reviewing the comments above, I have put together an idea to recategorize the footer.

 Global Footer

Note this mockup is rough, the logo at the bottom is not correct, and there are more social icons on the current site. But this provides a visual representation of what I am thinking.

General

  • External links are indicated to match primary navigation
  • "WordPress.TV" is changed to "WordPress.tv"

Column 1

  • The first column merges content in the "About" section of the primary navigation with other relevant links
  • "Hosting" is removed
  • "Privacy" is moved over (previously in 5th column)
  • "Get WordPress" is added at the top for easy access.

Column 2

  • This columns is currently 3rd, so move to 2nd
  • Starts with "Showcase" which follows from "Get WordPress" which is at the top of the first column
  • Then, present all the items in the "Extend" category from the primary navigation. This column presents all the "things" that make up a WordPress site.

Column 3

  • Move "Learn" to the top of the column and rename to "Learn WordPress" ("Get WordPress" → "Showcase" → learn how to use WordPress)
  • Then, present all the items in the "Learn" category from the primary navigation.

Column 4

  • This column is exactly the same as "Community" category from the primary navigation.
  • I do like that it starts with "Make WordPress", because if you read across the columns, you get WordPress, look at what can be achieved in the Showcase, then learn how to use WordPress, and finally, you progress to helping make/contribute to WordPress.

Column 5

  • This is all Misc links from the current footer
  • Move "Privacy" to column 1
  • Move "bbPress" and "BuddyPress" over from column 4

For reference, this is the current footer :

 image

 @jdevalk
Copy link

Is it me or is the Public Code link in the footer a bit random? We support other initiatives too, but don't give them a footer link?

 @jdevalk
Copy link

We also might want to update the twitter (now X) icon.

 @ndiego
Copy link
Member

Is it me or is the Public Code link in the footer a bit random? We support other initiatives too, but don't give them a footer link?

Yeah, I don't know the context of this link. Anyone know?

We also might want to update the twitter (now X) icon.

💯 That section is powered by the Social Icons block, and I believe I saw a PR to add the X icon.

 @estelaris
Copy link
Member

someone may want to confirm with Matt or Josepha about the context on the Public Code link. I read somewhere that it was a Matt's initiative/project/involvement but that was so long ago, it may not be true anymore

 @jasmussen
Copy link
Collaborator Author

I'm happy to defer to those with historical knowledge of what goes in the footer, though I will say it would be neat if we could end up with 4 items in each of the columns, so we don't have that orphaned "swag" in the first column.

 @thetinyl
Copy link
Collaborator

thetinyl commented Sep 19, 2023

I'd like to suggest adding actual category titles to the columns. Perhaps as a fast-follow iteration if there's no time to throw in sooner.

Thinking about visitors to the site as being a mix of both new and returning, what if we were even more explicit about what goes in these columns? I do think @ndiego has a good starting point based on how you've organized/listed your suggestions. I do wonder if folks still might have trouble finding their way since the top links are still visually coming across as links, not column headers.

Some category header suggestions to chew on (based on Nick's proposed updates). I know these don't all match the header nav, that's done on purpose as I don't actually think that's completely necessary:

  • Column 1a: Software or Platform or similar... relating specifically to WP software, as that's the gateway for most folks to the project as a whole and likely what the majority are looking for. I actually think things like "Enterprise", "Features", or "Roadmap" could fit here eventually.
  • Column 1b: WordPress Project This relates to open source and other things related to the whole project.
  • Column 2: Extend no additional explanation here, it matches the header nav.
  • Column 3: Resources I can actually see a future where "Developers" gets split into its own column with additional quick links added that best suit that audience.
  • Column 4: Community Like "Extend", feels kind of straightforward.
  • Column 5: Related Projects or "Related Links" or similar. I'm not precious about this one, but do feel like it should be clear enough that these links are close to the project, but not necessarily required reading (if you will).

A really poorly sketched visual based on Nick's mockup above:

 image

I'll add that this is based on what's been discussed and not removing/changing much of what's already there. (Though I do think there's opportunity to tighten this up further by doing that.)

 @jasmussen
Copy link
Collaborator Author

jasmussen commented Sep 20, 2023

The categorization can help yes, but I would avoid visible titles, and perhaps more importantly I think we should avoid the extra column this adds.

One of the trickier parts of this is that there are already a lot of duplicate links here in the footer, compared to what's in the header and even sometimes in the page itself through subpage items, or CTAs on the page.

To that end, the whole section feels almost like an "in case you missed it when scrolling" section. We can maybe lean into that and be more editorial and curate what we choose to include, rather than just duplicating links. If I had absolute power, I would add the following constraints:

  • No headings, no more than 5 columns
  • No more than 4 links in each column

To make that possible, we'd need to remove one item. Just as a hard decision, I'd probably remove "WordCamp", or "Public Code", or "Developers", and rearrange the resulting links as categorized as possible.

But worth noting: it really would be helpful to know the historical context for why those links were added, before we remove one.

 @ndiego
Copy link
Member

ndiego commented Sep 20, 2023

Great feedback, thanks @jasmussen . Here is an updated idea based on these constraints. I have removed "Public Code". This of course assumes this link can be removed.

 image

 @jdevalk
Copy link

I would argue that the design @thetinyl did is actually better from a findability standpoint… we might even make it slightly bigger 🙂

 @thetinyl
Copy link
Collaborator

thetinyl commented Sep 20, 2023

No headings, no more than 5 columns
No more than 4 links in each column

@jasmussen I'm curious about the rationale for this. Would you be able to expand on that a little? I think these constraints would make sense if we were to limit to maybe 2 columns, but anything more than that and I believe we're making the footer feel convoluted and tricky to navigate... even if it does look very nice and clean. Unless we wanted to organize alphabetically, which is probably only marginally more helpful (without actually helping).

With the current number of links, even the neat rows don't make it immediately clear how they're organized. Without the ability or absolute power (at the moment 😄) to scrub the content and start from scratch, category titles feel like the easiest way to make the footer more useful. Even with the potential awkwardness of duplicate links.

To that end, the whole section feels almost like an "in case you missed it when scrolling" section. We can maybe lean into that and be more editorial and curate what we choose to include, rather than just duplicating links.

I think this is a great thought and I was pondering the same. I look at the header nav as the journey we want to lead visitors through, and the footer nav as the specific information visitors know they're looking for. There's definitely more we could be doing with this space, especially considering its appearance on every page.

 @jasmussen
Copy link
Collaborator Author

I'm curious about the rationale for this. Would you be able to expand on that a little?

The main rationale, and this response is partially to Joost as well, is that almost every one of these links are redundant, already present in the header, and as noted sometimes also present in CTAs (Get involved, Developers, Documentation). Redundancy can be okay, especially in cases of very important links. But as a rule of thumb, whenever you link to the same place in more than one place, it can engender the question in a visitor: which link is the right one? If links in this section are more findable, that also reads as all the more reason to improve the main navigation, and every page itself, lest this footer become a bandaid to a more underlying problem.

To that end, I feel quite strongly that more is not better in this case, and that constraining ourselves here is the prudent thing to do, lest we end up with a wall of links on virtually every page of the site.

That said, I will ultimately defer to those with the historical knowledge of the project, and if we end up having to have more links, I would actually add a 6th column, and have there be 4 links in each. At least then we'd keep the uniformity of the shape.

 @thetinyl
Copy link
Collaborator

Thanks for the additional background @jasmussen . It's much appreciated.

To that end, I feel quite strongly that more is not better in this case, and that constraining ourselves here is the prudent thing to do, lest we end up with a wall of links on virtually every page of the site.

Just to make sure I'm extra clear: Are these constraints proposed for the state of the current footer, assuming we don't have jurisdiction to make changes? Or are you proposing these constraints to be applied to any iteration of the footer, including if we have the freedom to make content changes?

 @jasmussen
Copy link
Collaborator Author

That depends on how broadly we want to redesign the footer. If we're being a bit more bluesky about it, I would still appeal to keeping that main area very compact and minimalist, at some point it will start affecting legibility. Visually I always try to look at the whole page, rather than just the one element of it, and reduction nearly always benefits the scannability when doing so.

I was under the impression, though, that there's a great deal of inertia to the footer as it exists today, which is why I've assumed we have to be careful in both adding and removing links. To me it feels like one of those foundational aspects of the wp.org site history that makes me just personally want to not completely reinvent it without being quite sure we're on a good path.

I regret to be so vague in my comments here, I don't mean to make this task any harder than it is. My assumption can be entirely wrong in which case I'm happy to support a fresh path forward.

 @ryelle ryelle added this to the Navigation Iteration milestone Sep 20, 2023
 @ndiego
Copy link
Member

Based on the most recent comments, I think this might work as an iteration and provide some subtle improvement. It would be worthwhile to revisit the entire footer in the future.

 image

  • Links are now roughly ordered by:
    • About
    • Showcase/Extend
    • Ways to learn WordPress
    • Ways to get involved/support WordPress
    • Other important external links
  • The Public Code link is removed to ensure an equal number of links in each column. (Need confirmation that this link can be removed)
  • “Swag” is renamed to “Swag Store”
  • All external links are denoted with an arrow ( ↗)
  • Fixed the capitalization of “WordPress. TV”

Note
The X (Twitter) icon is not correct in the footer, but this can be corrected in a separate PR once this Gutenberg PR is merged.

 @ryelle ryelle added [Block] Header & Footer and removed [Status] In Discussion The implementation of this idea is still being worked out [Status] Needs Copy Feedback [Type] Enhancement New feature or request labels Oct 3, 2023
 @StevenDufresne
Copy link
Contributor

I don't see "forums" in the footer anymore, I don't see where it was agreed to remove it.

It seems to have been removed in this view #364 (comment) .

Sign up for free to join this conversation on GitHub . Already have an account? Sign in to comment
Projects
Archived in project
Development

Successfully merging a pull request may close this issue.

9 participants