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?
Ready to get real about your website's content? In this article, we'll take a look at Content Strategy; that amalgamation of strategic thinking, digital publishing, information architecture and editorial process. Readers will learn where and when to apply strategy, and how to start asking a lot of important questions.
During my years in an agency, I've seen the spectrum of tool experimentation. I've heard passionate user experience designers argue in favor (and equally as often, against) Axure, Balsamiq, UXPin, Invision, Photoshop, you name it. We've tried it. Usually, the outcome is something out of Goldilocks and the Three Bears: the tool is too robust, or too simplistic, too slow, or too buggy, and no one's happy.