Making Links usable again

[ergophobe]

In the early days of the web, we all knew how to find links on a page - blue text with an underline was a link. You could argue, as some human factors experts did, that this was a poor choice - blue is not the best color, underlines conflict sometimes with filenames_using_underscores and so on. But it was clear.

And for many years now, the vogue has been to make links practically impossible to find. I actually run some sites that I did not design where I basically cannot see the links (I have a minor color impairment, but I've asked others and the links are just very hard to see; impossible with some monitor settings).

Lately, I've seen some sites that make links really obvious. Big thick underlines and changing the background (not the font color) on hover. Wired is one example. I find myself saying "Yes. Thank you!"

It makes me wonder - are we seeing a rollback where for a long time a graphic designer ruled the design with no input from a usability expert or UX/UI designer to where people are calling "Enough!" on non-functional design?

[keyplyr]

I've always designed links with CSS hover colour for aesthetics, instead of underline or non-hover colour which I though of as ugly and disruptive.

Useability vrs aesthetics has always been a conflict, but IMO I found the compromise best suited for my design and my users.

Probably different approaches depending on audience. Don't know about a trend other than the internet diversifying.

[graeme_p]

The internet diversifying is a bad thing. Different approaches for different audiences is a bad thing. Usability depends on convention.

The one think that is still universally understood to be a link is blue underlined text, so when in doubt, use it.

The problem is that (graphic) designers and site owners care more about aesthetics than usability, and they do not understand that they are making life harder for their users.

[keyplyr]

Disagree... diversity is not a "bad" thing, although I fully support your right to feel that way. No saying usability standards should be forgotten, just updated to better serve a changing and diverse audience.

One thing consistent about the internet - it's alway changing. It will never become archaic like things forgotten in some museum. It's strength is it's currency, it's ability to change.

[graeme_p]

Diverstiy in content, functionality, etc., I agree

Diversity in UI, I disagree. It is just another way of saying inconsistent. UI inconsistency is a bad thing. That is why human interface guidelines exist for so many platforms, and people complain when applications do not follow their desktop settings. UI changes should occur when required by new functionality and should be slow, should change in a consistent direction.

In the specific case of the UI of the web, it should change in the browser, so users know what to expect, not because each site does their own thing. A great example of a good change is how mobile browsers deal with <select>. Entirely different from desktop, or anything that came before, but consistent across sites to any user of the browser.

[keyplyr]

I think you may be arguing a point I didn't make :)

I never block browser settings or UI standards.

[jimh009]

I'm old school, I guess. I still believe that all links should be blue. Amazon uses it. Google uses it. Yahoo uses it. So why shouldn't I? I've visited far too many sites, only to go on some great "link hunt," which isn't much fun.

I also still use "red" as a hover color, although with touch screen devices that is less important now.

However, I have grasped the future just a little bit and no longer feel compelled to underline links. Now they are just in blue (although often in bold, but not always).

[graeme_p]

Very possibly :) My criterion is that links should be immediately identifiable to someone who is not particularly savvy and has not seen the site before.

What is less clear cut is what that needs. I think blue link text is ideal. I do not think it is necessary for menus that are clearly navigation, but everywhere else it is the standard.

[tangor]

Menu links = GUI/app-like appearance

Body links are (I believe) what is under discussion. In all cases the TEXT of the link should be legible. The variants I've seen are italic, bold, blue, underline, hover background, static background, with future combinations of all the above. The experiments in link COLOR do not seem to last, eventually returning to blue, though sometimes a darker blue, or lighter.

On one site I tested links as SMALL CAPS, blue, underlined. yellow hover, and was very pleased with how the users responded. I think I'll be trying that out on other sites as well.

[ergophobe]

Body links are (I believe) what is under discussion

Correct. I made that post at 1am after a long day of... stuff.

I am seeing the pattern I'm talking about all over. Today I noticed it on The Gates Notes - [gatesnotes.com...]

Here's a JS Fiddle based on the Gates version
[jsfiddle.net...]

This is not simply that links are blue (in not all cases is this true). It's that the underlining is REALLY prominent and obvious on both mobile and desktop. Links are usually styled in this pattern with something like this (this comes from The Gates Notes -- Wired is similar)

.articleContent a {
  border-bottom: 0 solid #55acee;
  box-shadow: inset 0 -5px 0 #55acee;
  color: inherit;
  -webkit-transition: background .15s cubic-bezier(0.33,0.66,0.66,1);
  transition: background .15s cubic-bezier(0.33,0.66,0.66,1);
}

hover colour for aesthetics, instead of underline or non-hover colour which I thought of as ugly and disruptive.

As I read that, your links would look like text until someone hovers. Surely that's not what you're suggesting?

link is blue underlined text

Yes, but the pattern I'm talking about sets text-decoration:none so the default system underline (which is small and often ugly) and replaces it with a bolder, much more prominent underline using border and box-shadow and such. Also, the underline and the text is not necessarily the same color. So on The Gates Notes, the *underline* is blue, but the text is black.

On every site I've seen it on, I've found it *much* easier to find the links, but at the same time more aesthetic. I haven't tested it, of course, but I think it's an interesting new design pattern (at least new to me) and I find it effective.

links should be immediately identifiable

I think that's the key - if you vary the UI standard, make that variation adhere to known standards to the extent that graeme_p's standard is upheld, but if you can uphold that standard and *improve* it, that's a win.

What drives me nuts is the number of sites where some designer is so stuck on his/her elegant aesthetic that I can't find the links! I can't count how many sites I have come across where the only way to find links is to hover over all sort of words that might conceivably link. I agree that the default typography in all browser/OS combos I know of is ugly and it's even worse for links.

This pattern allows for nice type while still making sure that the links are immediately recognizable as such (of course those are both subjective judgements, though the second one could be tested easily).

I tested links as SMALL CAPS, blue, underlined. yellow hover,

This is a similar idea - it doesn't violate the UI standard, but it does offer a bit of extra help in locating links.

[tangor]

What I don't like that some have tried, is changing the font size on hover. That just jars me.

[keyplyr]

So all I do is *add* hover colour. I let the user determine Accessibility and Usability respective of their browser settings (as it should be IMO.) The links are almost always blue and underlined but I don't force that on the end user.

[ergophobe]

>>changing the font size on hover

That creates all sorts of typographic issues.

>>I don't force that

Got it.

[piatkow]

It's the visitor's browser not mine, I don't try and override their settings. Less work for me and easier for the visitor.

The easier it is for the visitor the more likely it is that I will make a sale.

[ergophobe]

So then you don't set fonts, font size, line height, color, padding, margins, or anything because those are already handled by the browser default stylesheet?

[JAB Creations]

I've been criticized a lot in the past for too much emphasis on functionality and not enough on aesthetics. Regardless of the themes I've made I've always made something of an effort to ensure anchors are visibly different and especially :focus and :hover pseudo-selectors are set and very apparent.

That being said I immediately thought a nice compromise is to add a CSS border-bottom using RGBA and a thicker border-width; by making the border-bottom thick though reasonably transparent it is possible to change the color though still catch the user's eye. However a lot of sites don't use the boring white background / black text. One thing I have been doing is adding a background-color to anchors regardless of whether or not they are a[target='_blank'] in CSS. For those a[target='_blank'] links I use CSS content with a Unicode character to remove yet one more HTTP request; performance and usability. There are things that don't feel right such as making the text bold / italics, that's kind of lazy and doesn't stand out or make sense in the context of syntax and implied meaning for search engines. The key to doing making something aesthetically pleasing is to apply something like RGBA as a background-color lightly, it doesn't need to have as much contrast as a volcano and an ice berg.

For the older folks around, it's time to get out of your comfort zone. The the younger folks around, it's time to stop Loony-tooning off the edge of cliffs. Geez, balance isn't really that difficult!

John

[keyplyr]

So then you don't set fonts, font size, line height, color, padding, margins, or anything because those are already handled by the browser default stylesheet?

There's always a compromise... especially with mobile responsive which CSS plays a more significant role in presentation.

[ergophobe]

There's always a compromise

Yes, that's what I was driving at. None of us are purists. None of us are letting the browser stylesheets handle everything. And generally, our users don't want that from us. They also don't want us to break fundamental UI patterns by styling links as dark brown that isn't that much different from black or dark red, which is no different at all if you're red/green impaired as I am.

Which is just an blah blah blah way of putting what JAB put succinctly:

For the older folks around, it's time to get out of your comfort zone. The the younger folks around, it's time to stop Loony-tooning off the edge of cliffs.

In my opinion, this new way of styling links does not break any UI pattern, but does enhance the standard link markers and is a pattern I would like to see extended to more corners of the web. To me it is visually pleasing, but also has even better usability than the browser defaults, especially for the visually impaired and mobile users.

That to me is a double win I for one plan to put it in the toolkit and roll it out on at least one test site.

I'd love to run some tests on a high-traffic site where it would be easy to get significant data. I'd love, for example, to know what happened to the pages/session metric on Wired when they rolled that out.

[keyplyr]

Just to clarify an earlier remark of mine - the reason I do not write underline code for my links, either HTML or CSS, is because I have seen what happens when a site underlines links, then a browser also lays its underline on top. It looks awful and distracting IMO. So I let the browsers handle it.

Of course the HTML hard code to underline is deprecated now (replaced by CSS) and most modern browsers will recognize this, there are still a lot of older pages out there.

I have copies of most browsers and do a lot of testing before going live with new documents. Maintaining web standards, validating and correcting errors so the browsers render the pages as standard compliant, is part of my publishing process.

[tangor]

If a user is chronically visually impaired they will have already adjusted their browsers to reject site formatting and color schemes. I suggest each "designer" out there have at least one install of the popular browsers which are set to reject site formatting, have a standard of 18-20+ points in base font size and see what their site (and links!) looks like. If you really want to test it, make Georgia or Bookman the browser's native font.

Otherwise this thread is about enhancing existing link standards without breaking the UI.

[super70s]

and changing the background (not the font color) on hover.

Changing the color of visited links is always helpful IMO, especially for blog-type sites. Something this site could use.

[ergophobe]

I do not write underline code for my links, either HTML or CSS, is because I have seen what happens when a site underlines links, then a browser also lays its underline on top.

So in other words you're trying to avoid the case where you have some link styling that includes a non-standard underline defined in CSS and then the browser goes and adds the default underline, either because it fails to read your CSS or the user stylesheet overrrides it, and that just makes everything worse than leaving it alone in the first place?

[I realize that's a convoluted sentence... I hope it's comprehensible]

[keyplyr]

Yup

Before the mobile era, I used to create a lot of customer websites, including taking over from hacks that built bad sites. I would often see the same web design using the same style sheet sold to hundreds of customers, just changing the colors & images. That's where I would see the double underlined links. Of course both CSS & HTML standards have improved since then.

Since mobile, I only maintain my own couple of sites.

[Nutterum]

With regards to the visibility of links, I always follow SAP best practices for UX (granted they are old school, but sure as hell work). This includes blue links, and when readability falls a bit due to design, I use bold. What is disheartening to the new-wave of websites being churned since 2014 ( seriously the amount of WP themes out there doubled if not more) is the designers who did them are graphical artists that have little to no idea about design functionality, UX, readability score, contrast ratios for impaired vision users, etc. They just draw flavor of the month images, that then get chopped in to a WP theme. That for me is the culprit behind the topic of links, not the links themselves.

[tangor]

This weekend I finally gave up. Gave up trying to read the web and all those other things, like word processing, databases, etc. Command line I have always been able to read, so I switched to High Contrast for the desktop, changed a few link colors for the browser (blue and purple on black just aren't readable, changed that to medium yellow and medium green) and I am a happy camper behind the keyboard again.

Style links as wild and wonderful as possible : I will never see it from this point on.

Disclaimer: Old Phart with cataracts, extremely near sighted and legally blind in one eye. I am NOT your average user.

[graeme_p]

No, tangor, but people with less than perfect sight are a significant part of the population.

Many years ago I was working for a now defunct financial website startup. The target demographic was people with coming up to retirement, or in the early years of retirement - an age at which most people's sight is past its best. The head of design wanted standard paragraph text to be small and grey on a white background.

I suggest each "designer" out there have at least one install of the popular browsers which are set to reject site formatting, have a standard of 18-20+ points in base font size and see what their site (and links!) looks like.

Good idea. using a text only browser can be useful too.

[ergophobe]

readability falls a bit due to design, I use bold

In cases where I don't control the overall design, I fall back to this a lot as well. I'd prefer to change colors and such, but sometimes I just don't have the buy-in from others. It helps, but it still sucks.

I switched to High Contrast for the desktop

Aside from the cataracts issue, it also helps with colorblind issues. Essentially, if the greyscale value is different enough, it doesn't matter what the hue is. But without a user stylesheet like you've done, it won't rescue me from stupid text/link color combos (which is where your user stylesheet comes in - I have gone there for certain things, just not link colors, but this thread has me thinking I should just do like you have and save myself a lot of headache).

There are sooo many sites where I can only find links by mousing randomly around. Sometimes I've even had to use View Source and search on the link URL to find it (obviously I only do that in extreme cases). This is why I like the link pattern under discussion so much. For me, it's such a pleasure to go to a site where I can find links so easily, even easier than the default display (because the underline is thicker).

have a standard of 18-20+ points in base font size

I have one machine with Windows scaled up at 125% and then Chrome also scaled up at 125% (so 156% total). We had a massive long thread on this once upon a time in Supporters, but since those threads don't show up in a site: search I can't find it.

When I first applied those settings, many many websites and applications were broken. I'd say 20% of forms were unusable. Now, I rarely find a problem. Microsoft has had standards on this for years, but they've been ignored for years, but the vast diversity of displays and resolutions (not just pixel count, which is not that significant, but pixel density which poses serious usability challenges).

[tangor]

@ergophobe: Make the switch. With windows it's as easy as changing personalization themes. If you do decide to High Contrast you'll want to fiddle with browser and email display settings for links/backgrounds, but once you have it's a real treat. I've even REDUCED my font size overrides a few points because I can actually see the characters in a word!

However, when visiting webmasterworld, the favicon virtually vanishes wtih High Contrast (Black #2)

I will say that finding a link when using a High Contrast theme is a snap. And since you can override visited and unvisited colors in the browser you can really make them pop!

[ergophobe]

Meant to try this last night, but got sidetracked... I'll definitely give it a look though, if for no other reason than to see what sites look like for users who are using High Contrast

I've tried it before, but ended up switching back and don't recall why... and it's long enough ago that my eyes have changed a fair bit in the interim. No cataracts, but all the issues of aging eyes (I think they say by your mid 50s, your eyes are only passing half as much light to your retina as they did when new).

[patrickcoombe]

I'm a big fan of wired.com's link / hover style:

e.g. [wired.com...]

been seeing a lot of other sites/blogs following suit