概要アイテムのどの部分をクリックできるようにするか
ホワイトペーパー、ビデオ、その他のリソースの概要を作成しています。私とフロントエンドのデザイナーは、アイテムのどの部分をクリックできるようにするかについて少し意見が分かれています。
それがあるべきです：
- タイトルのみ
- タイトルと本文または
- 画像、タイトル、本文、つまり全体ですか？
注、私は質問の中立性を維持したいので、どのオプションに対しても賛成/反対の議論を入れていません
編集：ありがとうございます、すべてをクリック可能にすることにしました:-)
私の提案は、Titleとimageクリック可能にすることです。その理由は次のとおりです
- タイトルは通常、実際のアイテムに移動するためのリンクとして参照され、通常はクリックできます。これは、Amazon、Ebay、Googleニュースを含む多くのサイトで見ることができます。タイトルはクリック可能で、ユーザーがアイテムをチェックアウトするためのメインリンクです。
Ebay 
- 画像は一般にページ上で最も視覚的な側面であり、目は画像に描かれ、クリックできるようにすると、ユーザーはすばやくナビゲートできますご希望の商品に。
次に、画像がタイトルと説明に関連付けられている場合の ユーザーがコンテンツをスキャンする方法のフロー を示します。
これは、Youtube、Ebay、Amazon、およびGoogleショッピングを含む多くのサイトに広く実装されています。
Amazon 
Googleショッピング
説明をクリックできるようにすることもできますが、一般的な傾向は、説明をテキストのままにして、ユーザーがコンテンツをスキャンしてコピーして貼り付けることができるようにすることです望ましい。また、ユーザーがコンテンツにカーソルを合わせたときにエリア全体がクリック可能になり、偶発的なクリックが発生するのを防ぎます。上記のGoogle製品の例と以下のGoogleニュースの例を確認してください
クリック可能な領域の視覚的アフォーダンスの重要性
最初の投稿で、YouTubeにはテキスト領域がクリックできないと誤って言及しましたが、David Mulderの回答を読んでいると、私の間違いに気付き、領域全体がクリック可能であることがわかりました。
ただし、の説明テキストには下線やリンクの色がないため、 その領域をクリックできる視覚的なアフォーダンスはなく、ユーザーはコピーして貼り付けようとしたとき、または偶発的なクリックによって事故が発生すると、ビデオが開かれ、予期した結果ではないため、ビデオを混乱させます。ユーザーがエリアにカーソルを合わせるとクリック可能かどうかを確認できますが、モバイルデバイスではホバーオプションがないため、モバイルデバイスでコンテンツにアクセスする人の数が増えるため、残念ながら機能しません。モバイル要因は避けられません。
ユーザーがどこをクリックするかわからない可能性があり、テキストをクリック不可にすると実際には無効になるという主張があるかもしれません。そのため、空白領域をクリック可能にすることさえYouTubeの意図により、より簡単にアクセスできます。可能性のある相互作用（ホワイトスペース）の視覚的インジケータがないコンテンツや間隔を含めて領域全体をクリック可能にすることで、偶発的なクリックの範囲が増加し、ユーザーが新しいページに到達した方法についてユーザーを混乱させたり、この場合のビデオ。 MSDNの リンクデザインパターンガイドライン に従って
基本的なガイドラインは、ユーザーが目視検査だけでリンクを認識できる必要があることです。オブジェクトにカーソルを合わせたり、クリックしてリンクであるかどうかを判断したりする必要はありません。
ここでは多くの概念に同意しないので、反対の見方も追加します。ほとんどの回答と同様に、画像とタイトルはクリック可能でなければならないことに同意しますが、現代のデザインでは、ボックス全体をクリック可能にすることは非常に許容できます。
さて、最初に、最新のYoutubeイテレーションではボックス全体がクリック可能であることを指摘しておきます。 さらに、Mervin Johnsinghの回答で言及されているデザインの多くは比較的古く、最新の再デザイン-youtube-のリストにあるすべての領域をクリックできることを指摘しておきます。サイトを再設計することの不利な点は、不幸なユーザーが常にいるため、大胆に再設計しないでユーザーを満足させ続けることです...すべての人が新しい現代の競合他社に飛びつくまでは。それでは、再設計を恐れない会社のモダンなデザインの別の例を示します。 
次に、より大きなUIの習慣を見てみましょう。
- 従来、htmlとwebは単純なテキストドキュメントに使用されていました。ここでは、リンクとテキストの間に明確な違いがありました。
- アプリケーションでは、伝統的に説明を含めて、領域全体をクリックできるようにするのが一般的のようですが、本当に良い比較を見つけることができません。
![enter image description here]()
- すべてのモバイルアプリは、領域全体（たとえば、Windows Phoneのタイルや、新しいAndroidや任意のリストインターフェイスのカードなど）もクリック可能にします。
1）ユーザーがモバイルアプリケーションを一貫して使用しており、Webアプリケーションの成熟度が高まっている（古いデスクトップの傾向とモバイルの傾向の両方に続く）ことを考慮すると、これを優れたUXの手がかりとして採用するのが妥当と思われます。 （ウェブページに別のガイドラインを使用するのではなく）。
そして最後に、ユーザビリティの観点から：
- より多くのエリアをクリック可能にすることは、どこかに行くことを期待してクリックするユーザーが少なくなることを意味しますが、どこにも行きません。
- より多くの領域はより多くのミスクリックを意味しますが、これは今日多くのウェブアプリケーション（およびサイトも同様）で事実上画面全体がクリック可能であり、それらはまだそのように設計されています。
- 説明をクリック可能にすることは、説明を選択できないことを意味します。そのため、コピーの理由から、リンクページでも同じテキストを使用できるようにしてください。さらにnoテキストの選択を期待しているときにユーザーがクリックする危険性があります。これは、このことの大きな指標、つまりカーソルがテキストカーソルではなく手に変化するためです。これはまさにこの種のことを意図しており、うまく機能します。
結論として、リンク（青い下線付きテキストとして視覚的にスタイルが設定されている<a>のように）は主にテキスト内に存在する必要があると主張します。 「外部」オブジェクトを表す様式化されたタイル/ボックス/リスト項目の場合、デザインはそれが個々の項目であることを明確にします（<-重要!!!）エリア全体をクリック可能にします。ホバリング中にクリック可能であることを示すことが重要です。これには、少なくともカーソルをcursor:pointerに変更する必要があります。理想的には、いくつかの:hover効果が有益な場合があります。 （古い）ユーザーを支援するために、疑問がある場合は、ボックス内にリンクとして「続きを読む...」を追加することをお勧めします。説明文がそれ自体のアイテムになるほど長くなる場合は、リンクを解除したままにしておくとよいでしょう。
説明をクリック可能にするのが良い考えであるまったく異なる理由は、携帯電話でサイトのユーザーがテキストを頻繁にクリックして、何も起こらないことにリンクしていることを期待するためです。そして、モバイルブラウザがますます一般的になり、サイトの実際の機能を変更せずにユーザーに対応するためにレスポンシブデザインを使用するサイトが増えています（そういうわけで：D）ので、今すぐサイトを作成することをお勧めします可能な限りモバイルフレンドリー。
リンクが説明と視覚的に区別できると仮定すると、次のようになります。
- title：間違いなくはい、何かがクリック可能でなければならないため。
- 画像：おそらくはい。訪問者は画像だけに反応し、テキストを決して読まない可能性があるためです。
- 説明：ありません
なぜ説明がないのですか？さて、まず、ページに表示するリンクが多いほど、選択肢が多くなり、ユーザーが圧倒されるほど、決定を下す可能性が低くなります。第二に、タイトルは体と区別がつかず、タイトルとしての有効性が薄れます。最後に、 テキストの壁 にはリンクを含めないでください。
説明を読んだ後に訪問者がたどるリンクを希望する場合は、「もっと読む>>>」リンクを追加してください。
allは別のページにディスパッチする広告のようなティーザーとして機能するため、全体がクリック可能である必要があります。これは、別の回答で言及されているeコマース製品の詳細の類推よりも、AdWordsユニットと共通しています。
信じられないほど説得力のある理由がない限りnot特定のアイテムをクリック可能にするためには、ユニットの任意の部分でデッドクリックの危険を冒すことは意味がありません。
デザイン内のアイテムが3つの要素すべて（画像、タイトル、説明）をグループ化して、それらがしっかりと囲まれている場合は、領域全体をクリックできるようにすることをお勧めします。そして、それはあなたの例の場合です。
説明をクリックできるようにするための私の議論は、タイトルと説明がデザインの非常に近くにあり、視覚的な違いはそれらを完全に別個の要素として扱うのに十分大きくないということです。また、composite要素の目的は、ユーザーを新しいコンテンツに誘導することです。
考慮すべきいくつかのポイント：
- 要素の近接性と囲まれた領域
- タイトルに対する説明の重み（視覚および情報の観点から）
- その項目の目標とユーザーが次に何をするかを期待する
例、
Vimeo 
中 
以下は特殊なケースですが、ユーザーが次に何をしたいかによってデザインを決めることができます。
別の方法で処理されるクリック操作をサポートする必要がない限り（この場合はそうではないと確信しています）、全体が確実に全体としてクリック可能であり、単一のリンクを持つ単一のエンティティと見なされます。
これは、タイル全体を単一のアトミックオブジェクトとして扱うことが、アイテムを表す最も簡単な方法であるためです。 （ビジュアルデザインでも、タイルの角を丸めることでこれを強制します。）タイルのpartsを区別し始めると、そのアイテムの客観的な表現に不要な複雑さが導入されます。階層のように考えてください。画像、タイトル、説明は、すべて親コンテナアイテムのサブ要素です。深く行くほど、要素が増え、より複雑になります。複雑さを導入するneedがない場合、なぜそれを行うのですか？
それを考える別の方法はこれです：記事の説明へのクリックを破棄することでどのような利点が得られますか？私が考えられる唯一のことは、コピーするテキストを選択するのが簡単になるということです。率直に言って、特にそれ自体が記事自体からはるかに簡単に行うことができるので、私はそれを強力な反論として見ていません。
さらに、物事がモバイルフレンドリーなインターフェースにますます移行するにつれて、小さな「Read more ...」リンクを特に目的とするのではなく、タップする大きなターゲットが1つあるだけで、物事がずっと楽しくなります。
表示されているレイアウトは、タイルまたはカードベースのレイアウトのようです。そのようなレイアウトでは、「カード」全体がクリック可能であると期待します。
フロントエンド：私の要点は、タイトルを他のリンクとして表示する場合（つまり、青色で、カーソルを置いたときの動作で、コースサイズのフォントサイズを増やした場合）、クリックする場所が既に明確になっているため、エリアクリック機能は必要ないということです。
私の意見では、ユーザーがコンテンツのブロック全体をクリックしてリンクをたどることができるようにする必要がある場合、実際にはデザインが十分に明確ではないことを意味します。ウェブデザインの最も重要な側面の1つは、ウェブサイトの閲覧方法が一目ですぐにわかることです。これをどのように達成しますか？すべてのページのリンクに一貫したプレゼンテーション（デザインのすべての側面で重要）を持たせる。
質問への答えは2つの質問をすることです-
"What is that you want the user to do more?"
- ユーザーはより頻繁にクリックする必要があります-多分カードからより多くのコンテキストを取得するために
「はい」の場合は、カード全体にカーソルを合わせたらすぐにクリック可能にし、マウスポインタをカーソルに変更します。また、カード全体にカーソルを合わせて、グリッドから離すこともできます。どちらが現在表示されているかを明確にするためです。
- ユーザーは、より多くのコンテンツを見つけるために、このカードのグリッドに長く留まる必要があります
これは、説明が十分なコンテキストを提供し、詳細に進む必要が実際にない場合にのみ発生します。この場合、タイトルと画像をクリック可能にすることができます。
"What is that the user will expect?"
- ユーザーとして、ビデオカードとホワイトペーパーカードをクリックしたときの動作は異なりますか？
ホワイトペーパー、ビデオ、その他のマルチメディア表示アイテムなどの要素の場合は、要素のセット全体をクリック可能にすることをお勧めします。
表示されているものについては、検索結果やリスト内の多くのアイテムからそう言っているので、概要セクションをクリックできないようにしたくはありません。
ただし、この場合はマーケティング用であるため、ユーザーはおそらく、以前に行ったマーケティングを行って、これらを表示しているこの領域に到達しているはずです。したがって、おそらく彼らはコンテンツを読んだり消費したりしたいと思うでしょう。通常、ユーザーが使用するホワイトペーパーでは、説明をコピーして貼り付けません。
注：異なるホワイトペーパーには、視覚的に明確な違いがあることを確認してください。
何かが選択可能であると「感じる」必要があります。これは視覚的なデザインの問題であるため、「ベストプラクティス」の問題ではありません。あなたのビジュアルプレゼンテーションには、「私は選択可能です」とは書かれていません。
したがって、リンクする/リンクしないことよりも重要なことは、ユーザーが選択できるように見せることです。
その時点で、特にタッチインターフェイスの時代には、大きいほど（通常は常にではありませんが）優れていることをお勧めします。各セクションのすべてのコンテンツが同じアイテムを参照しているため、すべてを選択可能にすることにそれほど害はありません。
私のポイント：測定してください。
それを測定する方法は、たとえば Chalkmark を使用して、ライセンスを購入し、会社のメーリングリストに送信することです。
スクリーンショットと、「マーケティングとテクノロジーの関係についてのビデオを見たいと思っています。どこをクリックしますか？」という質問があります。
（マーケティングをシノニムに置き換えることができれば、それはより良いでしょう）
そして答えを待ちます。
他の人がすでにこの調査を行っていると思います（または CrazyEgg または ClickTale を使用してライブで行うことができます）。私の個人的な推奨事項は、少なくともタイトルと画像をクリックできるようにすることです。しかし、実際のデータで議論に勝つことには副次的な利点があります。
インターネットはこれらのようなツールでいっぱいです、個人的に私はいくつかのクライアントにこれらのツールの1つ以上を購入させましたが、他のツール（または時には無料バージョン）も実現可能です。
必要に応じて、UVインクを使用して「指紋」を作成することもできます。必ずプラスチックの表面で行ってください。モニターまたはパンチポケットプロテクターシート。
タイルスペースで他の操作を行わないため、混乱を招くことなく、タイル全体を記事に安全にリンクできます。
ホバー状態を使用してタイルが選択可能であることを示すことをお勧めします。