5 More Tips to Make Website Headers More User Friendly

January 27th, 2009
Published on
January 27th, 2009
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?