WordPress.org

Making WordPress.org

Opened 23 months ago

Last modified 5 weeks ago

#4007 new defect

Support Forums: Improve the look and usability of Forums page

Reported by: joyously Owned by:
Milestone: Priority: normal
Component: Support Forums Keywords: needs-patch
Cc:

Description

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.

Attachments (7)

Forums WordPress.jpg (161.0 KB) - added by joyously 23 months ago.
This is how I think it looks better and more useful.
4007.png (46.8 KB) - added by SergeyBiryukov 23 months ago.
forum-index.png (328.9 KB) - added by JarretC 12 months ago.
I messed around with the CSS a bit tonight and came up with this, opinions?
google_forum.png (256.3 KB) - added by dufresnesteven 8 months ago.
Google Forum
mastodon_forum.png (285.9 KB) - added by dufresnesteven 8 months ago.
Mastodon Forum
Forums WordPress org-4007.jpg (144.6 KB) - added by joyously 6 months ago.
combining Sergey's forum list with the Welcome information that should actually be on this page
approach-2.png (219.0 KB) - added by ibdz 6 months ago.
Here's the design proposal for Forums home page.

Download all attachments as: .zip

Change History (57)

@joyously
23 months ago

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

#1 @joyously
23 months ago

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

@SergeyBiryukov
23 months ago

#2 in reply to: ↑ description @SergeyBiryukov
23 months ago

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

#3 @joyously
23 months ago

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!)

#4 @dd32
23 months ago

  • Keywords ui-feedback added

This ticket was mentioned in Slack in #forums by joyously. View the logs.


22 months ago

#6 @sterndata
22 months ago

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.

Version 0, edited 22 months ago by sterndata (next)

This ticket was mentioned in Slack in #meta by joyously. View the logs.


22 months ago

#8 @SergeyBiryukov
21 months ago

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.

#9 follow-up: @Clorith
21 months ago

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.

#10 @WP.org
19 months ago

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.

#11 in reply to: ↑ 9 @JarretC
19 months ago

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?

This ticket was mentioned in Slack in #meta by joyously. View the logs.


19 months ago

This ticket was mentioned in Slack in #docs by joyously. View the logs.


19 months ago

This ticket was mentioned in Slack in #meta by joyously. View the logs.


16 months ago

#15 @tellyworth
16 months ago

  • Keywords needs-design added

@JarretC
12 months ago

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

#17 @sterndata
12 months ago

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

#18 follow-up: @Clorith
12 months ago

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.

#19 @joyously
12 months ago

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

#20 in reply to: ↑ 18 ; follow-up: @JarretC
12 months ago

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?

This ticket was mentioned in Slack in #forums by sergey. View the logs.


9 months ago

This ticket was mentioned in Slack in #forums by joyously. View the logs.


8 months ago

This ticket was mentioned in Slack in #design by joyously. View the logs.


8 months ago

#24 in reply to: ↑ 20 @dufresnesteven
8 months ago

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
8 months ago

Google Forum

@dufresnesteven
8 months ago

Mastodon Forum

This ticket was mentioned in Slack in #forums by carike. View the logs.


7 months ago

This ticket was mentioned in Slack in #forums by joyously. View the logs.


6 months ago

#27 follow-up: @sterndata
6 months ago

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

Last edited 6 months ago by sterndata (previous) (diff)

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


6 months ago

#29 @tellyworth
6 months ago

  • Keywords needs-design-feedback added

#30 in reply to: ↑ 27 @netpassprodsr
6 months ago

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!

This ticket was mentioned in Slack in #meta by ibdz. View the logs.


6 months ago

@joyously
6 months ago

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

#32 @joyously
6 months ago

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
6 months ago

Here's the design proposal for Forums home page.

#33 follow-up: @ibdz
6 months ago

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.

This ticket was mentioned in Slack in #design by ibdz. View the logs.


6 months ago

#35 @joyously
6 months ago

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.

#36 @mapk
6 months ago

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

#37 @mapk
6 months ago

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.

#38 in reply to: ↑ 33 @netpassprodsr
6 months ago

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

Replying to ibdz:

#39 @sterndata
6 months ago

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

#40 @joyously
6 months ago

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.

#41 @joyously
6 months ago

make "fixing" the first item.

Maybe even put themes and plugins above the grid.

#42 @ibdz
6 months ago

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

#43 @Clorith
6 months ago

  • Keywords needs-patch added; ui-feedback needs-design needs-design-feedback removed

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 !

This ticket was mentioned in Slack in #meta by clorith. View the logs.


6 months ago

#45 @joyously
6 months ago

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.

#47 @joyously
6 months ago

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

This ticket was mentioned in Slack in #forums by joyously. View the logs.


6 months ago

#49 @Ipstenu
6 months ago

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.

This ticket was mentioned in Slack in #forums by clorith. View the logs.


5 weeks ago

Note: See TracTickets for help on using tickets.