web-dev-qa-db-ja.com

14回の入力に適したUX

曜日ごとに要素を持つフォームを更新しています。ユーザーは、毎日の開始時刻と終了時刻を選択する必要があります。現在、これはユーザーが時間を入力できる14の異なるテキストボックスですが、これは少しずさんで改善される可能性があると感じています。

here （ディレクティブ> Timepicker）からタイムピッカーを使用してみましたが、ページに14個あると、以前よりも雑然として見えます。

誰かがこれにうまくいくだろうという考えを持っていますか？

usabilityinput-fields
31
TMH

ユーザーが必要に応じて詳細を段階的にユーザーに公開します。あなたのスマートなデフォルトはどうなるか考えてみませんか？ほとんどのユーザーがほとんどの方法でアクセスできるようにするための前提条件はありますか？検討できるカップル：

  • 日曜日と土曜日は通常、米国の労働者の休日です。これは本当ですか？その場合は、先に進んで、それらをデフォルトで「オフ」にして、誰かが別のスケジュールで作業する場合に備えて「オン」にできるようにします。
  • デフォルトの勤務時間は月曜日から金曜日の午前8時から午後5時（17:00）までです。会社は通常の営業時間で働いていますか？これらのデフォルトをそれらの値に設定します。
  • 時間の経過とともに学習します。ユーザーは毎週これらの時間を入力する必要がありますか？毎月？その場合は、システムのデフォルトをユーザーの作業パターンに変更します。

例：

Possible Solution Wireframe

60
Hynes

私はGoogleカレンダーのアプローチを使用しようとします。許容できるレベルの詳細/解像度で日を広げ、ユーザーはドラッグして時間範囲をマークします。より詳細なレベルが必要な場合は、毎回微調整できます。

enter image description here

これらの6つの時間範囲に入るのに約5秒かかりました。

36
Vitaly Mijiritsky

私が思いついたのは このスライダー を使用することで、デフォルト値を8:00と17:00に設定しました。これは手動で日付を入力するよりもはるかに使いやすいと思います。

また、使用するデータがあれば、開始/終了のデフォルト時間を以前に入力したフォームの平均で上書きすることもありますが、それは現時点では単なるアイデアです。

4
TMH

就職の面接のようなものは、人々が柔軟になりたいと思って、可能な限り利用できるようにしようと思うでしょう。

  • 毎日のデフォルトを「利用可能な（稼働）日」にして、ユーザーが特定の日を編集する場合にのみ、時間ピッカーを表示することができます。
  • また、ユーザーに複数の日付を選択して（たとえば、面接の日付をインタラクティブな日付グリッドとして表示し、クリックしてドラッグして選択できるようにする）、開始と終了の選択を選択した範囲に適用するオプションをユーザーに与えることもできます。
2
Franchesca

GoogleのMoto X目覚まし時計のようなものを使用しないのはなぜですか。

設定1朝：6AM夕方：8PM

月()火曜日() 結婚した()木()金()土() 太陽()

+新しい設定

したがって、最初に時刻を設定し、次にこの設定を適用する曜日を決定します。新しい設定を追加することもできます。追加する場合は、もう一度時間を入力して、適用する残りの日数を選択します。

2
Jacob

これらのものを記入しなければならない誰かとして話す：

キーパッドを使用できるようにしてください。これは、思いがけないデザインのマウスクリックのようなものよりもはるかに速いためです。 Enterキーを押すと、入力フォーカスが次のフィールドに移動し、フォームは送信されません。まず、入力フォーカスはデフォルトで最初のフィールドにあるはずです。そうすれば、キーボードに手を触れ続けることができます。

したがって、900と入力すると、09：00に解析されます。 AM/PMランドにいる場合は、私が700を意味していることを推測するためにいくらかのスマートさを適用できるかもしれません。それが信頼できない場合は、数字に-または+を付けてAM/PMタグを追加します。

1
Stefan Schmiedl

アイデア

  • 平日の期間を2つだけに制限：月〜金、週末
  • 「毎日の期間を設定する」チェックボックスを追加します（それを必要とするユーザーのみ）
  • 1日の作業期間には1時間ステップのスライダーを使用します
1
tomaszbak

1日のスケジュールをコピーして別の日に貼り付けることができるNestアプリのスケジュール機能に似たものを用意することは価値があります。巨大な時間の節約。

0
Mike

time-rangesとdate rangeを作成する必要があるプロジェクトで数ヶ月前に同様の状況に直面しましたそして、 ArShaw FullCalendar 内にロードするために、それらをJSONドキュメントとして送信します。

私が付いた解決策は次のとおりです（プロジェクトはスペイン語ですが、それに応じて翻訳しようとしました）：

Possible solution to your UX situation

したがって、ユーザーにtime-range（15、30、45、60分）を選択するように要求し、ユーザーは開始日（カレンダーの先頭行）を選択する必要がありますテーブル）と開始時間と終了時間（カレンダーのテーブルの縦の左の行）。ユーザーが[タイムスロットを開く]ボタンをクリックすると、プログラムはそれらの時間範囲を作成し、クリックして詳細を表示できる個別のイベントとしてカレンダーに配置します。

必要に応じて、最後のrecurrentフォームを使用すると、ユーザーは新しい選択された日付制限まで時間範囲を繰り返すことができます。

私たちは実際に、このアプリケーションが使用されているラテンアメリカ市場でこの機能をテストしました。最初に起動してから、いくつかの変更がありました。

  • たとえば、一部のユーザーは入力であることを知らなかったため、日付と時刻の入力の左側にアイコンを追加しました。

  • その入力の機能についてユーザーに通知するいくつかのポップオーバー（青い小さなテキスト）を追加しました。

  • また、カレンダーでタイムスロットを設定する方法のチュートリアルにも時間を費やしていますが、これは簡単なアクションではないため、指導後ユーザーはそれをどのように利用するか、彼/彼女は本当に機能を高く評価しました。なぜならユーザーはそれらすべてに対して一度だけタイムスロットを作成する必要があったからです。

  • また、最初は医者だと思っていた対象ユーザーについても調査を行いましたが、後に実際のユーザーがアシスタントであることがわかりました。

以下は、開いているイベントでカレンダーがどのように表示されるかを示すスクリーンショットです。

Calendar with events

0
Gus