What part of overview item should be clickable

Question

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.

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

Answer 1

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

• 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.

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

Amazon

Google shopping

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

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.

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.

Answer 2

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: 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:

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.
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.

Answer 3

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.

Answer 4

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.

Answer 5

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

Medium

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

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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?

Answer 10

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.

Answer 11

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.

Answer 12

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.

Answer 13

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.

Answer 14

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.