ポップオーバー

定義

ポップオーバーは、ある要素、つまりトリガーを押したときにそのすぐ隣に現れる小さなパネルです。 ツールチップが短い説明を見せるだけで終わるのに対して、ポップオーバーの中にはボタンや入力欄、 リストのように直接操作できる要素を入れられます。たとえば共有ボタンを押すと隣に浮かぶ リンクコピー用のパネルや、フィルターアイコンの横に開く条件選択パネルがポップオーバーです。 画面全体を覆わずトリガーの近くにくっついて浮かぶので、ユーザーは自分がたった今なにを押して このパネルが出たのか、その文脈を見失わずに済みます。

なぜ重要か

ポップオーバーは、ツールチップとモーダルのあいだの空きをちょうど埋めるパターンです。 ツールチップのように軽くトリガーの脇にくっつきますが中で実際に操作でき、モーダルのように 操作を含みつつも画面を暗く覆って流れを断ち切ることはありません。だから細かい設定を変えたり、 短いメニューを選んだり、リンクをコピーしたりといった、少しで終わる作業によく合います。 必要なときだけそっと開き、用事が済めば静かに消えるので、そのつどページを移動したり大きな ウィンドウを出したりしなくても、小さな作業をその場で片づけられます。こうして重いモーダルを ここぞという時のために取っておくと ユーザーの流れはずっと滑らかになり、画面も必要以上に複雑になりません。結局ポップオーバーを うまく使う画面は、小さなことはその場で軽く、大きな決断だけモーダルで重く処理するリズムを 持つようになります。

よくある間違い

• ポップオーバーとツールチップを混同して使うことです。ただの説明にすぎないのにクリックで開く ポップオーバーに入れたり、逆にボタンが入る操作パネルをホバーで出るツールチップに入れると、 ユーザーはいつなにを期待すればいいのか迷います。
• 外側を押しても閉じないようにしてしまうことです。ポップオーバーはさっと使ってすぐ離れる軽い パネルなので、別の場所を押したときに自動で閉じないと、画面に残り続けて邪魔になります。
• 画面をほとんど覆うほど大きく複雑な内容をポップオーバーに詰め込むことです。ここまで重い作業は トリガーの脇にくっつく小さなパネルよりモーダルや別ページが向いていて、無理にポップオーバーへ 入れると位置がずれたり画面の外にはみ出して切れやすくなります。

実務のヒント

• ポップオーバーはクリックで開き中で操作できる点でツールチップと違い、画面を覆わずトリガーの脇に くっつく点でモーダルと違います。この性格を活かして、共有やフィルター、簡単なメニューのように 文脈を保ったまま少しだけ処理したいことに使いましょう。
• 外側の領域を押すかESCキーを押したときにポップオーバーが閉じるようにしましょう。開け閉めが 軽いほど、ユーザーは気軽に開いてみて、用事が済めば自然に次へ進めます。
• トリガーとパネルを視覚的につないでおきましょう。矢印のしっぽを付けたり位置をぴったり寄せて、 このパネルがたった今押したそのボタンから出たという関係が一目で見えるようにすると、文脈が 崩れません。

関連概念