The number one reason justifying the importance of a consistent header in your Zendesk help center design is your business identity, which shows users that they landed in the right place. “Where am I?” is the very first question a visitor asks oneself, and it refers not only to the right website but also to the right area and page of the website. Hence, your corporate header should be consistent throughout all your online resources, including Zendesk help center.
You would be surprised to know how many people find themselves looking for such seemingly obvious things such as “what’s the name of the company?”, “what’s the main product or service of this website?”, “why should I buy it from them?” and “why should I trust this website at all?”. The header reassures visitors that they are on the official support site relating to the particular brand. It can also play the role of a sign, a billboard, and an ad, by becoming your selling tool that contains important notifications.
Elements of Zendesk help center headers
Depending on the business niche and target audience, help center headers can include the following elements:
- basic brand identity elements, such as logo, slogan or company mission statement, corporate colors and so on;
- page title;
- log in/log out and user account link;
- links to the most popular categories and areas of the website;
- links to social networks;
- multi-lingual switch element;
- the main product or service hero image;
- search bar;
- shopping cart;
- contact details;
- links to the main website.
Page title may take quite a lot of space, but it’s a critical navigation element of help center design that lets users immediately see which area of the website they are currently at.
A shopping cart located in the top right corner is undoubtedly typical for online stores and may remain in the header.
Advanced features for headers in Zendesk help center design
Dynamic headers
The headers can also be sticky, meaning they can follow your browser’s viewport as you scroll down. This option allows users to access the most important links and categories at any time from the header.
Other cool elements
A help center design shouldn’t necessarily be strict and boring. Calls to action in headers such as a subscription to the newsletter, a test-drive of the product, or another notification potentially triggers your users once they are done with resolving their issue.
Furthermore, the menus can contain single links to areas of the website or dropdowns expanding to multiple levels.
Secrets of effective headers
It doesn’t mean that you should use all the elements mentioned above in one header. Otherwise, your help center design will look like nothing else but a mess.
Keep in mind the following general rule - the more objects you have in your Zendesk help center header, the harder it is to attract the user to the most important ones and deliver the right message. Therefore, your marketers should carefully pick the right elements.
We tried to find diverse examples of different headers and analyze them briefly for you to demonstrate the aspects discussed above.
IMPINJ Support
Let’s have a quick look at the header of the IMPINJ help center below, which replicates the header of the main site. The upper part contains links to general sections of the website, whereas the menu in the white background contains links to areas of the support center. Dividing the header into two parts is a great solution when you need to place many elements and want to make sure that each page contains the most relevant ones.
Other features of the IMPINJ header include a dropdown menu, search bar, and links to social networks, along with a button to request a contact form.
Whenever you scroll down the page, you can notice that the header is sticky as it “travels” along with you by remaining on the top of the page at all times.
The RealReal help center
The header design of the RealReal Zendesk help center is quite simple. The header leads to the main website and contains the key product categories, consign area, and a search bar.
Swipe Simple
The header of Swipe Simple is the same as the header on the main website. It contains even fewer elements than other examples above: a logo leading to the homepage of the main site, four menu links with dropdowns, and a login button.
Quad Lock
The header on this Zendesk help center is also taken from the main website and combines simple and smart elements that suit the product. We can see a shopping cart in the top right corner, a logo located in the opposite top corner linked to the homepage, four links to the vital areas of the website, and a hero image with a search field on the background below to demonstrate the product. The Quad lock header is also sticky and expandable when needed.
FullStory
The header of the FullStory help center replicates the one on the main website with the logo leading to the homepage. Furthermore, we can say that the header is elegant and concise as it has just four links in the center in addition to log in and “start a trial” buttons in the top right corner. The latter button is highlighted in color and grabs the attention of the audience right away.
G/Fore
This is an excellent example for retail and e-commerce stores. The key features of the G/Fore header are the store locator, login button, shopping cart located in the right corner, and a tiny but visible search bar. The header does not only replicate the one on the main website but is also sticky, allowing a visitor to search anything at any point and any place of the help center. The products are divided into three main categories with dropdown menus in each. The shopping cart icon is very well thought-out with dropdowns.
Avocado
This is probably the most conservative and minimalistic example of a header, which contains only the logo leading to the main website and a “shop” button leading to the e-store. Avocado makes an emphasis on the product itself by showing a happy lady on one of their mattresses. A hero image is a wonderful idea to increase sales.
Final notes
Most importantly, the header on your Zendesk help center should be in line with your website design to show the relation to the same business.
If you have a product-centered site, then it’s a great idea to engage your audience visually by adding a hero image and buttons that would entice them to learn more, take a tour or test drive. In other cases, it’s better to make the header more resourceful. It is up to your marketers to pick the most suitable elements for your header and make it a more user-friendly tool.
You can go ahead and match the help center header with the main website using your team resources, but make sure that they know exactly what to do. Another option is contacting Lotus Themes - the developers of these beautiful headers above, who will be more than happy to give your Zendesk help center a professional and consistent look.
