web-dev-qa-db-ja.com

ボタンとリンクの違いは何ですか?

ボタンとリンクの違いは何ですか?

53
sparkling

経験則:リンクをクリックすると別の場所に移動し、ボタンは何かを実行します。

そうは言っても、この点に関しては柔軟性があります。リンクは、優先度の低いボタンと見なされる場合があり、ほとんどの場合、ボタンは別の場所に移動します。

[2013を編集]この回答を書いて以来、状況は少し変わっています。私は大きなボタンを明確な「行動を促すフレーズ」として使用し、どの画面でも2つ以上のボタンを使用しないようにしています。次に、優先度の低いオプションとして、小さめのタグのようなボタンまたはリンクを使用します。

ボタンとリンクの異なる意味はその性質ではなく、視覚的な重みと画面/デザインの階層における位置にあります。

50
luna1999

一般に、ユーザーはリンクへのリンクとコマンドボタンへのコマンドを期待しています。つまり、リンクはナビゲートし、基礎となるデータオブジェクトまたはそれらの関係や位置を変更せずに新しいコンテンツを提示します。ボタンはこれらを変更し、作成、削除、関連付け、変換、複製などを実行します。簡単な経験則は、コントロールの最も簡潔なキャプションが名詞(たとえば、ホーム、製品、サイトマップ)である場合に使用します。リンク。キャプションが動詞(例:更新、送信、削除、購入)の場合は、ボタンを使用します。

ただし、シッククライアントのデスクトップアプリでは、ボタンが移動する可能性があります。特に、Web(およびリンク)が一般的に使用される前に作成された古いアプリの場合は特にそうです。さらに、最近ではさまざまなWebサイトでコマンドボタンの代わりにリンクが使用されており、一部のスタイルガイドでもこれを支持しています。実際、リンクは他のほぼすべてのコントロール(ラジオボタン、タブ、チェックボックスなど)の代わりに使用されています。

私はこれらすべてがユーザーを混乱させると信じており、私たちは実際には、異なる機能のために異なる外観のコントロールを使用する必要があります。 Webアプリとデスクトップアプリはどちらも、リンクとボタンをそれぞれ使用して、ナビゲーションとコマンドを明確に区別する必要があります。ナビゲートは、コマンドとは大きく異なります。

  • ナビゲート後にユーザーが保存する必要はありません。コマンドの後で保存が頻繁に必要になります。

  • ユーザーは、[戻る]をクリックするか、ウィンドウを閉じると、ナビゲーションを簡単に元に戻すことができます。それは常に「安全な」行動です。コマンドは、Webアプリで頻繁に元に戻すことはできません。コマンドを元に戻すことができる場合は、元に戻す機能を使用します。この機能には、戻るや閉じるとは異なるユーザー応答が含まれます。

  • コマンドは、ナビゲーションよりも微妙なフィードバックを提供します。一般に、ユーザーに新しいコンテンツが表示されたときに明らかになります。コマンドはコンテンツの変更を表示する場合がありますが、多くの場合、変更は明らかではありません(たとえば、コピーまたは保存)。多くの場合、Webアプリは確認ページを使用します(私の本ではナビゲーションとしてカウントされません)。

これらの理由により、ユーザーがナビゲーションとコマンドを明確に制御できるようになり、幸い、ボタンとリンクに対するユーザーの期待がこれを容易にします。ただし、コマンドのリンク(およびナビゲーションのボタン)を継続して使用すると、これらの期待が損なわれ、まもなくこの機会が失われます。

グラフィックで区別されるナビゲーションとコマンドは、ユーザーと通信する強力な方法を提供します。たとえば、「お問い合わせ」がリンクの場合、住所と電話番号のリストが表示されます(「お問い合わせ」は非常に一般的な慣習なので、「連絡先」というより簡潔な「連絡先」というラベルを付けます)。特にメニューで)。対照的に、「お問い合わせ」がボタンの場合、ユーザーは質問やコメントを直接送信できるフォームに移動します(ボタンのキャプションには、コマンドにさらに情報が必要であることを示す省略記号が必要です)。

特にオブジェクト選択アクションインターフェースを持たない一般的なウェブアプリでは、セカンダリアクションの軽量なコントロールが必要であることに同意します。ただし、解決策は、適切なコントロールの軽量バージョンを開発することであり、ユーザーの期待がまったく異なる別のコントロールを採用するのではありません。このような軽量のコントロールは技術的にはリンクである場合がありますが、真似しているコントロールのように見えるはずです。たとえば、軽量の「ボタン」は、中央揃えのキャプションが付いた、影付きの小さな長方形のリンクされた画像にすることができます。

ナビゲーション/コマンドの区別には灰色の領域があり、これを整理する必要があります。適切な調査を実施できるようになるまで、次のことをお勧めします。

リンクを使用する:

  • コンテンツのページをロードする

  • 動的に生成されたコンテンツの読み込み。

  • その他のオプション(タブなど)がない場合は、ページの一部にコンテンツをロードします。

  • ウィザードのページ間を移動する(ボタンを使用する従来のデスクトップウィザードとは対照的)。

コマンドボタンを使用する:

  • 基になるコンテンツまたはデータオブジェクトを変更または適用するアクション。

  • 他に選択肢がない場合にコンテンツの表示に影響を与えるアクション。

  • ウィザードの終了アクションを含む、ダイアログのコマンドの実行。

  • ダイアログをキャンセルすると、キャンセルするとダイアログのパラメーターがデフォルト値または以前の値にリセットされます。

キャプションの最後に省略記号が付いたコマンドボタンを使用して、ダイアログにアクセスします。

http://www.zuschlogin.com/?p=18 にあるGoryの詳細。

47

リンクは関係を伝え、ボタンはアクションを強調します。

この推論は、ボタンが実際に物理ボタンを模倣するという前提に基づいており、リンクの記号の意味は連鎖から生じています

マシン上の実際のボタンまたはトリガーが何をするかを考えれば、デジタルボタンがどのようなアクションを使用できるかを簡単に確認できます。つまりonofffireなど。ハイパーリンクをライブラリのインデックスカードと考える場合も同様です-book abc on shelf a1 section b-アイテムへの道を識別するために使用されます。

どちらも異なるシナリオで交換可能ですが、暗黙の機能は少し異なります。

7
kontur

リンクはテキスト—テキストをクリックするだけの場合はリンクです。

ボタンは物理的なコントロールまたはアイコンのように見える傾向があります(多くはリンクに偽装されていますが)—テキストの周囲の領域をクリックできる場合、それはボタンです

リンクは異なるページに移動する傾向がありますが、ボタンはアクションを表す傾向がありますが、これらのアクションにはナビゲーションが含まれていることがよくあります。リンクはテキストベースであるため、視覚的な影響が軽くなる傾向があります。ボタンは機能的な使用を強調する傾向があります。たとえば、大きな[保存]ボタンは、インラインの[保存]リンクよりも大きな影響を与えます。

ボタンは物理的なコントロールのメンタルモデルを表しますが、リンクは物理的なアナログのない純粋なハイパーテキストエンティティです。 Webデザインが進化するにつれて、ボタンとリンクのUXの違いが曖昧になりました。多くのボタンは、単なるテキストのようにスタイル設定されています。 CSSスタイルのテキストは、ボタンのように見えます。

4
Taj Moore

意味的に言えば、サーバーの状態を変更するアクションは、POSTからのリクエストを使用して実行する必要があるため、リンクではなくボタンを使用します。

だからといって、2つのスタイルを設定して外観や動作を同じにできないわけではありませんが、マークアップは異なるはずです。

3
Pete Williams

上記に同意し、特に非Webアプリ(WinFormsなど)でコマンドにハイパーリンクを使用することに反対します。

Web以外のアプリでは、ハイパーリンクは「別の情報に移動したくない場合は無視してください」とユーザーに伝え、ボタンは「何かを変更するか、クリックするとダイアログを表示する」と言います。

問題は、2つが同じ意味で使用され、新しいユーザーが特定のコマンドを探してフォームをスキャンしている場合です。しばらくすると、すべてのハイパーリンクも調べる必要があることに気づき、UIのメタファが一貫していないため、ユーザーが探しているものを見つけるのに常に2倍の時間がかかります。比喩が一貫していない場合、ユーザーは信頼を失い、ソフトウェアを憎み始めます。このようなソフトウェアを使用しようとすると、ユーザーが壁にぶつかります(Hotmailには、しばらくの間、確かにしばらくの間、ハイパーリンクとして「attach」コマンドがあったと思います)。

Microsoft Windowsインタラクションガイドラインは、この問題について少しあいまいです。

彼らは、リンクが二次コマンドに受け入れられることを示唆しています。上記のMichael Zushlagが投稿したリンクは、これと 軽量ボタンの必要性 について優れた点を示しています。

二次コマンドの軽量ボタンで見られる問題は、これらがどのコマンドであるかを知ることです。これらの背後に一貫したロジックがあり(ユーザーには明らか)、プライマリコマンドとセカンダリコマンドを簡単に区別できる場合は、これが最適なオプションです。

1
SturmUndDrang

ブラウザーで 'read/unread' periodを簡単に変更できる古き良き時代には、別の色で既読リンクが表示されます-リンクの利点は、どこにいるかが簡単にわかることです。すでにされています。

(脚注-あなたはまだ期間を変更することができるかもしれません-しかし、私はこれを行うコントロールを見つけることを試みることをあきらめて以来ずっと...)

1
PhillipW

リンクは古くからあり、ウェブ上のボタンよりも人口が多い。コンテンツをナビゲートするコンテキストで使用すると、効果的です。

ボタンは、ユーザーがWebサイトへのコミットメントまたは投資のフォームを作成するコンテキストで使用すると、はるかに強力なアフォーダンスになります。 (つまり、保存、共有、サブスクライブ、参加など)

私が書いた記事でこれについて詳しく説明します: the-link-vs-button-debate

これにより、2つをいつすべて使用するかという問題が解消されることを願っています。

1
anthony

リンクとボタンの違いに注意する1つの非常に重要なことは、クローラー(Googleのような検索サイトと多くのサイトレベルの検索エンジンの両方)がボタンのターゲットに移動しないことです。リンクをたどるだけです。

それを超えて、ルナ、マイケル、ピートは私が考えることができる他のすべてについてちょうどカバーする有効なポイントを持っています。

1
Charles Boyung

Michael Zuschlagの答えは素晴らしいです。リンクが単純な参照(アンカー)と異なるのは、正確に言えます。

多くの人は、リンクとアンカーの違いを表示しないため、ユーザーエクスペリエンス/インタラクションとHTMLマークアップを混同します。-リンクには方向(順方向リンクまたは逆方向リンク)があり、リレーションで識別できますが、アクティブ化できないため、ハイパーテキスト参照(HTMLのhref属性)にアクセスするために、ユーザーエージェントを使用するユーザーが使用します(ナビゲーションツールバーでOperaを除く)。-アンカーのみが参照します。ユーザーエージェントがこの動作を定義しているため、(クリックまたはキーボードで)アクティブ化できる場合でも、それは別のリソースへの参照にすぎません。

アンカーとボタンの違いを理解するのに役立つと思います:-行動を促すときにボタンを使用します(マイケルが「更新、送信、削除、購入」で言ったように、「もっと読む」、「ダウンロード」、など)-リソースを識別するアンカーテキストで別のリソースを単に参照する場合は、アンカーを使用します。ユーザーにそれを読むことを要求する場合、それは単なる参照ではなく「行動を促すフレーズ」であることを意味するので、ボタンで実装します。

1
nGD92

最新のWebではボタンとリンクが同じ意味で使用されていることは事実ですが、それらを区別する基本的なブラウザー機能が1つあります。

ユーザーはリンクを新しいウィンドウまたはタブで開くことができます。 A <button>または<input type='button'>できません。

(例として、下の[コメントの追加]リンクと(コメントの追加)ボタンを右クリックしてみてください-最初のユーザーのみが[新しいタブでリンクを開く]を許可しています。)

<a>リンクはボタンのようにスタイル設定できます。ユーザーは通常、タブで開く機能がリンクのように見えるものにのみ機能することを期待します。

0
joeytwiddle

私の経験では、リンクはクリック可能であると認識されやすいことが多いため、ボタンの代わりにリンクを使用する決定につながることがあります。しかし、ユーザーがアクションをトリガーしているプロセスの奥深くでこれを行うべきではないことに同意します。また、動詞と名詞の区別が英語以外の言語では難しい場合があることも付け加えておきます。

0
Laura

2つを区別する最も簡単な方法は、リンクがユーザーをナビゲートする一方で、ボタンがアクションをトリガーする

より良いアイデアを提供するために、Microsoft、Google、およびAppleの設計ガイドラインからの引用をいくつか示します。

リンク:

ハイパーリンクは、ユーザーをアプリの別の部分に移動したり、別のアプリに移動したり、別のブラウザーアプリを使用して特定のURI(Uniform Resource Identifier)を起動したりします Microsoftデザインガイドライン

ボタン:

ボタンは、ユーザーに即時アクションをトリガーする方法を提供します Microsoftデザインガイドライン

ボタンを使用すると、ユーザーは1回のタップでアクションを実行して選択を行うことができます- Material Design Guidelines

ボタンは、アプリ固有のアクションを開始し、背景をカスタマイズでき、タイトルやアイコンを含めることができます Appleデザインガイドライン

設計ガイドラインをたどると、ボタンの用途がより用途が広く、設計しているプラ​​ットフォーム(AndroidまたはiOS)など)によって異なることに気付くでしょう。

疑わしいときは、特にボタンの種類については、現時点でのベストプラクティスを調べて、状況に最も適したものを選びます。

0
Arial

私はアクセシビリティの観点から来ており、非視覚的または低視力のユーザーのために、リンクとボタンを選択する別の方法があります。この問題は、ユーザーが視覚的な人物と同じ速度と方法でページを移動できない場合に発生し、タイトルIIIの差別について訴訟を起こします。リンクのように見える場合は、リンクである必要があります

それがアヒルのようにガクガク鳴って、アヒルのように見えるなら、それはアヒルです...

0
Jon M