Motive [Home].Glossary.


The Motive Web Design Glossary


Often shortened in conversation to ‘link’, the hyperlink is the core concept/technology that allows the web to operate.

A hyperlink connects one webpage to either;

Signifying a hyperlink

A hyperlink is typically signified by an underline.

For this reason, when formatting text for web display, avoid the use of an underline for emphasis. Instead, set content in a bold or italic/oblique variant of the body copy typeface.

A guide to writing hypertext

Only add an in-text link when it supports a likely task…

When to add in-text links

A link within the main content of a webpage (rather than as part of the navigation framework), is referred to as an in-text link.

An in-text link should only be added when it supports a likely task, given the context and content of the current webpage.

For example, in-text links may be appropriate when linking to:

Authors that are new to writing hypertext often fall into the trap of adding in-text links that are incidental or contrary to the purpose of the content. For example:

(A) The board of directors [destination: Board bios] were presented with a report on new initiatives that have seen an increase in market share. (excerpt from meeting minutes)

In example (A), the focus of the content is the meeting proceedings—the qualification and experience of the board members is incidental (it would be more appropriate to provide a link to the report).

(B) This section of the website does not contain information on New Zealand wildlife [destination: Info on New Zealand wildlife]. (excerpt from welcome text)

In example (B), linking to information on New Zealand wildlife is contrary to the intention of the sentence. If scanning the webpage, the user is likely to assume that the page does provide information on New Zealand wildlife.

Choosing link text

Links as in-text headings: Why you should avoid ‘click here’

As a user scans a webpage, links act as ‘in-text headings’, they help to describe content and orientate the user to the information space. Effective hyperlinks use words that succinctly describe the destination content. For example, compare the paragraphs below;

(C) Click here for The Motive Web Design Glossary. The glossary provides information on internet communication. For a web type guide click here, and for New Zealand and Pacific search engines and directories click here.

(D) Motive provides a number of online resources, including the Motive Web Design Glossary. The Resources section also features a web type guide and links to New Zealand and Pacific search engines and directories.

In example (C), scanning the link text does not provide meaningful cues as to the nature of the content, instead the reader is left with a vague compulsion to ‘click here’ (×3). In example (D), the link text describes the destination content, reading only the link text the reader will be able to decide whether this content (paragraph) is likely to provide ‘what they are looking for’.

Key term: ‘label’

In the nomenclature of information architecture, the textual content of a link is referred to as its label.

Prompts such as ‘click here’ draw unnecessary attention to how the web ‘works’—its mechanics. Although a technique favoured by used car salesmen (‘Look here’), reference to the mechanics (no pun intended) reminds the view/user of the medium and interrupts the flow of the communication. (The use of ‘click here’ as a call-to-action in banner advertising speaks more of the quality of banner design and a desire to capitialise on naive users than it does of usability best-practice.)

Do not presume…

Links are often provided to enable a user to quickly navigate within a webpage or between a series of webpages. These links include:

…[these labels] seem to presume to know how the reader browses the web…

In the interests of brevity these types of link are often truncated, resulting in labels that seem to presume to know how the reader browses the web; how they have linked to the current page; how they scan page content; or even a combination of the two, for example:

Of no fixed abode

Increasingly, users link to a webpage from a search engine results page, and may even be scrolled to the anchor nearest the keyword they have entered. Unless the link destination is generated programmatically, they may never have been to the top of the page, nor have come from wherever the in-page ‘return’ link is pointing to.

Omission of context also compromises usability, for example, the label ‘back to top’ may be variously interpreted as linking to:

Trigger words

An additional issue with the terms ‘back’ and ‘forward’ is that these word are used in toolbar navigation for options that step the user through their browsing history. In particular, ‘back’ is a powerful ‘trigger’ word for less-confident users (as it is synonymous with ‘the known’).

Navigation links that use trigger words are more likely to be conflated with the function of the corresponding toolbar option, i.e. the user may expect that the in-page ‘Back’ link will step them through their browsing history.

Ideally use labels that clearly describe the destination, e.g.

Hypertext and sentence structure

The ‘click-here plague’ can partially be attributed to the structure (syntax) of written language where a sentence may begin with a subject/object (noun) and conclude with a description (adjective), for example:

(E) The Motive Web Design Glossary is informative and entertaining.

‘The Motive Web Design Glossary’ is the subject, and it is described with the adjectives ‘informative’ and ‘entertaining’.

When a hyperlink is added, the sentence changes from a (passive) description to an active invitation (to click):

(F) The Motive Web Design Glossary is informative and entertaining.

Without restructuring the sentence, a user following the above link will affect the cognitive equivalent of cutting the speaker off mid-sentence. To support more courteous behaviour, the sentence can be restructured, to begin with description and conclude with the object:

(G) For an informative and entertaining insight into internet communication, see The Motive Web Design Glossary.

This structure enables the reader make an informed decision to follow the hyperlink, without re-reading the sentence.

Related terms: anchor, call-to-action, granularity, HTML-text, information foraging, linking, mine-sweeping, navigation, reciprocal link, scanning.


Motive Web Design Glossary Trivia