5 More Tips to Make Website Headers More User Friendly

In this post, we revisit what it is that makes a heading more user friendly, and why headings play an important role in the use of any website.

Let’s revisit that list for crafting user friendly headings.

My recent post, 5 Tips to Make Your Headings More User Friendly, was well received by the UX Community. Given the feedback from our viewers I think it’s time to revisit the topic and explore more ways to make headings more usable.

1. Headings Should be Semantically Correct

Don’t skip from an H1 to an H6. There is a reason they are numbered.

An H1 heading is the most important, and subsequent headings are each less important than the previous. On a styled website, there may be no way to visually distinguish these headings, but search engines, feed readers, screen readers, and users with stylesheets disabled don’t read your pages the same way.

2. Be Consistent

Headings can have lots of different styles, and still be quickly identified as headings. The important thing is that headings on the same page (or site for that matter) appear drastically different from one another. Remember, headings help users quickly scan through content. Headings are in a way used like graphical cues that let the reader know to pause and read before continuing again.

Introducing new styles can act more like a giant stop sign, which may cause the reader to stop and rescan the previous material to see if they missed something.

3. Position Headings Close to Content

The positioning of your headings is very important. Readers will associate headings in close proximity to content to be related to that information. Some publications such as newspapers will often go as far as dividing separate pieces of information with borders and other graphical elements. Typically, having the content that follows a heading closer than the content preceeding it will make it easier for a viewer to parse information, although there are certainly exceptions (for instance, large white spaces between a heading and content may define it as a more important element).

4. Divide From Unrelated Content

Like mentioned in the previous point, don’t let your headings become associated with the wrong content. Make sure to clearly show what information a header is associated with.

And on a similar note, make sure your headings are each unique from one another. When a user scans a page, they typically will have a few things in mind that they are looking for. If there are similarily worded headings, a user may have trouble distinguishing them.

5. Start with Key Words

Your headings should begin with words that quickly capture users attention. Not because it helps with “Search Engine Optimization” (*shudder*) or any of that hogwash, but because users will find what they’re looking for quicker.

This is actually a pretty basic principle for all writing. The most important information goes first. It helps readers make decisions faster for whether or not they will continue reading.

Thanks so much for all your suggestions and feedback last time round. Is there anything else you’d like to add?

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

22 Comments

  • David Reply

    I find it to be a constant battle between usability and SEO. While you want your site to be easy to read and understand, you also want to satisfy that most important usability rule of making sure your site is ‘findable’ in the search engines.

    Am I wrong to say that SEO plays a large part in usability. Who’s going to use your site, if they never get to it in the first place?

  • Aaron Irizarry Reply

    Good points David.
    Great reminders, not to mention good foundational knowledge. I am going to be sharing these with a couple of the young web guys at work.

    Aaron I

  • David Hamill Reply

    The most important thing is that it should be obvious what the paragraph below is saying just by reading the header. This article is a perfect example.

  • David Leggett Reply

    @David: In my opinion, SEO is a dying trend. I’m a strong proponent for the concept of UO (User Optimization) over the “strategies” and “tricks” of SEO. UO is basically the idea that a website that caters to users will be discovered through direct traffic, referrals and organic means such as search engines. The reason a site should be discovered is because it answers a question or need of a user. Search Engines are constantly optimizing their system to provide better answers and weed out sites that employ sneaky tactics to find their way to the top.

    In short, a site optimized well for the user that provides the best solution for a need is the perfect candidate for a page capable of being discovered in the long run.

    I’ve touched on this a bit in the past if you’d like to read through “Are You Losing Traffic from Poor Findability?

  • Nokadota Reply

    @Leggett : I thought I was the only one who thought that. I put the SEO stuff as a kind of sell-point on my portfolio but after I did, I felt kinda weird about it. I mean, it really isn’t as serious anymore and like you said, search engines are constantly changing and improving to match what people want.

    The header of this blog is a clear indication of proof that this is an article to pay attention to.

  • Sketchplanet Owner Reply

    Just to point out Number 1 with Headings, this actual article doesn’t employ this rule ;(

    Your H2 Related Posts, then go to the section with H5 links 5 Tips to Make……., missing out H3 and H4/

  • Andrew Maier Reply

    @Sketchplanet Owner: That’s very astute of you, Sketchplanet Owner. It’s actually a very interesting question (as are most semantic questions). How do you determine the headings for related content? Obviously, it needs something that separates it from the primary content. For that reason, we chose an H2, the same level as the article title. I didn’t think that any of the related articles, however, were more important than the body of the article itself. Each article makes use of H3, H4, and possibly H5 tags. Using this logic I decided to place their “weight” in a similar fashion. Related articles are just about as “weighty” as the lowest level heading to appear in an article I think. What are your thoughts?

  • Geoserv Reply

    Very interesting article, I especially liked the part about it being focused on the user and not the search engine as most of these articles tend to beat into our heads that we need to focus on the SEO side of things.

    Good read.

  • Xtence Reply

    It’s allways fascinating to built a site with both SEO and UO in mind, i go for UO, especially because it doesnt harm the SEO bit too much, keep in in the middle, be findable and then keep the visitors!
    Good article.

  • RaSh Reply

    Really nice tips. I try and follow most of the in my headers :)

    As for SEO vs UO, I’ll always go with UO. I think the SEO tips are too over hyped, it’s a good design & good content that finally matters.

  • Sketchplanet Owner Reply

    @Andrew, My thinking isn’t as complex as yours ;) but I do have a few follow up comments, currently:
    h1 = uxbooth

    Now since H1 is the most important, perhaps “5 More Tips to Make…” should be H1, as ranking for Uxbooth should be really placed on the homepage, sitemap and/or About us pages?

    Now H2 is free, so perhaps this could be the “1. Headings Should be…”

    I’d actually change “Related Posts” to the weight of Bold instead of H2, then change the current H5 links “5 Tips to Make Your Headings…” to H2 with different id’s.

    I’d then probably add H3-H3 on the right hand side sidebar too.

  • David Dashifen Kees Reply

    @Nokadota, @Leggett
    Tag me for a third that sees SEO as a secondary concern. I have clients that ask how they can get higher Google page rankings, for example, and by focusing on their content, valid/semantic HTML, etc. and targeted local advertising (they’re usually not large clients), they often find a far better return on their investment (in me) than they would in a strong focus on SEO, I think.

  • Helen Reply

    Everything would be easier and consistent if we used h1-h6 like we use headlines in scientific texts, beginning with the general (h1) down to the most specific (h6). But this means that the page title agrees with h6 rather than h1 which is recommended so often. What I would like to have is a h0-headline marking sections that don’t fit to the topic of the page, e.g. hints, explanations and advertisment. h0 would not be referenced by search engines.

  • Sketchplanet Owner Reply

    Would h1’s with id’s or classes be of a lesser value than a straight (h1), this might solve the problem of ranking.

  • Art Reply

    another superb post :) thank u . one question if i dont have a place to use h1 in my page can i like use it and comment it out. will it help in SEO? i mean will google get it?

  • Daina Reply

    If you are using WordPress you can install all in one seo plugin which allows you to set your search engine title as the seo friendly version and your displayed title to the one you want the actual visible article on the site to read.

    You can also program custom seo fields into most CMS’s. Just have to find the plugin, code, or programmer to do it.

Leave a Comment on This Article