Pattern 45: Anchors away
 AKA: Avoid anchors, Hallo sailor, Anchors aweigh

Back to Diagram 1 - Getting started Back to Diagram 2 - Useability Back to Diagram 3 - Adding detail Back to Diagram 4 - Workflow/security

View sensitizing image - tbd

You are designing part of a site where the content is highly interrelated or consists of a long, structured document. You discovered this when you CLASSIFIED YOUR SITE (11). You already DESIGN PAGES FOR SCANNING (43) and use SHORT TEXTS (44).

How does one balance ease of maintenance of the content with ease of navigation and usability?

Therefore

Classify each page according to whether its content is logically separable or not. If it is, turn it into many smaller pages and remove all anchors from the site.

Use SEPARATE PRINT PAGES (47) if the user may need to print or copy some of your content. Large pages broken only by anchors make it harder to provide separate print pages.

Contributors and sources
Gareth Sylvester-Bradley, Alan Cameron Wills

Discussion - forces - known uses

Coherent material, such as a software development process guide, is best organized as a single page/document. This makes it easier to maintain. It makes printing easier.

However, jumping around within a page upsets the browser’s history. Also, if an anchor is already visible, the user may see no change when he clicks – leading to confusion.

Designers have added internal anchors to break up and organize long documents. This assists browsing these pages but may confuse users. Some users, for example, expect links to take them to different pages always, due to PRIMING AND INTERFERENCE (18) effects such as rehearsal.

Example
Many commercial instantiations of the OPEN Process by Trireme’s clients are delivered as a single page with anchors. The motivation is ease of maintenance. A single diagram with hot spots is used to navigate among activity/task lists for different workflows/activities. However, experience shows that maintainability is purchased at the price of usability. It might be better to make the diagram and the different task lists into separate pages.

In general, if in doubt, don’t do this:
<HTML>
<body>
<a name="top"/> Go to the top <a/>
<! – – ... – –>
<a href="#top"/>
</body>
</HTML>

Browse the language What is Wu? Look at an example pattern sequence Structure of the patterns
Comment on Wu Contributors Return to TriReme home page Links to related sites