複数のボタンがある場合にボタン階層を表示するための最良の方法は何ですか？
大規模なWebアプリケーションのUX/UIに取り組んでいます。私の質問はボタンの階層についてです。私はたくさんの調査を行いましたが、この問題に対処する適切なUIの例を見つけることができません。
上記の例からわかるように、「プライマリ」CTAと2つの「セカンダリ」CTAがあります。 「更新」アイコンもあるので、アクションが実行される前に新しいデータが取り込まれます（古いシステムが廃止されると、更新は表示されなくなります）。
私はいくつかの良い提案があるこの記事に出くわしました（ http://uxmovement.com/buttons/visual-weight-of-primary-and-secondary-action-buttons/ ）。
私は以前、これらのCTAの1つにハイパーリンクを使用しないことを決定していました。ユーザーがそれらを別の場所に連れて行ってアクションを実行しないと関連付けるためです。彼らは、アクションがプライマリCTAと反対の場合はハイパーリンクを使用できると提案しています。
ボタンのサイズは、ベースライングリッドとタップターゲットのサイズによって決まります。私が使用しているバーは、アプリケーション全体のすべてのフォームの上部と下部に表示されます。
モーダルウィンドウを設計しました。左側にプライマリCTA、右側にセカンダリCTAがあります。
それで、問題は、階層が等しい複数のCTAをどのように処理するのが最善ですか？プライマリはどこに配置する必要がありますか。
キャンセルする（フォームから移動する）場合は、ブラウザの[戻る]ボタンをクリックすることをユーザーに依存しても問題ありませんか？
複数のCTAが連続している良い例を見た人はいますか？
Mac OS Xのユーザーインターフェースの例を次に示します。これは、1984年以降、またはそれがLisaで使用された場合はおそらく以前のバージョンと同じ、非常に一般的なボタン階層を示しています。ドキュメントが作成されたが保存されていないため、ユーザーがドキュメントを閉じた。
生産的なアクションボタン「保存」（これもデフォルトのアクションです）は右側にあります。これは、左から右の言語で進むことを意味し、左から右に読むときにダイアログボックスで最後に読むためです正しい。 （つまり、「段落」の最後にあります。）キャンセルボタンは、逆方向に進むことを意味するため、生産的アクションボタンの左側にあります。破壊的なアクションボタンである[保存しない]は、ほとんど使用されないため、ユーザーが検討した後でのみ、単独でオフになっています。
私があなたのボタンを見るとき、私が「完全」が右であることを望みます。なぜなら、私があなたのインターフェースを左から右に読んでいるなら、それが最後に読むものだからです。 「完了」ボタンをタップする場合、それがインターフェイスで実行する最後の操作になると思います。他のオプションを読んでから、「完了」をタップする前に、それらのオプションを望まないことを決定します。
したがって、ボタンを階層で並べ替えるのではなく、読みやすさで並べ替えることができます。ユーザーが読むべき順序で並べ替えます。
これは、1つよりも多くの方法でビジュアルデザインに影響を与える問題であり、おそらく、後で説明するように、会話に他の人を巻き込む必要がある問題です。
ブランドガイドラインがある場合、ブランドアイデンティティとの一貫性を維持できるように、アプリケーションのビジュアルデザインでそれらのガイドラインを採用または拡張することが重要です。この場合、階層が等しい複数のCTAがある場合、プライマリパレットの色の影響またはハイライトを犠牲にしている可能性があります。したがって、2次的なアクションを考え出す必要がある場合がありますが、これは必ずしもブランディングに関連付ける必要があるものではありません。
デジタル設計ガイドラインがある場合、アプリケーションのルックアンドフィールがそれらのガイドラインに従うことが重要です。これにより、コンテンツの表示と対話の一貫性を維持できます。この場合、デフォルトの選択にはカラーパレットまたはスタイルがあり、階層が等しいものには別のカラーがある場合があります。または、一部のアクションを2次アクション（および3次アクションなど）に変換することもできます。これはブランディングとビジュアルデザインのガイドラインに影響を与える可能性があるため、変更に関するガイドラインの所有者に相談する必要があります。
例に従うときは、設計決定の背後にある理論的根拠を実際に理解する必要があります。そうしないと、アプリケーション設計にそれらを正しく一貫して適用できない場合があります。
私は過去にCTAボタンとプライマリアクションボタンなどを定義する必要がありましたが、通常はビジネスの主要機能に基づいて考えます。つまり、CTAはコンテンツや収益を促進するかもしれませんが、プライマリアクションはそれ以外の主要なユーザーアクションかもしれません範囲。
ここに私が取り組んだ最近のプロジェクトの例があります。これは私が何を意味するのかを説明するのに役立つかもしれません（画像は単なる画面のグラブなので、不要な見出しが含まれている可能性があります）。
CTA（行動を促すフレーズ）：
直接またはフローの一部として、サイトへの収益またはコンテンツを促進するユーザーアクションの場合。 「データのアップロード」または「サインアップ」。
主なアクション：
主ボタンは実行する主なタスクですが、コンテンツや収益を促進するものではありません。 「データのエクスポート」またはフォームやページの最後にある主要なアクションです。 「保存」または「アカウントの更新」。
セカンダリアクション：
セカンダリアクションは、画面内の他のコントロールに使用されます。 「ヘルプ」、「設定」など。これらはプロセスまたはページで最も重要なアクションまたは主要なアクションではありません（つまり、ページの主要な機能を満たす必要はありません）。これらはコントロール/アクションであり、通常は非-破壊的（コンテンツを削除または削除したり、プロセスを終了したりしないでください）。
三次アクション：
三次アクションは通常、破壊的または否定的/フローアクションに対して否定的です。 「キャンセル」または「アカウントの削除」。アクションの重大度に応じて、完了する前に確認手順を含める必要があります。アカウントの削除>よろしいですか？ >はい/いいえ。
注：ここにあるコピーの一部はプロジェクト自体に固有のものであり、当然、ケースバイケースで基準を決定する必要がありますが、この例がうまくいくことを願っていますボタン階層を定義する1つの方法