web-dev-qa-db-ja.com

小さな範囲の日付/時刻ピッカー

ユーザーが非常に狭い範囲の日付と時刻を分単位の精度で選択する必要があるアプリケーションがあります。一般的に何が起こるかは、生体認証デバイスが被験者に与えられ、記録を開始し(通常は24時間、最大96時間)、この間、被験者は自分の経験の日記を書きます(例) 「午前8時27分-ウォーキング、立ちくらみ」)。その後、デバイスと書かれた日記は技術者に返却され、日記のエントリを私のアプリケーションに転記する必要があります。おそらくいくつかの日記エントリがあります:
Diary Grid

問題は、私が調べた日付/時刻ピッカーのいずれもこのタスクに適しているようには見えないことです。

これはかなり典型的なUIを使用した私の最初の反復でした:
Typical Date Time Picker

このUIのどれが無効なオプションで無駄になっているのかに注意してください。さらに、境界がどこにあるのかを正確に示すことはできません(この場合、火曜日の午後11時から水曜日の午後11時)。

ここに私が持っていたいくつかの他の考えがあります:

複数のドロップダウン:
Many Dropdowns

これはかなり良い解決策ですが、UIがいかに雑然としているのかはあまり好きではありません。これで、日付/時刻ピッカーを含む1つのドロップダウンの代わりに4を使用できます。これにより、適切な検証を実装するのが少し難しくなりますが、境界がどこにあるかを正確に示すという、特に良い仕事はしません。

日付/時刻スライダー:
Date/Time Slider

これは境界の明確な表示を提供し、入力の範囲を制限することは非常に簡単ですが、UIを整頓することはあまりありません(特に、モックアップに追加したマーカーを含める場合)。これはかなり非標準的なコントロールであり、一部のユーザーを混乱させる可能性がありますが、キーボードの使用を好むユーザーのために、その横にテキスト入力を提供したいと思います。ドロップダウンのスライダー全体を非表示にすることもできます。ここで最も難しい部分は、おそらくまったく新しいコントロールを実装することでしょう。

他に何か提案はありますか?非常に小さな範囲の日付/時刻ピッカーを表示するユーザーフレンドリーな方法は何ですか?この問題に最初に遭遇したのは私ではないと思います。

4
p.s.w.g

回答を更新しました

減少したカレンダーは、複数のドロップダウンまたは範囲スライダーオプションとは対照的に、理解しやすく使用することができます。

例えば.

mockup

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

カレンダービューは、ドロップダウンよりも適切な日付をユーザーが選択するのに役立ちます。月次ビューの代わりに週次(または日付範囲によっては隔週)カレンダーに切り替えると、ほとんどの無関係な日付を取り除きながらコンテキストを維持するのに役立ちます。カレンダーピッカーは、スライダーに比べて、より使い慣れたインターフェースです。スライダーは簡単に理解して調整できます。

上記の例は、ユーザーが時間セルをクリックして編集したときに開くダイアログに挿入できます。

3
nightning

Busycalのようなモデルについてはどうですか?カレンダー上でイベントをドラッグすると、少しずつ進行するように設定できます。

Gifの例: http://recordit.co/bpdLdbMt6x

1