web-dev-qa-db-ja.com

フォーム上の削除ボタンの配置

フライトを編集するフォームがありますが、削除できるようになっているはずです。すべてのフライトを一覧表示するインデックスページに削除ボタンを配置することを検討しましたが、テーブル行自体がクリック可能であり、クリック可能な要素を別のクリック可能な要素に配置したくありませんでした。

削除ボタンの位置がフォーム上でどのようになるかを示す簡単なモックアップを作成しました。

Mock-up from flight form

削除ボタンの可能な位置を2つ確認しました。

1)ヘッダーを右に引っ張ります。ユーザーが気付かないかもしれませんが、保存ボタンから離れた場所に配置されているので、誤ってクリックするのを防ぐことができます。

2)保存ボタンの横。ユーザーはきっとそれに気づくでしょうが、誤ってそれをクリックすることによる重大なリスクがあります。

削除ボタンはどこに配置するとよいでしょうか?

15
Laurens

現在のモックアップの問題は、「削除」ボタンが最も目立つことです。私があなたのモックアップを見たときに私がすぐに思ったのは、「削除」ボタンが主要なアクションだということでした。最初のビューでは[保存]ボタンが無効になっているように見えるほど平坦ではありません。 「削除」ボタンのように飛び出すことはありません。

主なアクションが最も目立つアクションであることを確認してください。「保存」ボタンに緑色を適用して、目的のアクションであることをユーザーに明確に示すことができます。

「削除」ボタンについて。 これは2次アクションですは、大きな結果をもたらす可能性があり、すべての画面ビューで操作されないことに注意してください(削除アクションの使用頻度が保存アクションよりもはるかに少ない場合)。これらの理由により、ボタンはまったく使用しませんただしリンクではなく

ボタンの代わりにリンクを使用すると、アクションが実行可能であることをユーザーに明確に示しますが、同時に、望ましい(および期待される)アクションは削除ではなく保存であると説明します。

削除の処理方法

ユーザーが誤ってクリックしたり、意図したものとは異なるレコードを削除したりすることにより、ユーザーが誤ってレコードを削除する可能性があることに注意してください。そのためndo機能を含めるようにしてください、またはそれが何らかの理由で可能でない場合は、明確な確認を求めてください。

これをやりすぎないでください。ライトボックスや類似のモーダルユーザーのメンタルフローを壊すであり、影響がどれほど小さいかを問わず、すべての削除アクションを確認する必要があるのは本当に面倒です。 レコードを簡単に復元できない場合にのみ削除確認を要求する(および元に戻す機能を実装できない場合)

確認を使用する場合は、削除の影響も考慮してください。レコードを誤って削除した結果が簡単に復元されない場合は、レコードを削除しようとするときにユーザーにパスワードまたは確認文字列の入力を求めることで「スピードバンプ」を実装します

MailChimpがこれを行う方法を見てみましょう:

Example of delete confirmation modal in MailChimp

17
vincent.io

削除は、誰かが誤ってクリックしないようにするオプションであるため、合理的な範囲でde-emphasis deleteを実行する必要があります。

(例で行ったように)赤くすると、注目が集まります。代わりに、通常のアクションに注意を向ける必要があります(この場合は保存してください)。誤って選択する可能性が低くなるように十分に離れた場所に削除を配置する必要がありますが、それでも誰かがそれを探している場合は読み取り可能であることを確認してください。

これらのオプションのいずれかのようなものに沿った何か:
enter image description here
enter image description here

9
JohnGB

まず、これが削除関数の正しい場所であるかどうかはわかりません-私の最初の本能は、「削除」関数mightが何らかの「クリアフォーム」関数に似ているということでした。おそらく、抽象度の高いレベル(たとえば、フライトのリスト)で削除ボタンを添付するか、少なくともアクションの曖昧さを少なくすることをお勧めします。

位置については、右端の位置が失敗する可能性があることを想像するのは当然です。周辺視野に座っていると、ユーザーにテキストで要素を識別させるのが難しい場合があります。 「保存」ボタンの隣に要素を配置することはより強力なオプションです(ボタンのターゲットサイズが適切であり、なんらかの元に戻す機能があるので、「偶発的なクリック」は心配しません-私はそうは思いません- ever観察したモバイル以外のユーザビリティテストで偶発的なクリックが見られた)。ただし、「削除」が「保存」と何らかの関係があることを示唆している可能性があります。まるで「削除」または「変更をキャンセル」ボタンのようなものです。これは、「削除」がプロセスを終了するマルチステップフォームでは適切ですが、それ以外の場合は適切ではありません。

したがって、このフォームの前の意思決定ブランチで、別の段階で「削除」を公開することを検討します。

5