ユーザーがクリックするだけでポップオーバーを閉じることを期待できますか？
ポップオーバーはかなり頻繁に使用され、クリックすると離れて閉じます。ほとんどのWebユーザーが、閉じるボタンを追加する代わりに、この方法で閉じる方法を知っていることを期待するのが妥当だと思いますか？
Mac OS X YosemiteのSpotlight検索には閉じるボタンがなく、クリックして閉じる必要があることに気づきました。おそらく、Appleがそれを実行した場合、それは今や従来の振る舞いです。
一方、Googleカレンダーにはまだ閉じるボタンがあることに気づきました。
2016年1月24日に更新
以下で指摘しているicc97のおかげで、私は Appleのヒューマンインターフェイスガイドライン を見て、次のようなポップオーバーを確認しました
ユーザーが選択した直後、またはポップオーバーを表示するコントロールを含め、境界外の任意の場所をタップしたら、ポップオーバーを閉じます。
私は最近、iPad App Storeのこのポップオーバーでこれらのガイドラインの例が動作しているのを見ました。閉じるボタンがないことがわかります。あなたはその境界の外のどこかをタップしてそれを却下します。 Appleは8億個のiOSデバイスを販売しているため、これを重要視できます:)
最近、アプリに閉じるボタンなしでこのポップオーバーをリリースしましたが、閉じる方法を尋ねられた人はいません。アプリは何万人もの人々によって使用されています。したがって、クリックして閉じることは間違いなく「従来の」方法と見なすことができるようです。
ユーザーが境界の外側をクリック/タップしたときにポップオーバーを閉じることには1つの例外があり、それはユーザーがポップオーバーで作業を行ったときです。 iOSガイドラインには次のように記載されています。
ユーザーがタスクを完了またはキャンセルしたら、ポップオーバーを閉じます。「完了」や「キャンセル」などのポップオーバーのボタンをタップします。このシナリオでは、ユーザーが境界線の外側をタップしたときにポップオーバーを閉じたくない場合があります。これは、ユーザーがタスクを完了する（または明示的に中止する）ことが重要になる場合があるためです。それ以外の場合は、ポップオーバーの境界線の外側をタップしたときに、[完了]をタップした場合と同じように、ユーザーの入力を保存します。
次の理由により、閉じるボタンを使用することをお勧めします
- 閉じるボタンは、ユーザーがクリックしてポップオーバーを閉じることができることを示す視覚的なインジケーターです。一部のユーザーは、外側をクリックするか、ESCを押してポップオーバーを閉じることに慣れている場合があります（そして、それらのユーザーもサポートする必要があります）、閉じるボタンはエスケープルートを確立するのに役立ちます。これを引用するには article
上隅にあるハイコントラストの閉じるボタンを提供します必要に応じてモーダルウィンドウを閉じます。閉じるボタンには従来の「X」アイコンを使用します。ハイコントラストの閉じるボタンを使用すると、ユーザーは出口をより見やすくなります。あなたの閉じるボタンは形と色で立つ必要があります。
- これは、ユーザーがポップオーバーを閉じるための追加のアクセシビリティ要素を提供します。主なアクセシビリティの推奨は、ユーザーがEscキーを押してポップオーバーを閉じることを可能にすることですが、上記参照 記事
ユーザーがEscキーでウィンドウを閉じることを許可しますアクセシビリティの理由から、ユーザーがEscキーを押すと、モーダルウィンドウが閉じる必要があります。また、ユーザーがモーダルウィンドウのコントロールを使用している場合は、それらをタブで移動できるようにする必要があります。これにより、スクリーンリーダーとキーボードを使用するユーザーがWebサイトをナビゲートできるようになります。
ポップオーバーを閉じるためにキーボードまたはマウスでアクセスできる追加のリンクまたはアクションを提供することもお勧めします。この参照を引用するには
マウスコントロール。次のことができるはずです。
- リンクをクリックしてポップオーバーを開きます。
- 「閉じる」ボタンをクリックして閉じます。
- ポップオーバーの外側をクリックして閉じます。
キーボードコントロールは次のとおりです。
- リンクへのタブ移動を許可し、Enterキーを押してリンクを開く
- キーボードフォーカスを開いたときにポップオーバーの一番上に移動します。スクリーンリーダーのユーザーは、上から読みます。 （ビジュアル）キーボードユーザーの場合、タブを1回押すと、ポップオーバーの最初のフォーカス可能な要素に移動します。
- 折り返して、ポップオーバーの外側でタブを使用しないようにします。つまり最後のフォーカス可能な要素からのタブは最初に移動し、最初からのシフトタブは最後に移動します。
- スクリーンリーダーのユーザーは、ポップオーバーから「ブラウジング」することもできません。例えば。ジョーズでは、最後にある下矢印を押してもポップオーバーから外れません。
- ポップオーバーを閉じると、リンクがトリガーされた要素に戻ります。
- Escキーを押してポップオーバーを閉じることができるはずです。
この質問と、ここでの議論の多くは、いくつかのインターフェースコンポーネントをいつ、どのように、どのように使用するかについて明確な定義とルールがないことから生じているようです。以下では、元の質問のコンポーネントに関連する各コンポーネントについて従う単純なルールについて説明します。
ツールチップ
ホバーとフォーカスに表示され、ホバーまたはフォーカスが失われると表示されなくなる読み取り専用コンテンツの小さなビットに使用されます。 Googleには 方法/ツールチップの使用方法 の概要があります。
ドロップダウンメニュー
単一のアクションを実行するために使用されます。ドロップダウンが開かれると、ユーザーが内のアイテムをクリックするか、その外をクリックすると閉じます。繰り返しますが、Googleはそれらをいつどのように使用するかを正確に定義しています。
ポップオーバー
複数のクリックを必要とする複雑なプロセスに使用されます。
- ポップオーバー内で実行するアクションを決定するには、周囲のコンテキストを確認する必要があります。
- ユーザーには、相互作用を「より軽く」、非ブロッキングで、オーバーヘッドをほとんど感じさせないようにしてください。
- これは、スタンドアロンプロセスではなく、外部コンテキストを補完するタスクです。
- ユーザーの進行状況が部分的に終了した状態のままであっても問題ありません。
@ Andrewの更新されたソリューション は良い例です。ポップオーバーが開いたら、ユーザーは編集、切り取り、削除を行うことができます。これらのアクションはそれぞれ、ポップオーバーの内容を変更する可能性があるため、開いたままにすることが重要です。ただし、編集を保存せずにポップオーバーの外側をクリックすると、その変更は保持されません。
ポップオーバーで何をするかの決定は、外側のコンテキストを見ることができることによって支援されます。外側のコンテキストで即時のフィードバックを確認すると、ユーザーのアクションが支援されます。
モーダルダイアログ
個別のブロッキングプロセスに使用されます。
- 実行するアクションを決定するために、周囲のコンテキストは必要ありません。
- それを閉じるには、明示的な「受け入れる」または「キャンセル」アクションが必要です。その外側の領域をクリックしても閉じません。
- ユーザーの進行状況が部分的に完了した状態のままになることは許容されません。
繰り返しになりますが、Googleの仕様 これらの概要を十分に示しています 。
個人的な経験に基づいて、ポップオーバーがユーザーによって簡単に開始された場合、閉じるボタンは不要であると主張します（必要に応じて、ユーザーはポップオーバーをすぐに再開できます）。
私は、何人かの高齢者がポップオーバーの外側をクリックしてポップオーバーを閉じようとして、うまくいかずに挫折するのを見てきました。 「X」ボタンが見つからないようです。同様に、ポップオーバーの隅にある小さな「X」に移動しようとするとイライラします。
ただし、閉じるボタンが必要になるケースの1つは、ポップオーバーが画面領域の多くを占めるモバイルデバイスです。この場合、前述のフラストレーションのため、「X」ではなく「閉じる」という単語を使用することをお勧めします。
Mervin Johnsinghが提供した例は、ユーザーによって開始されなかったポップオーバーの場合でした。そのため、この場合は閉じるボタンが適用できると思います。アンドリューが与えた例では、ポップオーバーはユーザーによって開始されたように見えたので、それは必要ではないと思います。
Googleカレンダーで「X」が使用されている理由は、画面をクリックしないと別のポップオーバーが表示されて新しいイベントが作成され、特別なケースになるためだと思います。
実はびっくりです。しかし Appleのポップオーバーに関するガイドライン は、実際にはavoidを指定して、閉じるボタンを含めますタスクを再実装すると、「キャンセル」が必要です。
「ポップオーバーを閉じる」ボタンを提供しないでください。ポップオーバーは、その存在が不要になると自動的に閉じます。ポップオーバーの存在が不要になった時期を判断するには、次のシナリオを検討してください。
ポップオーバーの場合…
- メインビューに影響するオプションを提供しますが、インスペクタは実装しません
- ユーザーが選択した直後、またはポップオーバーを表示するコントロールを含め、境界外の任意の場所をタップしたら、ポップオーバーを閉じます。
- インスペクターを実装します
- ポップオーバーを表示するコントロールを含め、境界外の任意の場所をタップしたら、ポップオーバーを閉じます。
- このシナリオでは、ユーザーが追加の選択をしたり、現在の選択の属性を変更したりする可能性があるため、選択を行った直後にポップオーバーを閉じないでください。
- タスクを有効にします
- ユーザーがタスクを完了またはキャンセルしたら、ポップオーバーを閉じます。「完了」や「キャンセル」などのポップオーバーのボタンをタップします。
- このシナリオでは、ユーザーが境界線の外側をタップしたときにポップオーバーを閉じたくない場合があります。これは、ユーザーがタスクを完了する（または明示的に中止する）ことが重要になる場合があるためです。それ以外の場合は、ポップオーバーの境界線の外側をタップしたときに、[完了]をタップした場合と同じように、ユーザーの入力を保存します。
上記について、あなたは Inspectors が何であるかを知っている必要があります：
インスペクターは、ユーザーが選択範囲の属性を表示できるようにするパネルです。
更新：マテリアルデザインにポップオーバーがないのは興味深い（この他の X.SEの質問を参照 -しかし、 producthunt.comのポップオーバーは却下されないという質問）。ただし、ダイアログの場合でも、Google Material Designが「x」があるべきであると指定しているのは 'Full Screen Dialogs' の場合のみです。
フルスクリーンダイアログでは、一連のタスク（カレンダーエントリの作成など）がグループ化または破棄される前にグループ化されます。 「保存」がタッチされるまで、選択は保存されません。 「X」をタッチすると、すべての変更が破棄され、ダイアログが終了します。
OK、少し調べてみて、かなり決定的なことがわかりました。 Facebookはみんなのお気に入りのウェブサイトではないかもしれませんが、使用可能である必要があります。それについて議論するのはかなり難しいです。下のスクリーンショットのポップオーバーに基づいて、離れた場所をクリックすることは最近ではかなり慣習的だと思います。
また、情報の性質やフォームのように、ポップオーバーに含まれる情報の種類にも依存します。
2種類のユーザーに両方を提供しないのはなぜですか。新しい世代のユーザーは、ポップオーバーを閉じるためにクリックすることにかなり精通しています。上記のFacebookの例で指摘されている証拠。
Escキーまたは離れた場所をクリックすると、ポップオーバーが閉じます。これはangular Ui modalsのデフォルトでもあります。
ポップオーバーからユーザーアクションが必要な最後のケースは、escまたはクリックアウトで閉じないでください。これは通常、ポップオーバーでokアクションとキャンセルアクションを提供することによって行われます。そして、どちらもポップオーバーを閉じます。