Sticky Header Issues To Avoid
A header is the first person a user sees when they access your website. A well-created header lets your consumer know they have arrived at the right place, whether or not they are already a follower of your brand. It needs to be recognizable and easy to understand. This feature is a valuable piece of real estate that can help sell your rand if used wisely.
One form of header is known as the sticky header. It works just as it sounds – the header “sticks” to the top of a web browser as the user scrolls down the page. One of the primary motivators for this design choice can be navigation. On a site with a sticky header, the visitor can easily access another page on the website or basic information without having to scroll back up.
But just like any design decision – the user experience has to come first. And while in some cases, sticky headers can be an aid, they can also go to the other extreme and ultimately hinder the UX. If you are a UX designer, you may want to read these stats about a career in UX design. Here are some tips to avoid disaster while using sticky headers:
Avoid Large Headers
While you want the header to catch the user’s eye and be easy to read, you want to avoid making the user experience claustrophobic. Since a sticky header is going to always be visible as the user reads your main content, if it is too large the visitor will be constantly scrolling. After a while this is going to feel tiring. You want the consumer to be able to quickly get the information they need about a brand to make a decision, not spend hours trying to get through all your content because a giant box leaves the reading space small.
We recently received an email from Social Media Ninjas about how our sticky header could be reduced in size. Here’s what it looked like before:
And here’s that same page with our slimmer sticky header:
We gained about 15% of extra screen space to help you see more content and less of our logo.
Make Use of the Space
Don’t leave your user wondering what to do next. If this header is going to be following them throughout the page, make sure there is a call to action that is relevant to your brand. Whether it is a donate, request info, or see more button, you want ot make it as easy on the user as possible to get to the next step. Simply including the name of your company and a brief description in your sticky header is not making the best use of the space.
Don’t Forget About Mobile
The desktop website experience is your anchor. But don’t forget about mobile users. The screen is going to be much smaller, and so ask yourself whether a sticky header is going to work in that format. Even if the answer is still yes, it has to look different in order to create a comfortable user experience. Don’t be afraid to have a different mobile layout, as long as the branding is consistent with your desktop site.
Don’t include every link
If you’re looking into sticky headers, you’ve probably heard how it can speed up browsing and navigation times. While this is true, copy and pasting every navigation link into your sticky header is going to be distracting and bloating for your user. Especially if you are a content heavy page such as perhaps a media outlet with a lot of categories, this is only going to overwhelm the user as they are constantly shown too many choices. Make sure to pick only the links the user really needs.
Picking Flashy Design Over Legibility
There are always going to be trends in the website world. It is worth keeping up with your competition and seeing what works and what doesn’t. However, sometimes websites choose flash over substance. Thin fonts and low contrast designs for example may seem appealing to the eye – but are they readable? A way to avoid UX mistakes such as these is to test your website on multiple browsers and devices to ensure usability.
In the right circumstances, a sticky header could work great for your website. It might help users navigate easier and understand your brand in a short amount of time. But before jumping into including one, make sure you follow these tips and always remember that user experience comes before design.
Nick Rojas is a serial entrepreneur who’s enjoyed success working with and consulting for startups. Using his journalism training, Nick writes for publications such as Entrepreneur, TechCrunch, and Yahoo. He concentrates on teaching small and medium-sized enterprises how best to manage their social media marketing and define their branding objectives. Nick is currently a consultant for Phonecheck.com.