web-dev-qa-db-ja.com

時間範囲フィルターに最適な設計ですか?

フィルターパネル(モバイルアプリのみ)の一部として、ユーザーは自分が食べ物を手に入れられる時間帯をフィルターできるようにする必要があります。

時間ピッカーのより良いオプションは何ですか:

オプション1

  1. ドロップダウン enter image description here

オプション2

  1. +/-ピッカー enter image description here

オプション3

  1. 矢印ピッカー enter image description here

別のオプションは、ユーザーに開始時間と終了時間の両方を設定することを要求せず、ユーザーが1回だけ指定できるようにすることです(これにより、フィルターリターンに表示されるオプションが少なくなりますが、ユーザーにとっては使いやすさや論理的な動作が向上します)。

オプション4: enter image description here

1
Casey Lewis

この種の選択は、可能な限り単純で直感的である必要があります。そして、「開始時間」と「終了時間」を選択するのではなく、事前に構成されたオプションを選択することをお勧めします。 @NPNのピザハットソリューションは正しい方向に進んでいるようです

特定の時間範囲をオプションとして使用できる場合でも。ユーザーはあなたがその選択を簡素化したことを感謝します

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

3
Renaud

このようなことに注意することをお勧めします。文化はデザインに大きな影響を与えます。

文化が重要な理由

私はオランダ人ですが、ここでは通常、特定の時間を選択すると、全員がその時間に(15/30分ではなく)そこにいるようになります。私の個人的な好みはオプション4ですが、時間を+/-インクリメントする代わりに、ドロップダウンになるという小さな変更があります。

米国のような別の国では、時間の間隔が適切な場合があります。私はあなたがアメリカで車でたくさんしていると思うので、あなたが交通渋滞に陥った場合に備えて、その間の時間が良いかもしれません。

@Renaudのワイヤーフレームオプションは、中間バージョンとして適しています。オプションが少ないため、アクションの目標がより明確になるため、@ Kitanga Ndayよりもこのワイヤーフレームを好みます。

インクリメントする代わりにドロップダウンを使用するのはなぜですか?

現在、私にとっての現地時間は14:30(2:30 PM)ですが、仕事の後でピックアップしたい場合は、15分以上の速さで+増分を少なくとも16回押す必要があります。ドロップダウンはこの問題を解決します。

1
Kevin M.

選択はできるだけ早く行う必要があります。理由は思い出せませんが、ユーザーが選択できる最も早い方法を(利用可能な選択肢プールを絞り込むことで)与えると、ユーザーエクスペリエンスが向上することはわかっています。

編集:@Kevinの回答で説明したように、それは情報の過負荷が原因です。上部に配置されたオプション(「15分」、「30分」など)は、ユーザーが推測しやすくするためにあります。しかし、@ Kevinは文化について良い点を持っていました。アプリをさまざまな国の人々が使用する場合は、それを考慮に入れていることを確認してください。

そうは言っても、おそらくオプション1(オプション2よりも望ましい)を使用したいと思うでしょうが、その上部にいくつかのボタンがあります。

Pickup time filter wireframe

もちろん、以下の時間範囲は、選択したボタンに一致するように更新する必要があります。

ほとんどのユーザーは、できるだけ早く選択したいので、これはうまく機能します。時間範囲を選択するオプションのみをユーザーに提供すると、情報が過負荷になる可能性があります。ボタンのみを使用すると、精神的な作業が減り、選択が速くなります。それは良いことだと思います。

これが、YouTubeがスライダーの代わりにこの水平バーを使用して動画の速度を変更する理由の1つかもしれません。

Youtube video speed selector

さらに、機械学習を使用して、ユーザーに合わせてエクスペリエンスを調整できます。ユーザーが15分を選択し続ける場合は、15分ボタンが既に選択されていることを確認してください。ユーザーが特定の時間範囲を選択し続ける場合(例:02:00 AMから04:00 AM)、それに応じてアプリに応答させます。

1
Kitanga Nday

オプションの詳細については、オプション4と言います。PIZZAHUTオンライン注文での最近の経験では、現在の時刻(Pick up now)をローカル時刻表示で設定し、ユーザーがいつピックアップできるかを示しています。オーダー。アプリが異なるタイムゾーンのターゲットである場合、または注文したときに感じるようにユーザーフレンドリーな場合は、これが重要です。

例: enter image description here

1
NPN

一般的な使用法では、クイックエントリの一般的な値、クイック調整用のナッジボタン(矢印または+/-)、正確な微調整用のテキストフィールドを使用して、いくつかのアプローチを組み合わせるオプションがありません。

Googleマップでは、ルートUIでこれを使用しています。

Google Maps time picker

ただし、それがプロジェクトに適しているかどうかは、ユーザーのテストを通じて判断できます。適切な設計を見つけるために主にターゲットにしているデバイスでターゲットグループを使用していくつかの定性的なユーザーテストを実行し、後で定量的なデータを収集する分析を設定することをお勧めします。

ナッジボタンの+/-と矢印について:両方が使用されているのを確認したので、どちらも良い選択です。特定の図像が明確で、UIの他のものと競合しないことを確認する必要があります。ユーザーテストもそれを助けます。

0
Tin Man

私はオプション5番目で行くと思います。

オプション5: enter image description here

この方法では、時間が次の時間である場合、またはドロップダウンを使用してすべてのオプションにアクセスできる場合、ユーザーは+-ボタンで日付を選択します。

0
Shabir Gilkar