A funny thing happened on the way to today’s post. While doing keyword research to discover what you, our audience, call the top of your website, we found some disagreement. Various posts at other websites, from Wikipedia to a variety of design blogs, use different terminology to describe the top of the website. Website header was perhaps the most generic description. Website masthead was used less frequently. Website nameplate, our preference, was used hardly at all.
The terminology, of course, predates websites. Print periodicals in the US have traditionally used the phrase nameplate to describe the top of their front page, which includes the publication’s logo. In the US, masthead has traditionally referred to a listing of staff and ownership on an interior page. International publications often use the phrase masthead to describe what publishers in the US call their nameplate. Web designers have taken a more basic approach in many cases by simply referring to the top of the webpage as the website header.
[text_ad]
More important on the web
Whether you call it a website nameplate, website masthead, or website header, this top of page design object is much more important on the web than it was in print. Because users enter websites on virtually every openly accessible page, the website header is traditionally repeated on article pages, category pages, tag pages, and a myriad of others. As every page is a potential front door, every page must provide the functionality associated with a website header, masthead, or nameplate.
Where am I and what can I do here?
Since search engines drive the majority of website arrivals, we know most new website visitors are searching for something. In hundreds of website usability labs, it boils down to two simple questions. Where am I? What can I do here? The website header must quickly answer those questions definitively to engage the user. We measure website engagement with three simple metrics: bounce rate, pages per visit, and time spent.
[text_ad]
Keeping users engaged
While the website header is only one of several major website page objects, it can contain 20 or more individual clickable elements. The most prominent is usually the website logo and the website’s section navigation.
The purpose of the logo is to quickly answer the question “where am I?” It needs to be large enough to clearly stand out on the website header while taking up as little room as possible to allow for other content that is variable and probably what the user is really looking to find. It needs to achieve maximum contrast with the background color so it is readable in the smallest space possible.
The area above or on the side of the logo may include user control elements for website access, registration and engagement, and internal website search. The website header may also include an integrated ad banner that may contain house ads or ads for third party products, events, or services. The bottom of the header could be the primary horizontal navigation bar, also known as the global navigation bar, which allows the user to choose the section of the website they wish to access. For complex websites, this primary navigation element is persistent across all website sections which might include a master homepage, open content blogs or portals, subscription websites, all manner of online stores and shops, plus the all-important My Account section, and About Us section. Needless to say, getting the sections right is no small process for a complex website.
Got an opinion about the top of your website?
Let us know whether you think the top of your website is best described as the website header, website nameplate, or website masthead. And while you’re at it, are there other elements you feel should be included in this all-important object that gets repeated on every page of your site, or do you feel we’ve included functionality that is inappropriate or unnecessary?
I do a great deal of translation work and I am often faced with the task of translating the title of the legal blurb (ownership, website design etc.) that is normally found at the back of a website. Is there a name for this in English?
Sue, do you mean the about page, privacy policy, or footer maybe?
Thank you Kiva. And, Jack, I agree there is a risk of designers wanting to show what they can do, rather than what is most effective. I would say that moving images and mini-movies often fall into that category. At the same time, there may be instances where they are effective. Even if one thinks it might work in their case, I would certainly want to test that sort of a device before fully committing to it.
One big no-no are headers incorporating moving images or even mini-movies. Mostly, they are both a waste of time and space. I think some web designers code to showcase their own talents, rather than to help sell their customer’s products or services.
The most common terminology I’ve come across is header, so that’s what I call it, but masthead works too. I like to keep it uncluttered and somewhat spacious (hard to do when you have to balance a bunch of things up there). You can take a look at my site about mindfulness to see for yourself.