Making Links Useful aka Where Does That Link Go?? Options

[projectphp]

I recently installed phpBB as the Forum for a bunch of my uni mates to use as a place to rabbit on about not much productive. Now, I really like it, but having not really used the Admin section before, I was really, really annoyed by all the "Click Here to go to XYZ" links tat I was presented with, and this got me to thinking about links in general, and how they are utilised on many sites (including, oddly enough, this site!!!)

OK, to backtrack a bit, phpBB uses a format for all its links after an action (like posting), in the format of "Click Here to" followed by the place the link takes you. As an example, after you edit a post here at Cre8asite, you get the following message:
[quote]Your message has been entered successfully.

Click Here to view your message
Click Here to return to the forum
Click Here to see posts from the last 24 hours.
Click Here to see posts since your last visit.
Click Here

The problem with this "Click Here" to click. Now that might be fine after you are a forum regular, but for a first timer, it is very frustrating. Even for a regular it can be annoying, as in this case the meta refresh gives you only a few seconds to read what all the "Here" options are. I must admit, I rarely click on these links after a post, even if I did want to "see posts since (my) last visit".

Now most people don't actually read on the web, they just "skim" and try to get the overall gist. Links, because they are (usually) a different colour to the regular font, naturally draw one's attention. Knowing this, one can safely assume that links are one piece of text that people are more likely to read, so maximising the information you squeeze into links would seem pretty important.

So I thought what we need is a quick guide on how to incorporate links onto a page for maximum benefit.

Here is what I came up with:
1. Assume people wont read your page, so each link will only have the words in the link for context. Make these words meaningful.
2. Put the most important information into links, ie "Sony Erikson 1234 mobile phone Specs"
3. Avoid having multiple links with the same format in quick succession, e.g.
"Click Here to XYZ"
Click Here to ABC"
4. Make links standout. Avoid a link color that is the same or similar to the regular font colour.
5. Link throughout text as relevant, e.g. if you quote someone, link to the quote "As was mentioned by Ammon Johns athe cre8asite forums." Similarly, link to expanded information using relevant words.

IMHO, this is important even when it can be safely assumed someone will read the text, such as an article. A great example of using links productively is Search Engine Watch. The way Danny Sullivane links throughout articles, like this article on the Florida Update is excellent. This article links to a lot of background, usually using link text that, after the first read, makes it easy to go back and read more on a specific issue.

So, having said all that, is there any chance we can get the "Click Here to" links changed??

[bragadocchio]

Excellent post!

I like posts that also serve to make the forum more usable.

Thanks.

It can be an experience setting something like this up, and it's great to get a fresh perspective on it.

We need to make certain that ILoveJackDaniels sees this thread.

So, instead of this:

[quote]Your message has been entered successfully.

Click Here to view your message
Click Here to return to the forum
Click Here to see posts from the last 24 hours.
Click Here to see posts since your last visit.
Click Here

It might be better if we did this:

[quote]Your message has been entered successfully.

view your message
return to the forum
see posts from the last 24 hours.
see posts since your last visit.
see unanswered posts

And rather than listing the links in a row, how about horizontally?


[quote]Your message has been entered successfully.

view your message

I agree with your statements about posts embedded in text. As long as there isn't too much, they can be pretty powerful. It's a matter of presenting the right information at the right time.

[wanderer]

I'll second that - excellent post! Very good points.

I think that this way:

[quote]Your message has been entered successfully.

view your message
[u]return to the forum
see posts from the last 24 hours.
see posts since your last visit.
see unanswered posts

would work better than putting them horizontally - IMO it's much easier to skim and find the link you want.

[bragadocchio]

Horizontal vs vertical?

Let me explain why I considered making them horizontal, and maybe I can convince you (though I'm willing to listen to opposing views).

It is more difficult to quickly scan those links when they're horizontal, and where they lead. But, after the first few posts, you have a good idea of what those links say, and if you want to use one, considerably less of a chance of clicking on the wrong one.

[wanderer]

OK. You convinced me. You're right - much less likely to hit the wrong one. The quick scan issue is only an issue the first few times. After that you pretty much know what the links say.

[bragadocchio]

It is odd though that something can be less usable the first few times and more usable afterwards.

And, I guess the opposite is true too. Some things can be more usable the first few times, and less usable later.

But, as I said, it's nice to see usability improvements to the forums.

anyone see anything else that might work well?

[projectphp]

Bill, it is REALLY easy to fix. Depending upon what version you have, all you need to do is edit the language file, ({root folder}/language/and change

CODE

$lang['Click_return_forum'] = 'Click %sHere%s to return to the forum';

to

CODE

$lang['Click_return_forum'] = '%sreturn to the forum%s';

I changed my board in about 15 minutes. Open all language files, search for "%sHere%s", change the text to "%sXYZ%s" and Bob's you uncle and Fanny's your aunt, its all fixed.

If you like, PM me the files, and I will fix them for you.

[bragadocchio]

I appreciate the offer. Thanks.

But, it's ILoveJackDaniels' role as tech admin and php wizard around these parts to modify the board, and we don't want to take his fun from him.

He is working with Sophie (Sanity) to do a redesign of the look of the forum, and I suspect that it makes sense to incorporate your suggestion into the new design.

[Respree]

Good post.

Hmmm. I would have said vertical is easier to read.

Perhaps it depends on 'what' you're reading. If the sentences are longer, of course horizontal is the answer.

However, when the list consists of very short words, to me vertical seems easier on the eyes, as most people tend to scan. Whenever I see short bullet point, to me they are the easiest to read quickly (sort why the left nav is almost always vertical)

* view your message
* return to the forum
* last 24 hours
* since last visit
* unanswered posts

To me "see this," "view this," "click here," is redundant. When you click, the implied action is that you will view, see, discover, etc. so no need to waste words and the put undue strain on visitors' already tired eyes.

Food for thought.

[Adrian]

Great points, and not just from a usability point of view (though it kind of ovrelaps). One of the accessibility guidelines is about making sure links have some meaning when taken out of context.

Some screen readers can produce lists of the links on a page, if the text for the link is just 'click here', it obviously completely useless to them.

Opera can do somehting similar, though its a bit more intelligent and will either use the link text or the title text of the link tag.

Very good practice though, and good for that targetted anchor text idea in SEO too

(This is why I love Holistic design, one idea about one change and you end up improving the site in 3 ways )

[bwelford]

This is a great thread and I strongly agree. I also agree with respree's point on the shortest words possible (KISS). However I think Bill's reason for a horizontal layout is very strong (error-free clicking).

So I suggest:

your message / forum / last 24 hours / new posts / unanswered posts

[Adrian]

You could use a bit of CSS to help make a vertical list more usable.

Clearly it would be quite good to have it marked up as an unordered list to start with. You can also use things like line-height:150%; to create a bit more space between lines without affecting the size of the text.

Its one of my usual settings these days, more for main bodies of content where I think it can help readability, but could be equally as good in this kind of case to seperate them out a bit.

http://www.camaban.co.uk/spacedlist.htm is an example of what I mean. Its just a standard bulleted list (you can use a bit of styling to remove the bullets if you want) with each <li> set to have a line height of 200%. That seems to provide a nice bit of a gap between the links vertically. Though still a lot easier to click the wrong link than in the horizontal list.

[bragadocchio]

Good point, Adrian

I've been tinkering with line height in lists, too.

It does enhance readability of them tremendously.

[Black_Knight]

Great post, and topic, projectphp. :glasses:

My preference too would be to tinker with the line spacings and keep it vertical. The vertical list is far easier to read, and I've never (yet) hit a wrong one. A slightly increased line spacing might therefore be the most practical way to ensure maximum usability then, rather than mess with the legibility.

[bragadocchio]

I'm wavering between the two.

I think we're all agree that the "here" as a link is unnecessary. Adjusting the line height for them sounds like a good idea.

Just to explore my idea for a horizontal presentation a little, I'll explain why the idea appealed to me.

I'm thinking of the layout of objects on computer games. When you've seen the interface a number of times, you just click in a certain area to get something to happen. You're really no longer reading the label.

After the first few numbers of posts, if someone starts using those links, it might be more a matter of clicking a certain area than reading the whole list. Just like in a computer game.

A horizontal layout would facilitate that.

[AppleCider]

I don't think horizontal vs. vertical makes a huge difference as far as usability, as long as you're consistent. Users are pretty good at adjusting to various layouts, just as they can adjust to gaming interfaces, car dash controls, etc.

I remember back in the day when Jakob Nielson insisted that all links had to be the default blue, and underlined, because users were "used to that." Guess what? Users quickly adapted to the idea that a link could be different colors, bold or not, underlined or not, graphic or non-graphic, so long as they were clearly differentiated.

I see there's another topic in this forum about getting "too usable." Although usability is definitely important (and I've studied the issues) we can obsess about it, too. Consistency in design is the key. Users get confused when you're all over the place with the design, like a site I know that through CSS makes different links different colors and backgrounds according to the type of link (inside, outside, even informational, fun, etc.) Now that's confusing! :roll:

[Respree]

This study may be of interest, which suggests that vertical is easier/faster.

See Section 1.2:

http://www.otal.umd.edu/SHORE/bs09/introduction.html
"First, it was discovered that scanning a horizontal list of links is significantly slower than scanning vertically arranged links. "

[bragadocchio]

Nice study. Good find.

Though I do have to say that after the first few thousand posts, you really don't have to read links after a post anymore. Scannability is immaterial.

That could be true after the first twenty or so. I'm no longer clicking on words, I'm clicking on a location.

The experience for the return visitor is different than for the first time viewer.

[AppleCider]

Though I do have to say that after the first few thousand posts, you really don't have to read links after a post anymore. Scannability is immaterial

Again, going back to consistency. You start moving those links around, you get some angry and confused users sending you nasty email!

[bragadocchio]

Hi Apple Cider,

Welcome to the forums.

you get some angry and confused users sending you nasty email!

I've never been a huge fan of consistency. I think that it's over rated. Mixing design elements up over a series of pages might have the benefit of helping people to avoid banner blindness.

Pages should be easy to read, and easy to scan. Links should be as long as they need to be so that they are fairly easy to figure out when it comes to determining out what might be on the other side.

If it results in angry mail and phone calls, that's fine.

As long as they're writing or calling, that's an excellent start.

Here, we're talking about moving links around in the forum. This started with an excellent post from projectphp about making the forum more accessible, more usable, and more friendly to visitors. Using better anchor text than "click here" also has some nice SEO implications. All around it's an intelligent approach.

The "click here" links were part of the off-the-shelf phpbb software. It has wonderful functionality, but could use a little tidying up, like in the lableing of links.

We are working on a redesign of the forums, and this is definitely one aspect that will be changed.

As for horizontal or vertical, I'm not sure which we will choose, but I'm guessing that the tide of opinion is favoring the vertical stacking of those links (at least here).

I do agree that inconsistency can be confusing. There's another recent thread around here which points to an article from Mark Hurst where he talks about "intelligent inconsistency." I guess if we're going to be inconsistent, we had better be intelligent about it.