- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Usability Tips You Can Use: Designing Navigation with Lists
- Usability Tips You Can Use: Designing Forms for Keyboard Access
- Usability Tips You Can Use: Designing Flexible Layouts
- Usability Tips You Can Use: Designing Accessible Audio
- Designing Accessible Text—Part 1: Structure
- Designing Accessible Text—Part 2: Text Size
- Designing Accessible Text—Part 3: Color
- Designing Accessible Text—Part 4: Typeface
- Designing Usable Forms
- Designing Pages for Linear Access
- Designing Data Tables
- Working With Large Images
- Writing Link and Heading Text
- Writing Alternate Text for Images
- Cascading Style Sheets Part 1: Browser Styling
- Cascading Style Sheets Part 2: Shorthand
- Cascading Style Sheets Part 3: Media Style Sheets
- Cascading Style Sheets Part 4: Selective Printing
- Cascading Style Sheets Part 5: Styling for Print
- Cascading Style Sheets Part 6: Styling for Small-Screen Devices
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Writing Link and Heading Text
Last updated Oct 17, 2003.
By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers
Web use isn't called "surfing" just because it's exciting and fun and dangerous, with sharks lurking below the surface. On the web, "surfing" describes the way we navigate a vast ocean of information, skimming over the surface, searching for that one great wave to bring it on home. In the midst of this quick and superficial scanning, headings and links stand out as essential features of web topography, telling us where we are, what we will find there, and where we can go from here. The clarity of these structures influences the quality of our ride.
Links and headings have a big job to do. Because we single them out from other elements in the course of a quick page scan, they need to be able to stand on their own without the surrounding context of the page. In fact, some software provides direct access by isolating and allowing navigation among headings or links, or by providing a list containing just those elements. For links and headings to function effectively in this context, the text must be clear and descriptive, without unnecessary or irrelevant words, so that users can quickly determine whether the information they are seeking is on the page, and can make informed decisions about whether to follow links.
In this article, we focus on using clarity and key word positioning to facilitate skimming so that users aren't forced to slow their pace. Because we all know what happens when you slow down while surfing, right? You fall in.
One of the more common links on the web is "Click here." In fact, a Google search for the exact phrase "click here" returned 1,480,000,000 results—ouch! So, what's wrong with "click here," you ask? "Click here" is a holdover from way back when clicking hyperlinks was a new and unfamiliar mode of interaction, and the directive "click here" was used as a way of guiding user interaction. These days, we don't need encouragement to click links. Quite the opposite—we need to be persuaded to slow down long enough to take in the contents of a page. So, on the one hand, "click here" links are so yesterday. But a more pressing concern is that the phrase "click here" says nothing about the link destination.
As web users, we're pretty superficial—at least initially. Upon arriving at a page, we skim the surface for landmarks—images, links, and headings (see Figure 1). In this context, "click here" links are ineffectual as wayfinding markers because they encourage us to take a direction, but don’t offer any explanation of where we’ll end up.
Imagine exiting the highway and encountering a sign with multiple arrows pointing in different directions, each with the phrase "Go this way." You would need to follow each of the different routes to learn their destinations, and hope to hit on the one that gets you where you need to go. Similarly, upon encountering a "click here" link, you can either expand your view to the surrounding context, which might be something like "Click here for more information about tow-in surfing." Your other option is to follow the link in order to learn what is at the other end, but then you might wind up with Talking Heads Syndrome, where you click here, click there, click here, click there, and wind up somewhere totally unexpected, saying, "Well, how did I get here?"
Effective links are self-explanatory. Instead of "learn more," "click here," or "more information," they describe the content at the other end: "Learn more about tow-in surfing," for example. When writing link text, think of how the links will display in a link list (see Figure 2). Write for clarity, so that users know what they are committing to before activating a link.
Figure 2: The Links List in Home Page Reader isolates the links on a page and presents them in list format. Self-explanatory links work best when viewed this way, out of the page context.
Headings also play an important role in orienting users. Unlike links, which tell us where we can go, headings tell us where we are and what we will find there. Good headings provide a quick overview of the content they describe, and different heading levels outline the information structure of a page. Like links, headings should be self-explanatory—we should not have to read ahead to clarify the meaning of a heading. Also, some software uses headings to improve access to page content. JAWS, a popular screen reader application, allows navigation among headings and provides a navigable list of headings (see Figure 3). Descriptive headings work best in this context, as do headings that begin with key words, which leads us to another important aspect of writing link and heading text: key word positioning.
Figure 3: JAWS provides a list of headings, displayed along with their level in the information hierarchy. Here, the headings are displayed alphabetically, which illustrates the importance of starting headings with key words. (Note that "" appears before each heading because Wikipedia provides section edit functionality within the heading tag.)
Key Word Positioning
Headings and links need to function both individually and in the context of the page. These elements need to be categorical, in the sense that we need to be able access them as we would a directory or dictionary, skimming to find the word or phrase that best describes what we are seeking. The effectiveness of this process is largely guided by the location of key words.
When we’re looking at or listening to links and headings out of context (as in Figure 2 and Figure 3), it's clear that the order of words matters. Links and headings that begin with irrelevant words don’t scan as neatly as those that begin with descriptive words. For example, say you're interested in learning more about kneeboarding, and you're presented with the following link list:
- Learn more about bodyboarding
- Learn more about bodysurfing
- Learn more about kneeboarding
- Learn more about stand-up surfing
- Learn more about surf-skiing
You need to scan through each link phrase to find the link to kneeboarding. On the other hand, the following links begin with key words and are much easier to scan. Kneeboarding is easy to find since the list is presented alphabetically:
- Stand-up surfing
When writing text for links and headings, consider how these elements will appear as a list, out of the context of the page. Begin with key words so that users can get the gist of a link or heading without having to take in the complete phrase.
For more stylistic considerations for links and headings, and to understand how we read on the web, consult the following resources:
- Learn more about reading patterns from Jakob Nielsen's articles, How users read on the web and F-shaped pattern for reading web content.
- Read Writing effective link text, by Trenton Moss, for more about characteristics of effective and accessible links.
- Learn about general editorial considerations, including those related to headings and links, in the Editorial Style chapter of Web Style Guide, by Pat Lynch and yours truly.
- Check out the Editorial Style and Links chapters of my book, Access by Design: A Guide to Universal Usability for Web Designers, now also available online at Universal Usability.