Headers help readers find and parse the content they are searching for. These tips show how to make headers more effective and easier to identify.In this post I’d like to go over some quick and easy ways to improve the effectiveness of headers (site headers and content headers) in website design. Effective headers connect with a user faster, and help users understand the flow of content without much thought. These are not rules to live by, but definitely things to consider in the design process.
1. Make Headers Stick-Out with Contrast
Your headers need to appear separate from your content. Just as you underline or use different colors for links, your headers should appear unique. Use color, font weight, and font families to add contrast to your headers. It’s worth noting that underlines should be reserved for links.
2. Use Warmer Colors
“Warm colors are active, attention-grabbing and aggressive. They stimulate the emotions, motivate and seem to come forward off the screen or page.” —Pantone, Inc
Warmer colors catch the eye better than cooler ones. Warm colors are active, attention grabbing, and appear to come off the page while cooler colors retract into it. When possible, use warmer colors to gain your readers attention faster, and direct them to important content.
3. Prominence: Headers Should Be Big
The headers on MSNBC are heavily contrasted from content with warm colors, large type, and a different type face altogether.Make your headers big. Users know that when something is bigger, it’s more important. Consult a newspaper for a prime example of how headers should appear. The title of the newspaper is the most prominent, and as you progress down the page, headers typically become less prominent. In web design, we can visually accomplish this same effect by changing the size of headers while semantically we use the <h1> through <h6> tags.
4. Use Appropriate Titles
If you’re labeling a section of your website, make sure your header is titled appropriately. Don’t use confusing, trendy, or otherwise misleading titles. Your header should convey the who/what/when/where of the content it describes. The Content explains the why.
5. Be Concise!
Make your headers short. It’s OK to drop articles like “the” and “a” in headers as they can be assumed. Make your headers quickly and effectively highlight the most important information contained by them. Again, this is typically the Who, What, When, Where of the content.
What tips would you add to the list? Have you discovered any ways to improve headers or similar elements on your site?
Related Posts
Browse our Blog Archive »
Thanks for Supporting UX Booth
We are thankful for all our viewers' support.
We could not do this without you.
Comments Leave a comment
It took me a bit to realize you’re talking about content headers and not the header of the entire site. Once that clicked, I’m totally on board.
One other thing I’d point out: too many times designers fail to use proximity to group headers with their subordinate content. The header should be closer to what follows it than to what precedes it.
@Will Sansbury: Great point Will. On that same note, headers shouldn’t be kept to close to content they are not related to (for the same reasons).
Appreciate the tip
@Will Sansbury: Hear hear! I’ve always found this to be a big frustration on premade layouts/templates. Even if the colors and layout are good, the typography is still king. I think a good example of this is at Rein Henrich’s blog, http://reinh.com/
Excellent article. I have recently become a huge fan of your site and all your interesting posts. Quality is all I can say. Precise.
Nice tips here. Thank you.
Thanks for the useful tips.
I’m working on a site redesign right now so these tips are greatly appreciated.
@Andrew Maier: Abosuletly… when I’m looking at Wordpress templates to set up those sites-as-a-favor that I can’t seem to escape, typography is the most important element for me. I can tweak color and layout easily, but trying to retrofit good typography on a theme is a nightmare. At least for me.
Agreed with Will. I thought we were talking site headers, and so I was a bit thrown off for a while.
@Sean: Thanks Sean. I’ve tried to make it more clear in the first sentence, so I hope people catch on faster now: “In this post I’d like to go over some quick and easy ways to improve the effectiveness of headers (site headers and content headers) in website design.” Appreciate the feedback.
@Nokadota: It’s the little things, ya know? David’s been designing blogs for years, so he has a bit of an edge on me when it comes to how page copy flows best. For example, I didn’t think that warmer headers were better when designing UX Booth, can you tell?
@Will Sansbury: +1 for retrofitting typography fail.
Just call them sub-headers. Number 6, use plenty of them. I wrote a post about sub-headers a while back:
http://www.goodusability.co.uk/2008/10/sub-headers-are-navigation/
Keep it up guys.
Andrew: I think the color you chose for the headers works great with this site — everything else here has warm tones so these sub-headers stand out pretty well and complement the palette.
Good post.
@Andrew Maier: I agree with Dmitry. Besides, you’re far better with Color Schemes than I could ever hope to be. Also, the headers here are quite large making them pretty clear.
@David Hamill: Can’t seem to load it right now, but I’m sure it’s an excellent read. Will try again later.
Very helpful post but like others I thought you were talking about site headers at first.
@Dmitry: Wow, glad you think so! I think your taste in design is top notch, so I really appreciate your compliment
Aah the irony. An article about effective headlines in which the headline confuses the readers as to what the content is about.
Amen to this post.
Luuuuv your site design, btw!! Awesome. Esp. the img captions
Matty: I wasn’t confused given the content of the post, but I agree the choice of words may not be ideal. They’re not “headlines” either though, but “headings”. Headers and headlines sit on top of the page or article. Headings and sub-headings can go before anything else, like sections of an article. Replace headers with headings and confusion will be gone
To be fair matty the title captured my interest. The terminology in our domain is pretty intricate and people have different names for different things. So as far as I can see the title did its job.
I read the article, so did you :0)
“The header should be closer to what follows it than to what precedes it.”
Not sure this is so true…
The hierarchy is defined by the distances you define. The rule of the inverted pyramid is also valid for distances. Big distances for important matters (headers, title of a page), small distances for less important matters. Also, a good layout can work completely in black and white. Color will help to stand out if you use few colors only.
Printing industry is there as a living proof.
The hierarchy of a page is based on font size and empty space usage. I believe you could explain why is this empty space so important to build a good layout.
Apart from that, your remarks are valid for most of the situations
Really useful list! Thanks.
@Omat: Great insight Omat. My true intent it to simply make the case that Heading’s act as labels for their content. It’s important to make sure it doesn’t seem as if the heading is labeling the wrong information.
Leave a Comment
Trackbacks