8

I was just reading up on the the visual affordance of links and why its important to have an affordance that something is a link without requiring the user to hover over it.To quote the MSDN guidelines

The fundamental guideline is users must be able to recognize links by visual inspection alone—they shouldn't have to hover over an object or click it to determine if it is a link.

So while color can be one way of communicating it alone does not satisfy accessibility principles . To quote the WCAG site

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.

Hence taking a screenshot of an answer on stackexchange, we can see that only color is used to differentiate links :

enter image description here

This is how a color blind person sees it (with monochromacy )

enter image description here

So the question is why doesn't stackexchange underline its links since color alone doesnt serve as a sufficient affordance ?

Note : I did see the answers to this question When should hyperlinks be underlined? and while the answers are interesting, they don't address the question of the accessibility concern with just color being used as a link

Edit: After reading the comments below I realized that Google has done away with Hyperlinks in their search results page as shown below

enter image description here

The monochromatic view is given below

enter image description here

While an assumption can be made in Google's case that users always knew to click on the header and hence its secondary nature to them now and google can get away with this design

Another question that arises is can we make an assumption that since now Google can other sites also start following it ?

11
  • 2
    because: graphic designers. :)
    – DA01
    Mar 13, 2014 at 19:07
  • Just saw this bit of news: Perhaps the answer is "because google says so" = latimes.com/business/technology/…
    – DA01
    Mar 13, 2014 at 19:19
  • 2
    Well in Google's case they could get away with it since users are so accustomed to clicking the title to get to the page they wanted.But stackexchange is not google
    – Mervin
    Mar 13, 2014 at 19:23
  • 2
    My biggest question would be: why are visited links almost indistinguishable from regular ones on UX Stack Exchange? Isn't it a basic UX issue?
    – jgthms
    Mar 13, 2014 at 19:57
  • 1
    IE has an "always underline links" option in its settings, but can't find it in Chrome. Mar 14, 2014 at 15:17

3 Answers 3

7

All designs involve compromises

A design is a compromise between various tradeoffs - that is a key concept to comprehend. The topic of your question is an example of such tradeoff - underlines make links easy to find by mere visual inspection, but they add visual noise and are considered by many counter-aesthetic. Colours, not only reduce accessibility, but they add visual noise of their own and reduce the designer ability to guide the user eye to where it really needs to go.

The role of the designer is to control such tradeoffs so the final design best serves the majority of the target audience.

There are many variables and considerations that inform design decisions, and these truly change on a case by case basis. For instance, one important consideration is the ratio between first-time visits and repeated visits. Sites that serve largely repeated visitors can get away with reduced usability for first time visitors, yielding a cleaner interface for repeating visitors. This is particularly the case if the learning involved is low, like having to hover over something to see if it is clickable.

Guidelines are just that

If you agree that all designs are compromises and that design decision should account for many variables that are largely unique to each system, then you should understand why any set of design rules may cause more harm than good.

Guidelines are not rules, but they are a set of instructions made to be adhered to. But they may be as bad for designs as rules. Regardless what guideline you come across, there is always a chance it won't be appropriate in a particular context.

To give one example, one of Nielsen's Heuristics is:

Aesthetic and minimalist design

This will go against the brand image of many companies, who may wish to project, for instance, a message of budget brand.

We are smarter than (some) designers think we are

It has been many decades since psychologists have demonstrated the brain's outstanding ability to successfully interpret and make sense of things when the information provided is extremely limited and even confusing. For instance, most people are marvelled when they learn for the first time they can read the following:

An image with text where many letters have been replaced with numbers

Who would have thought!

For the cognitive scientist this is all too obvious - the brain is a highly capable associative machine where context can radically shape interpretation (just think how many different meanings the word 'or' has, yet we hardly ever struggle to get the correct one without even trying). You wouldn't normally see 17 as 'it', but you just did, and rightly so.

You would, in fact, be surprised how you may fail to spot a colour-blind person even after years of frequent engagements. You may even fail to spot one during user testing! Yes, underlines do help them, but the lack-of only slows them down and they learn to compensate for the lack of colour by other cognitive means so the damage of colour-reliance is often less than what designers think it is.

So many psychologists know that even the faintest clue, or the faintest pattern, can lead to successful interpretation.

I think that the UX field is slowly acknowledging that we may have discredited the cognitive abilities of users for too long. You see more and more designs based on comprehensive cognitive analysis rather than general guidelines, which in turn gives designers a higher ability to craft effective visual designs.

Mostly this is done by reliance on implicit clues and cognitive deduction rather than providing explicit features. What is important to assert is that it is clear to everyone that interpretation time rises when no explicit features are involved, which applies a great deal to new users, but even to frequent users. However, with repeated use, the ability to clean-up the interface from unwanted noise and to guide the user eyes to the relevant places can mean that the overall interpretation time while completing a complex task is reduced, but only after users have became accustomed to the interface.

To give one great example of this, here's the interface of an Alarm Clock mobile app called Rise:

An image showing just an hour on a mobile screen that is otherwise pretty empty

The interface does not make it obvious in any way how do you turn the alarm on or off. Users are left with a few options:

  • Either try different gestures.
  • Search for a help option through the settings icon (at the bottom) - also highly implicit.
  • Refer to the developer's site.

In my case, I went for the former to discover that a swipe to the right toggles the alarm. So first usage took time and the design was nothing short of cryptic at that point. But henceforth, you set your alarm much quicker than on other apps, and there's no visual searching or interpretation to be done - you don't even have to search for an on switch, even if such would exist on the screen!

Underlines should be least of your worries on StackExchange

If you look at this page, you'll find a multitude of elements that are interactive with nothing to suggest so:

  • All global navigation elements.
  • The primary nav elements.
  • The share, edit, flag links.

You can argue that it is implicit or deductive that these are clickable, but in the case of the share, edit, flag links there's a stronger argument - in its wish to complete a task, a user articulating in their mind "I wish to edit this post" will cause the brain to see the word 'edit' better than others (in the same way telling someone 'strawberry' will momentary increase their visual ability to identify all red things). So if it's an action link, and is phrased as a verb, you can pretty much be certain that most users will predict that it is interactive even before hovering.

Anyhow, it only takes a few usage iterations to get it, and ask yourself if you have ever struggled with or even was slowed down by the fact that there is nothing to signify the interactive nature of the elements in the bullet list above.

Summary

I have not provided a definite answer for when underlines should be used, but I have argued that no such definite answer exists for the following reasons:

  • The problem each design solves and the target audience vary greatly between projects.
  • Guidelines are great but an informed judgement has to be made as for when to adhere to them.
  • Design is about finding the appropriate balance between various tradeoffs.
  • Designers should account more to cognitive abilities and the cumulative efficiency of a design rather than a localised one.

And so to answer the question in your title:

  • Because the site is heavily based on repeated usage rather than single visits, the designers chose to reduce usability for newcomers so to increase usability for frequent visitors (the bulk of users). This is even more so the case with colour-blind people.
  • The site is not heavily commerce oriented, and it has next to no competition. Again, this means the business doesn't have to prioritise first-time-users as much.
  • The designers are likely to have assumed that visitors will have high-motivation to use the site; this gives them a bit more leeway making things less obvious at the onset.
  • Because the site designers are familiar with and supportive to what seems a current UX trend - to relay more on cognitive analysis.

Most of these points apply to Google as well, but just because they don't use underlines doesn't mean any design shouldn't.

My gut feeling is that had the StackExchange (or Google) designers had to design an e-commerce site for the elderly, they would have probably go for underlined links.

1
  • 1
    Wow :) I'll need to get popcorn to read this.Incredibly detailed answer :)
    – Mervin
    Mar 16, 2014 at 15:47
3

I think a lot of this tends to be personal preference in design and there has been a lot of debate about whether or not underlining links is outdated. For instance, back in the day, a lot of news sites would underline their headlines so that the user knew what was clickable. What started happening over a period of time was the user was trained to click on any headlines whether or not it "appeared" clickable. Something similar happened with the whole idea of "Above the fold." Designers and developers were told that the most important content HAD to be above the fold because the user doesn't like scrolling. Then we find out after a period of time that the "above the fold" idea is pretty much outdated and users don't mind scrolling as much. Does that mean it's no longer important? No but it isn't such an issue anymore.

So what I'm wondering with this is if many are making their decisions in a similar fashion—that they believe the user knows what to click whether it's a headline or such since they have been trained on it through repetition all these years. Stackexchange seems to have a few mixed styles of handling this. Mousing over a question onHover behavior alters the color on the headlines but then on the link to a user, it underlines on mouseover.

Also some have suggested that if there is enough of a color change, even those that are colorblind can see the difference in the tone and the mouseover color change as well. They seem to lean towards this technique because it appears to clean up visual clutter (underlines), etc.

As to why it's different in different places on StackExchange, that's a question for their developers. :)

0

Color is a significant enough indicator for most users, and making your site appear pleasant for the majority of users is the priority.

Underlines are ugly and disruptive, and attract more attention than a link might rightly deserve. (I note that there is no underline facility in the SE editor although bold and italic typsetting is available.) And in some situations the visual indication of a link is redundant information anyway, such as in the results of a Google search, or the list of related pages on the right.

For the minority of unconventially-sighted users, the site could offer accessibility options. However a browser or OS option to "always underline links" is a more appropriate solution because it can be applied across the whole web with one checkbox. I believe browsers should offer such accessibility options, but even for those that don't there are workarounds available.

Disrupting the site design to cater to a minority would be counter-constructive. But facilities should be made available for minority users. (So for example, links should always be defined as <a> tags for recognition and possible augmentation by the browser, as opposed to non-semantic styled text with an event handler attached.)

The effort of hovering to reveal that the light-blue text on this site is a link is a chore the user only need endure once. After that, consistent design should indicate that all light-blue text on the site will be a link.

(Finally, I note that the link in the OP's screenshot does in fact appear at a lighter intensity than the rest of the text, albeit minor. So SE links may already be noticeable even by users with monochromancy.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.