【UIアウトプット】DailyUI #016_Pop-up Overlay
シルスプのブログにようこそ
14、15日目の課題は、それぞれ Countdown TimerとONOFFボタンでした。
タイマーというとキッチンタイマーがやっぱり便利です。
キッチンタイマーをイメージしたスマホ版のタイマーを作りました。
この中に、ON/OFFも入れちゃいましたので後ほどお見せします。
Daily UIの16日目の課題は、Pop-up Overlayです。
少しばかり気になることがあるので、調査開始です！
Daily UI
https://www.dailyui.co/
１．課題
Pop-up Overlayは、利用者からすると検索している途中で、
狭い画面（スマホで利用していることが前提）にでてくると
「いらっ」とするのは私だけでしょか？
Pop-up Overlayについて少し調査しました
２．取り組み
１）調査
オーバーレイとは、上に置くという意味です。
検索していると「困ったことはありませんか？」とか
でてくる小窓です。
たちが悪いのは、「モーダルオーバーレイ」
これは、ユーザーが出てきた情報に対してアクションするまで、
閲覧していたページ上のコンテンツが無効となってしまったりするものです。
少し古い情報ですが、2022年の調査を見つけました。
嫌われるポップアップの3要素とは？
https://www.sprocket.bz/blog/20220411-survey-popup.html
これによると、
良い印象も悪い印象も「すぐに消せる☓ボタンがよく分かる」
となっています。
結構みんな邪魔だと思ってるんだとわかりました。
良い印象
・バツボタンが目立つ
・Webサイトに関係するセールや特集
・画面おスクロールやボタンクリックに邪魔しない位置
悪い印象
・バツボタンがわかりにくい
・複数のポップアップがでてくる
・サイトに訪問するたびに同じ内容のポップアップが出てくる
となっていました。私が持つ印象と同じですね。
私は、できればポップアップは出てほしくないです。
私が許容できるポップアップは、
・ログイン画面
・割引情報
・資料をダウンロード
・ある商品を誰が作ったのか？
です。
２）画面構成
私が、まあでてもいいかと思うのは、
・割引情報
せこいかなぁ？
これで、画面を作成します。
３．作品
DailyUI #016_Pop-up Overlay
ちなみに前回のCountdown TimerとOn/Off Switchは、
次の課題を見ずにタイマーを作っちゃったので、
一緒の画面になってしましました。
４．感想
ポップアップは、スマホの場合は画面が小さいので、
できれば出て欲しくないのが本音です。
スクロールの邪魔にならないサイズだと、
情報はかなり選択しないといけないですね。
５．まとめ
ポップアップは、多分世の中では邪魔者扱いされているように思えます。
購入等次のアクションを起こすには、
限られた内容しかないとわかりました。
皆様も必要以上にはポップアップは出さない方がいいかと思います。
画面を消すバッテンの重要さに気付かされました。
では、またねぇ～
