Modals / Dialog

Modality

Backdrop

Dialogs

sheets

Half Sheets

Toast

関連

HTMLのdialog要素とフォーム機能

iOSのセミモーダル/ハーフモーダルを最小限の機能で実装するには

iOS13の半モーダル/モーダルUIの特徴

メリット

画面が「遷移していない」ことを示し、UXを向上させる

→その画面内のアクションであることをユーザーに示せる

スマホによるアクションがとにかく楽

→スマホを持ち替えなくとも操作できる

普通のモーダルとハーフモーダル、使い分けは？

では、普通のモーダルとハーフモーダルの使い方はどう違うのでしょうか？ただただ見栄えがよく、流行しているからハーフモーダルを使用するのでしょうか？

それは違うと考えています。

ハーフモーダルと普通のモーダルで、使い分けは「その画面のメインはどこなのか？」を考えるべきです。

例えば、グーグルマップの場合、メインは「地図」です。ハーフモーダルは、アクションを起こす場であり、その画面のメインではありません。

もし、グーグルマップで、スポットをクリックしたときに、全面にモーダルが表示されたら、下の地図は動作させることができません。ユーザーは「地図ではない画面に遷移した」と錯覚するのです。

グーグルマップは、ハーフモーダルを採用する意味が伝わる設計になっていますよね。

逆に、全面モーダルを使用する意味は、そのモーダル画面が「メイン」であるということです。

例えば、求人サイトの検索を「ハーフモーダル」で実装した場合はどうでしょうか？絞り込み検索は、「絞り込みをする」ということがメインです。別に、その下のレイヤーにあるトップページなどは別に見えなくても良いはずです。

モーダル下のレイヤーにある画面が見えるべきか？見えなくても問題ないか？で決めていく必要があるでしょう。

理想のUIをめざして！Webでハーフモーダルを作って磨き上げた話

1.直感的なユーザーインターフェース

2.効率的な情報の表示と操作性

ハーフモーダルは、限られたスペースを最大限に活用し、メニューの詳細やアレルギー情報、追加オプションをコンパクトに表示します。この設計により、情報が明確になり、ユーザーが迅速に選択を行えます。

3.タスク間のスムーズな移行

ページ遷移や全画面モーダルと比べて、ハーフモーダルはユーザーが元のページに戻る際の違和感を軽減します。このアプローチにより、メニュー選択から注文確認までスムーズに移行ができ、操作中の混乱やストレスが減少します。

https://gyazo.com/effd3842ae883aca60b5e9c7a41e272d