Oct 24, 2020

Headers: Friend or Foe? Optimizing Website Navigation for User Experience

You never get a second chance to make a first impression.

~ Andrew Grant

Now, why such a philosophical line?

BECAUSE IT’S TRUE!

Especially when it comes to websites and consumer psychology!

The first impression is the make or break and the first thing seen on a webpage is the header! Less is more and users look for this subtlety that would put even minimalists to shame! Visual imagery is in but not to the point where it goes over the top! Web developers today have to put in a lot more effort into headers as according to Google, it takes only 50 ms to form an opinion about a website and some opinions develop within the incredible 17 ms. If you’re aiming at building a consumer base for your brand, this is the first touchpoint! Consider it the cherry on top of the cake, only that the cherry is the first thing you’re eating!

So, what exactly are headers?

Simply put, it is the top part of a webpage that users see before they start scrolling. Often referred to as Site Menus, they are positioned as a key element of navigation and UX! Overall, a good header makes your website easier to navigate, establishes your brand, and creates a consistent browsing experience throughout your website.

According to Kate Shokurova, in her article. “Website Header Design in 2020: Best Practices and Examples” headers were previously seen as narrow strips in the top parts of the websites that contained a logo, a call to action, and contact information. However, today with modern design, the whole space above the fold of the homepage is considered a header. Being in a strategic place of importance, it acts as a kind of invitation for users to see what the website offers in the very first few seconds!

Let’s look at a few examples of some great ecommerce examples:

ZARA:

NYKAA:

SUPERBOTTOMS:

If you’d notice in the images above, all 3 brands have something different going on! This brings us to the next part of this article; The Components of Headers:

Broadly categorized, headers include the following:

Logo
Navigation menu
Tagline
Phone number
Address
Search box
Buttons
Social media icons
Login or My Account link
Opt-in box

Nykaa and Superbottoms, seen above, both use a traditional header in which all required information is available to the user in a thin strip right at the top of the page. Coming to Zara, visually, we can see something different. This is because, in modern design and development, many ecommerce brands prefer to use banners and carousels that showcase their star collections and best offers as a part of the header. Technically, these are two different things however from a users’ perspective, these two merge to create one great offering!

Check out Tubik Blog’s article on “Best Practices for Website Header Design” to understand how users visually see information on the headers and how it affects the success of your website!

This brings us to an important question; “How should one choose a header?”

To understand this, let’s first get into the different types! Broadly speaking, they are categorized into 2 formats; Fixed and Sticky.

Fixed Headers are considered as the traditional headers that are the starting point to your webpage. As the user scrolls down, the header moves upwards and disappears along with the rest of the elements. According to EnvatoElements, in their article, “Sticky vs Fixed Navigation: A Comparison” it does come with its share of pros and cons!

Pros

It helps reduce user distraction as they do not constantly see a menu they might not need
The risk of clutter or a jumpy site is reduced which helps improve user experience

Cons

The risk of users getting confused or lost is high and this might cause them to bounce.
Other pages on your website may see fewer views since the customers aren’t being repeatedly reminded of other things they can explore.

The Organic India website is a great example of a fixed header that does not move as the user scrolls:

Sticky headers, on the other hand, are considered as a true genius on part of web developers! They are perceived to be “glued” on top of the homepage. Modern web development needed something that would help anchor the users and take performance up by a notch and thus came in sticky navigation. When a user scrolls, the header with all the required information moves with the rest of the page. As it moves, it covers other elements such as images, etc while constantly providing navigational aid to the users. As with anything tech, this too comes with its share of pros and cons! The EnvatoElements article yet again does a great job explaining these!

Pros

Since the user continues to see the menu bar, it helps them move around sites quicker without having to scroll back up to the top.
It serves as a reminder of other options on the page that may have been forgotten, or not realized besides whatever content users are currently looking at.
It reduces glitches as it does not occupy the space of other elements.
It helps increase brand recall as with the sticky header, your logo is constantly in their users’ periphery.

Cons

It can be distracting to users who do not always want to be reminded of a menu!
It requires experienced developers to work on them since they’re tricker in nature and poor implementation may cause menus to be jumpy or push other elements to the side.

The Manolo Blahnik website above is a great example of a website with a sticky header that moves as the user scrolls:

So, how can one choose between a fixed or a sticky header?

According to WISDMLabs, in their article “UX Discussions: Should You Ride the Sticky Navigation Trend,” the answer is not quite black and white.

As with almost every aspect of the digital world, there is never a concrete answer. It all depends on the type of website one needs, the preferred audience, their needs as well as the type of product the brand is trying to sell. Based on the pros and cons one can choose to go ahead with either, or even be dynamic and choose to combine both. A great practice to follow is to get feedback from users to implement changes in your website’s design! As a brand, you may have ideas that could pile their way up to Mt. Everest but if your end-user is unhappy with them, in the end, it’s a loss of revenue, conversion, and sales for you! There is no right or wrong in website development! What works for one may not work for another and vice versa!

However, we’ve been in this business for a while, and believe it or not, we’ve seen it all! So here are our two cents on what we’ve seen throughout our years in web dev!

Avoid large headers!

When it comes to sticky headers, using large ones with images or content is a no-no. Imagine seeing a big block that takes up half the page and this block constantly moving with you as you scroll. It hampers readability, navigation, and the overall user experience!

Play Around

When using sticky headers, analyze how the site looks visually. Analyze if the colors used complement the rest of the website. If needed, experiment with transparency to see if it reduces the claustrophobia that may have been caused on your site with too many elements cluttering the header!

Think About Your Scroll Data

The analysis % of users who reach the end of your website are important but it is equally important to analyze the % that reach the 25%, 50%, and 75% mark on your webpages. Drop-offs in these help clarify what might be going wrong. If your header is taking up most space, chances are, your data would largely remain inconclusive!

Think mobile

Most users access websites on their smartphones! A large, high-resolution computer displays where a sticky header could speed up interactions, but this could go completely wrong on mobile. Explore responsive design techniques to design different solutions for mobiles, Ipads, etc, and stick with a sticky header for desktop browsers.

Conclusion

Fix it, stick it, pin it, freeze it, use a combination, it’s all up to you! Website development is a dynamic industry that is constantly evolving. What works today, maybe obsolete tomorrow! Therefore as brands, you need to constantly be on top of your game and in touch with your users to understand if a paradigm shift in their preferences could have a negative impact on your profitability. There is no one-stop solution for all. Every element has a purpose and is equally important in some aspects of user conversion and sales growth!

Whether you’re fixing it or sticking it, do it once you’ve got all your answers!