15

ユーザーは、期間を日、時間、分で入力する必要があります。

今のところ、これを3つのフィールドとして実装しました。これは問題なく機能しますが、これは正確に設計の良い部分ではありません。別の方法は、フィールドを1つだけにして、or、or、or、orなどと入力2 days, 3 hours, 45 minutesする15 mこと1d 2h 35mです90m。2 daysこれを正しく行うには、重要な解析が必要であり、国際化が複雑になるようです。

ユーザーが簡単に時間を入力できるWebUIコンポーネントの「ベストプラクティス」の例は何ですか？

DatePickerこれはではなく、期間入力コンポーネントであることに注意してください。

4

4 に答える 4

6

ここでのフィードバックを検討した後、簡潔な入力スタイルといくつかのスマートな解析を備えた単一のフォームフィールドを実装することにしました。最終結果については、http：//jsfiddle.net/davesag/qgCrk/6/を参照してください。もちろん、改善は大歓迎です。

function to_seconds(dd,hh,mm) {
  d = parseInt(dd);
  h = parseInt(hh);
  m = parseInt(mm);
  if (isNaN(d)) d = 0;
  if (isNaN(h)) h = 0;
  if (isNaN(m)) m = 0;

  t = d * 24 * 60 * 60 +
      h * 60 * 60 +
      m * 60;
  return t;
}

// expects 1d 11h 11m, or 1d 11h,
// or 11h 11m, or 11h, or 11m, or 1d
// returns a number of seconds.
function parseDuration(sDuration) {
  if (sDuration == null || sDuration === '') return 0;
  mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);
  hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);
  drx = new RegExp(/([0-9])[ ]?d/);
  days = 0;
  hours = 0;
  minutes = 0;
  if (mrx.test(sDuration)) {
    minutes = mrx.exec(sDuration)[1];
  }
  if (hrx.test(sDuration)) {
    hours = hrx.exec(sDuration)[1];
  }
  if (drx.test(sDuration)) {
    days = drx.exec(sDuration)[1];
  }

  return to_seconds(days, hours, minutes);
}
于 2013-02-10T06:35:49.450 に答える
3

考慮事項：

  • 可能な入力の範囲はどれくらい広いと思いますか？たとえば、1人のユーザーが「10日」を入力し、もう1人のユーザーが「2分」を入力する可能性がありますか？

  • 効率性または初めての直感的な動作が必要ですか？一部のアプリケーションは直接直感的ではありませんが、トレーニングを行うと、「より簡単な」アプリケーションよりも効率的に使用できます。

  • ユーザーはキーボードとマウスのどちらを好みますか？また、どの程度熟練していますか？データ入力プロは、「2本指のタイピスト」とは異なるニーズ/ウォンツを持っています。

もちろん、正しい解決策は1つではありません。いくつかのオプション：

  • 多くのブラウザで利用できる新しい（HTML 5）input type="range"とinputtype="number"を覚えておいてください。範囲はスライダーとして表示されることがよくあります（その名前にもかかわらず、必ずしも範囲の入力に使用されるとは限りません）。数値は、指定可能な増分で上下の数値として表示されます。これにより、データ入力が容易になる場合があります。

  • 幅広い入力が予想される場合は、3つのドロップダウンリスト（1つは日、時間、分）が最も確実なオプションです。これも完全なブラウザサポートを備えており、JavaScriptに依存せず、主要なモバイルデバイスなどで予測可能です。

  • 共通の期間（たとえば、90分、2時間、4時間）がある場合は、それらの期間が指定された単一のドロップダウンと、例外的なケースに対してより詳細な指定を可能にする「詳細」ボタンを表示できます。

于 2013-02-07T04:18:33.450 に答える
0

日付や時間の選択について、人々がすでに知っていることを考えてください。行動パターンはすでに設定されています。あなたはそれに従う必要があります。モバイルデバイスで何が行われているのか考えてみてください。そこから、パターンを活用できます。

http://mobiscroll.com/をご覧ください。たくさん
の機能があり、少し調整するだけで、必要なことを実行できるように見えます。

UXの観点からこのようなものを使用すると、ユーザーがすでに理解している一般的なパターンであるため、アプリがユーザーにとってより親しみやすいものに見えるようになります。

于 2013-02-07T13:52:15.920 に答える
0

jQuery Datepickerを検討しましたか？

日付を直接選択したくない場合は、コンテキストで日付を微調整して、時間を長くすることができます。

于 2013-02-07T03:43:53.147 に答える