ペインvsモーダルvs？：すべての画面サイズ
ペインvsモーダルvs？：すべての画面サイズ
私は現在、応答性が高く、アクセス可能で、すべてのデバイス画面サイズにわたって堅実なUXを提供する必要があるWebアプリケーションに取り組んでいます。現在のところ、アプリケーションは、ユーザーが単一のアイテムを追加/編集したい場合がある多数のリストビューを備えた「参照ツール」と見なされています。ほとんどのURLルートは、リストビューのみを含むページにつながります。 「参照リスト、フィルターリストなど」の「フロー」以外のもの新しい「フロー」を含むコンテナ/コンポーネントに視覚的に分離したい。
私たちのUXチームは現在、次のコンテキストでこれらの目標を達成するための最良の方法について激しい議論を繰り広げています。
- 単一のアイテムの[編集/作成/更新]操作を実行する[フォーム]
- メール/メッセージの送信
- ユーザーのアカウント設定の変更
- 詳細情報の「追加情報」画面
検討している2つのコンポーネントは、「スライドアウトペイン」と「ポップアップモーダル」です（下図）。応答性が高く、UXフレンドリーで一貫したオプションが必要であることを考えると、次の質問があります。
質問：
- これらの要件を満たすことのできる明らかなコンポーネントが1つまたは2つ欠けていますか？
- さまざまな画面サイズのコンテキストにおけるこれらのコンポーネントの長所/短所は何ですか？
- すべてのデバイスで一貫した最高のUXを提供するコンポーネントはどれですか？
アップデート：
- 拡張可能なカードのリスト-「単一のアイテム[フォーム]の編集/作成/更新操作の実行」を考慮する必要がないレスポンシブコンポーネントコンテキストですが、残りのコンテキストのソリューションのための余地を残しています。
スライドアウトペイン
ポップアップモーダル
あなたのチームは問題を考えすぎているようです;）
モバイルデバイスのポップアップは不適切なオプションです。画面サイズが小さすぎます。フォームが大きいと苦労します。また、モバイルでは非常に扱いにくいです。エラー、警告、メッセージのためにポップアップモーダルのままにします。ユーザーの操作ではありません。
スライドアウトオプションを使用すると、どのデバイスでもより多くの画面領域を確保できます。また、モバイルデバイスでの使用も簡単です。上記の例では、必要に応じて画面の60％を使用できます。
私は議論に直面しました、これはこれまでのところ私の結論です。
スライドアウトvsモーダル
アプリケーションでは、即時の注意/アクションを必要とする情報と必要ではないがコンテキスト内にある必要がある情報を区別することが重要です。
スライドアウト
さまざまな幅と高さのサイズを持つことができるモーダルと比較して、サイズ/高さによって一貫したデザインを維持するのに役立ちます。
モーダルのように上下左右のスペースを必要としません。
プライマリビューをブロックするポップアップよりも、プライマリ画面のコンテキストを維持するのに役立ちます。
スライドアウトは、ユーザーによる即時の注意とアクションを必要としないため、煩わしさが軽減されます。
モーダル
煩わしい、メイン画面をブロックしてください。彼らは、ユーザーが先に進む前に直ちに注意と行動を必要とする情報を提示する必要があります。
すぐに注意を払う必要があるため、プライマリ画面がブロックされる理由、タスクが実行されるまでユーザーは何もできない。
モーダルは、アプリケーションで開始することも、ユーザーがスライドアウトすることもできます。
関係するタスクがモバイルでうまく機能しないので、全画面表示にすることをお勧めします。そのため、オーバーレイの目的に反します。
私は100のスライドアウトパネルとポップアップがある同じケースのシナリオのWebアプリケーションで作業しています。これに自信を持って作業した後、ポールデザートが言ったように、メッセージ、エラー、および...
どうして？ 1-一部の人々はポップアップをブロックし、ブラウザもブロックします。 2-ポップアップもモバイルデバイスに問題があります。 （先頭にくっつくなどのさまざまな問題）。
また、パネルについて：使用するパネルの種類によって異なります。3種類あります。
1-明らかにする2-オーバーレイ3-プッシュ https://api.jquerymobile.com/panel/
私たちのアプリケーションではオーバーレイを使用しており、上の画像でも同じように使用していると思いますが、嘔吐を感じているアプリケーションを見ると、すべての編集ユーザーのイメージングで画面にゴーストのようなものが表示されるはずです。したがって、このUiを使用する場合は、PushまたはRevealに移動します。
しかし、あなたは何か他のことをすることができ、私はそれを編集と呼びます（これには特定の名前があると確信しています）
詳細を確認したり、データを追加したり、領域を編集したりする場合は、展開することもできますが、非常に大きな情報がある場合は、スライドパネルまたはページに移動する必要があります（新しいページに移動することについての懸念を理解していますが、そのページあなたはパンくずを持っていることができます解決できます！どうやって地球上でパンくずを使用するアプリケーションは、子のパンくずではなく、兄弟のパンくずで心配ありません...）
モックアップにはbalsamiqモックアップが使用されました。