On the UI of links

Here are three sentences - identical text, but with different linking styles:

• The quick brown fox jumps over the lazy dog.

• The quick brown fox jumps over the lazy dog.

• The quick brown fox jumps over the lazy dog.

All quite different. The final line shows the current Wikipedia style: a compromise between the extremes of the first two. It’s pretty much the same for every other web page out there: a compromise between readability of the textual content verses the findability of the hyperlinks.

I propose that this is a false dilemma; possibly coming from an implicit belief that the page is static when viewing lots of text.

I think there are three states a user (and thus the page) should be in:

1. Reading content, not interested in links at all.
2. Looking for links.
3. Checking the link is the right one.

Each transition between the user’s state should be accompanied by a change in visuals. For example, the text below decorates links with underlines when the mouse hovers over the link (states 2 ↔ 3).

• The quick brown fox jumps over the lazy dog.

In addition, all the other links on this website should also change visuals between states 1 ↔ 2. If the user moves, the links appear. If the user stays still for three seconds, the links fade away. Interestingly, even though the fade is fast, the visuals just look wrong if it’s not there.

For reference, I’ve implemented the 1 ↔ 2 state change as a small javascript file links.js and stylesheet links.css.