web-dev-qa-db-ja.com

ポップアップの「閉じる」と「x」は冗長ですか?

私は多くのサイトで使用されている人気のあるモーダルである基本的な ブートストラップモーダルポップアップ を使用しています。デフォルトのテンプレートには、下部に閉じるボタンと上部にxの両方が付いていることに気付きました。これらの2つのボタンは基本的に同じ目的を持っています。

2つの冗長性と閉じるボタンは完全に不要で、余分なスペースをとるだけですか?または、複数の使用オプションがある方がユーザーフレンドリーですか?

enter image description hereenter image description here

これをさらに楽しくするために、保存ボタンを投入するとします。

enter image description hereenter image description here

保存を押さずにxを押すだけで変更がキャンセルされることは明らかですか?それとも、間違いが永続的になるのではないかと恐れているユーザーのために、キャンセルボタンの必要性が高まっていますか?

更新:

この質問は次のようなものだと感じる人を明確にするために ユーザーがクリックするだけでポップオーバーを閉じることを期待できますか? -この質問は、クリック可能な背景でポップアップを閉じるのに十分かどうかを尋ねています。私はボタンを使用していますが、それは使用するボタンの数の問題です。 (私もクリック可能なオーバーレイとESCキーを有効にしていますが、それは私の質問には関係ありません)

46
Tot Zam

冗長である可能性がありますが、これとは別に、この冗長性が有益、有害、または中立であるかどうかを評価することが本当の関心事です。

異なる目標、異なるデザイン

確認モーダルが必要ですか、それとも有益なモーダルが必要ですか?

確認:まず、クリアなバイナリオプションを提供するOK /キャンセルパターンが必要です。ここでXボタンを使用しないこともできますが、Xボタンを使用してすべてを閉じるとユーザーフローに影響を与える可能性があるため、Xボタンを使用する理由はわかりません。

参考情報:ユーザーが実際にメッセージを読むことは常に必要または推奨ですか?

  • はい:Xボタンも閉じるボタンも配置しないでください。ユーザーが最も簡単で最速の方法。 「OK」/「了解」を1つ配置します。ボタンをクリックして、ユーザーがメッセージを渡す可能性を低くします。また、この場合は、「モーダルの外側をクリックする」ことに注意してください。

  • いいえ:[OK]または[閉じる]ボタンとXボタンの両方を配置します。相互作用の習慣が異なるユーザーにはさまざまなタイプがあるため、それぞれの自然な流れを遮断する理由はありません。さらに、メッセージがそれほど重要でない場合、質問する必要があります... 。

モーダルは本当に必要ですか?

ユーザーに通知することが目的の場合は、通知などの邪魔にならないオプションがあります。 本当に必要な場合 のときにモーダル使用を制限するようにしてください。 Nielsen Norman Groupの記事の例:

  • ユーザーが重大な結果をもたらし、取り消すことが難しいアクションを実行しようとしています。
  • ユーザーがプロセスの次のステップに進む前に、少量の情報を収集することが不可欠です。
  • オーバーレイのコンテンツは緊急であり、ユーザーはオーバーレイでコンテンツに気付く可能性が高くなります。
21

Webはプラットフォームに依存しないため、独自の問題が発生することを認識していますが、ほとんどのビジターがWindowsユーザーである場合は、Windows標準を使用するのが理にかなっています。これが1つ Iデザインに関するMicrosoftのページ です。

ユーザーのテストは、このシナリオでは本当に最良のオプションです。これはここにいるすべての人に共通の知識かもしれませんが、20年以上Webのユーザビリティについて書いていて、 webのユーザビリティの記事 のコレクションを作成したJakob Nielsenの作品をお勧めします。

コンピューターの使用方法に関するトレーニングがほとんどない人との個人的な経験から、上隅のXは非常に一般的に理解されているため、削除しないでください。また、「閉じる」と「キャンセル」を区別する必要があるかどうかも明確にします。

20
Rick Henderson

状況に応じて、異なるアクションを実行する可能性があります。

たとえば、ユーザーがフォームで閉じるアクションを実行しようとすると、モーダルが確認ダイアログとして表示される場合があります。

  • 閉じる =このモーダルがポップアップしたページ/フォームを閉じ続けます

  • [〜#〜] x [〜#〜] =フォームを閉じるアクションをキャンセルし、モーダルを非表示にして、ページ/フォームに戻ります。 (この状況では、[キャンセル]ボタンの方が適しています。)


基本的に、それはすべて、あなたが提供する必要があると感じているアクションを特定のシナリオに依存しています。


追加: OPのケースの特定のシナリオについて(以下のコメントから)詳細を調べたら、右上のxを使用して閉じるボタンを取り除くことをお勧めします。そうしないと、ポップアップを閉じるアクションだけでなく、閉じるボタンが大きなアクションとして混同される可能性があります。

5
Dave Haigh

メインアクションボタンを作成しますが、Xは保持します

私はかなり長い間Web開発に携わっていましたが、これはほとんどユーザーの観察から集めた経験的な知識です。

多くの場合、ユーザーは何をすべきかわかりません。特に選択肢が提示された場合。しかし、Closeまたは[〜#〜] ok [〜#〜]ボタンは難しい場合があります。ユーザーはボタンを押すことに不安を感じることがよくあります。結局のところ、モーダルは通常、ユーザーが読んで同意する必要がある何らかのメッセージ(エラー、免責事項、契約など)を表示します。クローズすると、(ユーザーの観点から)さらに望ましくないアクションが発生する可能性があります。たとえば、「OKを押すと同意します...」または「OKを押すと、コンピュータは1001回の更新を行い、次の3日間は使用できなくなります」。

Xは「不可知論的」と見なされ、「安心」的なものとして機能します。これを使用すると、モーダルのみを閉じていることがわかります。あなたは選択をしておらず、原則としてそれ以上の発展につながらないでしょう。

コメントですでに述べたように、スパムのポップアップとモーダルのためにこの動作は強化されています。システムモーダルが使用される状況では、Xが唯一の安全なオプションです。

5
nsn

特に、ユーザーがグラフィカル環境に不慣れな場合は特に、両方を使用することをお勧めします(Xは、 Closeながら、 Close 初心者向けの場合もあります)。また、輝度レベルが高い画面では、Xがほとんど見えないことがあります。

3
EKons

使いやすさの面では、他の人ほど賢くない人にとっては、閉じるボタンを含めることは目的意識を追加します。また、下部に閉じるボタンを追加しないと、潜在的なアクセシビリティの問題が発生する可能性があります。

さらに、これは優れたユーザーテスト候補またはA/Bテストです。

1
Bill Punch

個人的には、両方のオプションを見ることは嫌いです。ほんの一瞬でも混乱するだけです。 Xを実行するか、閉じることはできますが、両方はできません。私の意見では、両方のオプションはそれらが何をするかについて非常に明確ですが、両方を合わせるとそうではありません。

両方が表示されたとき、「同じことをするのになぜ両方のオプションがあるのですか?Do実際に同じことをするのですか?」

1
Steven Penny