web-dev-qa-db-ja.com

ネガティブ/ポジティブボタンの位置

2つのボタンを考えてみます。
- OK
-キャンセル

正の「OK」ボタンを右または左に配置する必要がありますか?この場合に従う必要があるいくつかの規則または規則があります。次の画像について考えてみましょう。 「承認」ボタンと「拒否」リンクがあります。
-[承認]ボタンは辞退の左側または右側のどちらに配置しますか?
-「拒否」オプションもボタンにする必要がありますか、それともリンクにする必要がありますか?

enter image description here

14
Komal Waseem

ノーマンニールセングループの記事 OK-Cancel or Cancel-OK? で答えがある一般的な問題:

TL; DR

概要:[OK]ボタンは[キャンセル]ボタンの前または後のどちらに配置する必要がありますか?プラットフォームの規則に従うことは、個々のダイアログボックスを最適化するよりも重要です。

長い話

全体的なユーザーエクスペリエンスにはあまり関係のない、UIデザインの細部に関する無数の質問が寄せられます。クラシックの1つは、ダイアログボックス内のボタンの順序です。

OK /キャンセル

キャンセル/ OK

どちらも合理的な選択であり、人々は自分の好みについて何時間も議論することができます:

リストOKは最初に、英語やその他の言語で左から右に読む自然な読み順をサポートします。他の多くのボタンセットには自然な進行があります(たとえば、はい/いいえまたは前/次へ)。読み取り順序が論理的な順序と一致するように、これらを常にリストする必要があります。この場合、OK/Cancelです。さらに、ユーザーがキャンセルよりも頻繁にOKを必要とする場合、このオプションを最初に配置して、ボタンにタブで移動するキーボード主導のユーザーが1回少ないキーストロークで希望の選択肢に到達できるようにすることをお勧めします。 OKをリストすると、ダイアログボックスが終了して「終了」するため、フローが最後に改善されます。また、前/次と同様に、[OK]はユーザーを前に移動する選択であり、[キャンセル]はユーザーを後ろに移動する選択であると主張できます。したがって、OKは右側のNext:と同じ場所にあるはずです。

11
Benny Skogberg

「ポジティブ」ボタンを右側に配置することで、次のことが可能になるため、より良い選択だと思います。

  • より速い視覚的な流れ
  • スキャンが簡単です

「ポジティブ」ボタンと「ネガティブ」ボタンの視覚的な重みも非常に重要です。

2
hattori hanzo

スクリーンショットを考慮すると、すべての行のボタンが揃っていて、すべての正のボタンが列に一緒に表示されている限り、最初に正のボタンを使用すると、英語や他の言語で左から右に読むのに最適です。

これの論理的な理由の1つは、ポジティブアクションを最初に保持し、ページの残りの項目に近づけることにより、これらのターゲットアクションに到達しやすくすることによる、フィットの法則への準拠です。

2
djagatram

この例では、まず、ユーザーがこれらのボタンをどのように操作するかを検討する必要があります。

マウスを操作しているユーザーは、コンテンツに近い左側にある[承認]ボタンを必要とする可能性があります。

一方、すべてのユーザーがモバイルタッチスクリーンを介してフォームを操作している場合は、右側に[承認]ボタンを配置すると、最も簡単に到達できる場所に配置されます。

ユーザーが複数のインターフェースを介して定期的にやり取りする場合は、ユーザーデバイスに基づいてボタンの位置を変更しないでください。その不一致は、両方を使用するユーザーを混乱させたり不満にしたりする可能性が高いためです。ボタンの順序を1つ選び、それをすべてのインターフェースで使用する必要があります。


ボタンがダイアログボックスのナビゲーションボタンである場合、それは別の問題になります。ナビゲーションボタンとして、「OK」と「キャンセル」はそれぞれ「次へ」と「戻る」に相当しますが、「OK」ボタンは右側にある必要があります。右は「次へ」です。

0
Brian