「詳細」ボタンと表の行全体をリンクにする

Question

サイトに大きなテーブル（14列）があります。各行を別のページにリンクしたい。行をクリックすると、その行に関連するページに移動することをユーザーに知らせる最良の方法は何ですか？

1. 行全体をリンクにします（ホバーの行をjavascript/darken）
2. 右端に[詳細]ボタンを使用して別の列を追加 申し訳ありませんが、オプション1では各行がリンクであることをユーザーが認識できず（テーブルの上にマウスを移動しない場合）、オプション2ではテーブルが乱雑になります。

Answer 1

「詳細」リンクを使用してください

最高のUX研究者の一人 Luke Wroblewski がキャンペーンを運営している Obvious always wins なので、私は[詳細]リンクの使用に傾いています。重要なUI要素をメニューなどの背後に隠すのではなく、常にページに表示して明らかにする方が良いと彼は主張します。彼は膨大な量のデータを扱い、十分な情報に基づいた決定を下すので、私は彼を信頼しています。

詳細情報リンクの長所/短所：

• このオプションが使用可能であることをユーザーに明示的に伝えます（そのオプションは明らかです）。

• ユーザーはリンクをクリックしたときに何が起こるかを予想するでしょう-"詳細"。

• 追加の水平方向のスペースが必要です。

「詳細」リンクを使用しない場合

リンクを削除することをお勧めする唯一のケースは、テーブルに水平方向のスペースを追加して列を追加する必要があり、ユーザーがアプリを頻繁に（毎日、または少なくとも毎週）使用している場合です。頻繁なユーザーは、このオプションが存在することを学び、行のリンクをクリックした後に何が起こるかを理解します。

ただし、この方法ではアプリの学習性が低下します。ユーザーの大多数が繰り返し訪問者である場合、表に情報を表示するために学習性を犠牲にすることは理にかなっています。それは簡単な決定ではありません。

Answer 2

ユーザーが探している可能性が最も高い一意の識別子が含まれている列はどれですか。最初にそれを配置し、ハイパーリンクします。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 3

アクセシビリティポイントの観点から、2番目のオプション、つまり「詳細」列を使用することをお勧めします。これにより、テーブルを簡単に作成できるようになると思います キーボードからアクセス可能（WCAG 2.0を参照） 。

スクリーンリーダーのユーザーにとって、列のリンクがどこに移動するかは明確であることに注意してください。これらのリンクに画像を使用する場合は、代替テキストが必要になります（例：<a href="markotto.html"><img src="x.png" alt="more info on Mark Otto" /></a>）。 （WCAG 2.0テクニックの リンクテキスト を参照してください。）

最後の点は実装の側面と考えられるかもしれませんが、スクリーンリーダーのユーザーエクスペリエンスに影響を与えます。