June 30, 2015 | Cody Haro

Usability Best Practices: Self-Referencing Links


Share on Facebook Share on LinkedIn Share on Twitter

ForeSee’s usability group relies on a variety of knowledge resources to inform our understanding of the latest design trends and usability best practices. One of these sources is ForeSee’s cxReplay, which allows us to capture and recreate a visitor’s experience after they decide to take one of our surveys. cxReplay helps our clients better understand the web customer experience by adding visual context to their survey response data, but our usability group also benefits – we can draw upon thousands of hours of this data to identify common usability problems that often go unnoticed.

Recently, cxReplay has prompted us to reconsider an infrequently-cited usability guideline that address a little-known, yet pervasive problem called Self-Referential Clickability or Self-Referencing Links. This issue occurs when visitors select a link that reloads the page they are already viewing, such as in the example below:

Self-Referencing Links

[Figure 1: In this example, visitors are able to select the self-referencing Top Quality Tea global navigational link to reload the current page.]

Visitors use interface elements, such as headings, page content, and link labels, as digital sign posts to help them navigate within a site. Link labels in particular are vital elements that help visitors understand where they are and where they can go. When a visitor selects a self-referencing link with the expectation of being transported elsewhere, a momentary disconnect can occur between what the visitor expects to see and what they actually see after the page reloads. This moment can be disorienting as visitors ponder what, if anything, has changed.

To avoid this, we recommend that links that lead to the current page should be unlinked and displayed as a nonclickable label that is visually differentiated from surrounding links, as in the example below. This differentiation serves as a reference point that helps visitors understand where they are within a site.

[Figure 2: In this best practice example, the navigation menu includes a static, visually differentiated label to serve as an unlinked reference point for the visitor’s current location.]

[Figure 2: In this best practice example, the navigation menu includes a static, visually differentiated label to serve as an unlinked reference point for the visitor’s current location.]

Visualizing Self-Referencing Link Aggregate Behavior

While conducting cxReplay analysis, we often observe visitors selecting self-referencing links when they are already having difficulty finding specific information or when they are unsure of where to navigate – which often further compounds their navigational troubles, leading to decreased satisfaction with the website experience. After observing this behavior across a variety of different sites and industries, ForeSee’s usability group began to cite self-referencing links as an orientation issue in more of our usability reports.

In a recent discussion with one of our clients, I was asked why we would make that recommendation when so many of the Internet’s largest sites do not follow this guideline. While instances of Self-Referencing Links may seem benign when viewed on an individual level, observing real users click on them in cxReplay recordings and then watching the disorientation that results has convinced us of the importance of preventing this particular error when designing and evaluating a site’s navigational elements.

Perhaps the best evidence of this comes from the click heat maps that are generated within cxReplay. As seen below, an aggregate view of click behavior across 250 visits suggests a high number of clicks on the menu label leading to the current page. When considering this issue from an aggregate perspective, a seemingly minor problem is revealed to be much more problematic than once thought.

self referencing links

[Figure 3: This example shows an actual click heat map from a client’s site; however, to protect client confidentiality, a wireframe of a hypothetical site interface is shown below. Notice the high number of clicks on the Sales & Coupons link.]

The Importance of Error Prevention

Avoiding the use of self-referencing links is not a new concept. Its underlying principle is the commonly accepted design philosophy of error prevention. For example, this concept can be seen as an extension of the Japanese industrial design methodology known as Poka-Yoke, which was developed to prevent manufacturing mistakes by highlighting human error as it takes place. At a high level, the system should be designed to make mistakes impossible. An example of Poka-Yoke design can be seen in the varying diameters of fuel pump nozzles, which are sized to fit in either a diesel or unleaded gas tank; the variation in size prevents motorists from unwittingly filling their sedans with diesel fuel which would ruin a gasoline engine.

Error prevention is also a key tenet of Jakob Nielsen’s 10 Usability Heuristics, which have served as a set of guiding principles for usability evaluation since the mid-1990s. Nielsen writes, “Even better than good error messages is a careful design which prevents a problem from occurring in the first place.” This same idea applies to our self-referencing link guideline: rather than allowing visitors to slow themselves and possibly become disoriented, a site’s design should prevent visitors from making a redundant click before it happens.

Minimal Design Implications, More Satisfied Customers

Although it is impossible to design an interactive experience that entirely prevents visitors from making errors, it is nevertheless the duty of designers to craft systems that anticipate and prevent common mistakes before they occur. When clients ask why they should bother devoting resources to correct instances of self-referencing links, I often remind them of this responsibility, while also noting that it’s a rare opportunity to be able to improve the user experience at very little cost.

Learn more about how ForeSee’s Usability Services can help you create a better web or mobile customer experience here, or learn more about adding the power of visualization to your web or mobile customer experience analytics with ForeSee cxReplay here.

Categories: ForeSee Products

About the Author

As a Usability Analyst with ForeSee, Cody has worked with clients across a range of industries including retail, telecommunications, utilities, and healthcare. His work encompasses numerous usability audits, internal design projects, as well as a number of reports focused on Replay analysis. He graduated from the University of Michigan with a Master’s degree in Human-Computer Interaction and also holds a Bachelor’s degree from the University of Minnesota.

More by this author


Share on Facebook Share on LinkedIn Share on Twitter