web-dev-qa-db-ja.com

レスポンシブWebサイトでモーダルポップアップとツールヒントをどのように処理する必要がありますか?

私はクライアントからのいくつかのウェブサイトのワイヤーフレームをレビューしていて、新しいサイトをレスポンシブにすることにしました。私はこれまでのところ、いくつかの過去のプロジェクトのレスポンシブなテーマ設定とデザインでかなりの幸運を手に入れました。

ただし、この特定のワイヤーフレームには、多数のモーダルとホバーウィンドウがあり、多くの情報が含まれています。

私の質問は:

  1. これは、丸い穴に四角いペグをはめ込むようなものですか?
  2. m.domain.comデバイスにクエリを送信し、2つの個別のWebサイトを設計するルート?
  3. レスポンシブルートを使用する場合は、モーダルとホバーウィンドウをそれほど多く使わないようにクライアントにアドバイスする必要がありますか?

私はこれらが主観的な質問であることを知っているので、これがこのタイプのフォーラム内で適切かどうか本当にわかりません。

20
Danny Englander

レスポンシブルートを使用する場合は、モーダルとホバーウィンドウをそれほど多く使わないようにクライアントにアドバイスする必要がありますか?

私はその質問を次のように言い直します:

多くのモーダルとホバーウィンドウを廃止するようにクライアントにアドバイスする必要がありますか?

そして、その答えは、通常、はいです。

しかしいつもではない。それが非常に複雑なデスクトップ中心のサイトである場合、おそらくモーダルはそこでの良いオプションです。

問題は、画面のサイズが通常それよりも小さいモーダルであることをほとんど意味しないので、モバイルデバイスではモーダルがいくらか役に立たないことです。

2つの形式のモーダルを使用することを検討してください。大画面のポップアップとモバイルの別のページです。それを実装するのがどれほど簡単か難しいかはわかりません。

10
DA01

Webサイトのデスクトップバージョンのようにコンテンツをモーダルウィンドウに表示する代わりに、モバイル(レスポンシブ)バージョンのスライドアウトペインまたは個別のページにコンテンツを表示することを検討できます。ユーザーが指で軽くたたくのに十分な大きさの使いやすいスライドアップ/スライドダウンボタンを追加します。

ホバーウィンドウ/ツールチップにどのような種類の情報を保存しますか?ユーザーとそのユーザーエクスペリエンスにとって重要かつ必要な情報である場合は、モバイル(レスポンシブ)バージョンでいつでも表示することができます。

7
Jeroenem

パーティーには少し遅れますが、私はモーダルに完全に恋をしているデザイナーとプロジェクトを開発しています。

2014年のモバイルデバイスの場合、位置とスクロールの問題のため、モーダルはUXの選択肢としてはまだ不十分です。

ほとんどの場合、JavaScriptで駆動されます。つまり、プロジェクトでアクセシビリティが重要な場合は、サイトの訪問者の断面を経験することはなく、使用する実装によっては、含まれている情報に遭遇することさえありません。

機能の観点から、彼らは確かに滑らかに見えます!しかし、私にとって、それは彼らの魅力が終わるところです。

UXに重点を置いたアプローチは、すべてのモーダルにトリガー要素があることを考慮することです。これは、訪問者にクリックしてほしいモーダルとその情報を明らかにする重要な要素です。したがって、モーダルコンテンツも重要である必要があります(そうでなければ、モーダルを削除できますよね?)が、モーダルコンテンツは独自のページに値するほど重要ではないため、UXリンボの形式になっています...しかし、コンテンツ- is訪問者のモバイルエクスペリエンスを向上させるのに十分重要です。どっち?

モバイルを最初に設計および開発している場合(最近のはずですが)、モーダルは、おそらくより試行錯誤された真の方法論に置き換えることができます。

小さなモーダルでも、モバイルユーザーがモーダルコンテンツをスクロールして、モーダルのUXの欠点を明らかにする必要がある場合があります。コンテンツが短く、スクロールが必要ない場合は、必要に応じてスクロールしてください。コンテンツにスクロールが必要な場合は、コンテンツをトリミングするか、コンテンツに独自のページを与えるか、より試行錯誤した真のUXを使用することを検討してください。

4
cfx

モーダルのベストプラクティスによると、一部の携帯電話はモーダルをサポートしていない、または扱いにくいため、モーダルは回避されます。

http://mobilewebbestpractices.com/user-experience/count-on-modal-windowsoverlays/

失敗する可能性のあるものの例を次に示します。

https://github.com/Twitter/bootstrap/issues/4714

4
Rich