Blog

SpinWeb is an Indianapolis-based digital agency, specializing in enterprise website design & digital marketing

How to Effectively Structure Your Website Header

Stephanie Fisher

Posted by Stephanie Fisher on 5/3/16 9:30 AM

header-blocks.jpg

The website header is the top portion of your website and the first thing a visitor sees. What impression does your header make? Is it cluttered and difficult to navigate, or is it clean and easily understandable? 

Website design trends change and there will always be exceptions to the rule. That said, there are a few usability rules and best practices that stay the same. This guide will help you plan your website header in a way that is both beautiful and functional from a user perspective.

Foundations of a Header

Almost every header will include these building blocks:

  • Logo – the logo is the main visual element of your header and provides a functional component as well. Best practice is to link your logo back to the homepage. The visitor knows where he is, and how to get back home from anywhere on your site.

  • Navigation  – The navigation accounts for all the main areas of the website and is the main way users find their way around. The key to good nav is to be in the head of a first time visitor. Too many choices, overwhelming. Weird terminology, confusing. Too many levels and drop downs, annoying.
  • Search Bar – The search function should let you search everything on the site; blog content, news articles, web pages.

Additions

The basics come first. Your users might have specific tasks or frequently used areas of your site that need to be prominently located in the header, such as:

  • Member Login – E-commerce, associations, and financial services websites typically make account login a priority.

  • Social Media Icons – Visitors tend to look for social media links in the header or footer areas.

  • Give Button – Non-profits might want to include a Give or Donate button in the header. Many grants and foundations take ease of donation into account when they award financial gifts to organizations; they want to know that your organization is doing everything it can to fund itself, and a Give button makes it clear that you prioritize funding. 

It's tempting to keep adding more, especially when there's pressure to "put it on the homepage" or "add it to the navigation." Keep in mind that the more items you add, the more convoluted your header will become. Keep your header easily digestible. 

Deconstructing Your Header

Before you build it examine every piece. When we meet with a client who wants to revamp their website header, our first step is a big brainstorming meeting. We ask the following questions:

1. What do you like about your current site?

2. What do you hate about your current site?

3. What do you feel is missing?

4. Is there a component you feel particularly protective of? Would anyone be upset if we removed it? 

After we've gotten this information, we discuss the client's homepage priorities.  What do they feel is important for users to see on the homepage? 

This is often a good opportunity for us to (gently and diplomatically) redirect the priorities to make sure that the homepage looks clean and is easily accessible. 

Solid Examples

And now you're asking, "Okay, you've told us what to do – but what does a good header look like?" Good question. Here are some examples of headers we've designed recently that follow the guidelines above.

1. Scotty's Brewhouse

Screen_Shot_2016-04-29_at_4.34.28_PM.png

Note the simplicity of the header; it's easy to navigate. Frequently used specialty elements include "Delivery" and "Carryout" buttons; this is a great call to action, guiding their users to where they want them to go. Visitors to their website won't be confused or click away.

2.  Indiana Retired Teachers Association (IRTA)

Screen_Shot_2016-04-29_at_4.39.56_PM.png

The logo is visible but not overwhelming, the social media buttons are not too assertive, and the navigation is clear. It's attractive and easily navigable – everything a header should be!

3. Spectrum 

Screen_Shot_2016-04-29_at_4.45.45_PM.png

Our header for Spectrum Management Group is a little unusual. It's spare upon initial viewing, but the dropdown menu to the left encompasses all the top level navigation. See the photo below to view the menu selections. 

Screen_Shot_2016-04-29_at_4.46.02_PM.png

The header and menu are elegant and understated to match the rest of the website.

Hazards to Avoid

We've made our fair share of mistakes over our 20 years in the website biz. Learn from us and avoid these issues with your header.

Issue #1: Logo Madness

Your logo is an important element of your website, but let's keep it in perspective. Sometimes clients will get obsessed with making the logo bigger, shinier, stand-out-ier. If the logo's not huge, the user might forget where they are, right?

Wrong. The truth is, nobody cares about your logo quite as much as you do. A logo needs to be balanced with the other design elements of the header. The user is more likely to notice a logo that's trying too hard or doesn't fit in with the header design. Trust your designer and don't get carried away with logo madness.

Issue #2: Crazy Navigation

It's easy for your navigation to get completely out of control; whenever you add a new feature, you just plop it into your navigation. Before you know it, your navigation is a crazy 1000-pound gorilla, and the sight of it sends users running for the hills.

Sometimes a fresh set of eyes can help you pare your navigation down to the bare necessities, making it easier for users to find what they're looking for. Remember, if the navigation FEELS unorganized, users end up frustrated, and they'll click to another site. Keep it clean.

Issue #3: Shabby Search Function

In the age of Google, people expect their site searches to work like Google. Sadly, that's not possible–if we understood how to make search work like Google, we'd be wildly wealthy and retired to a tropical island. Sometimes users have unrealistic expectations.

That doesn't get you off the hook, though. Your search function should work reasonably well (even if it's not Google level). Think about the top keywords your users might use, and type them in to see what pops up. For example, if you're a financial institution, type words like "checking account" or "credit card". Check this every few months; you want to know if your search is sending your users to a dead end.

Or, you could use Google Custom Search on your website (customizable and ad-free for a reasonable price).

Issue #4: Heavyweight Dropdowns

Yes, e-commerce sites (like Target or Amazon) have huge dropdowns. That doesn't mean this is the right move for you. This is hard to maintain and makes for usability issues.

An unwieldy dropdown or multi-layered navigation is terrible for mobile experience. Nothing makes users click away faster than not being able to see the site on their phone or tablet.

Issue #5: Mobile Last Mindset

We suggest a mobile first mindset when designing a website, but many people think of mobile last after they've planned an elaborate desktop version. 

Yes, your site might look beautiful and perfect on a desktop computer screen, but if a user can't see your header properly on their mobile device, you're sunk. 

We use a framework called Bootstrap to build sites that display beautifully across devices, be it phones, tablets, laptops or desktops. Our designer suggests that you start designing with the mobile platform in mind; anything you design for a mobile platform will be compatible with the desktop format, but some desktop designs aren't usable on a mobile platform. 

Now, take a look at your website's header. What would you change if you were redesigning your site now? Let us know in the comments below!

A website evaluation toolkit for banks, credit unions and wealth management firms.

 

Topics: website, corporate website design

Let's Talk

Ready to get started

Seamlessly expedite sustainable experiences whereas clicks-and-mortar e-tailers. Credibly create cooperative testing procedures with high-quality applications. Synergistically enable granular convergence whereas client-based convergence.