ボタンはどのように見えるはずですか？
以前はボタンを簡単に識別できました。もう違います。今日の一部のボタンは、ボタンとしてすぐに識別できません。また、一部が有効になっているかどうかが不明です。しかし、古いボタンは今日のユーザーには奇妙に見えるので、私はむしろそれらを使用しません。
では、どうすればユーザーにボタンを正しく示すことができますか？
（私は 青い下線付きハイパーリンク や、アプリの上部にある ⚙️✂???? のようなアイコンを参照していません。これらは問題ないようです。）
あなたの質問は、ボタンのデザインについて signifiers を中心に展開します（つまり、要素が何をできるか/どのように対話するかを伝えるヒント）。
ボタンに関するあなたの主な懸念は、それらの多くがテキストやアイコンの縁のない平らな領域になり、クリック可能性を示すこれらの重要な記号の多くが欠けていることだと思います。
デジタルインターフェイスの初期の頃から、UIデザインには 非常に興味深い進歩 がありました。初期のデジタルユーザーインターフェイスは 変形型デザイン （つまり、UI要素を実際の対応物に似せるように設計）から 完全に平坦化する要素 （影や奥行きの表示を使用しない）に重点を置いていました、今は ほとんどフラットな要素 を使用していますが、奥行きとフォーカスを伝えるために微妙なシャドウを使用しています（Flat 2.0と呼ばれます）.
だからあなたの質問に実際に答えるために...
ボタンは、クリック可能であることをユーザーに適切に通知する必要があります。そのためには、さまざまな設計手法を利用できます（確かに、これは包括的なリストではありません）。
注：私はこれらのすべてがボタンの優れた例であると主張しているわけではありませんが、それぞれがリストされたポイントを適切に例示しています。
Borders/shadingこれは、次のサイトで見られるように、3次元の実際のボタンに似ています。
![UX.SE's "Post Your Answer" button]()
ドロップシャドウ、Googleのマテリアルデザインガイドラインに（微妙に）見られる：
![Material Design button example]()
ホバーアニメーション。これらはモバイルインターフェイスでは使用できないため、他のアフォーダンスと組み合わせてのみ使用するように注意してください。 Windows 10のアクションセンターの例：
![Windows 10 button hover animation]()
配置/コンベンションは、相互作用がおなじみのパターンである場合に依存できます。 WhatsAppデスクトップアプリでは、絵文字または音声ディクテーションへのアクセスは、テキスト入力フィールドの近くに表示されます。これらが実際にクリック可能なボタンであるというアフォーダンスはほとんどありませんが、その前に他の多くのチャットクライアントを追跡するため、操作を推測できます。
![WhatsApp chat interface]()
間隔。同じWhatsAppインターフェイスの他の場所には、会話のための追加オプションがあります。これらは十分な間隔をあけて配置され、適切なターゲット領域を提供します。ボタンは従来、ユーザーがそれほど問題なくポイントしてクリックできるように十分な間隔で埋め込まれているため、たぶんこれは、スペースがクリック可能な操作に割り当てられていることを潜在的に示しています。
![Additional WhatsApp icon buttons]()
インターフェイスの設計における一貫性。 WhatsAppのインターフェースの例をもう一度使用すると、これらのボタンの1つを発見すると、ユーザーはインターフェース内のすべてのボタンを認識できるようになります。
（さて、最後のWhatsAppの例、私は約束します...） これのUX用語はわかりませんが、WhatsAppの設計には、「wellその他の要素も含まれています」という要素も含まれています？ "ボタンは情報を伝達しませんが、かなりのスペースが確保されているので、クリックしてみましょう！
一番下の行は...
いくつかのツールから選択できます。デザイナーは、要素にこれらの手がかりが十分にあることを確認して、ユーザーを正しい方向に導きます。
リクエストに応じてmaxaathousandの回答に関するコメントを拡大し、さらに洞察を加えました。
ボタンの最も重要な視覚的キーはコントラストです。これは以下を参照します：
- 背後の背景と対照的なボタン
- 周囲の要素やページ全体と対照的なボタン
- ボタン自体と対照的なボタン内のテキストまたはシンボル
- 他のボタンまたはボタンタイプと対照的なボタン
そうは言っても、これらはさまざまなグラフィックスタイルとトレンドで実現できます。たとえば、スキューモモーフィズムでは、ハイライト、シェーディング、およびシャドウを使用してボタンを背景の上に視覚的に持ち上げる3Dのような効果を作成しますが、フラットなデザインでは、色のコントラストと大きなパディングを使用します。
ボタンは、隣接する要素とのコントラストが低くなるため、ボタンと同じスタイルを他のアイテムで使用してはならないという意味で、一貫性はボタンの使用法にとって重要です。一貫性は、さまざまなボタンタイプにも当てはまります。たとえば、メインボタンは特定のスタイルで、セカンダリボタンは別のスタイルである必要があります。
ボタンの上にカーソルを置くと、それが機能ボタンであることを示すのに役立ちますが、タッチインターフェイスでは不可能であるため、これだけに依存するべきではありません。カーソルインターフェイスでは、これは装飾目的でのみ効果を追加するために使用されます。
ボタンの2番目に重要な視覚的キーは識別子です。ボタンはアクションをトリガーするために使用されるため、これを示す必要があります。ボタン内のテキストまたは記号が十分に明確であることを確認してください。この回答を公開するには、アクションテキスト「Post Your Answer」の付いたボタンを押すか、記入済みの連絡フォームを「送信」するか、ニュースレターに「登録」します。
ボタンが単にナビゲーション用である場合は、「次へ」、「ホーム」など、どこに行くのかを明確にする必要があります。
私はちょうど30分前の古いお母さんとSkypeで話しました。彼女はボタンを押す必要があることを理解しました-彼女は目の前の画面で2つのボタンを見ることができませんでした！これは、ボタンが真の3Dボタンのように描かれた数十年前には絶対に起こりませんでした。これは、ウィンドウやその他のGUI要素にも当てはまります。高齢者は、目の前にいても画面に表示されません。
すべてのユーザーグループを念頭に置いて適切に設計されたUIには、ボタンを3Dリアルなビューにできるだけ近づけて表示する「クラシックな外観」モードが必要だと思います。一部の人々は、退職後に初めてそれらをうまく試した今、コンピューターを使用しなければなりません。ここに：
適切な例です（- Wikipedia Commons から）：
このボタンには、ボタンとその周囲の両方に適切なシェーディングがあります。通常のフォントサイズと通常の色のコントラストで、明確で読みやすいテキストが含まれています。ボタンの色は背景色とは異なり、両者のコントラストがはっきりしています。珍しい色が出ません。
このボタンは本当に私を探して素敵です。本当に。このようなボタンをもう一度見たいです。私はあなたのデザインを素晴らしいものにしてくれることを楽しみに押し付けます。デザイナーがボタンの検索結果を好むためだけに、ボタンを探すのに10秒以上も費やさなければならないと考えるのはなぜですか。そして逆ではない？
ユーザーを感動させたいのなら、彼らを激怒させないための最初の目標ではないでしょうか？考えをさらに明確にするために、これは私が絶対に好きにならないということです：
（ Commons から派生）。
ボタンについても、このラジオボタンの混乱を投稿する義務があります。
（これはかなり楽しいです： https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc8695 ）