web-dev-qa-db-ja.com

テキストリンクの区別

私はコピー内のリンク(ツールヒントのようなウィンドウがポップアップする)と標準のリンク(訪問者を別のページに移動する)にホバー状態を使用するサイトで作業しています。

違いは、ホバーリンクは、その下にミシン目が引かれた線によって識別され、標準リンクには標準の「下線」があることです。

これらのリンクには2つの明確に異なるアクションがあるため、視覚的に異なるように見えることを示唆するベストプラクティスや読み物はありますか?

参考までに-テキストリンクは個別のアクションを持ち、動作が異なるため、異なる方法で処理する必要があると思います。

乾杯

5
Tommisauce

このスレッドの他の良い提案には、それらのツールチップリンクの(CSSを介して)カーソルを変更することをお勧めします。

 a.tooltip {
 cursor:help; 
} 

「ヘルプ」カーソルタイプは、ツールチップリンク、ホバー時に表示されるタイトル属性を持つ頭字語など、Webの周りで頻繁に適用されます。

包括的なリストについては、 http://css-tricks.com/almanac/properties/c/cursor/ を参照してください。また、カスタム画像をカーソルとして使用できることに注意してください。これは、アプリケーションの「ヘルプ」カーソルの疑問符の外観よりも望ましい場合があります。

1
simmer

私が質問を解釈すると、テキスト内のセグメントが通常のリンクまたはリンクではないホバー要素のいずれかである可能性があるテキストの文章が表示されますが、ホバーすると要素に隣接して表示する小さなポップアップがトリガーされます。

通常のリンクは下線と異なる色(通常は青)でキューイングする必要があることはよく知られていますが、下線が破線のホバーリンクは一般の人にはあまり知られていません。その慣習を知るには、ほとんどWebデザイナーの分野との関連が必要です。したがって、破線の下線を追加する(または破線の下線を完全にスキップする)ことに加えて、アイテムが展開可能であることを示すインジケーター(▼)も表示することをお勧めします。

三角形のユニコードIDへのリンクです。

これがどのように見えるかの例です:

enter image description here

ホバー時: enter image description here

展開可能なインジケーターは従来型であり、ほとんどのユーザーはそれを認識し、要素がホバーまたはクリックで表示される追加情報を保持していると正常に解釈します。

0
AndroidHustle

ユーザーは各アフォーダンスの結果に対して1つの期待を持っている可能性が高いため、さまざまなアクションを区別する必要があります。ベストプラクティスとして、ツールチップの使用法を説明する スレッドがあります。 これはツールチップをリンクと比較しない場合があります(大体はそうではありません)。そもそも表示が異なる。

そのスレッドから借りるために、Glen Lipkaはこの画像を投稿して、ツールチップを示すためのいくつかの一般的なパターンを強調しています。

enter image description here

すでに破線の下線を使用しているようです。ツールチップの使用目的(サイト上のアイコン、定義、略語など)についての参照は提供していませんが、これは、非表示の情報を表示するために完全に異なるルートをたどるだけでなく、どのルートに影響するかもしれません。

0
glilley

これは、これらのホバーリンクの長さ(1つの単語、いくつかの単語、全文)によって異なります。数語以上の場合は、インラインアイコンや、テキストに明確に関連付けられている余白のアイコンなど、別の方法を検討してください。

1つか2つの単語で、使用頻度が少ない場合は、このページにタグが表示されるようなものを使用することを検討してください。元の質問の下を見て、これらのタグがテキスト内にインラインで表示されることを想像してください。それがあなたの目標であれば、彼らは目を引くでしょう。

あなたの目標がそれを控えめに保つことであるか、単語の辞書定義のようにそれらがたくさんある場合は、点線の下線に固執してください。

0
green-onions