web-dev-qa-db-ja.com

モバイルデバイス上のModal Windowsに代わるUX

モバイルデバイスで、モーダルウィンドウに代わる推奨されるUXを探しています。

モーダルウィンドウは、ユーザーがメインウィンドウのワークフローを中断することなくプログラムを操作できるため、大画面環境で役立ちます。メインウィンドウは淡色表示またはグレー表示になっている場合がありますが、引き続き表示されます。

モーダルのコンテンツが非常に小さい限り(通常はボタンが2つ以下の小さなテキスト)、シンプルなモーダルウィンドウをモバイルデバイスで使用できます。ただし、モーダルが大きい場合、または動的コンテンツを含むモーダルの場合、モバイルデバイスの小さい画面で問題が発生する可能性があります。

Web指向のプラットフォームでの使用を目的とした、モバイルデバイス上のモーダルウィンドウに代わる優れたデザインパターンを探しています。したがって、たとえば、モバイルのbootstrap modals。

16
Jimmery

モバイルデバイスで全ページのモーダルウィンドウを表示すると、ユーザーは混乱して、新しいページに移動したと考えるかもしれません

モーダルウィンドウは通常、現在のページに関連する情報が含まれているボックスですが、ユーザーはその情報を表示するために現在のページを離れる必要はありません。

これらの事実を考慮すると、モーダルウィンドウを別のウィンドウの上に置くため、モーダルウィンドウをのモーダルウィンドウを吹き出しウィンドウで置き換えると最適です。 -3インチのモバイル画面では、これは機能しません。

enter image description here

21
DPS

私が過去に行ったことは、画面全体をモーダルに引き継ぐことです。レスポンシブモーダルを構築したため、デスクトップでは従来のオーバーレイでモーダルが表示されますが、小さいビューポートではモーダルのコンテンツが画面全体に置き換わります。

ここの「JUST ME」の例のようなもの: https://tympanus.net/Development/ModalWindowEffects/

以下に、簡単なモックアップを示します。左側がWebページ、右側がモーダルビュー。あなたはそれがサイト全体、ナビゲーション、そしてすべてを引き継いでいるのを見る。ユーザーはモーダル(またはユーザーがモーダルを使用するために必要なもの)を閉じるには、[続行]を選択する必要があります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

モーダルの目的は、ユーザーを背後のページからロックアウトして、続行するためにモーダルと対話する必要があるようにすることです。ユーザーが背後のページのコンテンツを引き続き表示できるようにするために、これらの種類のモーダルの要件はありません。そのことを念頭に置いて、なぜそれを表示する必要があるのでしょうか。ユーザーがそのページから実際に連れて行かれていないことを示すために、トランジション/アニメーション効果を導入すれば、このアプローチはうまく機能するはずです。

13
JonW

モーダルに実際に必要なコンテンツの量は?

使い方は簡単ですが、コンテンツ戦略や情報アーキテクチャに取って代わるものではないので、人々は少し慣れています。どのタイプのコンテンツをモーダルに入れていますか?おそらく、コンテンツをもう一度見て、他の方法でアプリケーションに統合する必要があります。モーダルに入れるにはコンテンツが多すぎる場合は、コンテンツを分割して、チャンクでユーザーに配信します。

ただし、モーダルには適切な用途があります-小さく関連性のあるコンテンツの場合です。モバイルでは、少なくともモーダル(アプリケーション/ネイティブではなく)に関連してモーダルに出入りしたり、モーダルがスクロールバーをトリガーしたり、不必要なときにスクロールが表示されないなど、重大なユーザビリティの問題を引き起こす可能性があることがわかりました。

上下に押してより多くのコンテンツをインラインで表示するエキスパンドパネルは、モーダルサイズのコンテンツをオンデマンドで表示するもう1つの方法です。全幅にすることも、コンテナの幅をそのまま使用することもできます。

3
Nathan Wright

デスクトップにかなり複雑なモーダルウィンドウがあるようです。

画面に表示できる情報は一度に多くあるため、 垂直ステッパー と考えることができます。

enter image description here

3
icc97

この記事で説明したように

https://medium.com/@jivanshr/drawer-new-way-to-reveal-content-e3b32722b21d

Modalsは完全に新しいコンテキスト/環境を設定します。この環境では、ユーザーは適応するためにもっと負荷のかかる負荷に直面する可能性があり、以前のコンテキストを失うことを恐れます。アイデアは、Androidオーバーレイなしのナビゲーションドロワーのように非常に似ています。ここでは、前のコンテンツがシフトしているのがわかります。ドロワーUIのもう1つの利点は、モバイルとデスクトップで一貫したエクスペリエンスを提供することです。

私はモーダルが死ぬ必要があるとは言わない、私は誰もがコンテンツの小さなチャンクにモーダルを使用することを望みます。それで全部です。

3
Jivan