14

In a lot of cases I've always used headings as links (where they make sense) instead of a heading, info text and then a link

For example:

Finance website

Here's some info text here about this link

Instead of:

Finance website

Here's some info text about this link

Visit the Finance website

I've seen this throughout lots of sites

What do you think is best? In which instances should you use or not use headings as links?

EDIT: Sorry i should have been a bit clearer. This would be links appearing on a homepage linking to sections/sites within the same domain. Not external sites

Improve this question
1
  • Thank you for the edit. Now the answer is: Yes! :-)
    – Jørn E. Angeltveit
    Feb 7, 2014 at 16:55

6 Answers 6

Reset to default
2

The second approach makes it more obvious what clicking the link actually does. That might be better if your audience is new to the internet (younger or older people) or who might not be native English speakers.

The first approach is a bit cleaner, so it might be better if you have a list of these header links, or if it will be obvious to your audience what happens when you click the header link.

Improve this answer
6

Header links is a really good way to enforce focus on a specific area. If you check your profile here on *.SE you find that each heading actually is a link to the page where you see things in greater detail. Thus header linking is a really good implementation of "drill down" functionality.

Having a more-link, represented in your question by "Visit the finance website" is not wrong, but could be overdoing it. At least a little.

The most important part to remember is to keep links to other pages looking like links (here *.SE fails) if you want to succeed with header linking. But as long as you implement convention, you'll be just fine!

enter image description here

Improve this answer
8
  • 12
    I had no idea they were links, in the 3 years I've been on SE sites. Wouldn't that mean this is an example of poor conveyance? Of course, on this page, there are other links to the same content as tabs at the top. So taking this portion of the page is taking it out of the context where both of trickydisco's suggestions are in place at the same time.
    – AlbeyAmakiir
    Feb 6, 2014 at 22:42
  • 2
    @AlbeyAmakiir Perhaps, not so much poor conveyance as a case of "not-in-your-face" progressive disclosure? Anybody waving his/her mouse about would have found them to be links.
    – Marjan Venema
    Feb 7, 2014 at 11:57
  • 1
    I think you can make the case with the SE sites that there is a clear lack of affordance for MOST links. Hunting and peck turns up all kinds of interactions that one wouldn't know about just by passively looking at the interface. I'm not making a judgement here, it's just clear that the designers of this site have determined affordance isn't a priority.
    – Charles Wesley
    Feb 7, 2014 at 17:52
  • 1
    @CharlesWesley well, you just did pass judgement here, Charles :-)
    – Benny Skogberg
    Feb 7, 2014 at 21:45
  • 1
    @BennySkogberg It's like the saying goes, when someone starts a sentence with "Not to be a jerk, but..." they're about to be a jerk :)
    – Charles Wesley
    Feb 7, 2014 at 21:49
4

Good question, but no!
You should not add links to external content in the heading.

The reason is that many frameworks uses the heading as a link to "self".

This is a good convention and it's more and more used.
(I often refer to sections on Wikipedia, and I miss this feature over there.)

Just like the heading in this question, and just like the headings in most blog solutions.

...

Using the header as a link to the "self" in lists is OK. That's what nngroup and gov.uk does.

Answer to OP's request for clarification in comment:

When I saw your first example, it looked like an excerpt of an article where the header was pointing to an external article.

As if the "Computer" article on Wikipedia would use the "Memory" header as a link to the main article about "Computer data storage" (in another web-page).

enter image description here

That would be very wrong!

After a closer look, the nngroup is doing exactly this.
(And my initial statement was misleading and confusing).

enter image description here

Therefore: In articles like this, the header should only link to the section it is the caption for.

So, when is it OK?

Well, sometimes the content is a "collection of contet-teasers". (There's probably a name for this design pattern :-P). The "content teasers" are usually presented as some kind of boxes. If not explicitly designed as boxes, then the gestalt principles will make you perceive them as boxes. ... ... ... #BetterExplainedVisually...

We're talking about stuff like Flipboard, Windows 8, AppStore, Newspaper front pages, Search results etc.

enter image description here enter image description here enter image description here enter image description here

enter image description here

This is actually what gov.uk does

enter image description here

In these layouts, the header is part of a context where the wholeness of the title + the surroundings makes it natural to use the title as a springboard for the underlying information (ref. Fitts law and "easy target").

Improve this answer
6
  • 1
    ... Where "self" means "home" in some sense. See, for example, the link in the header of this very page...
    – keshlam
    Feb 6, 2014 at 23:29
  • @keshlam yes :-)
    – Jørn E. Angeltveit
    Feb 7, 2014 at 0:06
  • wikipedia sections have an anchor attribute, making them targets for links, while the link itself is found in the table on top. But your point is valid, though.
    – njzk2
    Feb 7, 2014 at 2:34
  • @njzk2 Yeah, I know. I'm constantly scrolling to the top, trying to remember the title of the section I want to link to. Then I "copy link" from the table...
    – Jørn E. Angeltveit
    Feb 7, 2014 at 9:32
  • Can you explain what you mean by "Using the header as a link to the "self" in lists is OK. That's what nngroup and gov.uk does." I was using the nngroup and gov.uk examples because that's exactly the type of content i would have on the page. Perhaps i should have used a better example in my post. In my example this would be an intranet homepage which links off to ssections/sites within the intranet
    – trickydisco
    Feb 7, 2014 at 14:03
1

On www.gov.uk/browse/driving, the headers are large text and obviously links because of the text styling. Additionally, the text below each header explains the information you'll have access to by clicking that header, so it makes sense that these headers are clickable. But I think people would have a hard time knowing what to click if the header wasn't styled so obviously as a link: blue and underlined.

For that reason, it makes sense to use a normal header, have some explanatory text below it, and then a link like your second example. That way users can read the header, read the explanatory text about it, and continue down to the link instead of having to come back up to click the header. That last link would work as a call to action to let users know it was clickable by using text like "read more", "click here for more information", or by styling the link as a button. Do something that draws users attention to it so that they click it. I prefer that way.

Improve this answer
0

Headings as links are more convenient for scanning because they're inherently prominent and usually concise. By putting a link out of a heading, you're not forcing the user scan/read its accompanying text.

Heading links tend to be more accessible to screen readers, compared to generic 'read more' text links, because they're generally unique from each other.

Improve this answer
-1

Why not both? I mean, setting the heading as a hyperlink doesn't come with any drawbacks, does it?

Improve this answer
4
  • 1
    Well for one thing it's redundant. The screenreader user is going to get the same link read out twice to them. Not exactly a massive accessibility issue but certainly annoying.
    – JonW ♦
    Feb 6, 2014 at 15:57
  • 2
    is answering a question with a one line question really an answer ? does it come with any drawbacks ? why not tell us ?
    – Toni Leigh
    Feb 6, 2014 at 16:47
  • Adding multiple ways to access a site isn't bad. I like the idea!
    – Benny Skogberg
    Feb 6, 2014 at 18:56
  • Oh look, that answer gave me 50 reputations! Now I can finally comment... btw, is this for spam prevention or why do they do that? His question was: "What do you think is best?" My answer: Do it both ways.
    – Kweamod
    Feb 7, 2014 at 8:19

Your Answer

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

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