5 Tips to Make Your Headings More User Friendly

Headers help reader find and parse the content they are searching for. These tips show how to make headers more effective and easier to identify.

5 Tips for more user friendly headersHeaders 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

Headers on MSNBCThe 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?

About the Author

David Leggett

David Leggett is a designer, developer, and builder of things. He currently resides as Director of Marketing and Design at Python Safety.

Related Articles

25 Comments

  • Will Sansbury Reply

    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.

  • David Leggett Reply

    @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 :)

  • Andrew Maier Reply

    @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/

  • Matt Reply

    Excellent article. I have recently become a huge fan of your site and all your interesting posts. Quality is all I can say. Precise.

  • Nokadota Reply

    I’m working on a site redesign right now so these tips are greatly appreciated.

  • Will Sansbury Reply

    @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. :)

  • Sean Reply

    Agreed with Will. I thought we were talking site headers, and so I was a bit thrown off for a while.

  • David Leggett Reply

    @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.

  • Andrew Maier Reply

    @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? :)

  • Dmitry Reply

    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.

  • David Leggett Reply

    @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.

  • Webbo Reply

    Very helpful post but like others I thought you were talking about site headers at first.

  • Andrew Maier Reply

    @Dmitry: Wow, glad you think so! I think your taste in design is top notch, so I really appreciate your compliment :)

  • Matty Reply

    Aah the irony. An article about effective headlines in which the headline confuses the readers as to what the content is about.

  • Casper Reply

    Amen to this post.
    Luuuuv your site design, btw!! Awesome. Esp. the img captions :)

  • Dmitry Reply

    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 :)

  • David Hamill Reply

    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)

  • Omat Reply

    “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 ;-)

  • David Leggett Reply

    @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.

  • iPhone Developers Reply

    I agree using Appropriate titles are really great way to make heading user friendly.

Leave a Comment on This Article