web-dev-qa-db-ja.com

タイムスロットの選択

私は、会社のカレンダー/アジェンダで予約をするためのタイムスロット選択を提供する最もユーザーフレンドリーな方法を見つけるために探求しています。

インターフェースに関してはそれほど重要ではありませんが、マイナーな制限が生じるためです。これは、理想的にはデスクトップとモバイルデバイスの両方で使用できるWebフォームに統合されます(JavaScriptに依存する必要があります)。

もちろんcouldは日付ピッカー(月ビュー)を表示し、選択された日付ごとに利用可能なタイムスロットをロードできますが、複数の日の視覚的な概要を持つことはできません。

私が重要だと思う目標(いくつか明白です):

  • 結果に到達するために可能な限り少ないクリック。
  • 概要を維持します(複数の日が同時に表示されます)。
  • コンポーネントはできるだけコンパクトにする必要があります。大量のボタンを使用すると、フォームへの統合が雑然として見えることを意味します。
  • 隣接する複数のスロットを選択できるようにする必要があります(数日、つまり数週間にまたがっています)。

これまでのところ、このモックアップは次のとおりです。

calendar slot picker

しかし、このソリューションはこれらの制限のために理想からはほど遠いです:

  • これはモバイルでは(タッチでスクロールできれば)見栄えが良いと思いますが、デスクトップでは、週単位で水平にスクロールするために(見苦しい)左右のボタンが必要になります。また、デザインの範囲外になり、コンパクトさを損なうことになります。
  • 1日に利用可能なオプションが大量にある場合(非常に一般的)、コンポーネント内で垂直方向にスクロールする必要があります。以前の発言と合わせて、それは両方向にスクロールを作成し、私にはあまりにも多すぎるように思えます。
  • 同じ水平線上のスロットが同時に始まるという最初の印象を作り出すことができますが、そうではありません。その間の時間と比較してスロット間にスペースを追加すると、さらに多くのスクロールが作成されます。

だから私はモックアップが正しい方向にあるとはほど遠い。任意の助けをいただければ幸いです。それがモックアップに基づいているのか、まったく異なるアプローチに基づいているのか。

7
smhg

うーん。あなたの質問を理解したら、ソリューションをできるだけ柔軟にして、連続した複数の日を数時間(または数分)でも簡単に選択できるようにしてください。大まかに言えば、私は考えています:

  • ズームとパンで幅広い時間枠を取得(例:ズームアウトして年を取得、パンして2015年を選択、ズームインして1月の最初の週を選択(モバイルでは簡単、やや面倒ですが、マウスでも実行可能)
  • 一般的な時間枠(必要な数時間など)を選択し、予定の詳細を入力します。この時点で、時間枠をさらに調整できます。

一般的な原則は、ユーザーを思い通りに正確にすることです。「次の火曜日にお会いしましょう」という会話のように、コーヒーショップで2時15分に絞り込みます。

4
Peter

興味深いWebアプリケーション。あなたが調べたいと思うかもしれないものは Adam ShawのFull Calander jQueryプラグインです。しばらく使ってみましたが、かなり拡張可能です。これまでのところ、私の会社の開発者が見て使用しているものからは、かなり印象的です。 Googleカレンダーの拡張機能があり、POCとしてMicrosoft Exchangeサーバーに接続することもできます。

デスクトップユーザーにとって、インターフェースは非常に直感的です。 Microsoft OfficeやGoogle Calanderインターフェイスと同じです。モバイルユーザーの場合、悲しいことにクリックアンドドラッグのサポートは存在しません。プラグインには、プラグインの上に構築できる完全なAPIがあります。 1つのサイズですべてのソリューションに対応できるわけではありませんが、確実に優れた基盤を提供します。

3
JeffH