Making a linked page more obvious?

Question

I've got a portfolio much like the one displayed below. One of the people who I have shown the portfolio to, asked if I could put some live version of the game/web page in action, or have some video of it. This is exactly what I have when you click on the actual title which is a link. I'm wondering what is a good way to make it more obvious that you can click the text and be linked to another page?

Answer 1

Good points on the text content but I have to disagree about link underline - I don't feel the current convention is to have links underlined. Certainly not when linking within a site's content which you basically are (it is still your content).

Underlining text has issues for readability

Interestingly smashing magazine have addressed this by making the underline more subtle ... I think this works well (other places use dotted lines):

The truth is that Google aside, you see underline less and less on the web. I think this is mainly for aesthetic reasons. Ask most graphic designers they will say the same. This has become the convention. Underline creates too much data ink. It looks noisy.

Instead some sites use underline on hover as this site does (StackExchange) and Apple. Not really sure of the value of this as by that point presumably the user usually already has an intention to click (interested to know what others think).

Most web sites use a color shift to indicate a link and the color chosen depends on the graphical conventions on the site. Facebook made a good choice in choosing blue as their signature color as Google state they have run the definitive test which finds that blue links are clicked on more often).

My personal rule of thumb on web sites is to make everything that is clickable the same color (e.g. buttons and links) and that will be one of the key colors of the site.

In webapps it can get more complex. For instance as I note on StackExchange some sites attach different functionality to different colors e.g. grey text are links to functional parts of the web app and blue are links to content. As ever you have to design for your context/complexity.

So for this example I would simply highlight the title text of the two links in Orange.

Update Adding a play button on the images is also good idea (as suggested by PhilW's comment below). Lots of research shows that people tend not to read text but do play attention to images.

Answer 2

Users are used to links being underlined and coloured (usually blue, as that's the default browser behaviour), so these are probably the most obvious ways of conveying affordance. Giving the links a hover state (even if that just means intensifying the font colour) is also a useful cue.

If underlining and colouring these titles is a problem - for instance, if your chosen visual design doesn't allow it - then other strategies include only underlining in the hover state (still trying to use a blue title colour by default if possible), and ensuring the text in the link hints that it leads to more resources.

Another idea is to bring the resources you're linking to upfront. If there are photos, you might want to indicate the presence of a gallery. If videos, consider showing a small video player that opens a larger viewport in a lightbox or modal window. This will not only make the content more discoverable, but they also mean a user can immediately guess the value of clicking further media links, as you've already proven you provide relevant content.

Answer 3

Well, the most obvious change you should make is to underline your links. Although written in 2004, Jakob Neilsen's article Guidelines for Visualizing Links is still very appropriate.

Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.

However that's only one point. Even if your titles were underlined it's not clear what they are links to. You should add in an actual link within the body copy 'See a video of this game in action' or 'Play a demo of this game' linking off to the video / game demo. Don't make the site visitor have to think, make links as obvious as you can, and make it clear what the links are taking them to.

Answer 4

This post by the Baymard Institute titled "UI: Proper Indicators for Hidden Elements" is a great resource.

http://baymard.com/blog/trigger-indicators