〜ほぼ Daily UI vol.16〜 Pop-Up / Overlay
Design a Pop-Up/Overlay. Is it a web sign-up form that pops up? Is it an ad overlay?
参考にしたサイト・アプリ
あつまれ！どうぶつの森
オッケー！
note
状態が変わること伝えるためのポップアップ。こういうのトーストで済ませがちだが、ちゃんと保存されたかみたいなのは強目のフィードバックの方が安心感あるのかも。あとこれ毎回メッセージ変わるのもこだわりポイント。
VSCode
未保存のファイルを閉じようとした時のアラート
Stripe
基本Formとかの入力中に離脱する時の確認に使うイメージが多いが、こういうクイックなアクションをさせるために使うのもありかも。モバイルでドロワーとかでやっているのと近い。
ショートカットキー載せてるのは初めてみたかも。
デザインを考える上でのポイント
情報量を最小限に、すぐにユーザがアクションを取れるように
まず、Popupというのは基本的に邪悪である。いわゆるモーダルな状態になり、ユーザがそれ以外のアクションを取れなくなるため、本当に注意を引きたい重要なアクション以外にはなるべく使うべきでないだろう。(Popupで広告出すのやめてください)
アクション起こしたらどうなるか分かりやすい文言にする
デザインというかライティングの話になるのだが、「キャンセルしますか？」みたいなPopupの選択肢にキャンセルがあって「これはどっち…？」となるのはあるあるな話だろう。
コンテキストに応じて、そのアクションがどういう意味なのかを適切に表すフレーズを一個一個考えてあげた方がいい。
自分のデザイン
Stripe インスパイアで某たぬきへの振り込みUIを作ってみた。振り込みたくなる訴求文言も添えてみた。
思ったこと
- Stripeみたいな使い方幅広がるかも
- ページまたがないで同じコンテキストで表示するの実装側としても楽なんだよね