OK / Cancelボタンを右揃えにするか中央揃えにするか？
ダイアログのどこにOK / Cancelボタンを配置すればよいですか？下部で中央揃えまたは右揃えですか？私は両方を見てきましたが、個人的には気にしていませんが、アプリケーション全体で一貫した外観を作成したいと考えています。これに関するガイドラインはありますか、それとも私がやりたいことは何でもいいですか
私はこれがこの質問にも当てはまり、それに答えると思います：
（ネタバレ：それは問題ではない。）
このような場合、何をするかは関係ありません。どちらを選択しても有利な議論があり、選択の余地がユーザビリティの大惨事を引き起こす可能性は低いです。特定の状況で「正しい」選択を選択した場合、一部のユーザーを0.1秒節約する可能性がありますが、その選択が何であるかを見つけるために十分に手の込んだ調査を実施することは価値がありません。主要業績評価指標を83％以上変化させる可能性のあるものに、ユーザビリティリソースを費やす方が良いでしょう。
アラインメントについて厳密に言えば、一貫していること以外に正しい答えはありません。
ただし、ボタンの配置は ボタンの配置または論理的な順序 に関連しています。
ボタンの配置に適用できる2つの一般的なパラダイムがあります**。
- 読み取り順序-読み取り順序で最初に表示されるボタンがプライマリ（OK）であり、後続のオプションよりも優先されます（キャンセル）
- 前進/後退-前進または前進（アクション）は右への移動に関連付けられていますが、後進または取り消し（キャンセル）は左への移動に関連付けられています。
ボタンの配置は、ユーザーの知覚パラダイムに影響を与える可能性があります。そのため、位置合わせと位置のいくつかの組み合わせは競合し、ユーザーを混乱させる可能性があります。
**これは、左から右に読むことを前提としています。おそらく右から左に読む言語では同じではありません。
アプリケーションとターゲットOSに適合するものを実行します。
ただし、指摘するように、アプリケーション全体で一貫性を保つことはおそらくより重要です。
私はそれらを正しく揃えることがより良い（そしてより一般的な）と思います。
それらは常に右側にあり、ユーザーはそれらが右側にあることを期待しています。それらに十分な間隔を空け、主要なアクションを強調するためにそれらに異なるスタイルを与えることを確認してください。
最も可能性の高いアクション（この場合はOK）を右側に配置し、特定の色を付けて見つけやすくし、左側の可能性が低いアクション（この場合はキャンセル）を灰色またはフォームの背景の線に沿った色。
並べて配置するのは悪いデザインだと思います。 「考えさせないでください」というアプローチに従って、キャンセルする必要がある場合-停止してボタンを探しますが、それ以外の場合は、自動的に動作したいだけです。
それはあなたのプラットフォームに依存します。 Windowsでは、右側にボタンを<OK> <Cancel>の順に配置し、Mac OSXを<Cancel> <OK>の順に配置します。他の回答と同様に...一貫している。ボタンの配置については、右下の方がいいと思います。
次の理由により、「OK」または優先アクションボタンが左側にあるはずだと思います1：フォームまたはダイアログボックスでキーボードを使用するユーザーの割合が高く、左側にある場合、タブを介してユーザーが最も好ましいアクションに到達するまでの時間が短くなります。 。 2：目の回転またはフィッツの法則3：ブラインド（半ブラインド）の人や、スピーチモードでアプリケーションを運転またはアクセスしているときのアプリケーションの使用について考えます。 4：最後に、少なくとも動詞をアクションとして使用する
このフォーラムにはたくさんのスレッドがあります。
また、私の提案は小さなデバイス用ではないことに注意してください。
直線的なプロセス（インストーラーなど）の場合、「西側の環境では」「次へ」ボタンを右に配置する方が直感的です。
ボタンの順序の方が重要だと思います。 Windowsでは、「OKボタン」は常に左側にあり、「キャンセルボタン」は右側にあります。ユーザーが読んでいないため、（移植されたMacアプリケーションのように）OKボタンとキャンセルボタンを入れ替えると、ユーザーが混乱します。
デザインによると思います。フォームに標準デザインを使用している場合は、右側に[OK]/[キャンセル]ボタンを配置します（http://bit.ly/9IzQo0）が、CSSを使用してフォームを変更している場合は、それらを配置します中央（http://www.tumblr.com/register）。
フォームフィールドが左揃えの場合、ボタンも左揃えにするのが理にかなっているようです。ユーザーの目が実際にどこに行くか、そして彼らがどれだけ速く反応するかに関するいくつかの調査はここにあります： http://www.lukew.com/ff/entry.asp?571
これは、特に上記のフォームコントロールも左揃えの場合、これら2つのオプションの左揃えが最良の設計選択であることを示唆しています。左側に[送信]ボタンと[キャンセル]ボタンを配置すると、人の目が移動する距離が短くなります。
目の動きの点では、[ボタンを右揃えにしたオプション]を使用した場合、人々は最も非効率でした。
このようなトピックをケースバイケースで批評するのは簡単だと思いますが、意見やテスト結果を発表する際には、設計システム全体やパターンライブラリ全体を検討する必要があると思います。問題の事実は、コンテンツとテストに応じて、一部は左側のOKと右側のOKでより高い変換を示すかもしれません。
しかし、設計システム全体を検討する場合、個々の左/右のテストで最適に機能する場合よりも一貫性が優れていると考えますか？ 「支払いプロファイルの削除」などの否定的な外部性がある場合、「フォワード」アクションを意図的に反転させ、リバーシブルではないものなど、CTAを左側に配置してキャンセルすることに同意します右側に。
しかし、これを念頭に置いても、大多数のユーザーが（現時点では）Windowsユーザーであり、段階的な進行チェックアウトフローを行っていると想像してみてください。 「チェックアウト」または「続行」が右側にあり、左側に「戻る」または「キャンセル」があるはずです。これは、ほとんどのモーダル使用のキャンセル/ OKレイアウト（Foundationを除く）にも当てはまりますが、個々のA/Bテストについて議論している人や、より高い変換がオンになっているテストを使用している人にとってはうまくいきません。左と右。
個人的には、テストの経験では、CTAは右側で最もよく機能しますが、CTAを左端の位置に表示するスタイルガイドまたはデザインパターンを持つ人々がどのような指標を持っているのか常に知りたいです。
- 彼らが兄弟であることを暗示するためにそれらが接近している限り、順序は重要ではありません。つまり、[OK]ボタンと[キャンセル]ボタンの機能は異なりますが、同じ要素に影響します。
- 左から右への言語の場合、ボタンを中央に配置するか、右に揃えます。
- ブランドに合った色でOKボタンを強調します。
通常、左側に[OK]を使用し、右側に[キャンセル]を使用します。
このパターンの変更を見ることができる唯一のケース（そしてこれは髪の毛を分割することです）は、ユーザーの側での取り返しのつかないアクション（つまり、アカウントを削除する、すべての人間を殺すなど）であり、その後、彼らに行動について考えるように強制するか、デフォルトの行動をより安全なオプションにすることを強制したい。
Gutenbergダイアグラム によると、ターミナルエリア（ユーザーがページのコンテンツをスキャンした後にサイトが最終呼び出しを提示するエリア）は画面の右下です。欧米の読者の自然な読書パターンのため、この場所にボタンを配置すると、この場所で閲覧を終了するため、ユーザーの疲労が実際に軽減されます。ボタンが左下にある場合、ユーザーは通常、ターミナルエリアで終了し、リコールに基づいて左に戻ってアクションを実行する必要があります。このパターンは、ポップアップと編集/追加画面の両方に適用されます。
この一般的なパターンは、ボタンが配置される順序にも適用されます。 [キャンセル]の前に[OK]をリストすると、ユーザーはほとんどすべてのオプションを表示してから、必要なオプションを選択します。ほとんどの場合、ユーザーは[キャンセル]ではなく[OK]をクリックします。つまり、[OK]、[キャンセル]の順に表示され、[OK]に戻ります。非常にマイナーですが、まだ作業が追加されています。
ここで素晴らしい答え。誰も言及していないのは、GUIでターゲットをクリックする速度（および容易さ）を規定するフィットの法則です。これは、主ボタンを配置する場所にいくつかの難しい科学を与えます。
基本的にフィッツの法則（ https://en.wikipedia.org/wiki/Fitts%27s_law ）は、ターゲットのサイズと距離が、ターゲットに当たるまでの時間に予想通りに作用すると述べています。ボタンが「ボックス」の隅にある場合、目標サイズは間違いなく無限です（実際に無限の目標サイズは、カーソルがそれ自体で停止するコンピューター画面の隅です）。速度は常に第一の考慮事項ではありませんが、快適さ（使いやすさ）は重要です。
インタラクティブデモ（コーナーなし！）： http://simonwallner.at/ext/fitts/