web-dev-qa-db-ja.com

ユーザーが複数の時間範囲を選択できる非常にシンプルな方法

私はこの問題について1週間以上ブレインストーミングをしており、賢明な方法を考え出すことができません。

基本的に、ユーザーが特定または一般的な一連の時間範囲を選択できるようにする目的でコンポーネントを構築しています。これは、技術に精通していないユーザーでも簡単に、説明ビデオを見たり、2行以上のテキストを読んだりせずに理解できるように、非常にシンプルな方法で提示する必要があります。具体的には、時間範囲は配信のスケジュールに使用されます(したがって、ユーザーがいつそれらを受け入れることができるかを指定できるようにすることを目的としています)。

特定モードと一般モードの2つのモードがあります。これらはタブで分離することにしました。 「特定の」モードは簡単で、私がカバーしたものです(ユーザーは2つの時間枠を選択します)。ただし、より複雑なもの(およびデフォルトとして必要なもの-非常に簡単であることが非常に重要です)は「汎用」モードであり、ユーザーはその可用性を具体的かつ簡単に伝えることができます。可能な方法(たとえば、「今週は平日午後6時以降、木曜日を除き、土曜日も終日利用できます」)。

私はこれを実装するさまざまな方法を考えましたが、私が思いつくすべてのものは、直感に反する、醜い、または奇妙なものです。私が実行したアイデアのいくつかは次のとおりでした:チェックボックス/テキストフィールドの束(最も単純ですが醜い)、時間範囲を選択できるカレンダー(見た目は快適ですが、あまり技術者でない人を混乱させる可能性があります。選択する必要がある場合は面倒です)たとえば、毎週午後6時から午後10時-私は5回行う必要があります)、また、利用可能なときに簡単な説明を入力できるフリーフォームのテキストボックスも考えましたが、これは途方もなく複雑になりますそのような単純なタスクなどでバグが発生しやすい.

だから、これに最善のアプローチをする方法について誰かが何か考えているかどうか疑問に思っていました。私は主に開発者であり、UXの人ではないので、この使用例が非常にまれであるとは思えないので、この問題はUXコミュニティによってすでに解決されていると思います。しかし、検索した後、関連するものを見つけることができませんでした(おそらく、この用語に慣れていない用語があるのでしょうか?)。

よろしくお願いします。

3
Ruslan

他の人が言ったように、これは一般的なケースで解決することはほとんど不可能です。ただし、実際のパラメータがわかっているため、ほとんどのケース(パレートの80%:20%など)を適切にカバーし、例外的なケースをサポートするテーラードデザインを開発できます。

1週間または今日から5〜10日間の稼働時間と日照時間のみを考慮する必要があり、30分精度で十分な場合は、インタラクティブなカレンダーグリッド/テーブルが機能します。 30分のスパンはすべて1つのセルで表されます。列は日(tomorrowのラベルが付けられた後、日と月または曜日のみ、つまりTueまたはTuesdayなど)と行を表します。時刻を表します。

直感的な操作は、各セルをクリックまたはタップして、そのステータスをavailableoccupied(または何を持っているか)の間で切り替えることです。これは面倒な場合があります。したがって、「描画」を許可することをお勧めします。セル上でマウスボタンまたはタッチスクリーンの指先を押すと、描画モードがアクティブになり、セルが現在あるバイナリ状態から他のセルに変更されます。指がまだ下にある間にドラッグされたすべてのセルに影響しますが、もちろん同じ状態のセルにのみ影響します。

1
Crissov

問題には内訳が必要です。問題には2種類あると思います。繰り返したい日付の範囲とそうでない日付の範囲です。

リピートなし今週は、木曜日を除く平日の午後6時以降、および土曜日の終日繰り返し:毎週午後6時から午後10時

両方の問題を解決できるUIを設計しました。以下をご覧ください。

  1. 毎日、時間枠を複数日で定義することもできます。

  2. 週のタイトル(日、月)をクリックすると、それぞれの日を選択できます(週末は簡単ですか?)

enter image description here

ここからも小さなアイデアを得ることができます:

https://dribbble.com/shots/1821532-DatePicker

https://dribbble.com/shots/372959-Date-Picker-2-Month-View-with-Time-Option

2
Jivan

残念ながら、カレンダーは、人々が理解し、一貫して適切に使用することは困難です。

人々がテキストの可用性で応答できるようにし、それを何かにコード化することについてはどうですか?現在数百人のユーザーがいる場合は、CS担当者が適切なソリューションをスケーリングしている間に対応するのはそれほど悪くはないでしょう。

2つのオプションを使用してA/Bテストを行うこともできます。1)把握できる最高のUXと2)テキストの自由形式フィールド。次に、完了率と幸せを確認します。

1
Chris Butler

これには簡単な解決策はありませんが、私が考えることができる最も簡単な方法は次のとおりです。

http://jsfiddle.net/b3f6wvyp/1/

enter image description here

ユーザーが1つ以上の時間枠を指定できるようにします。時間枠は、日付と2回(「開始」および「終了」)で構成されます。新しいタイムウィンドウが追加されると、リストの現在最後のコンテンツがコピーされます。この例で使用した入力ウィジェットは基本的なHTML5ウィジェットであり、装飾することができます。

ユーザーが日付と2回の値を入力しなければならないという回避策はありません。秘訣は、利用可能な最も簡単なメソッド/ウィジェットを使用することです。これらの最も簡単なメソッド/ウィジェットの詳細については、別のディスカッションにお任せします。Webアプリの場合は、jQuery UIまたはYUIウィジェットを使用します。ネイティブアプリの場合は、ネイティブウィジェット/規約を使用します。

重要なことは、日付、「開始」時刻、「終了」時刻のこれらのグループ、これらの時間枠を単位として明確に示し、これらを簡単に追加および削除できることです。

1
obelia