すべての場合と同様に、ユーザーテスト！ありがたいことに、ユーザビリティの英雄であるJakob Nielsenが、ここで彼の救出にジャンプします OK /キャンセルボタンに関するアラートボックスの記事 ：
[キャンセル]ボタンの前または後に[OK]ボタンを配置する必要がありますか？プラットフォームの規則に従うことは、個々のダイアログボックスを最適化するよりも重要です。
Kostyaは、プラットフォームガイドラインの遵守を助言する上で正解でした。しかし、Webベースのプラットフォームはどうでしょうか？
Webベースのアプリケーションを設計している場合は、決定は難しくなりますが、ほとんどのユーザーが好むプラットフォームを選択する必要があります。サーバーログには、特定のWebサイトまたはイントラネットのWindowsユーザーとMacユーザーの割合が表示されます。もちろん、Windowsには一般に多くのユーザーがいるため、ログを確認するのが面倒な場合は、ほとんどの状況に当てはまるガイドラインが最初に問題なく、最後にキャンセルします。
また、OK /キャンセルボタンを作成する際に考慮すべき2つの重要なガイドラインについても触れています。
- ボタンに名前を付ける方が、一般的なラベル（「OK」など）を使用するよりも、ボタンの機能を説明する方がよい場合がよくあります。明示的なラベルは「ジャストインタイムヘルプ」として機能し、ユーザーに正しいアクションを選択する自信を与えます。
- 最も頻繁に選択されるボタンをデフォルトにして強調表示します（そのアクションが特に危険な場合を除きます。その場合、ユーザーがEnterキーを押して誤ってボタンをアクティブにするのではなく、明示的にボタンを選択するようにします）。
答えは、使用するシステムのユーザーインターフェイスガイドラインにあります。
Windowsの場合
コミットボタンを次の順序で表示します。
- OK/[やる] /はい
- [しないでください] /いいえ
- キャンセル
- 適用する（存在する場合）
- ヘルプ（存在する場合）
したがって、[キャンセル]は常に[OK]ボタンの右側にあります。
MacOSの場合
アクションを開始するボタンは最も右側にあります。 [キャンセル]ボタンはこのボタンの左側にあります。
MacOSユーザーの場合、[キャンセル]は[OK]ボタンの左側にあります。
Android の場合
ダイアログの却下アクションは常に左側にあります。却下アクションは、ユーザーに前の状態に戻ります。
肯定的な行動は右側にあります。肯定的なアクションは、ダイアログをトリガーしたユーザーの目標に向かって進行を続けます。
Androidの場合、[キャンセル]は[OK]ボタンの左側にあります。
その他のシステムについては、ガイドラインを参照してください。
「読書」という比喩を考えてください。西洋人は左から右に読みますが、私たちの脳は左から右に流れるように条件付けられています。 CANCELは基本的に1ステップ後退（左）で、OK/SUBMIT/YES/Etc。は1ステップ前進（右）です。
WindowsのOK/Cancel規約は、ユーザーにとって多くの頭脳の調整を行っているようです。ですから、ユーザビリティテストは確かにたくさんの人で出てくるでしょう探している左側のOKボタン、右側のキャンセル。
しかし、事前調整なしでシステムとやり取りしている人の最も基本的な本能は変わりません。私の基本的な本能は、適用する色やサイズに関係なく、[OK]/[承認]/[進む]ボタンはダイアログボックスの右端にある必要があると言います。
ラベルや色の強調表示がないこのダイアログボックスを考えてみます。
どこをクリックしますか？フォームを送信する場合は、右側のEdgeのボタンをクリックします。その理由は、Windowsが登場する前は、次のように本能に慣れているからです。
- 英語は左から右に流れます。
- ブラウザのナビゲーションは、戻る（左）と進む（右）で機能します。
![enter image description here]()
- Dangerous Daveのような古い2Dゲームは、キャラクターがさらに進むと、キャラクターを右に移動します。
数直線上の数字は右に向かって増加し、左に向かって減少します。
周期表の原子量は右に行くほど大きくなります。
時計は右に向かっています。
カレンダーは日付を右に増やします。
WindowsプラットフォームがOK/Cancelを使用したアンチパターンを作成したと思います。これは現在、広く使用されているため、ユーザビリティの検証研究が行われています。しかし、上記の要素を考慮すると、右側の主ボタンを維持することは正当化され、防御可能な立場にあると私は思います。
編集：考慮すべきもう1つの要素は一貫性です。ダイアログボックスに追加のボタンが必要な場合は、右端の主ボタンを使用すると、配置の一貫性を保つことができます。視覚的な例はこれを明確にします：
言語が左から右に読まれるユーザーの場合、最初に目にするものをより重要視するため、[OK]ボタンを左に置くことをお勧めします。
これにより、このユーザーのサブセットはできるだけ早くタスクを完了することができます。
私見それはあなたが「OK」ボタンをどこに置くかあまり重要ではありません：左または右に。どのようなユーザーが（ヘブライ語またはアラビア語で）サイトにアクセスするかは関係ありません。彼らが使用するソフトウェアの種類は関係ありません。統計によると、ユーザーの55％が「OK」ボタンを右から見たいと思っていますが、右側に配置すると、残りの45％のユーザーが不満を感じることになります。
最善の解決策は、「OK」ボタンを強調すること（「キャンセル」よりも目立つようにすること）であり、すべてのユーザーが「OK」ボタンをより重要かつ主要なボタンとして簡単に示すようにします。
Googleや他の企業は、ソフトウェアでこのアプローチを使用しています。
Luke Wroblewskiは、Webフォーム（Webフォームデザイン：空白を埋める）についての本を書き、「一次および二次アクション」（http：// www.lukew.com/resources/articles/psactions.asp）などのいくつかの原則もカバーしました。 ）、「上、右、または左揃えのフォームラベル」（http：// www.lukew.com/ff/entry.asp?504）または「完了までのパス」など（あなたも読むことができます http ：//www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php ）
したがって、IMOは、使用しているラベル配置（垂直が望ましい）と左から右+トップダウンルールに応じて、最初のアクション（OK）を最初に配置し、次にセカンダリアクション（+ +キャンセル）
編集：フォームのラベル配置、Caroline Jarrett、2010年 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf
誰もが良い点を挙げたと思いますが、ここで言及すべき重要な点がもう1つあります。
OK /送信/保存などのボタンは、ポジティブアクションボタンと呼ばれます。同様に、キャンセル/リセットなどのボタンは、ネガティブアクションボタンと呼ばれます。
質問に答えるために、それらのほとんどにはいくつかの良い点がありますが、アプリケーションのユーザーテストは通常ほとんどの問題を決定するという別の認識があります。結局のところ、作成されたアプリケーションはユーザー専用です。
いくつかのアイモーメントテストとヒートテストがユーザーに対して行われ、ラボの可用性に応じてまだ行われていました。最高のシナリオは、ほとんどのユーザーがWebアプリケーションまたは他のアプリケーションを左から右から上隅から見て、下に向かってスクロールし始め、主要なホットスポットを拾い始め、一般に左下に向かって終了するというものです。常に左にポジティブアクションボタン、右にネガティブアクションボタンを配置することをお勧めします。
また、これらが少数のユーザーに基づいた研究であることを否定するのではなく、これが常に適切である必要はありませんが、ほとんどの場合はそうです。
ここでもう1つ重要な点は、ユーザーがネガティブボタンに到達するまでに少し時間がかかるため、ユーザーが考えて反応するのに十分な時間を与えることができるように、ポジティブアクションボタンとネガティブアクションボタンの間隔が広くなることです。
私はいくつかのポイントが私の経験と研究論文に基づいていることを説明しようとしました。
コメントを書いてください、そうすれば私ももっと学ぶことができます。
よろしくディーパックバジャジ
多くのアプリケーションは、OKボタンとキャンセルボタンに異なるスタイルを使用するようにシフトしています。一般的なUIの1つは、[OK]ボタンを従来のボタンにすることですが、[キャンセル]はリンクボタンです。これにより、2つの間に非常に明確な視覚的区別が与えられ、ユーザーが[OK]をクリックするように誘導されても、視覚的区別は最終的に違いを強調し、ユーザーが実際に必要なものを選択するのに役立ちます。
Webとデスクトップの両方のアプリケーションでこれを見てきました。
理由を明確にするために：
ヒットしやすいので、メインボタン（OK）をダイアログの正確な角に配置する方が「より正確」であると考えられています（これについて過去にいくつかの質問/議論がありました）。
ただし、これはユーザーが慣れていることにも依存します。Windowsユーザー向けのサイトまたはアプリケーションを作成する場合は、Windows標準に従うことをお勧めします。
キーボードの「Enter」がOKに正しく関連付けられていることを確認してください-多くの人もそれを使用します。
うわー！左または右を議論するそのような多くの答え。
私はこれについて自分でテストを行ったところ、統計的に結論が出ていないことがわかりました。
私が見つけた最良の答えは、主要なアクションが明確にマークされている限り、彼らが進む順序は問題ではないということでした-私は常に[Do it]/go/submit/etcにカラフルなボタンと小さなテキストのみを使用します[しないでください] /キャンセル/クリア/などのボタン。
UX StackExchangeの回答フォームの下部にある[回答を投稿]ボタンと[破棄]ボタンによく似ています。
あなたは興味深い意見を見つけることができます ここ ; Anthony T.は、「キャンセル」の右側に「OK」ボタンを配置することをお勧めします。
右側に「OK」ボタンがあると、凝視は少なくなり、一方向に流れます[...]
これを、ダイアログボックスの右側に配置されたプライマリアクションと左側に配置されたセカンダリアクションと比較してください。ユーザーは、2番目のアクションに目を向け、最初のアクションに目を移動してボタンをクリックします。これにより、1つの方向に合計2つの固視が作成され、ユーザーの視覚の流れが速くなります。ユーザーは各ボタンに1回だけ固執し、主要なアクションボタンで終了します。プライマリアクションを残しておくと、ユーザーが到達しやすくなりますが、ユーザーのメンタルプロセスと固視の観点から速度を見ると、ダイアログボックスの右側にプライマリアクションを配置する方が実際には高速です。
ASP.NET Webアプリケーションの場合、デフォルトのボタンの問題（Enterキーが押されたときに何が起動するかに関係なく）を処理するためにアスピリンをたくさん使用した後、デフォルトのボタンを左側に配置して、マークアップの最初になるようにします。
Enterキーが押されたとき（特に、Enterキーが押されたときにカーソルがテキストボックス内にあるとき）は、ブラウザによって、複数の送信ボタンの処理が異なります。一部のブラウザーは、マークアップの最初のボタンを使用してフォームを送信しますが、これは希望どおりではない場合があります（特に、サーバー側で後で何かを行う必要がある場合）。
デフォルトのボタンシナリオを処理するためにカスタムJavaScriptを使用しておらず、Webブラウザーのデフォルトの動作に依存している場合は、デフォルトのボタンを左側に配置する必要があります。
可能であれば、キャンセルボタンを完全に省略して、ジレンマを解消することをお勧めします。 -不必要な場合があり、誤ってアクティブ化されることがよくあります。
http://www.nngroup.com/articles/reset-and-cancel-buttons/ から：
ほとんどのWebフォームでは、[リセット]ボタンが削除されていれば、使いやすさが向上します。 キャンセルボタンもWebではほとんど価値がありません。
ユーザーが回避したいことにコミットしたことをユーザーが恐れている場合は、[キャンセル]ボタンを提供します。キャンセルする明示的な方法があると、単に去るだけでは得られない安全性がさらに高まります。
キャンセルは主に、ユーザーがアクションのある1つ以上のページを通過したマルチステップダイアログで役立ちます。現時点では、[戻る]ボタンを押してもこれらの操作は取り消されないため、ユーザーが[キャンセル]をクリックした方がよいでしょう。
最終的に（特に上記のすべての返信を読んだ後）、この議論はプラットフォームの慣習と「客観的な」ユーザビリティに要約されます。 「目的」とは、OSの慣習に慣れていないユーザーにとって、何かがどれほど使いやすいかということです。すなわち：
OK右側
このパターンは、ユーザーがあまり使用できないウィンドウの慣習に慣れていなければ、客観的なユーザビリティの議論で勝者になります（ article を参照）。記事で説明しているように、右側のOKを左から右への読み取り規約に合わせると、より効率的なタスクフローがより適切なコーナーターゲットとなり、タイムラインを左から右に実行する（したがって、右側の「戻る」/「キャンセル」は、過去のパターンであるため、意味があります。
左側がOK
Windowsの規則
それは残念な現実ですが、設計が不十分なパターン（左側の[OK]など）は慣習になり、ユーザーはそれらを期待するようになります。客観的にそれがより使いやすいパターンであるとしても、何か他のことをしようとすると、使い勝手が悪くなります。古典的な例は、メートル法とインペリアル法の測定システムです。メートル法システムには、使いやすさ、単位変換の容易さなどの点ですべてのメリットがあります。しかし、小さな町のアメリカ人がインチ/フィートに慣れているときにメートルとセンチメートルで考えるように強制すると、使い勝手が悪くなり、非常にイライラするユーザーになります。レッスンは、そもそも貧弱な慣習を決して導入しないようにするために、一生懸命働くことだと思います！
個人的にウェブ用にデザインするときは、左側に[OK]ボタンを配置することを選択します。また、帝国志向の人と話すときでも、身長をセンチメートルで、体重をキログラムで表すようにします。それは本当に消耗の戦争ですが、ゆっくりと帝国のシステムは衰退し、うまくいけば、ウィンドウズ '左側の大丈夫'な慣習も:)
右の「OK」でいきます。西から読む方向が左から右のためです。そして、「キャンセル」はあなたを先に進めることはしませんが、「OK」は先に進みます。
しかし、まったく異なるアプローチ。 「OK」を使用しないで、ボタンに何をするかを書いてください。たとえば、「保存」または「保存しない」では、ユーザーが説明テキストを読む必要はありません。時間を節約し、入力エラーを防ぎます。
笑私はこれらの答えの多くで笑わずにはいられません。森を見ずに木を見ているようなものです。すべてのUXの問題と同様に、基本的にはフォームのレイアウト方法によって異なります。たとえば、上部にラベルを付け、下部のフィールドにラベルを付けたり、左側のフィールドにラベルを付けたりします。ページ全体と、ユーザーの目がフォームを流れ落ちる様子を見てください。最後の[送信]ボタンに明確な見通しがありますか？
以前の投稿で述べたように、Webフォームに関するLuke Wroblewskiの本Webフォームのデザイン：空白の入力には、Webフォームの作成における最良のアドバイスと、ユーザーの観点から見たフォームの優れたパラダイムが含まれています-フォームは目的を達成するための手段です意図した最終結果（つまり、何かを購入したり、どこかにアクセスするためのアカウントを作成したりする）のために許容されます。もちろん、ユーザーテスト、ABテストは可能です。最終的な目標は、フォームを簡単に入力できるようにすることです。
私は否定的な行動のためのボタン（視覚的に）がなく、リンクだけがあるサイトのいくつかが本当に好きです。このようにして、ボタンを見るのに時間を浪費する必要がなくなり、ボタンが実際にそうであることがわかります。そして、ページが私に望んでいることをしたくないことがわかっている場合は、時間をかけてそれがどのように進むのが最善かを確認します（閉じるボタン、キャンセルボタンを探します）
代わりに：
[NOOOOO！] [CLICK ME！CLICK ME！]
あるだろう：
いいえ、結構です！ [はい、お願いします！]
このように、ボタンを配置する場所はそれほど重要ではありません。視覚的には1つだけなので、簡単に見つけることができます。
私のアプリでは、アクションボタンの目的を強調するために視覚的な色を使用しています。左右どちらでも構いません。私は個人的には右側に[OK]ボタンを配置することを好みます（私は右利きまたはosxユーザーなので、実際にはこれはリンクです。）
- 検証用の大きな緑色のボタン
- 削除用の大きな赤いボタン
- （大きいかどうか）キャンセル用の灰色のボタン
私にとってこれは論理的な順序です：
<LeftRight>
<PreviousNext>
<BackForward>
<BackDone
Do nothingDo it
CancelOK
OK以外は、次のような実際のアクションに置き換える必要があります。 SaveDeleteAcceptExit または Send。
置くことを主張する人々に会ったとき OK 左側に、私はいつも彼らに置くように頼みます Left 対 Right、 Previous 対 Next、および Back 対 Forward、そしてなぜ彼らがその順序でそれらを置くのかを彼らに議論させてから、彼らにその理由を議論させる OK 左側にあるはずです。
優先順位の高い順に、最初に利用可能なソリューションを使用します。
- プラットフォームのガイドライン
- 開始から終了（西部言語の開始は通常は左ですが、異なる場合もあります。例：アラビア語の開始は右で、終了は左）
- ユーザーが最も期待する方法
ただし、スクリーンリーダーや同様のユーザー補助ツールの場合、最初に主なアクション（西洋文化では左）を行うと、そのような特別なニーズを持つユーザーの時間を大幅に節約できます。
もちろん、双方の賛否両論があります。
私はこのようにそれを置くでしょう。 「ネガティブポジティブプレースメントが最適だと思いますか？いいえまたははい？」
ポイントは、「はいまたはいいえ」が話されたときにうまく流れるということです。これは、マイクロソフトが正負のボタン順序を選択した理由を説明している可能性があります。
一方、否定的な肯定的なフローは、肯定的な議論に重みを付けて、人の心の中でそれを新鮮に保つために、修辞学や討論でしばしば使用されます。 「あなたの子供たちが反対する党の手で苦しんでいるのを見たいですか？それとも私たちの党に投票してあなたの未来を確保したいですか？」等々。
ポジティブアクションを左側と右側のどちらで利用できるようにするかを決定する必要があると想定し、特定のオペレーティングシステムまたは物理装置（本）、抽象的な構成（ウィザードフォームフロー）などを使用するバイアスを無視して、行動科学統計的に左端のオプションが最初の選択肢としてより頻繁に選択されることを示唆しているようです。
これは、他の要素を考慮しない場合は、左側にポジティブアクション（OKまたは明示的なアクションラベル）を配置することをお勧めします。