web-dev-qa-db-ja.com

キャンセルの強調解除

キャンセルボタンの強調を解除するのは良い考えですか?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

mockup

bmmlソースをダウンロード

11
Homer

Jakob Nielsenさんは、リセット(またはキャンセル)ボタンを外すと ほとんどの場合、ユーザビリティに役立ちます

戻るはWebで非常に強力な動作であるため、通常、明示的な[キャンセル]ボタンを提供する必要はありません。ユーザーが何かを要求したが望まない場合は、それが[戻る]ボタンの時間であることを確認できます。

ユーザーが回避したいことにコミットしたことをユーザーが恐れている場合は、[キャンセル]ボタンを提供します。キャンセルする明示的な方法があると、単に去るだけでは得られない、余分な安心感が得られます。

ここにもいくつかの質問があります: 削除などのアクションを実行するときにキャンセルオプションを表示することはお勧めできません

ユーザーはどのような意味でキャンセルできる必要がありますか?彼らが戻るボタンを押すことで単に「キャンセル」できるなら、それは私のアドバイスでしょう。

キャンセルボタンが必要な場合は、強調しないでテキストリンクにするだけでよいと思います。そうすることで、ユーザーは[保存]ボタンに集中できます。これにより、ユーザーはプロセスの前に移動し、デフォルトのアクションは明白です。これがeコマースプロセスである場合は、後方オプション(または取得オプション)に同じ重みを与えるのではなく、コンバージョンプロセスを通じてユーザーを前進させる必要があります。これらのボタンを[保存-キャンセル]の順序で配置すると、Windowsの順序(少なくとも7、8については不明)と一致するため、少し自然に感じられます。

10
David

ここでは一般的な流れに少し反対し、状況によって異なりますを使用していると言います。キャンセルボタンの強調を解除すると、表示される他のオプションが有効になります。デフォルト。したがって、それをデフォルトにすることがより良い選択であるかどうかの問題です。

あなたがささいなことを尋ねるで大きな結果をもたらさない場合は、キャンセルボタンの強調を解除することをお勧めします。キャンセルボタンが、 マルチパートフォームの場合、それも非常に理にかなっています。

実際、強調されていないサインアップボタンを使用できる多くの状況では、最初にキャンセルボタンさえ必要かどうかの質問を行う必要があります。

ただし、キャンセルボタンが重大な結果を伴うアクションから保護するにある場合、それを強調しないだけでなく、それをデフォルトにする必要があります。キャンセルボタンがプロンプトの一部として表示されたとき。次のプロンプトを想像して、それについて考えてください。

アカウントを削除してもよろしいですか?すべてのデータは永久に失われます。

3
JohnGB

はい、キャンセルボタンの強調表示を解除する必要があります(それぞれスタイルが異なります)。

いいえ、リンクのように見せるべきではありません。

それをリンクとしてスタイリングすると、間違った印象を与えると思います。一部の人は、その「リンク」をタブで開くことができると考えているかもしれません。入力をキャンセルする方法を探している人は、ボタンを探しているため、その「リンク」を認識しない場合があります。そして、それは単に一貫していません。

あなたはそれを強調しないために別の方法を使うべきです、例えば:

  • サイズ別:
    • 小さくする(高さ/幅および/またはフォントサイズ)
  • 色で:
    • 送信フォームに色を付けながら無色にする
    • 送信ボタンを緑色に、キャンセルボタンを赤色に着色します
  • 位置による:
    • それらを互いに直接隣り合わせに配置しないでください(まだ簡単に混乱する可能性があるため、私はこれを好みません)。
  • 象徴性によって:
    • チェックマーク記号(または類似の)を送信ボタンに追加し、キャンセルボタンには何も追加しない

別の方法(ただし、どこにも表示されなかった)は、フォームをキャンセルする前に、キャンセルボタンをクリックtwoする必要がある場合があります。最初のクリック後、ラベル/ボタンのテキストが「本当にキャンセルしますか?入力したデータはすべて失われます。」のようなものに変わります。フォームを明示的にキャンセルしたい人は、このアクションが成功した場合はおそらく注意を払い、そのため「もう一度クリック」の確認に気づくでしょう。

2
unor

私はデビッドの答えに同意します。

[キャンセル]ボタンを表示する必要がある場合は、リンクによって階層が確実に削減されます。ただし、スタイルガイドに従っていない場合は、2つのボタンを使用できます。たとえば、[保存]ボタンを緑色で表示し、キャンセルは薄い灰色(または背景とのわずかな違い)で表示します。

1
Chris N.