携帯電話で範囲を入力するための最良の相互作用パターンは何ですか？

Question

範囲でリストをフィルタリングする必要があるモバイルアプリケーションがあります。 （年齢で人々をフィルタリングしたい出会い系アプリを想像してください）。範囲ピッカーをどのように設計すべきですか？

人は下限（例：xx歳から）と上限（例：xx歳まで）を定義できる必要がありますが、両方を設定する必要はなく、「なし」にリセットすることもできます。

どちらの値も整数です。

2つの入力フィールドと1つの数値入力で解決するのが最も簡単だと思いますが、もっと良い解決策がないかもしれません。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

Answer 1

モバイルでのテキスト入力は（物理的に）非常に「高価」であり、摩擦を引き起こすため、可能であれば回避する必要があります。

これは私が提案するものです：

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

2つの端の年齢ラベルは、ユーザーがノブをスライドさせると変化します（両端にEdgeの年齢を入力します）。

アプリ「カルマ」の例です

Answer 2

テキストボックスはユーザーにとって管理が困難ですが、組み込みのピッカーは非常にうまく機能します。これらはiPhone、AndroidおよびWindows Phoneでもサポートされています。見た目が異なっていても同じです。スライダーは範囲が狭くても機能しますが、3で年齢（60ステップ以上）をサポートしています。 7インチの画面を正しく表示するのは難しいでしょう。ピッカーを試してみませんか？

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

幸運を！

Answer 3

Yosef Waysmanの答えは、使用するのに適したパターンですが、両方の要素を制御することは常に簡単である必要があります（それらが接近している場合も同様）。最初のコントロール要素の上と2番目のコントロール要素の下に「タブ」を追加して、タブが接近しているときにそれらを分離することを検討してください。または、それらが近く、「ボックス」に当たるときは、常に最初に「From」コントロールを選択します。