Web designers must treat every visitor to their websites as a potential first-time user, offering comprehensive guidance and directions to facilitate task completion and site navigation. While all websites require user assistance, the methods vary based on the site’s nature. The type of website dictates the appropriate help system to implement.
The efficacy of a help system is directly tied to the quality of the site’s design. A poorly designed help system, despite potentially valuable content, can result in a subpar user experience. This article will explore effective help page design strategies through examples, which may serve as inspiration for your own projects.
Numerous terms and types of help systems are employed in website design, including “Help,” “Support,” “FAQ,” “Docs,” “Knowledge Base,” and more. These web pages are designed to assist users. Help systems should be easily accessible where users are likely to seek answers, such as when starting to use a website or when they can benefit from additional information. Their importance lies in the fact that they are often the last resort for a visitor before seeking out alternative sites that meet their needs.
Consequently, well-designed help systems can significantly enhance user retention. Despite their importance, many website designs overlook the utility and significance of help systems. This is typically due to the website owner’s lack of awareness of the need for help content or the benefits of incorporating it into the website’s content.
For instance, in the case of an online store, purchasing instructions could be placed on the homepage or in an easily accessible location, rather than creating a separate help section. This approach also improves discoverability.
To facilitate the subsequent discussion, let’s examine a few examples of help systems. For instance, Marie Catrib’s website discreetly includes contact information and operating hours within the footer of its homepage, integrating content that might otherwise reside on a separate page.
An FAQ, or frequently asked questions section, is a dedicated area to address common inquiries or concerns raised by users. It can be considered a subset of guidelines under broader categories such as Support or Help in larger site help systems. Typically, “Help” is a more appropriate name for a top-level page, while “Support” is commonly used on commercial websites offering technical services.
Some websites use a “Help/Support Center” label. For example, Josh Lockhart’s website utilizes a “Help” link as the entry point to its help pages, which are further divided into sections like “How to Install,” “How to Buy,” “FAQ,” and more.
Google’s “Help Centers” section is appropriately named, given its comprehensive nature and well-organized structure, reflecting the company’s vast array of products. The California Courts website features a suitable help center with clearly defined categories, using icons to enhance visual recognition of different sections.
Survey Monkey’s help center demonstrates well-crafted categorization, while Ten Little Monkeys lists help pages under the “help & information” heading in the footer. BrightKite, similar to Ten Little Monkeys, employs the “Help” heading in the footer, followed by a list of useful help pages within their system.
In contrast, Fine Point’s help center only contains contact information, providing an example of misnaming and an incomplete help system. As a good practice, “Contact” or “Contact us” should be the label for this webpage.
All help pages, regardless of their unique characteristics, share common features. These include clarity and illustration, concise and descriptive explanations of each topic, and the use of scanning aids such as bolding keywords to enhance readability.
In the example below, Maverick Label highlights important text, guiding the user through the content. The links on System 7 Today effectively emphasize key subjects despite the simple design.
Accessibility is a crucial aspect of any page, but it is particularly vital for help pages. They should be simple and quickly accessible, with links included in the header and footer, especially on long pages and the homepage. Users should not need to navigate through deeply buried pages to find the help they need.
For example, Traffik employs clear links on a plain background to enhance readability. ProWorkflow includes a direct link to its support page in the primary navigation bar, while Invoice Machine showcases what can be found on the help page with descriptive text. Constant Contact uses appropriate wording (“Learning center”) for its resources and distinguishes it aesthetically from other links.
The AAFP’s breadcrumb trail indicates the long path to the help center, which could be overlooked by users. Google’s help center is challenging to locate from the homepage, making it more convenient to search for directly.
To prevent confusion, help systems with extensive content should be carefully structured by topic. This involves creating a small number of main categories, each with sub-categories. Different categorization methods can be used, but generally, more important topics and common issues should be placed higher in the structure. Icons can also be employed to increase visual cues for the categories and add life to the page.
Apple’s help center is a prime example of effective categorization, covering all areas where users might need assistance. ProWorkflow organizes its help content into several categories, each containing sub-categories. Campaign Monitor utilizes icons to support its categorization, ensuring everything is in the right place. Google places less important items on another page, accessible through a link, while Hostway offers another example of classification with icons, though with its own style.
HWG’s FAQ page features simple categorization without any unnecessary elements, while Apache’s help system is a straightforward HTML page that gets the job done.
For extensive help systems, the ability to search can be very useful. Search results should display all relevant information about a topic at a glance, but they should only show pages from the help section and not the rest of the website to avoid overwhelming or confusing results.
Google’s help center includes a section-specific search labeled “Search Help,” while Storenvy’s search feature is well-positioned and labeled (“Search Support”). TiVo also demonstrates good positioning and creates a distinctive space for the search box, with colors adding to the aesthetic appeal.
Despite good categorization, ProWorkflow lacks a search feature, which could cause difficulties. To prevent congestion, Google places less important items on another page, accessible through a link.
Sometimes, users end up in the wrong place or can’t find what they’re looking for. Providing them with additional useful options, such as other help topics, forums, and so on via relevant hyperlinks, can be beneficial. The effectiveness of such links depends on their location: visible, nearby, and distinct is best. ThinkGeek lists almost every other place a user might want to go, placing it in the right place with a good heading and including notable links to the latest forum posts, which can introduce new resources and improve discoverability.
Yahoo organizes links under informative headings, which are helpful. Providing contact information in the right place is another way to assist users. When users can’t find what they’re looking for, they’ll ask, so it’s important to be accessible through various means, such as phone, email, online chat, etc.
While contact information is commonly found on the homepage and, of course, on the contact page, placing it on the help page is a good idea for fallback purposes. Contact information on Crazy Egg is well presented and positioned, while iPersonalAssistant offers simple contact information without unnecessary decoration.
TiVo provides live chat, an invaluable feature for a website. ThinkGeek provides thorough contact information, well-positioned, and Help.com invites users to submit a ticket, which is convenient but perhaps less effective than live chat.
Of course, both methods require sufficient staff to meet demand. To improve help material and gauge user satisfaction, feedback is important. The process should not be time-consuming, as users may not participate if it is. Star or numerical ratings are more effective than forms.
For example, Microsoft’s simple survey asks whether a help resource was helpful or not. Help.com invites users to write their suggestions, complaints, and other feedback, though this may be less effective than star or numerical ratings. Yahoo’s complex form may seem overly burdensome to users.
Displaying the average rating and number of ratings is smart, and providing help (e.g., a question mark) can be beneficial. Campaign Monitor and Yahoo both exhibit all the traits of a perfect help section.
This guide has introduced essential tips and best practices for designing effective help pages. It is hoped that you will be able to apply the relevant rules to your projects and avoid incurring significant costs by neglecting the rest.
So, start experimenting while keeping the basics in mind.
