web-dev-qa-db-ja.com

モバイルビュー:水平スクロール、モーダル、アコーディオンの追加情報

私は、プロファイルのあるWebサイトのモバイルビューに取り組んでいます。これらのプロファイルには、タグやその他の情報で満たされた多くのカテゴリ/グループがあります。ページをクリーンに保ち、訪問者に焦点を当てるために、これらのカテゴリの詳細はすべて最初は表示されていません。

私の調査中に、詳細情報を表示する3つの可能性を発見しました。

enter image description here

長所と短所は何ですか?

最初はグラフィックコンテンツ(画像、アイコン)を表示するために最初の例を使用したいと思いますが、いくつかの主要なUXや技術的な問題がないかどうか疑問に思っていますか?モバイルWebサイトの水平スクロールに問題はありますか?たとえば、AirBnBがアプリの2番目のオプションをモバイルサイト(アメニティセクション)の3番目のオプションで使用するのはなぜですか?

1
laEm

ユーザーについて自問するいくつかの質問:

  1. グリッドに並んでより多くの画像を表示することの利点はありますか?

  2. たとえば、サムネイルに含まれるコンテンツは、グリッドにリストされたときに追加の情報レイヤーを表しますか?

  3. グリッドがオプション3内で展開されている場合は、同じ質問を自分に尋ねます。

その他の考慮事項:

  1. プロファイルにはいくつの画像がありますか?無制限の場合、別の画面のグリッドレイアウトは、それらを1つの行に制限するよりも閲覧しやすくなります。

  2. オプション3でも同じ問題が発生します。ユーザーは、プロファイル内の他のコンテンツを参照しながらすべての画像を表示したい場合があります。ただし、サムネイルが余分なコンテンツを最後まで押し下げると、閲覧が難しくなります。

要約すると、少数の画像の場合はオプション1、多数の画像の場合はオプション2、少数の画像の場合はオプション3ですが、グリッドを表示する利点があります。

特定のWebサイトには、他にも多くの使用例があります。可能であれば、ユーザーテストを実行します。可能でない場合は、実際のコンテンツをワイヤーフレームに入力し、この特定のページでのユーザーのニーズを考慮して、各レイアウトの長所と短所を検討します。

たとえば、Airbnbの場合、説明を読むときに、ユーザーは常に画像をチェックして、アパートの設備とレイアウトを視覚的に確認する必要があります。別の画面でグリッドを開いて適切な画像を選択するよりも、単純にスクロールして画像を開く方が簡単かもしれません。

1
Nicolas Hung