web-dev-qa-db-ja.com

リンクがモーダルウィンドウを開くことを示す最良の方法は何ですか？

アイテムをクリックするとモーダルウィンドウにそのアイテムの詳細が表示されることをユーザーに感じさせたい。

web-apphyperlinksmodal-windows
9
Alex

モーダルウィンドウは今日では非常に一般的であるため、ユーザーはそのようなものが表示されるのを見て驚かないかもしれません。

モーダルウィンドウの内容は、パターン自体よりも重要です。

  • コンテンツがアクションの場合、エリプシス（別名サスペンションポイント）を使用するのは一般的なパターンです。

enter image description here

  • コンテンツが単なる情報で長い場合は、単純なリンクまたはボタンを使用する必要があります。

enter image description here このボタンをクリックすると、モーダルウィンドウが開きます（再生リストについて）

  • コンテンツが単なる情報で短い場合：モーダルウィンドウを使用しない場合は、ツールチップを使用します。

enter image description here

6
Gildas Frémont

最良の方法は、URLにアイコンを付けることです。私は頭の上から、モーダルダイアログを表すのに役立つ2つのアイコンを知っています。

外部リンク

external link icon

新しいウィンドウ

new window icon

次に、アイコンの上にtooltipを付けて、次のような効果があることを示します。

モーダルダイアログで詳細を表示


アイコンソース： jQuery UI ThemeRoller

4
Code Maverick

一般的な規則についてはわかりませんが、同じ問題があり、次の解決策を使用しました。

リンクは ブートストラップボタン として表示され、 フルスクリーングリフィコン を追加しました。

結果は次のとおりです。

enter image description here

最初のアイコンはeditで、2番目のアイコンはfullscreenです。ユーザーに期待していますリンクをクリックすることで、フルスクリーンでエンティティを編集できることを理解します。この場合はモーダルウィンドウです。

3
A.L

たとえば、「詳細を表示」が付いたリンクやボタンなど、行動を促すフレーズがある場合、モーダルウィンドウは広く普及していますが、これをクリックしたことをユーザーに明示的に通知する理由はありますか？モーダルウィンドウを開きますか？

これは、不要な警告として認識される可能性があります。ユーザーが詳細情報を表示したい場合は、クリックしてモーダルウィンドウを開きます。大したことはありません:)

1
cgoasduff

残念ながら、リンクがページを離れるか、ページ上に留まるかを示す固定の基準はありません。

ただし、一部のWebサイトでは、ホバーしたときに青い破線の下線が表示されるリンクを使用しています。これは、アクションがページを離れないことをユーザーに納得させるのに役立ちます。

画面スペースを占有することなく、ユーザーに詳細情報を提供することもできます。要素のtitle属性を設定するだけです。このテキストは、ユーザーがリンクにカーソルを合わせるとツールチップに表示されます。したがって、注意深いユーザーに対して、クリックしたときに何が起こるかを説明できます。

CSS：

a.modal-link {
  text-decoration: none;             /* Suppress the default underline */
}
a.modal-link:hover {
  border-bottom: 1px dashed #88f;    /* Show a light blue dashed line on hover. */
}

HTML：

<a class="modal-link" title="Popup more information on this page">Details</a>
1
joeytwiddle