web-dev-qa-db-ja.com

Webページから移動するアクションとページを操作するアクションを区別する方法

昔、Webページ上のリンクとアクションは、別のWebページに移動したり、サーバーで何かを処理したりするためにのみ提供されていました。現在、コンテンツの展開、モーダルダイアログの起動、ポップアップの表示、表示設定の切り替えなど、多くのリンクとボタンが現在のページとの対話に使用されています。

これは、ユーザーがページから移動したくない状況での最新のWebブラウジングに新たな複雑さをもたらします。たとえば、フォームに入力している最中に、用語の1つが理解できないが、その横に詳細情報へのリンクがあるとします。それはすばらしいことですが、そのリンクをクリックして新しいページに移動してすべての進捗状況をクリアできるかどうかはわかりません。運が良ければ、リンクはインラインヘルプを表示するか、新しいタブ(target="_blank")ですが、これらはいずれもエンドユーザーに対して透過的ではありません。ユーザーは、中クリックまたは右クリックで新しいタブを強制的に開こうとすることができますが、クリックがページイベントをトリガーするためだけに使用されている場合、通常これはうまく処理されません。

1つの解決策は、explicitlyアイコンで外部リンクを示す にすることです: External Link Icon

しかし、これには多くのことが望まれます。まず、このアイコンの不在では、このデザインが現在のページに均一に適用されているかどうかは、ユーザーにはまだ完全にわかりません。次に、これは通常、別のドメインのサイトを示すためにのみ使用されます。リンクが同じサイトの別のページに移動する場合、アイコンは不明確です。

アフォーダンスを処理する1つの方法は、シェブロンを使用して折りたたみ可能なコントロールを示すことです。

Chevron Example

しかし、それはポップオーバーやモーダルをもたらす多くの状況では当てはまりません。

最新のWebアプリケーションを構築するとき、アクションが現在のページにのみ影響することをどのように示すことができますか?

3
KyleMit

ハイパーリンクの破線の下線はどうですか?

local link   
- - - - -

link to another page
____________________

これは、ヘルプファイルが90年代に行った方法です。これには、ハイパーリンク(別のページへのリンク)の最も一般的な用途を同じに保ち、「新しい」タイプのリンクのアフォーダンスを変更するという利点もあります。ページ内でポップアップ/展開するリンクは、別のページへの従来のハイパーリンクよりもはるかに新しい

2
Clay Nichols

新しいウィンドウで開くアイコン意味をなさない。しかし、それは言う同じページで90%を操作するWebサイトでのみ使用できます。

すべての可能なリンクを新しいページで開いている場合、アイコンは役に立たないになります。

ただし、新しいウィンドウに取り組む最善の方法は、新しいタブで開くことだと思います。したがって、ユーザーが新しく開いたタブを引き続き表示したい場合は、基本的にアンカーポイントを設定して、前のタブに移動します。

たとえば、ウェブページに10個のリンクがあり、そのうち9個が同じページに表示されている場合、10番目のリンクが新しいタブを開くことを示すアイコンを表示できます。

1
Swapnil Borkar