この記事は ウェブクルー Advent Calendar 2022 11日目の記事です。
昨日は @wc-kadowaki さんの「 前職でのやらかしと教訓 」でした。
いいな～と思ったUI/UXに関するものを日々ストックしているので、一部ご紹介したいと思います。
個人的な見解になりますので、その点ご了承ください！
セクションを区切るインタラクション
こちらはショッピングモールのフロアガイドです。
セクションを区切る際、罫線を引いたり、大きく余白を取ったりすることが多いと思いますが、こちらは次のセクションが画面の真ん中あたりに到達した際に、スッと上1つ前のセクションの末尾に帯がかかります。
CSSで作れる簡単なもので、小ワザが効いているな～と思いました、ブラボー！
参照元：https://www.kosugi-square.com/floor/
申込フォームのインタラクション
こちらは保険の申し込みフォームですが、ここまで細かいインタラクションを採用しているのはシンプルにすごい！
そして何より入力していて楽しいという点が素晴らしくお得感があります。
弊社でも一括見積りなどをはじめ、多くのサービスで「フォーム」を制作していますので、大変勉強になります…。
最近一番入力していて楽しかったなと感じたフォームでした、ブラボー！
参照元：https://www.zurichssi.co.jp/kazai/quote/
エラーの出し方
こちらはECサイトのアプリです。
赤い「エントリーする」ボタンを押すとボタン自体がグレーアウトし押せない状態になるのですが、エラーが返って来てしまった際にこのような表示になりました。
エラー画面に遷移させたり、画面上下のフローティングやモーダルウィンドウを使って表示させたりが多いと思いますが、その場所に表示させることで「どこで何が起きた（エラーが出たのか）」を明確にユーザーに伝えるいいアイディアだと思いました。
他のコンテンツの表示を妨げないのもすごくいいですよね。
エラー表示時ちょっとしたインタラクションも導入しており、とってもブラボー！
参照元：https://shopping.yahoo.co.jp/ のアプリ版
おわりに
いかがでしたでしょうか？
普段何気なく触っているサイトやアプリからアイディアをもらって、制作に活かしていきたいなと思いました。
またストックが溜まったらご紹介できればと思います。
明日は、@yagiyuuuu さんの記事です。
よろしくお願いします！