web-dev-qa-db-ja.com

実行中のWebアプリまたはWebサイトのリンクとボタンの違い、アフォーダンス、およびユーザーエクスペリエンス

この質問は以前に別の方法で尋ねられた可能性があることを知っていますが、私が探しているのは、リンクとボタンのすべての違いについて、それらをエンドユーザーの目に表示する上で重要なことは何ですか?

たとえば、UXガイドラインまたは this のような記事では、ボタンを処理するときにカーソルの形状に違いはないが、リンクはアフォーダンスの記号として手の形のカーソルを必要とするリンクであると述べられています彼らは持っている。

問題は、ユーザーの目にあるリンクまたはボタンとは何ですか?ユーザーがクリックしているリンクなのか、ボタンなのかをユーザーが知ることは重要ですか?特に、これらのオプションが同じ意味で使用されているWebサイトでは。それらは異なって提示されるべきですか?もしそうなら、それらを提示する方法で何が違うはずですか?ユーザーはリンクとボタンをどのように区別すべきですか?リンクのような形のリンクでのみ、カーソルの形状をいつ変更する必要がありますか?リンクのように機能するすべてのリンクとボタン(ナビゲーションボタンなど)についてまたは、ウェブ上でクリック可能な何かに?リンクでのみ変更する必要がある場合、ゴーストボタンまたはフラットボタンの記号は何ですか?また、リンクまたはボタンの他​​の記号は何ですか?

手の形のカーソルはリンク上でのみ使用し、すべてのボタンとリンク自体、つまりそのWebページでクリック可能なすべてのものに使用することを提案しているまさにその記事。これらの境界はどこにありますか?普遍的なガイドのようなものはありますか?

3
Jack-in-the-box

問題は、ユーザーの目にあるリンクまたはボタンとは何ですか?

ユーザーの目には、リンクによって別のポイント、つまり新しいページ、またはページやドキュメント内の新しいスポットにリダイレクトされます。そのため、テキストリンクにカーソルを合わせると手のアイコンが使用されます。

ボタンがその場合に頻繁に使用される場合でも、ボタンはリダイレクトを保証するものではありません。これは主に、ボタンがテキストリンクよりも多くの認識を高めるためです。

結局のところ、次のことをユーザーに示すことが重要です。

  • テキスト/ボタンはクリック可能な要素です
  • テキスト/ボタンが彼/彼女を別のページまたはスポットにリダイレクトする場合

これを行うには、リンクとボタンに通常の状態とホバー状態を使用します。テキストリンクを使用する場合は、フォントの太さ、下線、色で表示して、ユーザーがそれらを通常のテキストではなくリンクとして認識できるようにする必要があります。

リンクが別のページにリダイレクトする場合は、アイコンも使用するか、または「新しいウィンドウで開く」など、非常にわかりやすい表現を使用する必要があります。

1

これはユーザーの経験レベルに少し依存しているからといって、厳密なガイドラインがあるとは思いません。

ボタンとテキストリンクは基本的に同じ役割を果たしますが、視覚的な重みが異なります。ボタンは重要なCTAのリンク(推奨アクション)ですが、テキストリンクはあまりアクションではありません。

個人的には、テキストリンクとボタンの両方に同じ意味のカーソル変更を使用します。ボタンとテキストリンクは、分離して存在できます。ボタンは通常、それ自体が画像とコピーを伴います。多くの場合、テキストリンクは行にありますが、テキスト内でスタンドアロンで表示される場合があります。特にボタンも無効な状態になっていることが多いため、何かがクリック可能かどうかを知る必要があります。

彼らの推論は ツールバー (ほとんど)ハンドカーソルはありません。それは理にかなっている;ツールバーは、さまざまなオプションのコレクションです。ソフトウェアを見ると、ボタンやオプションにハンドカーソルが付いていないことがわかります。彼らはあなたがあなたがオプションに似ている何かをクリックできることを知っていることを期待しています。 Webサイトを使用すると、より多くの人々がそれを使用しており、クリック可能な要素を操作する場合、Webサイトを操作できるという安心感が必要になります。これは、ボタンの本来の美学の源でもあります。 「押し下げる」ことができる隆起した要素。特にゴーストボタンなどの美学とミニマリズムのために、より多くのWebサイトがより少ないアフォーダンスを使用するので、これは特に価値があります。

0
Wendy Wojenka