Site Usability nitpick -- Hyperlinks should be underlined

[DaveC426913]

This came up in my job today (UXP). Never thought to raise it here on PF till now.

Hyperlinks really should be underlined at all times. PF only underlines them when they are rolled over.

1. Colour alone (especially dark blue/purple) makes it difficult to spot a hyperlink in a large block of text (or even a small one).
2. Not everyone can see perfectly. Even if they don't suffer from colour deficiency, not everyone has the visual acuity to distinguish two very close shades of text.
3. Hover actions are not much of a solution, since they are not easily 'discoverable'. One must literally run one's mouse over the specific text to see that it's a link.
4. You can't hover over text on a mobile device.

While it's true that, in general, there are ways individual users can manually mitigate this (say, by switching to a high contrast or accessibility-facilitating theme), they shouldn't really have to, should they?

Accessibility has made a big comeback since the Wild West of the 20th century internet. Our population is aging sufficiently that accessibility should be the default, not the exception.

Currently, I force underlining using the text styling tool.

IMHO. Thoughts?

 

[berkeman]

Testing: www.physicsforums.com

 

[Frabjous]

Testing: www.physicsforums.com

I press ‘Testing:’ and nothing happens

 

[DaveC426913]

I do not see an underline - at least, not on my phone.

 

[berkeman]

I do not see an underline - at least, not on my phone.

I looked around in the Admin area for a setting for the formatting of URLs, but haven't found it yet. We may need @Greg Bernhardt to return from a trip in about a week to see if he can change that.

 

[phinds]

I do not see an underline - at least, not on my phone.

How about when you mouse-over it? That's when I see it on my computer.

 

[phinds]

On my phone I can't mouse over but I see the underline when I move the cursor to that position and I get the link when I click on it. So I don't really see your problem, dave

 

[Borek]

I believe underline showing up when you hover mouse them is a de facto standard, so changing it doesn't sound good. You can always make links bolded, to stand out from the text.

 

[DaveC426913]

I believe underline showing up when you hover mouse them is a de facto standard, so changing it doesn't sound good.

The standard is

• links are underlined
• unvisited links are blue
• visited links are purple
• active (hover) links are red

As to what the de facto standard is, that's arguable - nonetheless that's what we're fighting against. Whether or not hover-only-underlining is done regularly, it should not be.

You can always make links bolded, to stand out from the text.

Standards are standard for a reason. The indicator for "I am a link" is that it is underlined.

It's why we don't have green stop signs at intersections, oremojis at railroad crossings.

 

[DaveC426913]

How about when you mouse-over it? That's when I see it on my computer.

That is how it has been working up until now - as I explained in the opening post.

It is not good design.

On my phone I can't mouse over but I see the underline when I move the cursor to that position and I get the link when I click on it. So I don't really see your problem, dave

I explained the reasoning in great detail in the opening post.

Hover actions are not much of a solution, since they are not easily 'discoverable'. One must literally run one's mouse over the specific text to see that it's a link.

IOW: a control that only shows up when you decide to actively go hunting for it is a pretty badly-designed control.


Perhaps part of the problem is that not all links look like URLs. If that were buried in a large block of text, and you didn't have 20/20 vision, would you know it's a link?

This is what I see, BTW:

 

[phinds]

IOW: a control that only shows up when you decide to actively go hunting for it is a pretty badly-designed control.

Well, no argument there. Sorry I glossed over your explanation.

 

[berkeman]

One must literally run one's mouse over the specific text to see that it's a link.

IOW: a control that only shows up when you decide to actively go hunting for it is a pretty badly-designed control.

You mean like these things at the bottom of each post?:
"Report Edit Like Quote Reply"

I agree that it's obnoxious to have stuff mostly hidden until you mouse over it, but it seems to be the way GUIs have gone in the last decade or so. I guess it is in the quest for a "cleaner" look, but it sure makes it hard for folks with even small vision issues to navigate (myself included).

 

[TensorCalculus]

Hmm...
I agree with @DaveC426913 that ideally PF should follow the standards (which are the standards that he highlighted above, underlined links, blue if unvisited etc etc) however I've never really seen the lack of underlining on the links to be a massive problem: I gave it a shot and took off my glasses and tried to find all of the links in this thread (for reference I have an average of -4.5 eyesight across both eyes, and it was at a distance so that I can't make out the Physics Forums written in the top left corner, even if I squint) and I didn't find that I had much problem: the different colour made it quite apparent what was a link and what was not (even when the text was extremely, extremely blurry). I'm not sure how much of a difference an underline would make. Maybe to people with eyesight issues that aren't myopia the story is different, I don't know.

I think that while the change would be nice and it would be better to have it that way, it's maybe not specifically necessary? Like if it would take a lot of effort to change the styling (though.. it should just be a modification of a couple of lines of CSS hopefully), or if the new links styling looks weird aesthetically, then maybe the change is not worth it? IMO.

 

[DaveE]

Perhaps part of the problem is that not all links look like URLs. If that were buried in a large block of text, and you didn't have 20/20 vision, would you know it's a link?

Oops! Now I think I do this too much. Thanks for the tip.

It could be like this:
Hyperlink formatting information (https://webaim.org/techniques/hypertext/link_text) is on the web.

Or this:
Hyperlink formatting information (link here) is on the web.
For the really long ones.

Which is harder to read than this:
Hyperlink formatting information is on the web.
But easier to understand or use.

 

[DaveC426913]

You mean like these things at the bottom of each post?:
"Report Edit Like Quote Reply"

No, I mean in user posts.

I agree that it's obnoxious to have stuff mostly hidden until you mouse over it, but it seems to be the way GUIs have gone in the last decade or so. I guess it is in the quest for a "cleaner" look, but it sure makes it hard for folks with even small vision issues to navigate (myself included).

It's fine when a bit of text is obviously suiting a purpose:

But look at this example of a post that has catalyzed this thread:

Y'all do see that two links in that post, right?


(Originally, in the example post, I had forced the link underlines manually using the text editing tool, but now that this debate about accessibility is into double digit posts, I've rolled the example post back to the default state, just out of spite.)

 

[TensorCalculus]

Hmm...
I agree with @DaveC426913 that ideally PF should follow the standards (which are the standards that he highlighted above, underlined links, blue if unvisited etc etc) however I've never really seen the lack of underlining on the links to be a massive problem: I gave it a shot and took off my glasses and tried to find all of the links in this thread (for reference I have an average of -4.5 eyesight across both eyes, and it was at a distance so that I can't make out the Physics Forums written in the top left corner, even if I squint) and I didn't find that I had much problem: the different colour made it quite apparent what was a link and what was not (even when the text was extremely, extremely blurry). I'm not sure how much of a difference an underline would make. Maybe to people with eyesight issues that aren't myopia the story is different, I don't know.

I think that while the change would be nice and it would be better to have it that way, it's maybe not specifically necessary? Like if it would take a lot of effort to change the styling (though.. it should just be a modification of a couple of lines of CSS hopefully), or if the new links styling looks weird aesthetically, then maybe the change is not worth it? IMO.

I take back what I said: in dark mode I can see the links perfectly fine but I've just tried light mode because that's what people seem to be using and I couldn't tell where the links were at all, I had to use my mouse to find them.
But then again without my glasses my eyesight is so bad that I couldn't read any of the text at all anyway. Not even the big headers.

 

[DaveC426913]

Oops! Now I think I do this too much. Thanks for the tip.

You're not doing anything wrong. You're supposed to embed links in your text.

And you shouldn't need to clutter every link up with explanatory text that it's a link.

This is clutter - it makes reading difficult (imagine it in a longer, descriptive stream of text):

Hyperlink formatting information (https://webaim.org/techniques/hypertext/link_text) is on the web.

Or this:
Hyperlink formatting information (link here) is on the web.
For the really long ones.

This is the "correct" way to embed links in blocks of text:

Which is harder to read than this:
Hyperlink formatting information is on the web.
But easier to understand or use.

Note: that may not be the best example to show the problem/solution. Imagine though, if you were writing out a long block of text that had a number of links in it. If the links are too subtle, you can't tell what is a link and what isn't - and not without rolling over them (if you can). The intended functionality here is not have to add additional text that (link here) interrupts the reading. Let the text flow; but make in-text links obvious for those to want to follow them.

This is the way.

 

[DaveC426913]

I take back what I said: in dark mode I can see the links perfectly fine

Thank you!

This highlights another very important reason for using standards and for not merely going on your own experience.


There are as many user circumstances as there are users. It never even occurred to me about dark mode vs. light mode as just one more example.

Standards take into consideration a far wider range of user personas, habits, experiences circumstances than any one person. They have been thought through to cover as much of the real world as practical, not just you or I.

That's a lot better than "I don't see anything wrong on my screen, so I guess no one else does either."

 

[DaveE]

You're not doing anything wrong. You're supposed to embed links in your text.

And you shouldn't need to clutter every link up with explanatory text that it's a link.

Also, I kind of skipped over your point that some users force the underline by formatting their fonts. I guess that's a pretty good user workaround when you aren't in control. Still it is a slight PITA for the typist.

 

[sbrothy]

EDIT: Although it's funny that a mouse-over doesn't provide any info.

I try to use the URL tag whenever possible. Does it make a difference or is it more basic than that? I mean if a URL is difficult to spot there's not much you can do about it as users can customize how it looks at their end. e.g.:

Clarivate

 

[sbrothy]

[...]

1. You can't hover over text on a mobile device.

[...]

IMHO. Thoughts?

On my phone (old IPhone 4) I press and hold the link and the hover text is shown.

 

[robphy]

At the recent AAPT meeting, one of the updates to Glowscript/WebVPython is an improvement to better support accessibility.

possibly useful:

• https://webaim.org/articles/
• https://www.w3.org/TR/WCAG21/
• https://www.w3.org/WAI/test-evaluate/tools/list/ ( Web Accessibility Evaluation Tools List )

 

[DaveC426913]

I try to use the URL tag whenever possible. Does it make a difference or is it more basic than that?

Do you mean
[ URL = 'this' ]BBcode tag?[ /URL ]

Yes. It ought to be underlined.

I mean if a URL is difficult to spot there's not much you can do about it as users can customize how it looks at their end. e.g.:

You're missing the point.

That's kind of like saying "if people drown when they don't wear life jackets, there's not much you can do about it, since people can always just take off their life jackets".

Yes, there is. You set the standard. You stick to the standard at your end. If individual users want to customize their own experience, they are free to do so.

 

[DaveC426913]

I have just come from Wikipedia. They use the same style as PF: they only underline links on rollover.

Shame on them.

 

[Borek]

I have just come from Wikipedia. They use the same style as PF: they only underline links on rollover.

Shame on them.

Add to that google search results. Told you lack of underline has become a de facto standard.

Yes, back in the day it was different. It no longer is.

 

[Dale]

The standard is

• links are underlined
• unvisited links are blue
• visited links are purple
• active (hover) links are red

I am not sure that is the de-facto standard.

Here is a random google page:

I had my mouse over "Tournament draw", so this is the same behavior at PF.

I had my mouse over "random", so again this is the same behavior as at PF.

Standards are standard for a reason. The indicator for "I am a link" is that it is underlined.

It's why we don't have green stop signs at intersections, oremojis at railroad crossings

I agree with this, but I don't think the de-facto standards are actually what you say they are. If google and wikipedia are both following the same standard then I think that is probably the de-facto standard. And I think that PF is already following that.

I think what you really want is to change the de-facto standards. Personally, I don’t like all the underlining and I prefer the current de facto standard.

BTW, green stop signs are not de-facto standards, they are legally codified standards. There are also published industry standards, which are somewhere in-between de-facto and legally codified standards. I wonder if web designers have published industry standards.

Edit: I see others have already made this point.

 

[sbrothy]

I have just come from Wikipedia. They use the same style as PF: they only underline links on rollover.

Shame on them.

You're right, I didn't get it before getting involved. Shame on me.

It really seems to be grinding your gears though! Watch your blood pressure and remember that the internet is basically anarchy. I think there's an XKCD strip about insisting on standards on the net. I'll see if I cant dig it up...



EDIT: I thought it was funnier. I wouldn't be surprised if there were more than one considering the author:

XKCD - Standards

 

[AlexB23]

And this blue text looks like a link, but it is actually from the color picker.

 

[sbrothy]

And this blue text looks like a link, but it is actually from the color picker.

Yes, by all means throw a wrench in the gears.

 

[DaveC426913]

Personally, I don’t like all the underlining and I prefer the current de facto standard.

Right, but what you, or I, or any individual user prefers is irrelevant.

Un-underlined links are hostile design; they are great for those with excellent vision and viewing conditions, but hurt everyone else.