web-dev-qa-db-ja.com

送信してリセットボタン、最もよい順序は何ですか?

SubmitResetボタンがあり、最後にフォームがある場合、ユーザーエクスペリエンスの最適な順序は何ですか?

Submit最初に?

enter image description here

またはResetを最初に?

enter image description here

66
Alex

リセットボタンを完全に削除することをお勧めします。 Nielsen Norman Groupからのこの抜粋をご覧ください。

リセット:使用しない

実質的にすべてのリセットボタンが削除された場合、Webはより幸せな場所になります。このボタンはユーザーを助けることはほとんどありませんが、しばしばユーザーを傷つけます。

リセットはWebフォーム上のユーザーの入力を消去しますが、なぜ人々はそれをしたいのでしょうか? Webの特徴は、ページ間の頻繁な移動であり、ユーザーが同じフォームに2回遭遇することはめったにありません。したがって、ユーザーがWebフォームを表示すると、ほとんどの場合Webフォームはクリアされます。ユーザーが1回のセッションでフォームに再度アクセスした場合でも、通常は古いデータを編集して消去してからやり直すよりも高速です。

リセットボタンは、次の3つの点でユーザーを傷つけます。

1.)[リセット]の最悪の問題は、[送信]をクリックしたいときにユーザーが誤ってボタンをクリックしてしまうことです。バング-あなたの仕事はすべてなくなりました!

2.)フォームの下部に2つのボタンがあると、インターフェースが乱雑になり、ユーザーが次のステップを明確に見にくくなります。役に立たないボタンをスキャンし、2つのボタンのどちらが正しいボタンであるかを判断するために、多少の無駄な時間が費やされています。

3.)ユーザーがフォームに入力したデータの一部を削除したい場合でも、追加のボタンはユーザーに選択肢があることを意味するため、そのための専用ボタンを用意するのが遅くなる可能性があります。誤ったフィールドを編集します古いテキストを新しいテキストに置き換えて、[リセット]をクリックし、新しいテキストを[すてきなクリーンフィールド]に入力します。追加の選択には追加の検討が必要であり、最適な対話手法を使用することで節約される時間は、多くの場合、考える代わりに考える必要がある時間よりも短くなります。常に使用される単一のインタラクション手法で先に進むだけです。 2つの可能なインタラクション手法を決定するには、少なくとも1秒、多くの場合2秒かかります。そのため、通常はユーザーに選択肢を提供しない方が良いでしょう。 (1秒はそれほど多くはないように思えるかもしれませんが、世界中で年間約1億ドルの生産性の損失に相当します。)

http://www.nngroup.com/articles/reset-and-cancel-buttons/

126
Keiwes

他の人たちは、「リセット」ボタンはそもそも良い考えではないと述べています。ただし、実際に複数のボタンが必要な場合、「適切な」順序は、サイトが表示されているコンピューターによって異なります。

Macでは、「デフォルト」ボタンは右端にあり、他のボタンはその左にあると想定されています。

Windowsでは、通常、順序が逆になります。したがって、どのような順序を使用しても、一部のユーザーを(少し)混乱させることになります。

もちろん、これは複数選択ボタン用です。複数のページがあるアシスタント/ウィザードのような状況の場合、通常、両方のプラットフォームの右側に「次へ」、左側に「前へ」があります。

(もちろん、アラビア語やヘブライ語のような右から左のスクリプトシステムでは、左右を入れ替えます)

更新:言及するのを忘れました:通常、危険なボタンは「安全な」ボタンから物理的に離れた場所に置く必要があります。例えば。 MacOSでは、「このドキュメントに加えられた変更を保存しますか」ダイアログには、次のように配置されたボタンがあります。

[Don't Save]                    [Cancel] [Save]

つまり、クリックしながらマウスを強く動かすと(初心者やカジュアルなユーザーが簡単にマウスを使用することが簡単にできます)、滑らせて「保存しない」にしてしまうことはありません。ダイアログを閉じる(キャンセル)か、ファイルを保存する(データは保持されます)か、何も起こりません(空のスペースをクリックしました)。

18
uliwitness

送信が主要なアクションである場合の最初のアクション。また、リセットボタンは不要だと思います。

Luke Wroblewskiによる Webフォームデザイン:空白の入力 のガイド:

  • 可能な限りフォームでの二次的なアクションは避けてください。完成への単一の道を人々に提供します。
  • セカンダリアクションが必要な場合は、プライマリアクションとセカンダリアクションの間に視覚的な違いがあることを確認してください。
  • 質問を複数のWebページにフォームで配布する場合、主要なアクションでユーザーを完了に近づけ、二次的なアクションでユーザーが戻ることができます。
  • フォームにリセットやクリアなどの潜在的に破壊的な二次アクションを含めることを選択した場合、それらを元に戻す簡単な方法を提供します。

Webフォームのプライマリアクションとセカンダリアクション の追加情報。

8
Igor Gubaidulin

左側に置いてください-ほとんどの現在のフォームはこれを行います、cf。 「リセットボタンのあるフォーム」の画像検索 なので、ユーザーにとってはより使い慣れたものになります。

また、Resetと記したが、Clear(またはClear Form/Clear Fields)のラベルを付けたいのですが、これは個人的な好みですが、Resetは少し技術的な言語のようです( 「ユーザー名」の代わりに「ログインID」を要求する)。

6
Alok

リセットボタンを使用する正当な理由があると思われる場合は、注文よりも重要な問題があります。

  1. [リセット]ボタンはデータを削除するため、ユーザーがデータを押した後に確認ステップがあることを確認してください。
  2. また、破壊的なボタンが何をするのかを具体的に説明するのも良い方法です。もちろん、冗長になりすぎたくはありませんが、複数のWordに値するはずです。
  3. [リセット]ボタンを[送信]ボタンから可能な限り離します。

次に、公証人の回答に従って、プラットフォーム固有の規則を検討します。

5
Robert Fisher

これを解決する別の方法は、より破壊的なアクションを視覚的にわかりにくくすることによって、そのアクションを弱めることです。たとえば、ボタンではなくリンクにします。これはもちろん、あまり好ましくないより破壊的なアクションがあることを前提としています。

リセットは私にとってより破壊的なアクションのように見えるので、リセットアクションをリンクにして、右揃えにします。このようにすると、フォームをリセットするリンクが主要な送信アクションから離れているため、ユーザーが誤って[フォームをリセット]リンクをクリックする可能性が低くなります。下の画像を見てください。

enter image description here


また、フォームがそれほど長くない場合は、フォームの右上隅に[フォームをリセット]リンクを配置することを検討することもできます。この方法では、偶発的なクリックの可能性はさらに低くなりますが、リセットアクションは引き続き簡単に利用できます。これについては、下の画像を参照してください。

enter image description here

2
Zach

私の経験では、互いに対する順序は、フォーム上での位置付けほど重要ではありません。より一般的に使用されるオプション(うまくいけば送信)がフォームの端に近い限り、注文は直感的であることがわかります。

これは、最大化して実行すると、画面の中央に移動するよりも、画面の端にカーソルを合わせる方が簡単なことが多いためです。これは通常、リセットオプションの誤クリックを回避するのに役立ちます。背景が赤ではない場合、配色もこれに役立ちます。

Grantがコメントしたように、Enterは送信を送信する必要がありますが、タブオーダーからリセットを完全に削除することをお勧めします。また、偶発的なリセットに対する追加の保護として、常に安全であることを警告することができます。

2
CrystalFire

最初にリセットするのが最善の順序です。世界のほとんどのユーザーは右利きです。手は最初に右に移動することを好むので、送信を押すのは簡単です。

2
Jatin Malwal

IMO resetcancelの間に混乱があります。

「リセット」はHTML機能であり、フォームがブラウザで最初にレンダリングされたときの値にすべての入力フィールドを戻すボタンです。

「キャンセル」は、ユーザーが現在のタスクを完了せずに脱出できるようにするアプリケーションの機能です。たとえば、オンラインストアのチェックアウトで、「高価なガジェットは本当に必要ない、または「購入完了」などのラベルが付いているはずの「送信」をクリックする直前にそれ以上のガジェットが必要であることに気づきました。
[キャンセル]をクリックすると、ショッピングエリアに戻ります。

代わりに、「リセット」ボタンはフォームの入力フィールドを初期値に戻します(それらをクリアしません)。
90年代後半には、慣習的に「リセット」ボタンを配置しましたが、これはほとんど使用されていませんでした。その唯一の用途は、誤ってクリックされ、ユーザーにすべてのフィールドに再度入力させることでした。

「送信」ボタンについて「送信」は開発者の専門用語であると言いたいです。ユーザーには、「購入の完了」、「送信」など、「送信」以外のボタンの意味的効果を示すラベルが表示されます。

2
Juan Lanus

フォームに[送信]ボタンが表示されたとき、何が思い浮かびますか?ボタンをクリックすると、ユーザーの情報がシステムに送信されて処理されると簡単に考えることができます。 [送信]ボタンは、システムの機能を説明しますが、ユーザーの機能を説明しません。

ユーザーがフォームに記入するとき、彼らはタスクに従事しています。アクションボタンは、そのタスクが何であるかを確認し、ユーザーがそのボタンをクリックしたときに何が起こるかを正確に把握できるようにする必要があります。ユーザーのタスクを説明するボタンは、フォームがその特定のタスクの実行に焦点を当てていることをユーザーに伝えます。フォームの焦点が絞られるほど、ユーザーがフォームに入力する可能性が高くなります。

[送信]と書かれたフォームボタンは、フォームが特定のタスクに焦点を当てていないという印象をユーザーに与えます。また、ほとんどのユーザーが慣れていない技術的な方法で話しているため、ウェブサイトがユーザーフレンドリーではないという印象を与えます。これが、ユーザーがフォームに入力したときの印象である場合、その過程で数人のユーザーを失っているに違いありません。

ただし、リセットボタンはデフォルト値を表示するため、送信ボタンの後に実行されるため、2番目のボタンに配置する必要があります。

1
Sheel

質問は、Submitは何をするのですか?そして、リセットは何をしますか?

送信とリセットを組み合わせて使用​​する必要がありますか?

通常、「送信」と「キャンセル」は一緒に使用されます。表示されている順序でキャンセルすると、基本的にこのページまたは操作がキャンセルされ、「送信」と「キャンセル」で画面に移動する前に画面/ページに戻りますページ。

リセットは、ページ/画面をクリアまたはやり直したい場合に使用されます。

「送信」、「リセット」、「キャンセル」のようなものを検討するかもしれません。

0
DarkLord