Homepage Design

[mapk]

We need a homepage design for the website. I've put together a quick mockup that provides something visual for us to talk about.

Notes

1. The new design is inline with the new design patterns for wporg.
2. I've included every link from the Codex homepage. This gives us a starting point, but I don't like a page full of links. We should discuss how to restructure the content better.
3. It might be a good idea to work in icons or other imagery to help break up the text.
4. I also suggest we provide more context regarding the link we want to display on the homepage similar to https://wordpress.org/support/
5. I've not included any responsive design yet because I wanted to focus on content right now.

[danieltj27]

I think Support does this quite well with a mixture of images and text which splits it up nicely. What are your thoughts? That might be a good approach considering it's something already in production right now.

[mapk]

Yes, Support is nice. I think in order to get there, we need to discuss what content should be displayed first. Are all these links necessary? Can we provide better hierarchy? Which links are statistically the most visited?

Answers to these questions should help us figure some of this out.

[danieltj27]

Personal opinion here; but split them up into three sections with headings of Beginner, Intermediate and Advanced guides. I think that would be quite helpful to people wanting to see what they can do with their current skill level. Then perhaps populate those links with the most viewed.

I think it's also important to note that in terms of classifying what is harder than something else would be relatively straight forward. Theme development doesn't necessarily need to be difficult so could be intermediate whereas contributing to Core, personally I'd see that as harder. Adding links in the WYSIWYG editor is very easy etc.

edit I think it's worth remembering as well that not everyone will agree with certain classifications, but that's just something to deal with. Some people will understand things easier than others so the three skill levels definitely are subjective.

[joyously]

I was surprised your image is transparent instead of a white background. I think people expect to read when they go to a Help page, so I say give them text, not icons. These are a good start, actually. Is there an existing FAQ anywhere? (forums maybe?) That could be a start for what should be prominent. I do not like centered text. It is harder to read and looks messy to me.

[mapk]

Is there an existing FAQ anywhere? (forums maybe?) That could be a start for what should be prominent.

As for a place to start, I started with the homepage of the Codex. That's where I got all the links.

I do not like centered text. It is harder to read and looks messy to me.

I agree about the centered text. With this many links stacked, it's very difficult to read.

I think people expect to read when they go to a Help page, so I say give them text, not icons.

True, but it's always nice to break up content with visual cues that make it easier to read.

[Clorith]

What should be on the front page was already workshopped over a period of time way back when, hopefully @Kenshino still has the documents on that?

[zzap]

I like the splitting idea and really like how Support did it. However, I'm not sure that classification by user's knowledge level is really helpful to user. It might be easier for us to organize topics that way but as end user, in need for help, from personal experience I found most helpful way was to see general description of my problem. Just like Support has with "Installing WordPress", "Fixing WordPress" etc.

[atachibana]

First of all, I would like to follow the past discussion and conclusion that @Kenshino would provide, and belows are just my 2 cents...

As @zzap says, I prefer the structure that Support Team has. It means, in the Homepage, we would have Section (or icon) of Installing, Updating, Using, Managing, etc., and each section has its own page. This structure is similar to the Support page of wordpress.com (not .org). https://en.support.wordpress.com/ In my idea, even each 'leaf' page should have Contents in the left sidebar as like as handbook page, but it might be too complicated.

FYI. As of now, wp-helphub.com has following categories and # of pages. One important missing is Security.

Advanced Topics     39
Design and Layout   28
Getting Started     60
How-To          20
Installation        27
Plugins         6
Templates       1
Troubleshooting     24
Uncategorized       11
WordPress Development   9
WordPress Help      12
WordPress Lessons   30

[samuelsidler]

Good start on the homepage mockup. A few comments:

• The term "HelpHub" isn't a public-facing one. The site is "WordPress.org Support" so the title of it can probably stick with "Support", keeping in mind that the forums are a subset of the Support section.
• Has there been an attempt at thinking through what sections would be useful for users? For example, I'd imagine that a "What's new in WordPress n.n" section would be interesting to a lot of users.
• Overall, I think making the page a bit more graphical would be helpful. It's hard to know what information is important when it all bleeds together and feels like a wall of text.
• I'm not entirely sure how things will be organized, but I imagine the search box would/should search not only documentation but forum results as well (prioritizing the former). The support section isn't focused on documentation, it's focused on providing support, with priority given to documentation because it's the most useful/well-written for most users.

[zzap]

We started discussing search functionality in greater detail last week on bug scrubs. Desired functionality is to prioritize documentation over forums (assuming documentation covers most common questions). This is so that workload on forums is reduced to more specific situations which can't be found in HelpHub articles.

We want users to search for articles to self help, and if they cannot find anything or they just don't like it, THEN they use the forums It's possible Helphub will sit as the front of wordpress.org/support So our search if it doesn't work for that particular user, needs to send them to the forums

It's basically a huge knowledge base to use before they post a question on the forums that have been answered 325242342352 times

On the other note, it just came to my mind that perhaps we could, in each HelpHub article, link the most commented/useful forum threads on the topic.

[nukaga]

Hi. I imagine that this page will translate into many languages. Then the centered text seems very inconvenient.

[khoipro]

Hi,

I'm owner of Frontend design idea for creating DW Knowledge Base (http://demo.designwall.com/dwkb/).

Just confirm we should have left alignment at default and right alignment for RTL languages.

Also if you need a mockup, let me know. I hope we can contribute it very soon rarely than currently.

[khoipro]

The difference between section (for example, if a section has 7 links while another has only 5 links), should be followed using display: flex.

[zzap]

I'm afraid we are far into design here while what's presented is just a mockup.

@mapk wrote:

I've put together a quick mockup..

We can't move forward with this issue until we know what content this page will present. I would really love the content maintainers, @atachibana and the rest, to jump in. We already have some ideas in comment above:

.. in the Homepage, we would have Section (or icon) of Installing, Updating, Using, Managing, etc., and each section has its own page. This structure is similar to the Support page of wordpress.com (not .org).

also here:

I'd imagine that a "What's new in WordPress n.n" section would be interesting to a lot of users

It would be awesome to finalize the content discussion and have everyone on the same page (pun intended) for I believe this would made design decisions so much easier.

Pinging some people to include them in discussion: @atachibana @Clorith @mapk @ntwb @Kenshino @joyously

[atachibana]

@zzap

OK, I will write down my idea into the wiki, and make links to each page.

https://github.com/Kenshino/HelpHub/wiki/WordPress-HelpHub-Homepage-Contents

[khoipro]

I tried to break more things we should have in Helphub. Maybe we can group by a short keywords likes "Posts", "Pages", "Media" (try to use the same menu from WordPress Dashboard).

OVERVIEW

• History (Preparing before installing)
• Choose WordPress Hosting
• Standard cPanel Hosting
• VPS Hosting
• Managed WordPress Hosting
• WordPress.com vs WordPress self-installed.

INSTALLING

• Installing WordPress in local computer
• Installing WordPress in cPanel Hosting
• Installing WordPress via terminal (VPS/Dedicated Server w/o control panel)

BASIC USAGE

• Writing a new post
• Writing a new page
• Upload media
• Manage media
• Manage Menus
• Update Profile

BASIC ADMINISTRATION

• Manage Settings
• Reading
• Manage Permalink (huge update in WordPress 4.9)
• Manage Users
• Themes
• Installing a new theme
• Deactivate an existing theme
• Delete a theme
• Plugins
• Installing a new plugin
• Deactivate an existing plugin
• Delete a plugin

MAINTENANCES

• Export databases
• Export via build-in Tools
• Export via phpMyAdmin
• Export via Terminal
• Security
• Securing and Hardening
• Using third-party plugin
• Using third-party firewalls
• Upgrading

DEVELOPMENT

• Post Types
• What is Post Type
• Create a new post type
• Display custom post type list (Query)
• Taxonomies
• What is Taxonomy
• Create a new taxonomy
• Display custom taxonomy (Query)

QUESTIONS

• Forum Support

[atachibana]

@khoipro Thank you. I merged your comment into the wiki.

[atachibana]

Extended every sections and assigned existing HelpHub contents. HelpHub Homepage should pick up h1 & h2 (section title) and configure. https://github.com/Kenshino/HelpHub/wiki/WordPress-HelpHub-Homepage-Contents

By the way, this page is so useful, isn't it? 😃 We should keep such sitemap-like page to keep whole view.

[khoipro]

I suggest some more topics:

Widgets (already) Using existing WordPress widgets Widgets from plugins

Appearance (already) Additional CSS (via Customizer)

[khoipro]

Add more topics:

Backups Backups via WordPress plugins

[khoipro]

Typography check: "Common WordPress Erros"

[atachibana]

@khoipro

Thanks for the comments.

Widgets

Original document is a long article and should be break down into some pages. I added the comment.

Appearance

Direct CSS should be avoided. In fact, Verion 4.9 prompts warning againt direct edit.

Backups

Plugin is already mentioned in the article.

Typo

Fixed.

[atachibana]

@mapk @zzap @Kenshino

I created mock up of the homepage. The layout design is based on the current Support page of wordpress.org (https://wordpress.org/support/) and replaced the icons and text. If I can get the source code of the page, I will modify and adjust it (ex. Font Size or Balance between the block).

• Icons are dashicons (https://developer.wordpress.org/resource/dashicons/#calendar-alt)
• Contents came from wiki

Any comments?

[joyously]

I think it's difficult to read links separated by slashes. My preference is to remove the icons or make them much smaller, and put the links one per line or as a nested list or something. Part of why they are difficult to read is that they are centered. Also, I don't know what "Maintenances" is. Ooo, and "Upgrtade".

[atachibana]

@joyously Thank you for the comment. I modified the page.

I don't know what "Maintenances" is.

Question: What do you call for daily operation such as backup, recovery or optimization?

[joyously]

That looks much easier to read!

I don't know what "Maintenances" is.

I had just never seen it pluralized. It is better without the 's'.

So, before, the headings were not links? (not underlined) Are they links now? And the individual topics are not?

[atachibana]

@joyously

I had just never seen it pluralized. It is better without the 's'.

Thank for the kind explanation.

In my idea, all of texts are links to each individual topic. That must be convenient for users. The underline of Header section in above image is just decoration :-)

[mapk]

Looking good, @atachibana! Thanks for working on it. This really helps us narrow in on the content.

In my idea, all of texts are links to each individual topic. That must be convenient for users.

If we're going to include several links under a specific topic, we should follow the same design styles as the Support page like this below:

I personally liked the initial mockup with the dashicons. It broke the content up nicely and the icons gave my eyes a place to jump to. If we kept the icons, could we follow the design styles of the Support page and include a simple sentence about each section with ONE link to a landingpage where I could access all the other related links? If we want to display all those links here on the homepage, we should list them out as I mentioned above.

I'd like to repeat @samuelsidler's comment from above as well.

The term "HelpHub" isn't a public-facing one. The site is "WordPress.org Support" so the title of it can probably stick with "Support",

[atachibana]

@mapk Thank you for the comment. I've enhanced your comment.

[joyously]

This has the same problems as before. Don't center text in paragraphs! It is difficult to read. I still think the icons are too large. They are not the main focus (they are actually visual noise and I prefer them gone, but I know a lot of people like them). Will there be more than these 8 sections? I think the blue lines look really odd.

[atachibana]

@joyously

I am using the same template with current support page. https://wordpress.org/support/ Don't we need some unity image for font & icon size?

For the centered text or linke line, can easily customize.

For the contents, I made wiki and picked up main chapter and section from it. https://github.com/Kenshino/HelpHub/wiki/WordPress-HelpHub-Contents If you have some lacking topic, please feel free add it.

[zzap]

I like this latest mockup. I'd maybe just give it more space between sections in the same row.

[atachibana]

I believe we can continue further discussion on PR with real template files.

I'll create the first template.

Can I refer the source code of Support page? (https://wordpress.org/support/) ^^ @mapk ?

[mapk]

@atachibana yes you can. I'm not sure if it will all work with this instance of WordPress though, but you can try.

Some further suggestions regarding the mockup are...

1. The lines separating the links should be grey, not blue.
2. Some of the icons don't seem to be the best representation of the content (ie. Adv Topics, Install & Upgrade).
3. The copy should be reviewed and revised. (maybe by the marketing team?)
4. Make sure there are no orphans in the textual descriptions of the sections.

[atachibana]

@mapk thank you.

I'm not sure if it will all work with this instance of WordPress though, but you can try.

Where can I get the template file? Is there a repository?

And, I forgot saying most important thing. All texts are dummy or some kind of English sentence but not real one :-) I would like to ask native speaker or marketing team or anyone. In working demo, I will use 'XXX' or 'Lorem ipsum'.

About Icon, I would like to ask everyone to search good ones from here. https://developer.wordpress.org/resource/dashicons/

[mapk]

Thanks, @atachibana! You can find all the files here: https://meta.trac.wordpress.org/browser#sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-support

Thanks for clarifying the text issues. Let's get in touch with the marketing team once we know if we have the right content.

THE MOST IMPORTANT THING RIGHT NOW IS CONTENT.

I can't stress this enough. We need to get some agreements from @zzap, @Kenshino, and @Clorith on the content before going further with copy.

QUESTIONS:

1. Are these grouped correctly?
2. Do we have the appropriate links featured?
3. Are we missing anything that should appear on this page?
4. Is there anything here that should be removed?

[atachibana]

@mapk @zzap @Clorith @Kenshino

To discuss about @mapk's question 1, 3 and 4, I created wiki for Homepage Contents. Now it was filled with the content from my design plan. https://github.com/Kenshino/HelpHub/wiki/HelpHub-Homepage-Contents

Please refer it and add the comment here or modift it direct.

[Kenshino]

@atachibana looks good to me!

[melchoyce]

@mapk Is there a final design for this? What can the design team do to help?

[atachibana]

@mapk @Kenshino Who is the owner of writing "Block description" under each section? Marketing Team or Design Team or ?

[mapk]

@melchoyce We're super close. This is the current version I believe. https://wp-helphub.com/

That said, a few things need to happen with it.

1. The WordPress icon needs to be the actual logo. The icon line weights are too thick.
2. All icons need to be reviewed. Some of them are probably not the best icon for the section its representing.
3. As @atachibana has questioned above, we need some descriptions of each.
4. Seeing as we've now removed the forum topics from this new page, we no longer have a forum homepage that lists all the sections. A forum homepage will need to be designed (we might be able to just reuse https://wordpress.org/support/) and then a link to it added to the support homepage.

These are the major design changes I see as of right now.

[zzap]

Who is the owner of writing "Block description" under each section?

It's been decided on meeting that @Clorith and @atachibana should take lead on these items.

[Clorith]

I know I mentioned this, but posting for reference as well.

Item 4 is covered by the forums archive page (/support/forums/), this will adapt the current support front page when HelpHub goes live, so we have a good place to link to, and it's an expected location as breadcrumbs lead to this by default already. (At least that's the current plan, any iteration I'm open to input from the crew here, but it seemed like the sane approach).

Item 1, this is the dashicon for the WP logo, so if there's something visually incorrect we may need to re-visit the icon it self?

[mapk]

Item 4 is covered by the forums archive page (/support/forums/)

Perfect!

Item 1, this is the dashicon for the WP logo, so if there's something visually incorrect we may need to re-visit the icon it self?

Not necessarily. The icon is made to work well at a smaller size, I believe. It becomes a problem when we increase the icon to become a larger graphic because now the line-weights don't match the actual logo. Is it possible to use the logo within the widget? Or maybe we could create an icon that is exactly the weight of the logo?

[Clorith]

We can modify the widget to accept an image as well as dashicons, not a problem at all (and might be more flexible in the long run, so good thought!)

(I definitely think we need a dashicon that follows the logo weight as well in any event :) but that's more of an aside)

[mapk]

Since the homepage is mostly done, I'm going to close this issue. Any other fixes to the homepage should be created under a new issue. Thanks everyone!