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.

We're making an overview of whitepapers, videos and other resources. Me and the frontend designer are in a small disagreement over which part of the item should be clickable.

Image of the items, with relevant parts highlighted

Should it be:

  1. only the title
  2. the title and body or
  3. Image, title and body i.e. the entire thing?

Note, I am not putting in the arguments in favor/against any of the options since I want to preserve the neutrality of the question

Edit: Thank you all, we have decided to make the entire thing clickable :-)

It's over here http://www.onehippo.com/en/resources

share|improve this question
7  
Have you tried a small user test to see what your users do when presented the three options? –  Charles Wesley Mar 3 at 15:24
    
No, haven't tried that. We might include some heat mapping scripts to test it out live :) –  Von Lion Mar 4 at 11:42
    
@VonLion More results, less mess <a href="url-of-new-page.html?from=picture"><img... –  harbichidian Mar 4 at 20:59
2  
Not the text, please not the text. The image and the title? Yes. A "read more" link? Yes. The intro/summary/teaset text? Please no. –  Marjan Venema Mar 6 at 15:00
1  
I personally dont see any thing wrong with making the whole thing click able - they only downside is that you might get accidental clicks –  sam Mar 17 at 11:07

14 Answers 14

up vote 75 down vote accepted

My suggestion would be to make the Title and the image click-able. The reasons are as follows

  • The title is generally referenced as the link to go to the actual item and is generally click-able. You can see this in a number of sites including Amazon,Ebay and Google news where the title is click-able and is as the main link for users to go and check out the item

Ebay enter image description here

  • The image is the generally the most visual aspect on the page and the eye is drawn to the image and allowing it to be clickable allows the user to quickly navigate to the item desired.

Here is the flow of how users would scan the content if an image is associated with a title and description.

enter image description here

This is widely implemented in a number of sites including Youtube, Ebay, Amazon and google shopping.

Amazon enter image description here

Google shopping

enter image description here

While you can make the description clickable, the general trend is to leave the description as just text so that users can scan the content and copy and paste it as desired. It also prevents from having the entire area being clickable and accident clicks from happening as the user hovers over the content.Check out the above mentioned example of Google products and the example of Google news given below

enter image description here

Importance of a Visual affordance for a clickable area

In my initial post I had accidentally mentioned that YouTube has the text area non clickable but on reading David Mulder's answer, I realized my mistake and found that the entire area is clickable.

enter image description here

But since the description text has no underline or link color, there is no visual affordance that that area is clickable and users by accident while trying to copy and paste or by an accidental click would result in opening up the video which would confuse them as that was not the expected outcome. An argument can be made that users can find out if an area is clickable or not by hovering over it but that unfortunately does not work in mobile devices as there is no hover option there and with the increased number of people accessing content on mobile devices,the mobile factor cannot be avoided.

There might be an argument that users might not know where to click and having the text non clickable actually defeats them and hence YouTube's intention of even making the blank area clickable allows for easier access. I dont agree with that since by making the whole area clickable including content or spacing where is no visual indicator of a potential interaction (white space) you are increasing the scope of accidental clicks and could confuse the user about how he reached the new page or video in this case. As per MSDN's link design pattern guideline

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.

share|improve this answer
2  
Good examples and comments, I've noticed that annoyingly quite many news sites have everything clickable, and the image and title would be enough. And also for SEO it would be better to have the title link to the content, and not everything, so that the link relates to the linked content headers. –  Samuel M Mar 3 at 11:57
4  
Just 2 cents to this great presentation: I personally dislike clickable areas of text (on a computer with a mouse). I also dislike having no hint to where to click at (everywhere). I like though areas of clickable text in mobile contexts where my finger is thick and the screen (and text) is small. That said, maybe there is something to add for mobile devices, where "hover" is not really present? –  PlasmaHH Mar 3 at 14:26
3  
I disagree strongly that a virgin user would afford any difference in the meaning of clicking the summary text as opposed to the summary title. And what if they click in the blank space below the text? Can you really justify that clicking in blank space (that is still well within the visual bounds of the search result) should do nothing? Why reduce the effective area of the search result for no reason besides following the "general trend"? YouTube is doing it right here, in my opinion. –  chaiguy Mar 6 at 23:25
1  
The way the elements (image, title, and text) are grouped together in the graphic in the original question does give a strong visual suggestion that the entire thing is clickable. If the bg of the description text was the same as the general bg of the page then you might have a point, but the page bg is grey and the description bg is white and rounded to echo the image above. The strong visual association created by this makes them look like giant buttons to me. –  Franchesca Mar 16 at 10:06

As I disagree with a lot of the notions here I am going to add an opposing view as well. Like most answers I agree that the image and title should be clickable, but in modern designs making the entire box clickable is quite acceptable.

Now, first I would like to point out that in the latest Youtube iteration the entire box is clickable: Screenshot of youtube Additionally I would like to point out that a lot of the designs mentioned in Mervin Johnsingh's answer are relatively old and the newest redesign - youtube's - in his list has the entire area clickable. The disadvantage of redesigning sites is that there are always unhappy users so but not redesigning too boldly you keep your users happy... till they all en-masse jump ship to a new modern competitor. So let me show another example of a modern design from a company which is not afraid to redesign: Screenshot of Facebook

Now let's take a look at the larger UI habits:

  1. Traditionally html and the web was used for simple text document. Here there was a clear distinction between links and text.
  2. In applications it seems to be common to have entire areas clickable as well including descriptions traditionally, however I can't find any really good comparisons. enter image description here
  3. All mobile apps make the entire area (think of tiles on windows phone for example, or cards on new androids or any list interface) clickable as well.

Taking into account that 1) users are consistently using mobile application and web applications are looking more and more mature (following both older desktop trends and mobile trends) it seems reasonable to take this as cues for good UX. (Rather than using a different set of guidelines for webpages).

And lastly from the usability point of view:

  • Making more area clickable means less users will click in the expectation of going somewhere, but end up going nowhere.
  • More area means more misclicks, but this seems hardly a relevant thing nowadays as in a lot of web applications (and sites as well) virtually the entire screen is clickable and they are still designed that way.
  • Making the description clickable means that the description can not be selected, so make sure the same text is also available on the linking page for copying reasons. Additionally there is no danger of users clicking it whilst expecting to select the text, as there is a great indicator of this: namely the cursor changing to a hand rather than a text cursor. This is exactly meant for these kind of things and does it job quite well.

In conclusion I would argue that links (as in <a>'s that are visually styled as a blue underlined text) should exist primarily in texts. In cases of stylized tiles/boxes/list-items representing 'external' objects where the design makes it clear it is an individual item (<- crucial!!!) I would make the entire area clickable. It is absolutely crucial that whilst hovering some indication of it being clickable is given. At the minimum this requires a cursor change to cursor:pointer, ideally some :hover effect might be beneficial. To help (older) users it might also be a good habit to add "Read more..." as a link inside boxes when there might be any doubt. When the descriptive texts gets long enough to be it's own item it might be good to keep it unlinked.

An entirely different reason why it's a good idea to make the description clickable is that users of your site on mobile phones will otherwise often click on the text and expect to be linked with nothing happening. And as mobile browsers are becoming more and more common and more and more sites are using responsive designs to cater to users without changing the actual functioning of the site (yay to that :D) it might be a good idea to make your site already now as mobile friendly as possible.

share|improve this answer
    
I just tried what you had written and I found that the whole area is clickable in Youtube and thank you for pointing that out. I will update my answer accordingly. However the fact that Youtube does not indicate the area is clickable by providing an visual indicator (underlined text) and the fact that a person could accidentally click and get to the video is a poor experience as the user might be confused when he was trying to copy and paste and accidentally ends up in the video. –  Mervin Johnsingh Mar 5 at 18:25
    
That said, my other examples are still valid as they were recent screenshots taken the time i wrote the answer. –  Mervin Johnsingh Mar 5 at 18:26
    
@MervinJohnsingh: Expanded my answer a bit regarding your claim of lack of visual indicator (the cursor changes) and my criticism regarding the choice of your sites wasn't how recent the screenshots were, but rather how recent the design were. What I mean by that I have expanded upon in my answer as well now. –  David Mulder Mar 5 at 19:09
3  
@MervinJohnsingh It's worth pointing out that there is an indicator that the entire area is clickable: the cursor changes to the standard link hand when anywhere within the search result. Also worth noting is attempting to select some text in the description does indeed result in a confusing and unexpected navigation. Perhaps the duty here should fall to the web browser's implementation of the mouse handling: if the user is dragging the mouse to select some text, it should arguably not be interpreted as a navigational click. –  chaiguy Mar 7 at 0:47
1  
In modern designs tablet devices need to be considered very much. That's why whole are clickable is better than the links only. –  Mahbub Mar 15 at 7:02

Presuming that your links would be visually distinct from the description, then:

  • title: definitely yes, because something has to be clickable.
  • image: probably yes, because visitors might react to the image alone and never read the text.
  • description: no way

Why no on description? Well, first, the more links you have on page, the more choices, the more overwhelmed the user, the less likely to make any decision. Second, the title would be indistinguishable from the body, diluting its effectiveness as a title. Finally, walls of text should not contain links.

If you want a link for the visitor to follow after having read the description, add a "Read more >>>" link.

share|improve this answer
    
+1 on the "Read More". As an aside, I have to suggest that in your answer, only "walls of text" should be hyperlinked. It's valuable as a humorous link but it's clearly tongue-in-cheek so using "Walls of texts should be free of links... because it ruins the whole purpose of the infamy of walls of texts." to support your answer is somewhat misleading. –  interrobang Mar 4 at 18:53
    
Erm? @bishop? I'm on the fence as to whether the text should be linked or not, but I disagree with nearly all of your points. (1) Allowing clicking anywhere to act as a link would not cause the user to be confused as to where to click unless the visual styling is confusing. (2) It's not the case that "the title would be indistinguishable"; you can style it however you want regardless of whether it links. –  3nafish Mar 14 at 3:35
    
...(3) The question asks about text along with images where the full body of the text is the context for the link. The context is too small for there to be a "wall of text" that needs an individual word called out. -1 –  3nafish Mar 14 at 3:36
    
Clickable description = "no way" is not valid for all cases. When description is made clicable in most cases it will be clickable as part of a compound clicable element. –  maulik13 Mar 14 at 11:30

The entire thing should be clickable because it all serves as an advertisement-like teaser that dispatches to another page. This shares more in common with an AdWords unit than the ecommerce product detail analogy mentioned in another answer.

Unless there's an incredibly compelling reason not to make certain items clickable then it's senseless to risk a dead click on any part of unit.

share|improve this answer
2  
Speaking as a user, no thanks. The general arguments against it: 1) I want to be able to select text from the description. 2) It's really annoying when I want to focus the browser window by clicking a (presumed) dead area, and accidentally get navigated away. Some sites are taking what you're saying very seriously and are making every last bit of whitespace on a page clickable. Imo, this is a "social code" where a page should fill the expectations of the user, and accidental navigation is as bad as a dead click. Don't "trick" me into going to a different page. –  nitro2k01 Mar 4 at 14:34
3  
@nitro2k01 I agree that you shouldn't 'trick' the user but that's easily solvable via good visual design. If the entire area is clickable, then that should be communicated to the user visually so they don't have to discover it accidentally. –  DA01 Mar 4 at 20:32

If an item in a design groups all three elements (image, title and description) such that they are tightly encompassed, then it is better to make the whole area clickable. And that is the case in your example.

For making description clickable my argument is that title and description have very close proximity in your design and the visual difference is not big enough to treat them as completely separate elements. And also the purpose of the composite element is to drive users to new content.

Some points to think about:

  • Proximity of elements and encompassed area
  • Weight of the description against title (in terms of visual and information)
  • Goal of that item and what you expect your users to do next

Examples,

Vimeo enter image description here

Medium enter image description here

Below is a special case, design could be driven by what you want a user to do next.

enter image description here

share|improve this answer

Unless you need to support differently-handled click operations (which in this case I'm pretty sure you don't), the entire thing should definitely be clickable as a whole and thought of as a single entity with a single link.

The reason for this is treating the entire tile as a single atomic object is the simplest way to represent the item. (Even your visual design enforces this by rounding the corners of the tile.) The moment you start differentiating between the parts of the tile, you are introducing unneeded complexity into the objective representation of that item. Think of it like a hierarchy: the picture, title and description are all sub-elements of the parent container item. The deeper you go, the more elements you have, and the more complexity is introduced. If there's no need to introduce complexity, why do it?

Another way to think of it is this: What advantage would you gain by discarding clicks upon the description of the article? The only one I can think of is that it would make it easier to select the text for copying. Frankly I don't see that as a strong counterargument, especially since that could be much more easily done from the article itself.

Moreover, as things move more and more towards mobile-friendly interfaces, having a single large target to tap on rather than having to aim specifically for a tiny "Read more..." link just makes things a lot more pleasant.

share|improve this answer

The layout as you have it shown feels like a tile or card based layout. In such a layout I would expect the entire "card" to be clickable.

share|improve this answer
    
Although your own expectations can be useful in judging a design, they're more suitable as a comment rather than a full answer. Do you have any evidence to support your assertion? –  3nafish Mar 14 at 3:38

The frontender: My point was that if you would present the title as the other links (ie blue and on hover behaviour, with some increased font-size ofcourse) you would not NEED the area click functionality because it is already clear where to click.

In my opinion if you need users to be able to click on entire blocks of content to follow a link that actually means that your design is not clear enough. One of the most important aspects of a webdesign is that how to browse through your website is instantly clear on first sight. How do you achieve this? To have consistent presentation (important in all aspects of design) on links throughout all pages.

share|improve this answer

The answer to the question is in asking 2 questions -

"What is that you want the user to do more?"
  • The user should just click more often - maybe to get more context out of the card

If yes, then you should make the entire thing clickable and change the mouse pointer to cursor as soon as it hovers over the card. Also, it makes sense to add hover to the whole card to lift it off of the grid just to make it obvious as to which one is currently being looked at.

  • The user should stay on this grid of cards longer so as to discover more content

This happens only when the description provides enough context and there is no real need to go into the detail. In this case, you can have the title and the image clickable.

"What is that the user will expect?"
  • As a user, should I expect different behaviour when I click on a video card vs a whitepaper card?
share|improve this answer

For elements such as Whitepapers, Videos, and other multimedia displayed items it's best to just make the whole set of elements clickable.

For things that are shown say such from search results or lots of items in a list I'd wager to never make the overview section clickable.

However in this case as it is for marketing the user has probably already accosted previous marketing to get to this area where you are showing these. Thus, likely they want to read/consume the content. Whitepapers in their nature users typically do not copy and paste the descriptions.

Note: Be sure there is an obvious distinction visually between the different whitepapers.

share|improve this answer

Something should 'feel' selectable. This isn't so much a 'best practice' issues as it is a visual design issues. Nothing in your visual presentation says 'I am selectable' to me.

So I'd say that what is more important than what you do/do not link is that you make it look like a user can select it.

At that point, I'd suggest bigger is (usually but not always) better--especially in the age of touch interfaces. Since all of the content in each section refers to the same item, there's probably not a lot of harm in making it all selectable.

share|improve this answer
    
When you say selectable, you mean clickable? Just want clarification since the discussion above is about not-linking because people might want to select stuff. –  Von Lion Mar 5 at 10:14
    
@VonLion right or wrong, it's a term we've adopted to attempt to remain device agnostic. When we say 'clickable' our developers often ignore 'keyboardable' and 'touchable' so we've adopted the more generic 'selectable (via any input means being used)'. In this context, it's a bit vague but I think it's fits. You are 'selecting which one you want to go look at more details about' –  DA01 Mar 5 at 17:00
2  
Usage is absolutely fine with me, just wanted clarification because the terms were used differently in another discussion :) –  Von Lion Mar 10 at 8:44

Since you don't have any other interactions in the tile space, you can safely link the entire tile to the article without much or any confusion.

I would recommend using a hover-state to indicate the tiles are selectable.

share|improve this answer

My point: measure it.

The way I would measure it is by using for example Chalkmark, buying a license and sending it out to the company mailing list.

There would be the screenshot, and a question saying "You want to see the video about the relationship between marketing and technology. Where do you click?"

(If I could replace Marketing with a synonim, that would be better)

And would wait for the answers.

I guess others have already done this study (or it can be done live with CrazyEgg or ClickTale), and my personal recommendation is that at least title and image should be clickable, but winning your arguments with actual data has side benefits.

The internet is full of tools like these, personally I made some of my clients buy one or more of these tools, but any other tool (or sometimes even their free versions) can be feasible.

You can even use UV ink and doing "fingerprinting" if you wish. Make sure you do it on a plastic surface eg. monitor or a punched pocket protector sheet.

share|improve this answer

You would make the whole set clickable and, to top it of, more accessible by adding a tabindex (e.g, tabindex="2") to the container div, so users can easily navigate though it using the keyboard.

share|improve this answer
1  
Hi @Marcello. Welcome to the site! Your answer appears to be more concerned with implementation of how to link rather than with what should be linked. Can you provide any evidence of what should be linked? At the moment, your post comes across as both off-topic and opinion-based. –  3nafish Mar 14 at 3:40
    
@3nafish, thanks for your feedback. That was a recommendation based on my personal experience – so of course it is opinion based. I was not off topic when I suggested that he should make the whole thing clickable – that was option 3 on the original question. Add the end, of my answer, I added a suggestion regarding making it accessible with basic html document markup, which might stray off the topic, but I believe would be helpful to be added to the conversation. –  Marcello Mar 14 at 17:19

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.