User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
To my knowledge, to avoid distractions in reading flow underlines should be avoided in any circumstance, not just hyperlinks. BBC avoids coloring them at all and boldface them instead. However, the magazine Wired deliberately choose thick, light blue underlines to distinct them. Doesn't that contradict to the recommendations? Why is that?
I mean, the short-and-snarky version of this answer could be "because it's Wired". They've toned it down quite a bit over the years, but Wired was more or less founded on the principle of edgy design over readability -- compared to their early glory days of 10pt lime green text on a fluorescent pink background, this barely rates. They're not exactly who I'd look to as an exemplar of functional typography, in other words.
But even setting that history aside, this particular design decision is defensible. The blue underline is an obvious reference to the original underlined-blue-text indicator for hyperlinks. (You've got to indicate links somehow, and it's very reasonable to use an indicator that's been familiar since the early 1990s.) Meanwhile its thickness and its relatively light color both improve on readability compared to the barebones original -- aesthetically it reads more like a highlighter pen than a true underline.
To my knowledge, to avoid distractions in reading flow underlines should be avoided in any circumstance, not just hyperlinks.
This is somewhere between "overstated" and "simply incorrect". Use of underline for emphasis is generally discouraged in print material, because it's less readable than the other forms of typographic emphasis that are available. In online material, underlines for emphasis are to be avoided specifically because it interferes with the generally understood idiom that underlined text is a link.
Links aren't required to be underlined, but it's still widely recommended due to its familiarity and accessibility (everyone knows what it means, and the colorblind can still see it.) Even your BBC example still uses underlines on links within text -- headlines are expected to be clickable so get no indication other than hover state, but inline links get a light gray underline to distinguish them from bold-for-emphasis.
A lot of visual design decisions are made more for aesthetics than for accessibility, reading comprehension, and visual affordance. There is a shift towards a style in some sites, in which the links are using a border-bottom css property to emphasize the border thickness. So in your example the affordance to click is fairly strong because of the border, even if the text is indistinguishable.
Reading flow concerns from underlined text
You might be referring to the 2003 study: Comparing Link Marker Visualization Techniques – Changes in Reading Behavior
While this study does show that there's some hampered readability due to underlined links (especially with text with a high ratio of links embedded in it), there's still some counter research and accessibility concerns.
From Nielsen Norman: An older (but useful) guide to hyperlink best practices
Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.
An exception...
Assuming the link text is colored, it's not always absolutely necessary to underline it.
There are two main cases in which you can safely eliminate underlines: navigation menus and other lists of links. However, this is true only when the page design clearly indicates the area's function. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
From the W3: Success Criterion (SC) 1.4.1: Use of Color
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
From Usability.gov:
The pro:
Links are easy to find because users understand that underlined text means that it’s a link. The underlining draws their attention. When you remove the burdens for users, you prevent delays and speed access to desired content.
The con:
If you choose to not underline links, keep in mind that you want to avoid misleading cues. The signal to select a link should be unambiguous; it should also be used consistently throughout you site.
Besides visual clutter, there are times when underlined links may not be appropriate, such as in left navigation and in tabbed navigation. In a long list, especially bulleted ones, the overwhelming amount of text and underlining hampers readability. The visual clutter may be especially rampant on home pages that are link and text heavy, as well as on index pages and launch pages.
Baymard has some interesting articles not just on hyperlinks, but some options for highlighting text for emphasis vs. actual hyperlinks.
