A good heading requires a combination of visual design, content strategy, and accessibility. It helps readers understand the flow of content on the page, helps people skim for relevant information, and grabs attention.
Let’s revisit that list for crafting user friendly headings.
My recent post, 5 Tips to Make Your Headings More User Friendly, explored 5 visual ways to improve headings. Given the feedback from readers, I’m now going to revisit the topic and explore more ways to make headings usable, accessible, and effective.
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 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 a heading 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 I mentioned in the previous point, don’t let 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 each heading is unique. 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
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 of the suggestions and feedback. Is there anything else you’d like to add?