複数のコントロールを備えたiPhoneテーブルビューフィルター
テーブルビューにプロパティのリストを表示する不動産iPhoneアプリがあるとします。
約6〜7の異なる基準に従ってリストをフィルタリングする機能をユーザーに提供したいと思います。
各フィルター基準は独自のコントロールを使用します。たとえば、価格帯によるフィルターは、範囲をマークするために使用できる2つのノブを持つスライダーを使用します。平方フィートでフィルターすると、同様のスライダーが使用されます。近隣地域でフィルターすると、複数選択できる5〜6の近隣地域のリストが表示されます。家賃またはセールでフィルターすると、2項目の複数選択などが表示されます。
アプリをより魅力的で操作しにくくするために、2画面の簡単なアプローチを避けたいと思います：最初の画面は、右上に「フィルター」ボタンがあるテーブルビューですナビゲーションコントローラー。ユーザーがボタンを押すと、新しい画面がスライドインして、すべてのフィルターコントロールが長いリストに表示されます。このスクリーンショットと同様：
。
AppZappアプリによって実装された興味深い単一画面のアプローチを見ました（下のスクリーンショット）。ナビゲーションバーの下に、複数のボタン（各フィルターフィールドに1つ）が付いたツールバーがあります。フィールドをタップすると、テーブルビュー全体が下にスライドし、フィルターコントロールの余地が残ります。もう一度タップすると、テーブルビューが上にスライドし、コントロールが非表示になります。
スクロール可能なツールバーの概念にまだ問題があります。ツールバーには約3〜4個のボタンしか収まらないため、すべてのフィルターを表示するには、ツールバーを横にスクロールする必要があります（スクリーンショットを参照）。すべてのフィルターが同等に重要であり、3つの一般的なフィルターと2番目の画面を開く高度なボタンを使用したくないことに注意してください。
フィルタリングされていないリストは操作できません。アプリを効果的にするために、ユーザーは常にさまざまなフィルターの組み合わせで遊ぶ必要があります。ユーザーが毎回2番目の画面を開かなければならない場合、フィルターをかける可能性が低く、アプリが役に立たないと思います。
代替案はありますか？
これらすべてのフィルターを表示することはあまり重要ではないと思います。この44-50pxの高さ（@loRes）に加えてSegmented Controls Tabは、単純なタップ操作でも非常に簡単ではない場合があります。もちろん、スワイプなどのより複雑な操作を行う場合は、方法が難しくなります。このコントロールに関する私の主な懸念は、アクセシビリティの悪さです。
そして、あなたがこのコントロールを好きなら、とても悪い。私の提案は、Androidでデフォルトで使用されるこのスワイプタブナビゲーションを実装することです。たぶんこんな感じ
したがって、フィルタータブ間のナビゲーションは、はるかにアクセスしやすく、使いやすくなっています。もちろん、この種の相互作用はiOSコアベースではないため、このコントロールの使用方法を説明するヒントやヘルパーをユーザーに提供する必要があります。
しかし、私の個人的なアドバイスは、このアイデアをあきらめて、別の画面でフィルターを呼び出すことです。これは、より使いやすく、ユーザーエクスペリエンスが大幅に向上します。
フィルターに焦点を当て、ユーザーがフィルターのセットを「構成」できるようにする必要がある場合は、このアプローチをとることができます
フィルター条件を選択すると、「フィルター構成ページ」が表示され、「完了」した各フィルターにチェックマークが表示されます。
使用可能な2ページのアプローチには何の問題もないと思います。1ページに配置するオプションが多すぎる場合、さらにすべてのオプションにスライダーバーを選択した場合、使い勝手に大きな問題があると思います。
私の提案は2ページのアプローチを使用することですが、オプションごとに異なるUI要素を使用します。たとえば、半径の場合、「スライダー」を使用できます。価格の場合、テキストフィールドを使用できます。テキストフィールドをタップすると、数値のみが表示されます（価格は数値で表示されるため、キーボード/キーパッドのアルファベット部分は非表示）など.
例：
存在しない問題を解決しようとしているのではないでしょうか。最も重要な質問は次のようです：ユーザーがフィルターを常に手元に置いておくのに役立ちますか？
この特定のシナリオではそれを疑いますが、それをサポートするためのデータを提供することはできません。私は不動産サイトの使用にかなり慣れている人の心からしか話せないので、ここに私がより詳しい情報を得るために何をすべきかを示します。
私はその場でどのフィルターが変更されているのかを理解しようとするでしょう。アプリは既存の不動産サービス向けに構築されていると思います。だから、私は彼らに彼らがすでに持っている統計データを提供するか、あるいは彼らにいくつか集めてもらうように頼むでしょう。これらのページは通常頻繁にアクセスされるため、重要なデータを取得するのに1週間以上は必要ありません。
次に、そこから物事を取り上げます。どのフィルターが本当に重要で、簡単かつ迅速にアクセスできる必要があるのでしょうか。どのフィルターが通常一度だけ設定されるので、独自の画面に残ることができますか？
一部の（最大コスト、最小の寝室）が他のユーザー（近隣）よりもユーザー側の柔軟性が低い可能性が高いシナリオでは、すべてのフィルターに同じ優先順位を与えるのは直観に反するようです。
さらに、ここで説明するスライドソリューションは、ユーザーの観点から見ると2番目の画面と同じです。私たちがデザイナーと開発者として区別することは、「これはスライド要素を備えた1つの画面であり、それは2つの別個の画面です」と言うかもしれません。一方、ユーザーにとっての意味はほとんど同じです。「これは、結果リストからスライド要素に、そして別の画面に私の注意を引き付けます」。
どちらのシナリオでも、ユーザーはアプリケーションの別の領域にフォーカスを移す必要があります。両方のソリューションでまったく同じ操作が必要であることを理解してください。1）タップして画面をスライドイン/変更2）フィルターを調整して3）タップしてスライドアウト/画面を変更
ユーザーがスライダーを動かしている間に結果をライブ更新しない限り、スライドソリューションがセカンドスクリーンよりも優れているとは正直に言えません。また、これによってアプリケーションが魅力的で飽きのこないものになることもわかりません。
最後に、もう1つ考えてみましょう。ユーザーが最初にフィルターを変更する動機は何ですか。答えは「彼は結果に満足していないから」だと思います。したがって、彼は現在の結果リストはもう興味がなく、却下できると判断しました。私の本では、これが同じ画面で結果とフィルター設定を取得することを心配しないもう1つの理由です。
Adisのアプローチを変更して、フィルター領域を圧縮しようとします。数値ステッパーと一緒に入力フィールドを使用します。同じ行にそれらを合わせることができます。ラベルの半径は、スライダーなどと同じ線に合わせることができます。次に、フィルター領域をテーブルと同じページに配置できます。
このソリューションを使用すると、ユーザーは上下にスクロールして値をすばやく変更し、結果を確認できます。さらに、ページをフィルターまでスクロールするか、テーブルまでスクロールするボタンを追加することもできます。
Facebookアプリのサイドメニューの使用についてはどうですか？完全に新しい画面を開かずに、フィルターをすべてに合わせるためのスペースを十分に確保し、製品を部分的に表示したまま（およびフィルター結果）のままにして、テーブルに整理されたフィルターを表示することができます。