New design for HelpHub in WordPress.org – Make WordPress Documentation

The end-user documentation or HelpHub will go through a transformation, both in the design and the site map. 

The refinements in the template will improve the user experience while searching for information. These improvements include one landing page for end-user and developers documentation that will be called Documentation. This is the entry port to both HelpHub and DevHub. Although this article focuses on HelpHub, there will be changes for DevHub in the future.

Better search

The new site map includes 4 main categories and subcategories under each. This will improve search and allow new articles to be added into the existing categories without creating a ‘miscellaneous’ categoryCategory The ‘category’ taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..

New features

Documentation will have a new 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.. The team is dropping the word ‘Support’ and replacing it with ‘Documentation’. This area of the website will contain reference information rather than be a place where users interact with the Support team as described in the Renaming WordPress.org Support to Documentation.

A changelog was added to keep historic information on each article. The user will have a better idea of how recent the information is.

Other features that will help searching are the breadcrumbs, a new documentation submenu to the categories, a more prominent table of content and, a highlighted link to Support Forums.

Another new feature was the retirement of the hash character at the end of the headlines as they were an accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issue and caused visual noise. The hash has been replaced by a link icon.

Documentation on mobile

The mobile version offers faster access to the specific topic in the article by using accordions to navigate long articles on mobile. The breadcrumbs, search and table of contents will remain at the top of the article.

The design

The design follows the style set by the News redesign. It is cleaner, jazzier and the new template opens the canvas to improve readability. Using also the same typography connects this design to the redesign of WordPress.

The color palette is simple and muted so as to not interfere with the multiple videos and screenshots used within the articles.

Props to @melchoyce, @karmatosed, and @beafialho for their design guidance.

Props to @webcommsat and @marybaum for reviewing and editing help of this article.

This content was originally published here.