Modals / Dialog
Modality
Backdrop
Dialogs
sheets
Half Sheets
Toast
関連
HTMLのdialog要素とフォーム機能
iOSのセミモーダル/ハーフモーダルを最小限の機能で実装するには
iOS13の半モーダル/モーダルUIの特徴
メリット
画面が「遷移していない」ことを示し、UXを向上させる
→その画面内のアクションであることをユーザーに示せる
スマホによるアクションがとにかく楽
→スマホを持ち替えなくとも操作できる
普通のモーダルとハーフモーダル、使い分けは?
では、普通のモーダルとハーフモーダルの使い方はどう違うのでしょうか?ただただ見栄えがよく、流行しているからハーフモーダルを使用するのでしょうか?
それは違うと考えています。
ハーフモーダルと普通のモーダルで、使い分けは「その画面のメインはどこなのか?」を考えるべきです。
例えば、グーグルマップの場合、メインは「地図」です。ハーフモーダルは、アクションを起こす場であり、その画面のメインではありません。
もし、グーグルマップで、スポットをクリックしたときに、全面にモーダルが表示されたら、下の地図は動作させることができません。ユーザーは「地図ではない画面に遷移した」と錯覚するのです。
グーグルマップは、ハーフモーダルを採用する意味が伝わる設計になっていますよね。
逆に、全面モーダルを使用する意味は、そのモーダル画面が「メイン」であるということです。
例えば、求人サイトの検索を「ハーフモーダル」で実装した場合はどうでしょうか?絞り込み検索は、「絞り込みをする」ということがメインです。別に、その下のレイヤーにあるトップページなどは別に見えなくても良いはずです。
モーダル下のレイヤーにある画面が見えるべきか?見えなくても問題ないか?で決めていく必要があるでしょう。
理想のUIをめざして!Webでハーフモーダルを作って磨き上げた話
1.直感的なユーザーインターフェース
食べログオーダーは、飲食店のお客様がスムーズで快適にメニューを選べることを重視しています。特に、片手操作に最適化されたハーフモーダルでは、スライドアップやダウンのアニメーションがハーフモーダルの開閉動作を直感的に示唆し、簡単なスワイプで閉じることができます。このおかげで、お客様は数多くのメニューの中から効率よく選択し、注文することができます。
2.効率的な情報の表示と操作性
ハーフモーダルは、限られたスペースを最大限に活用し、メニューの詳細やアレルギー情報、追加オプションをコンパクトに表示します。この設計により、情報が明確になり、ユーザーが迅速に選択を行えます。
3.タスク間のスムーズな移行
ページ遷移や全画面モーダルと比べて、ハーフモーダルはユーザーが元のページに戻る際の違和感を軽減します。このアプローチにより、メニュー選択から注文確認までスムーズに移行ができ、操作中の混乱やストレスが減少します。