Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

enter image description here

share|improve this question
    
You could make only part of the title, either before or after the hyphen, a link. That way the differentiation in for example color within the title would make it obvious there is a link in there. –  Marjan Venema Jun 11 '12 at 5:58

4 Answers 4

up vote 2 down vote accepted

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): subtle grey underline from smashing magazines website

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.

share|improve this answer

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

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

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
+1 for pointing out that affordance is only one side of the coin - there's no point telling users a link can be clicked if we don't indicate why they should click. –  Jimmy Breck-McKye Jun 10 '12 at 16:24
    
I will keep the style how it is, and add a combination of what you said and what Jimmy said in his answer. I will add some symbol or text indicating to a user that there is a video of another page attached to it! –  Fogest Jun 10 '12 at 19:00
2  
You could stick a big 'play' button on the image... like this: bbc.co.uk/news/uk-wales-18387520 –  PhillipW Jun 10 '12 at 19:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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