Support Forums: Improve the look and usability of Forums page

[joyously]

The Forums page ​https://wordpress.org/support/forums/ has a look that is very similar to the Support home page, and is confusing because it is. It would be better as a compact list than as big squares of white space. It should be giving the overview of the forums, yet it can't be seen without scrolling a lot.

Also, the 3 squares at the top (with icons) are not the focus of the page, but all you can see "above the fold". I suggest they be moved to the bottom. Their icons could be made smaller also.

I have attached a screenshot of a quick rearrangement.

[joyously]

This is how I think it looks better and more useful.

[joyously]

I forgot to mention that the current page has no title. I added the title in my screenshot.

[SergeyBiryukov]

Replying to joyously:

The Forums page ​https://wordpress.org/support/forums/ has a look that is very similar to the Support home page, and is confusing because it is. It would be better as a compact list than as big squares of white space. It should be giving the overview of the forums, yet it can't be seen without scrolling a lot.

I agree. Previously there was a list, linked to from the header (#2455), which was much easier to browse, for me at least: 4007.png​.

This was changed with the introduction of HelpHub templates in [7835]. I'd like to restore that list somewhere.

Also, the 3 squares at the top (with icons) are not the focus of the page, but all you can see "above the fold". I suggest they be moved to the bottom. Their icons could be made smaller also.

Related: #2570

[joyously]

Here is a surrogate vote for changing this page, from ​https://wordpress.org/support/topic/default-end-of-post-text-in-gutenberg-how/#post-11014024

Stumbled across the ability to create a new topic once again.

The key is to skip past the “Welcome to Support” link (so appealing, so right there…)
and go down to one of the “View Forum” links. That takes you to an actual forum, where you can review and create topics!

(Writing these notes for myself, so I’ll remember them!)

[sterndata]

I just find the layout of the page diminishes the support forums. You have to scroll down past other stuff that has nothing to do with forums. And the spacing and white space obscures the fact that there is content further down.

However, I suspect most people find the forums via a Google search.
which leads to https://wordpress.org/support/, on which the forums are, again, hidden at the bottom of a p;age with too much white space and way down where people are unlikely to see them.

Were it my page, https://wordpress.org/support/forums/, there'd be a lot less white space because it's just really difficult to read and there's a lot of extraneous (and overly large) white space. I'd have gone for two columns, forums and descriptions on the left and welcome, documentation, and get involved on the right.

[SergeyBiryukov]

The issue with the current layout is that it doesn’t really look like a list of interactive forums at a glance, and people are mistaking it for an index of static content.

Per the ​latest Meta meeting, the consensus was to move the 3 columns at the top below the list of forums and see if that improves discoverability. Additionally, I think removing some excess padding as suggested in #2570 would help here.

As a next step, we could look into adding topic and post counts, as seen previously in 4007.png​.

If the grid layout is still too difficult to scan whereas a list layout would be easier, a redesign to make the usability better is also an option.

[Clorith]

The list view may not be ideal here, it was a fallback previously that could only be reached via a single breadcrumb link that hadn't been rewritten yet.

Some aspects that should be maintained moving forward that we'll lose here is things like the top three call to actions, stats show that almost 25% of all visitors to the forums go to the forum welcome from there for example, which is how we surface the guidelines, FAQ and so on.

Some design/UX person may need to have a look over here and see if we can find a better way of surfacing that information first before users go on to post if we are making changes to this area.

[WP.org]

I posted a related comment here -- ​https://wordpress.org/support/topic/fixing-this-confusing-and-frustrating-site/ -- and was guided to this post by a helpful reply from @joyously.

The question of whether the site currently 'works' or not can be answered in mere moments by anyone. Find a friend or family member who has not visited the site, start them at the home page, then tell them to find a given forum -- or any forum -- for posting a question.

In less than five minutes they will try to kill you.

[JarretC]

Replying to Clorith:

Some aspects that should be maintained moving forward that we'll lose here is things like the top three call to actions, stats show that almost 25% of all visitors to the forums go to the forum welcome from there for example, which is how we surface the guidelines, FAQ and so on.

Go to the forum welcome from where exactly? Meaning that those visitors that end up at say ​https://wordpress.org/support/forum/installation/ are ones that clicked on either the Installing WordPress header or clicked on the link for that section?

[SergeyBiryukov]

Related: #4659

[JarretC]

I messed around with the CSS a bit tonight and came up with this, opinions?

[sterndata]

Very nice, Joy. A page for forums should prominently feature them. Your design works for me.

[Clorith]

I'm not sold on this, it feels overfilled and messy. I'd like the design team to look over it for UI/UX (the ticket is tagged for this already, but they're a team with limited time), keep also in mind all other open tickets that reference the display of the forums list in some manner, of which there are a few (#1952, #2695, #4117 and #4428 come to mind at least).

That's not to say the suggestions aren't welcome, only that I'd like it to go through the correct steps for what is a rather prominent page.

[joyously]

Jarret, I like it. I suppose it would look more like mine on a small window.
But then, I like Sergey's also.
anything to get rid of that grid of huge icons

[JarretC]

Replying to Clorith:

I'm not sold on this, it feels overfilled and messy. I'd like the design team to look over it for UI/UX (the ticket is tagged for this already, but they're a team with limited time), keep also in mind all other open tickets that reference the display of the forums list in some manner, of which there are a few (#1952, #2695, #4117 and #4428 come to mind at least).

That's not to say the suggestions aren't welcome, only that I'd like it to go through the correct steps for what is a rather prominent page.

Not sure which design you're referring to as there are 3 of them listed on this ticket. If you're referring to mine, this is how the majority of every other forum software displays their forum list. Sergey's is even closer to what all the others use as his show the counts.

Even if it is overfilled and messy, this is what people come to expect when they look at a forum as that is what everybody else does as well. Shouldn't we tailor the experience to what people are used to instead of trying to re-invent the wheel and train them to learn something new?

As far as needing the design team's input, what if the current 3 proposed solutions were submitted by designers?

[dufresnesteven]

For me, putting the Grid view vs List View aside for a moment, this page appears to be using a common "Knowledge Base" pattern which makes sense in a world where information is updated infrequently by very few authors. Forums on the other hand are active, and user driven. This page should reflect that attitude. We should totally look to liven it up and in doing so, i think we will feel like the content itself will be more engaging and easier to use.

Here are some examples:

[Google Support Forum]​https://support.google.com/chrome/community?hl=en
They use a grid view, like we do, but instead they show questions from the forum. It allows me as someone seeking answers to compare the question I have in my head with others. The short blurbs we currently have don't help me do that well. Also to note, they use the same concept in a list view elsewhere in their knowledge base (collapsible list).

[Mastodon]​https://discourse.joinmastodon.org/latest
This approach is not unique to Mastodon (stackoverflow, etc.) and very similar to what @SergeyBiryukov posted.

Also, forums have moved away from categories seeing that we are trying to bring the most important information to the top of the stack and the forums/topics with the most interactions are typically relevant to the most amount of users (i know, can sometimes be misleading).

Note: They also have a category view: ​https://discourse.joinmastodon.org/categories). It's hard to use.

Thoughts
With that being said, I don't have my feet planted on this one. I kinda like how Google is doing it since its not a big stretch from where we are. I also think that it would be a fun experiment.

Image Examples Attached Below

[dufresnesteven]

Google Forum

[dufresnesteven]

Mastodon Forum

[sterndata]

start here: ​https://wordpress.org/support/
Scroll all the way down
Click on "check out our support forums"
The first things you see have NOTHING to do with support forums
Scroll down more... more links, but no heading to indicate these are links to the forums
It would help if these were a bit "tighter", too -- less white space

[netpassprodsr]

Replying to sterndata:

start here: ​https://wordpress.org/support/
Scroll all the way down
Click on "check out our support forums"
The first things you see have NOTHING to do with support forums
Scroll down more... more links, but no heading to indicate these are links to the forums
It would help if these were a bit "tighter", too -- less white space

I agree with this external analytical/critical run down of the page in question. So Let's Do This!

start here: ​https://wordpress.org/support/
Scroll all the way down

(pause) - has anyone considered the location of the link to the forum on the support page being at the bottom? Is this the most appropriate based on how we're steering users to be self sufficient to search the static resources before plunging into the dynamic resource?
(unpause)

The first things you see have "NOTHING" to do with support forums.

nope! Not accurate! The first thing you see is rather essential information for users to review ahead of entering the forum space. The Welcome Page contains 3 rather brief sections covering relevant usage policy statements. "ok"
The next thing is a link to the first support page. This invites users (if they arrived on this site directly on the /support/forums page) to explore the static resource pages for an answer ahead of delving into the dynamic forum space. "ok"
The last thing is a link to the Support Handbook. Lowest on the range of likelihood the user arrived at the forums page looking for the Support Handbook yet it links to an important resource for the overall project. "maybe ok".
I think the features in this area of the page are valid, but perhaps oversold.
A scaled down rendering would provide access at a lower volume level.

Scroll down more... more links, but no heading to indicate these are links to the forums

Agreed! This page could use some section boundaries to reinforce the purposes of each.

It would help if these were a bit "tighter", too -- less white space

Also, agreed!

So.... how about this?

---

(This heading offers comfort the user is indeed on their way to where they really want to go.)

Support Forums - General Topics

(Next, a modest table of topics invites the user to specific areas of focus before getting down to the General Topics themselves.)

​ (image) Forum Guidelines	Important information about using WordPress Support Forums
​ (image) Documentation	Explore our wealth of documentation for an answer ahead of entering the forums
​ (image) Support Handbook	Looking to provide WordPress Support to others? Our handbook offers tips, tricks and advice to give the best support possible

(NOTE: This is a design concept others can develop into a wonderful aesthetic result.)

(Short heading ahead of the categories themselves)

Support Categories

Installing WordPress	Fixing WordPress	Developing With WordPress
Networking WordPress	Accessibility	Localhost Installs
Everything Else WordPress	Requests And Feedback	Alpha/Beta/RC
Themes And Plugins

(The last section gets a heading too.)

Latest Forum Posts Across Categories

​All Topics | ​Topics with no replies | ​Unresolved topics

---

If someone else can render this concept design into decent facsimile for proof, that'd be awesome!

[joyously]

combining Sergey's forum list with the Welcome information that should actually be on this page

[joyously]

Taking another stab at what this page should contain, I got the text from the Welcome page (which should remain or change?) and put it on the "front page of the forums" where it belongs. It could be reduced or put into expandable sections, like the Plugin pages have.
The forum list should look like a list, like Sergey showed.
The documentation link and the handbook link are unnecessary to this page, and they already occur in the blue stripe.

[ibdz]

Here's the design proposal for Forums home page.

[ibdz]

At the top section, I think that showing the important information about forum guidelines, FAQ is necessary.

The next section is about the list of all forums. I decide to use grid layout rather than the list (top-down) because of the UX reason related to the user's behaviour that grid view works best for browsing and exploring. In the list view, the user’s attention decreases from top to bottom. In the grid view, user’s attention is spread more evenly.

Adding dashicons to each forum as suggested in #2695 is more appealing to the eye and helps users when they’re examining visual distinctions between items.

I decrease the icon size (to be smaller than the current in Support page) and make more contrast to meet the accessibility needs. This help emphasizes the forum title to the same level of visual appearance as the icon.

The last section is for linking back to Documentation (/support) page as a vice versa.

I'm not sure about 'Get Involved', because there are 2 teams inside Support section- Docs & Support Handbook. So, I leave it for future iteration.

[joyously]

user's behaviour that grid view works best for browsing and exploring. In the list view, the user’s attention decreases from top to bottom.

But it doesn't address the problem that it looks too similar to the Support home page. We want a list so that it is distinguishable at a glance from the grid of Documentation categories. The grid also shows very little "above the fold". As the icons add more height, there is even less shown "above the fold", so I don't think the icons help anything. Again, it just makes it look more like the Support home page.

[mapk]

@ibdz, this looks really sharp! I think we should move forward with it.

[mapk]

But it doesn't address the problem that it looks too similar to the Support home page.

The Support home page is changing to a list view soon. So I believe we're good there.

[netpassprodsr]

I do like this design aesthetic.
I recommend this be formally considered as the new render of the Support Forums page.

Replying to ibdz:

[sterndata]

If you're going to do a grid, tighten it up. There's way too much whitespace. Also, make "fixing" the first item.

[joyously]

The Support home page is changing to a list view soon. So I believe we're good there.

This seems backward!
But then, I don't like grid view at all anyway.

[joyously]

make "fixing" the first item.

Maybe even put themes and plugins above the grid.

[ibdz]

@sterndata I change the whitespace from 90px (5rem) to 72px (4rem) to tighten things up.

[Clorith]

After a chat with the design folks today, we're going forward with the iteration in approach-2.png​ as described in comment:33

Removing the design tags for now, as we're past that stage, great work @ibdz !

[joyously]

I just saw this forum topic ​https://wordpress.org/support/topic/where-is-the-list-of-the-forum-boards/ and thought I'd mention that the new design doesn't look all that different from the current one. Maybe this person needs better menus also.

[ibdz]

Here's the Figma file for the approach-2: ​https://www.figma.com/file/wRBZONxnT9tAbnvMtbF2L5/Support-Forums?node-id=8%3A293

[joyously]

Figma files don't help anyone that doesn't have an account. How about a screenshot?

[Ipstenu]

Looking at https://meta.trac.wordpress.org/attachment/ticket/4007/approach-2.png (I too do not have Figma) my initial thought is that it doesn't look like forums.

I understand we're trying to make the design look more like the rest of org, and I laud the improvements made. However I feel like we're sacrificing the UX of forums for the design in this moment.

Forums have a classic kind of design that absolutely can (and should!!) be improved on, but they have a flow and expectations.

The .com forums - ​https://wordpress.com/forums/ - are a straight down list of posts, which isn't great either, but at least you can see 'Hey there are posts here!' and have positive feedback that you're in the right place to talk to people for help.

​https://www.bootdey.com/snippets/view/Forum-post-list is a fairly decent, clean, and open example that sets expectations (you are in a forum) and helps direct you where to go.

[Clorith]

Going over the discussion from ​https://make.wordpress.org/support/2020/11/changing-up-the-forum-front-page/ here, I've thrown together 4007.patch​, which essentially provides a more standard forum listing, with a free area on the left.

As can be seen in forums-new-default-desktop.png​, the default is to show the three boxes that we have today at the top of the page, only slightly adjusted styling, but with the same strings for translations and such.

The area is a widget area (making it a page didn't align well with utilizing bbPress and its template setup), and with WordPress 5.8 and the blockbased widget area, this is essentially just a new content area any way.

The patch also fixes some heading hierarchy issues the template had for these default sections.

The idea behind the left side area being so open to edits is to make it easier to adjust based on needs without the need for code commits, giving localized forums much more control of their own forums in the process. Different locations have different needs, and this lets everyone address their needs if they wish to do so.

Obviously this is a much more classic forum look, and steps back a little bit from what the rest of dotorg is doing design wise, but I think what others have voiced about the UX, from a forum perspective, having suffered a little as it is unexpected and not very clear view for the average user is important to account for here. This provides a more classic look, while incorporating some of the newer design elements like the dotorg blue to the forums listing.

[joyously]

This looks better!
But where is the link to themes and plugins forums?
And is alphabetical the best way to list the forums?

[Clorith]

It's literally a screenshot from my personal dev site, it has no relation to the data on dotorg. What information we wish to put into the side at that point is up to us.

[mrfoxtalbot]

There is a somehow related issue #4117. Let's take into account all those heading/SEO recommendations during the wp.org redesign.

[adamwood]

Latest design:

You can view and leave feedback on this and other redesigned forums pages at ​https://www.figma.com/file/3eK690rwPubLvTEvJIJKRO/Forums?type=design&node-id=902-1496&mode=design&t=VFkz06BrIG2QyLhG-4

Try implementing the redesign using the current non-block support theme.

Closes https://meta.trac.wordpress.org/ticket/4007

Rearranges the forums homepage content to match the ​design and applies layout and typography changes to match the other 'Learn' sites (​Dev resources, ​Documentation). ~I've stopped short of styling the whole page as I think there's enough work here to judge whether it's a decent approach.~

~The single forum page in the screenshots has had 0 attention, I've just included it to show the different header layout, font and page width changes. Content widths still need working out; we could do as much or as little here as we want as a first iteration.~

Mostly we can use block theme things:

• theme.json settings are output on frontend and vars and helper classes can be used for styling
• we can register block patterns and render with do_blocks
• local nav and search blocks work fine, I expect we can use sidebar containers and other things too

Things that need work:

• ​x Better theme.json integration. I've copied in the [wporg-parent-2021 theme.json], and then made some typography modifications to match the Developer site. This is going to be a maintenance burden. Ideally we would load the parent theme.json (rather than duplicating it) and merge with local overrides like we do for other themes. Not sure how to tackle this.
• [x] Better parent theme styles and block styles integration. Loading from a remote url rather than having this theme be a dependant child isn't ideal. Not sure how to tackle this.
• [ ] Remap CSS vars
• [ ] Profile restyle
• [ ] Forum restyle
• [ ] Topic restyle
• [ ] Content widths, incl responsive

### Screenshots

#### Forums home

Desktop	Tablet	Mobile

#### Forum

Desktop	Tablet	Mobile

#### Topic

Desktop	Tablet	Mobile

#### Profile

Desktop	Tablet	Mobile

There is currently a layout issue with the local nav on mobile.

I haven't got to the bottom of it but it might be a conflict with mu-plugin block and using an older version of Gutenberg (we're pinned to 16.8 due to issues with Blocks Everywhere).

@WordPress/meta-design please review the screenshots. This is obviously just a first iteration so there are many things left to address. But let me know if there is anything glaring that you'd like to avoid shipping 🙏

I'll leave the full review to Design, but this is looking great! I did notice one thing. Currently, the user avatar is centered on the edge of the container, but it's a bit off in the new design.

I haven't got to the bottom of it yet, but it might be a conflict with the mu-plugin block and the older version of Gutenberg (we're pinned to 16.8 due to issues with Blocks Everywhere).

This is probably it— the dropdown in the local nav has a good amount of customization of the GB modal (to make it more dropdown-y instead of full overlay modal).

I clicked through a few of the sidebar links, and some of them show full posts, so the design is a bit awkward. None of these links are public though so I don't want to share any screenshots.

​https://wordpress.org/support/view/spam/
​https://wordpress.org/support/view/pending/
​https://wordpress.org/support/view/archived/
​https://wordpress.org/support/view/all-replies/

I wasn't able to get the locale banner to appear on any pages, and the locale-banner.js script doesn't seem to be loaded. I left a suggestion about using the language-suggest block instead.

Minor design note: quoted text looks a bit too large, and while I'll defer to design's opinion, I don't think this should be EB Garamond.

I'll leave the full review to Design, but this is looking great! I did notice one thing. Currently, the user avatar is centered on the edge of the container, but it's a bit off in the new design.

Fixed in ​6440483

I wasn't able to get the locale banner to appear on any pages

Nice catch @ryelle. Turns out ​`lang-guess.php` will only add the inline script for this on these URIs 'wordpress.org/', 'wordpress.org/download/', 'wordpress.org/support/', so it's not working in prod either. As you say, the language doesn't make sense as is, so simply updating wordpress.org/support/ to wordpress.org/support/forums/` doesn't solve the whole problem. I'll create a separate ticket to address this.

I wasn't able to get the locale banner to appear on any pages

Nice catch @ryelle. Turns out ​`lang-guess.php` will only add the inline script for this on these URIs 'wordpress.org/', 'wordpress.org/download/', 'wordpress.org/support/', so it's not working in prod either. As you say, the language doesn't make sense as is, so simply updating wordpress.org/support/ to wordpress.org/support/forums/ doesn't solve the whole problem. I'll create a separate ticket to address this.

Looking good!

Here are some things I found:

## Tables:
Can we take this a bit farther and closer to designs at least visually? Looking at the current table:

• it's too blue.
  • Not all links need to be blue.
• The header color is really distracting.
• Checkmarks are underlined

Underlined checkmarks

| |

Too blue

| |

## Forum Sidebar links.
The sidebar links shouldn't be underlined? They are a bit distracting when looking at a theme/plugin forum.

## Reviews:
We need to improve the review section.

• Remove the top border on the reviews on the right
• Increase "Average rating" title size?

## Breadcrumb
The last part is pretty lightly colored. Can we make it darker for better contrast?

The welcome page also has the breadcrumbs and the title directly beside each other. Do we need it here?

## Mobile Menu missing padding:

No Padding

## Logout banner text alignment.

When you log out from a forum, you get redirected to the homepage. The text is not vertically aligned:

## Homepage text alignment.
The spacing between the text makes the content feel separated. I think the second paragraph should come directly after the first. They don't need to be on new lines..

Thanks for testing @StevenDufresne

Can we take this a bit farther and closer to designs at least visually? Looking at the current table:

• it's too blue.

• Not all links need to be blue.

• The header color is really distracting.
• Checkmarks are underlined

I just went for a straight color swap here, with the intention of doing more in the next iteration. I think you're right that we could change the header color and remove the underlines. I'd like to call out that the underlines are our default so that's why they're showing, and I believe within content areas this is for accessibility.

The sidebar links shouldn't be underlined? They are a bit distracting when looking at a theme/plugin forum.

Again this is our default style so I haven't tried to deviate from that in our first iteration. But I tend to agree, and I see they aren't underlined in the design.

The last part is pretty lightly colored. Can we make it darker for better contrast?

The welcome page also has the breadcrumbs and the title directly beside each other. Do we need it here?

I'm going to leave breadcrumbs til a next cut. This PR is already too large.

I'll fix the last 3 issues (mobile local nav, logout banner and homepage text alignment, nice catches 🙌

I just went for a straight color swap here, with the intention of doing more in the next iteration. I think you're right that we could change the header color and remove the underlines. I'd like to call out that the underlines are our default so that's why they're showing, and I believe within content areas this is for accessibility.

Keep in mind that these are defaults for the default theme that is applied elsewhere on the site in different contexts. Users of the forums are not used to everything being underlined. Suggesting that they are underlined now because other parts of the sites show links underlined is not an upgrade for everyday users and likely introduces more harm than good.

Keep in mind that these are defaults for the default theme that is applied elsewhere on the site in different contexts. Users of the forums are not used to everything being underlined. Suggesting that they are underlined now because other parts of the sites show links underlined is not an upgrade for everyday users and likely introduces more harm than good.

Yep understood, and I think this is a good call.

Updated screenshot for forums topics table, following @StevenDufresne's review cc @WordPress/meta-design. Blue header background changed to white, and underlines on table content and sidebar links removed:

This looks like a fantastic step forward. There are also a lot of details to refine, but I wonder if those aren't best addressed in followups? E.g. just to name a few, these checkboxes could be modernized across:

And this submit button is pretty small:

But it's hard to know where to draw the line. This is so vastly better, more legible, accessible, than what exists, that it's tempting to move forward and follow up with QA fixes. Alternately, is there a way to test this with a query string?

But it's hard to know where to draw the line.

Yeah 100% agree!

This is so vastly better, more legible, accessible, than what exists, that it's tempting to move forward and follow up with QA fixes.

This is the plan at present. Ship then iterate. I imagine next will be the topic list page, then single topic. These will address the things you've pointed out, but there is a lot more obviously. All the form elements basically need updates.

Alternately, is there a way to test this with a query string?

I don't think so. The way we normally do this is with a theme switch, but in this case we are modifying the existing theme.

@adamwoodnz You could create a new theme instead of merging directly into wporg-support and setup theme switching.

We are doing that for plugins as well:
https://meta.trac.wordpress.org/browser/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024.

That bbPress .js file may not work when theme-switched but that's not tremendously important.

Alternately, is there a way to test this with a query string?

@jasmussen I've created a new theme now and we'll have a theme switcher setup tomorrow.

Closing the PR as it has done it's job. The changes have been committed to a new theme in Trac so we can deploy it for preview without activating it.

The subnav obscures the author image. ​Example.

[adamwood]

The new Forums homepage is now able to be previewed at ​https://wordpress.org/support/forums/?new-theme=1

This needs some design feedback, but the Themes & Plugin text at the bottom of the page feels out of place and it's hard to find if looking for theme and plugin support. What if we moved it to the main grid, something like this?

Current	Proposed

@WordPress/meta-design alternative solutions welcomed 🙏

Looks good insofar as it avoids what can almost be described as a layout-based widow (like a typographic widow). Happy to try this.

What if we moved it to the main grid, something like this?

I've just deployed this. Note that the number of forums is dynamic, so I've made that card fill the last row:

### Screenshots

English Forums home	German Support home

The subnav obscures the author image and title. ​Example.

​https://github.com/WordPress/wporg-mu-plugins/issues/586

[adamwood]

The new theme has been activated with this Forums homepage layout.