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.