web-dev-qa-db-ja.com

フィルターボタンをモバイル画面の上部または下部のどこに配置すればよいですか?

私は現在、モバイルデバイスユーザーの80%がいるWebサイトをデザインしているので、モバイルで開いたときのエクスペリエンスを向上させることを目指しています。

製品ページでは、ユーザーが製品を簡単に見つけられるようにボタンフィルターを配置することを計画しています。モバイル画面の上部または下部のボタンの位置に関するベストプラクティスを探しています。

これについてあなたの経験を共有していただけますか?モバイルユーザーに最適なものはどれですか。

2
Rob H. Yamin

ボタンを上にすることをお勧めします。私は毎日いくつかのアプリを使用していますが、これらのアプリには上部と下部の両方にフィルターボタンがあり、これらのすべてのアプリケーションのうち、上部のフィルターボタンは非常に快適だと感じています。

また、フィルターボタンを上に配置することをお勧めします。ユーザーとして、私は下部のフィルターボタンがモバイル画面の領域を減らし、ユーザーは常に下にスクロールしてモバイル画面でより多くを表示するように感じています。フィルターボタンを上部に保持して、常にコンテンツを表示することをお勧めします同じフィルターボタンを何度も探しています。

以下のスクリーンショットでは、最初のアプリケーション(Myntra)が下部にあるフィルターボタンを使用しています。これは、モバイル画面のかなりの領域を占めていることがわかります。ただし、このアプリケーションの最も優れた点は、フィルターボタンが表示されるのは、ユーザーが一番上までスクロールした場合に限られます。それでも、常に下にスクロールして再びトップに戻ると、製品が再び表示され、ボタンが何度もトップに戻ると困ります。

enter image description here

他の2つのアプリケーション(RedbusとFlipkart)では、フィルターボタンが上にあり、2番目のアプリケーションでは、フィルターのクリアボタンは少し透明で、いつでもフィルターをクリアできるように配置されています。 3番目の画像には、上部にフィルターボタンがあり、製品を表示するための多くの不動産があります。

大画面デバイスでは、同じコンテンツ画面でより適切なフィルタリングオプションを提供するために、フィルターを画面の右側に配置する必要があります。

enter image description here

1

上のフィルターオプションはウェブサイトとして機能すると思います。モバイルアプリの場合、最も頻繁に使用される重要な機能が下部に配置されます。

enter image description here

Ebayのウェブサイトでフィルターオプション(Refine)をチェックしてください。これで問題が解決することを願っています。

2
NB4

コンテキストに関する質問:

このウェブサイトは何に使用されていますか?ある種のeコマースのように聞こえます。

フィルターは、多くの場合、画面の上部に配置され、多くの場合、絞り込み検索へのドリルダウンとして配置されます。左側のフィルター領域のデスクトップには一般的なeコマースパターンがありますが、モバイルでのAmazonの動作を見てください。スライド式の右パネルがあり、フィルター数を示します(このスクリーンショットでは2)。

フィルターは、一般的な検索用語に対する追加の制約をユーザーに提供します。上から下のモデルを使用して、一般的なものから具体的なものに至るまで、この画面を見てください: Amazon mobile site

この設計の1つの欠点(ちょうど私の意見)は、フィルターがもう少し目立つ可能性があり、おそらく粘着性があるということです。しかし、それは単なる意見であり、Amazonが広範なテストを行わずにこれをリリースしたとは思えません。

画面の下部にフィルターボタンがあると、いくつかの理由で混乱する可能性があります。

  1. サイトのコントロールは、下部のナビゲーションバーやその他のコントロールと(Safari Web上で)競合しています。この上にフィルターボタンスタックを配置すると、視覚的なノイズが増えます。フィルターボタンも同様にスティッキーにする必要があるようですが、それ以外の場合は、下にスクロールする必要があります。

  2. ユーザーが固定ページの下までスクロールする必要がある場合は、有限の結果を適用する必要があるため、無限にスクロールする必要はありません。次に、別の問題があります:どうすれば下のものを知ることができますか?私の仮定は、製品の単なるリストです。それは発見できません。

  3. フィルターは、検索(およびカテゴリー)の1つの側面です。カテゴリまたは検索結果を一番上にリストするので、私の期待は、カテゴリを拡張するか、それが配置されている場所の近くで検索することです。

Yelpの別の例をご覧ください。検索の近くに結果を絞り込むためのトグルがいくつかあり、すぐそこに目立つFilterボタンがあります。

Yelp search and filter

1
Mike M