ベストプラクティス：モーダルでのキャンセルボタンの位置
私は現在、ソフトウェアのモーダルに取り組んでおり、左端に常に[キャンセル]ボタンを配置しています（図のバージョンA）。しかし、自分自身をモーダルについて詳しく説明しているときに、ほとんどのWebサイトがボタンを右側にある主ボタン（図のバージョンB）に近づけているように見えました。 2番目のオプションがより採用される具体的なユーザビリティの理由はありますか？バージョンAを保持する必要があるかどうかわかりません。答えてくれる方、ありがとうございました！
ユーザーが近くで利用可能なアクションを確認できるように視覚的にグループ化することに加えて、ボタンバーのスペースを確保して、破壊的なアクションを分離したり、ステータスを示したりできます。
利用可能なアクションをすばやく確認するために機能をまとめる一般的なパターンに加えて（左から右に見る必要はありません）、ボタンバーで利用可能なスペースは、ステータスの更新や破壊的なアクションの配置に使用できます。
破壊的なアクションのためのスペースの確保：
あなたがいる場合、あなたはパターンを見つけるでしょう Delete ボタン、それはより一般的なアクションから離れて意図的に配置されています。
ステータスインジケーターのスペースの予約：
編集にダイアログを使用するが、大きなプロパティやタブなどを備えている一部のシステムでは、ステータス表示のためにボタンバーのスペースが確保されています。 Save：
どちらも正しいですが、状況によって異なります。
bigモーダルで、キャンセルが破壊的アクションの場合、置く離れて！
ユーザーがかなりの量のデータを入力する必要がある大きなモーダルでは、誤ってキャンセルを打つことは非常に有害です。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
smallモーダルの場合、誤って[キャンセル]を押すと最小限のダメージしか得られませんが、一般的なアプローチに従い、それらを近接させます。
もちろん[〜＃〜] b [〜＃〜]：
ユーザーが画面上を移動する時間が短いほど、インターフェイスのデザインが良くなります。
フィッツの法則はそれを要約します：
設計者は、オブジェクトが同じシーケンスチェーンで使用される場合、オブジェクトを互いに近づけることを目指す必要があります。また、利用可能なスペースの量に応じて、画面のインタラクティブな要素をできるだけ大きくする必要があります。散らばった小さなオブジェクトは、選択に最も時間がかかります。この設計機能の組み合わせはできるだけ避けてください。