Mark Uraine 9:38 pm on August 8, 2016
Tags: design ( 20 ), forums ( 18 )

Support Forum Preliminary Wireframes

After looking through the feedback from the initial forum design research, I began to create wireframes to help organize some of these ideas. Forum design is pretty standard across the web, and features don’t vary much either, so building out wireframes proved to be a straightforward task.

I wanted to stick with something basic and build from there. The forums and the topic/discussion pages are simple and straightforward. I worked through some layouts for the Support homepage and played around with the display of content in different ways.

The Homepage

Homepage

Mobile view

I made the search more prominent on the homepage. Rather than diving down into the forum topics, people are more likely to search for their issue instead.
I provided three very prominent sections at the top for the ‘Welcome’ intro, a link to the Codex (documentation), and a third link, possibly to the Support Handbook.
Below those jump points, the forums are separated out and grouped with their 3 most recent topics. This was done to help with discovery and ensure users find the right forum. I determined that, if the topic was popular enough to continue getting activity, then others coming to the Support page might also relate to that topic.
The post tags are moved to the bottom along with other useful links.

The Forum Page

Forums page

Mobile view

The layout comes with the new subnav that’s being implemented on other parts of the site. This includes a search field, and the three main subnav links.
The title of the forum is on the left top with a description under it.
The list of topics in the table below display the topic title, author, author avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name., number of participants, number of replies, latest person who replied with their avatar, and the date.
Below the list, if logged in, you’ll see the form to add a new topic. Otherwise, you’ll see a call to action to login and add a new topic.
The sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. has been moved to the right. Primary content in LTR languages should be on the left, while metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. content should be on the right. The sidebar includes: number of topics/discussions, number of replies, Last reply, and last activity.

The Topic/Discussion Page

Discussion page

Mobile view

This page would include a breadcrumb nav to help orient the user to their location given that it’s deeper than two levels.
The title of the forum is below that.
The initial question is a highlighted box which includes the user’s question/title, the user info, and the detail of the question/topic.
The comments are displayed below in a simple layout.
If logged in, there will be a reply form below.
Sidebar includes: number of replies, number of participants, last reply (user), last activity (date), and ‘favorite’ option.

The Search Results Page

Search results

Mobile view

The question is predominantly displayed at the top.
Search results are displayed below with pertinent information like title, desc., author, date, etc.
Pagination
Sidebar includes ability to convert the search query into a proper question (‘Ask Question’ button). Most likely transfer the user to a form page where the user can select which forum this question should be posted in.
Sidebar also includes recent forum posts and additional meta data.

A Call for Feedback

I’d love to hear what you think about the wireframes. Please leave some feedback below! 🙂

#design, #forums

Matt Cromwell 10:04 pm on August 8, 2016

Thanks for this! I like how it’s extending the new PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory design into the Support pages.

I like how the first comment is treated differently from the replies. I’d like to see a similar approach to the “Plugin Author” replies, and potentially also the “Forum Moderator”. Sometimes I think users don’t recognize when a Plugin Author is responding, or a Mod.

Would be great for Search Results to be grouped by Forum, or by Plugin or Theme. Or to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by those.

It would be excellent if we could support ticket templates, similar to how GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ recently rolled them out: https://github.com/blog/2111-issue-and-pull-request-templates
- Josh Pollock 11:16 pm on August 8, 2016
  
  I agree strongly with Matt. One of the big problems is that the current system encourages people to open a thread and not give enough information for anyone to help them.
  
  It’s so common to see a thread that basically says “X doesn’t work.” Then someone responds with the basic “What did you do? What did you expect? What happened instead? Do you have WP_DEBUG enabled, do you see console errors, etc…” Answering a support request with more questions is bad, but its necessary. The more that the support system can encourage users to provide all of the necessary information to get help, the better the experience will be for user and developer a like.
  - Ipstenu (Mika Epstein) 1:49 pm on August 9, 2016
    
    Please keep in mind that’s not a wireframe thing, though, it’s a codebase thing 🙂 (not saying you’re wrong, just keeping your eye on the prize here). Unless you’re talking about where we’d put that information so people would see it before they click submit…
  - Luke Cavanagh 8:40 pm on August 11, 2016
    
    That seems to be a common option for just theme and pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party support on the actual support form, where you have to give more than basic info with which version of WordPress they are using, which plugins are active, what is the active theme, what shows when you turn on debug. So all of those bases are covered, rather than trying to get that information out in the support post itself.
- Ipstenu (Mika Epstein) 1:46 pm on August 9, 2016
  
  Would be great for Search Results to be grouped by Forum, or by PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party or Theme. Or to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by those.
  
  That’s going to be a major code issue, rather than a wireframe issue. We have to totally re-do HOW we handle search with bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. for it to happen :/
  
  I believe the plan is to keep the flags for Plugin Author as we have them today.
M Asif Rahman 6:36 am on August 9, 2016

Maybe we need an easier option to add screenshot in the support thread. And a way to push people to search about their problem before posting. Maybe search while they type.
- Ipstenu (Mika Epstein) 1:46 pm on August 9, 2016
  
  Neither of those are wireframe fixes 🙂 However the first one is already in the works.
  - Joy 4:08 pm on August 9, 2016
    
    Hopefully the image attachments work better than on this blog. I put screenshots on a comment and the preview showed them perfectly, but it didn’t get saved that way and you had to fix it for me.
jeffmcneill 12:12 pm on August 9, 2016

What about large screen support? I am seeing a lot of data with some sites up to 40% of visitors with 1200px or wider browser width (not just device width but actual browser width). We’ve got to start designing for an enhanced widescreen experience. The 980 just doesn’t do justice to the devices and browsing behavior out there.
- Ipstenu (Mika Epstein) 1:47 pm on August 9, 2016
  
  Many studies have been done that wide TEXT is not as readable to the human eye. With that in mind, I believe 980px is appropriate for the center-content of the post. The extra white space isn’t bad either. Have you seen that users actually read all the content on wider screens?
- Mark Uraine 7:39 pm on August 9, 2016
  
  I’m very interested in allowing wider screens more space for content, as long as text blocks have a max-width in proportion to its’ font-size. The other piece of this equation is redesigning the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. and footer so that when the content is wider, the header and footer don’t look completely out of sorts with it.
Drew Jaynes 2:54 pm on August 9, 2016

I’m curious how this redesign fits together with the HelpHub (Support Hub) project. It’s been suggested that /support would be replaced with the overarching “Support Hub” concept, with the forums to live at /support/forums.

So I guess the question is, is the above “homepage” wifeframe specific to the forums area of the Support Hub or seeking to replace the Support “home” at /support?

Also, I’d be interested to see more specific wireframe in terms of structure on the search results page. For instance, it would good to hear how things like search results might conceptually work in tandem with Support Hub knowledge base articles. I recognize the internals of that are a code question, however I’m more interested in how the knowledge base and forum search might work together.
- Samuel Sidler 9:45 pm on August 9, 2016
  
  As of right now, we don’t have a helphub to integrate. It needs a bit more development, design, and content work.
  
  The wireframes above are for /support/ and forums-related views. The current front-page of /support/ is the forums and that will remain true until helphub is completed. Once helphub exists, we’d revisit the front page and search designs. I don’t think it’s worth considering helphub for the designs right now.
Joy 4:48 pm on August 9, 2016

What is the entry point for a user on a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party detail page, clicking on the Support Forums link? Is that a search results page or a forum page?

For the Home page, each box has a forum title and 3 topic titles? or is that the forum description? How many forums would show up on the home page?
Does the search box have a way to narrow the search to one forum?

For the Forum page, I’d rather see an excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. of the question than avatars and number of participants. Also, number of views is more informative. The excerpt could be first part of a question (when there are no replies) or first part of last answer (when there are replies).

For Topic page, I’ve heard people suggest doing as some forums where answers are voted up or down. I want to discourage that, and I hope the comments are just displayed in chronological order, so the discussion is easy to follow.

For Search results, you say

The question is predominantly displayed at the top.

Do you mean the search query? Then the results have title and description. Could this actually be title and excerpt?
I’d like to see as much of the conversation as is reasonable to show, so I can better judge if it fits my problem (do I need to click through and read the whole thing?)
Jon Brown 1:22 am on August 10, 2016
I’d echo some of the functional concerns above but I know it’s not the place. Really need a discussion on that someday.

Wireframe wise, the search, forums page and discussion page are straightforward and I think are good.

The homepage I have some comments for:
1. I like search being more prominent.
2. I like making “Getting Started Resources” more prominent.
3. 3 across layout…
I might be misunderstanding this:

Below those jump points, the forums are separated out and grouped with their 3 most recent topics. This was done to help with discovery and ensure users find the right forum. I determined that, if the topic was popular enough to continue getting activity, then others coming to the Support page might also relate to that topic.

Is the 3 across grid 3 forums posts, or 3 forums topics each listing 3 threads?

I’m assuming that later, but my comments kind of apply either way.

I feel the 3 across grid works well when you’re displaying semi-random information (blog posts) and encouraging a user to “pick” something to look at next, but it doesn’t work well when a user is trying to find something specific. A neatly ordered list, like the current list, works better for that. The vertical list of forums on the right hand side of the existing homepage easily scannable and readable, whereas the 3 across grid in the wireframes is not.

What if the 3 Getting Started Resource boxes across the top became 3 (or more) vertical boxes down the left side, then the forums could be more neatly listed down the right side as they are now, with out without 3 recent topics listed below each forum title ?

Note: I can’t imagine many people actual use this page for navigation, most I assume enter the forums from a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party page.

I’m curious in your research if you actually saw an example of forums organized in a grid layout like this?

4. The existing “Getting Started Resources” number 6 links. Only 3 boxes are represented. What/where/how are the others go? Maybe they get consolidated (probably a question for metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress./support team)

Maybe?
Tile 1 – Welcome to the WordPress Support Forums
- Using the support forums (links to current Welcome to the WordPress Support Forums)
- New to WordPress — Where to Start
- Support Handbook
Getting Started with WordPress
- Frequently Asked Questions about Installing WordPress
- First Steps with WordPress
- Writing Posts
Something else…
- Item 1
- Item 2
- Item 3
5. The “Hot Topics” are IMHO useless and could easily just be removed. I’d love to see usage stats on how many people actually click any of those (guessing < 1%)
- Samuel Sidler 2:29 pm on August 10, 2016
  
  Really need a discussion on that someday.
  
  Someday. 🙂
  
  Right now, the work being done is only about upgrading and giving the site a fresh coat of paint. Once it’s running bbPressbbPress Free, open source software built on top of WordPress for easily creating forums on sites. https://bbpress.org. 2 and open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL., we can start talking about new and improved features.
- Mark Uraine 5:09 pm on August 10, 2016
  
  The grid layout for different forum topics with their recent posts/activity is done elsewhere. I did some initial design research here where you can see some other forums I looked at for ideas.
  
  Users still have the ability to quickly scan/locate a relevant topic and then, without clicking, can scan recent posts within that topic to confirm if that’s the forum they want, or possibly find a similar issue their experiencing. If one is not found, the user can jump into the Topic page to see more posts.
  
  I did some research and the /support page was the 6th most frequently visited page on the site at the time. About 70% of visitors get to the /support page from a previous page on .org while the remaining 30% get there directly from elsewhere.
Ahmad Awais 12:12 pm on August 10, 2016

Strongly agree with Matt C. there. Search page can use some filters based UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing.. I think the Forum mockup is way too heavy. More spacing and use of white space would be very helpful there.

Love the topic discussion page. Maybe we can have a little greenish color added somewhere to the resolved topics? And similar colors for info-only topics etc.

Cheers!
- Mark Uraine 4:26 pm on August 10, 2016
  
  Yes, the grey blocks on these wireframes do cause it to look ‘heavy’, but keep in mind these are just ‘wireframes’. Once we explore the mockups, we’ll get into color, and proper padding, etc.
  
  I like the search results filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. idea too.
James Huff 6:01 pm on August 10, 2016

As someone who neglected to leave feedback in the previous step, I find all of these to be quite lovely and am looking forward to it! 👍

My only request would be to just make sure that there’s prominent placement for the All Topics and No Replies filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., they’re both very helpful for our support volunteers.
Mark Uraine 10:32 pm on August 15, 2016

I’ve accumulated the feedback into three sections: PROS, CONS, and WOULD LIKE TO HAVE. The number of times mentioned is listed in parenthesis next to each item.

——————————-

PROS

(1) Matches new design styles of PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Directory.
(1) First comment is treated differently in Topic/Discussion page.
(1) Search is more prominent on homepage.
(1) Getting Started is more prominent on homepage.

——————————-

CONS

(1) Grid layout on homepage. Would prefer a list view.
(1) No up or down voting comments or replies. (this is not included in wireframes, but should be noted)

——————————-

WOULD LIKE TO HAVE

(1) Comments from author, or moderators should be highlighted differently.
(3) Search results grouped by Forum, or Plugin, or Theme… maybe these are filters?
(1) Support ticket templates similar to GithubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/: https://github.com/blog/2111-issue-and-pull-request-templates
(1) Encourage people to give the correct info when writing a post.
(1) Make sure screenshots can be attached to comments.
(1) Large screen support.
(1) Color to indicate that the question is resolved.
(1) Color to indicate an ‘info only’ topic.
(1) Make sure to include the ‘All Topics’ and ‘No Replies’ filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. links somewhere for users.
(1) Forum Page: Wants excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. of question and not just the title.
(1) Forum Page: Wants number of views.

Welcome to the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!

Contact

Support Forum Preliminary Wireframes

The Homepage

The Forum Page

The Topic/Discussion Page

The Search Results Page

A Call for Feedback

Welcome to the MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Team!

Contact

The Homepage

The Forum Page

The Topic/Discussion Page

The Search Results Page

A Call for Feedback

Share this: