it-swarm-ja.com

量的データを示すDatepicker UX

ユーザーがタスクの期日を選択できるように、日付ピッカーウィジェットを含むコラボレーションアプリを設計しています。私たちのデータは、ユーザーがワークロードの少ない日を体系的に選択していることを示しています。このため、日付ピッカーに毎日のタスク数を表示すると便利だと思います。

日付ラベルと定量データ(タスク数など)の両方を表示する日付ピッカーのパターンを見つけることに失敗したので、独自のデザインをいくつか思いつきました。ヒートマップアプローチを使用して、毎日のワークロードを伝えます。もう1つは、グラフのような小さな進行状況バーを使用します。どちらのデザインも、1日に1つ、1つ、2つ、3つ、またはそれ以上のタスクが関連付けられているかどうかを一目で判断できるようになっています。追加の参照のために、サイドペインには、選択された日またはホバーされた日のタスクリストが表示されます。

Heatmap variation

Progress bar variation

1日あたりの量的データを示す日付ピッカーのデザインを知っている人がいたら、私に知らせてください。または、上記の日付ピッカーのどれがより混雑していない日を見つけるのに役立つと思われるかについてのコメントをいただければ幸いです。

[〜#〜] edit [〜#〜]:以下の提案をすべて試しました。私の観点から、最もうまくいくのは、user39437とMatt Lavoieからの提案を次のように1つにまとめることです。

Alternative design

ただし、検討した結果、純粋な視覚処理のみが必要なため、純粋なヒートマップアプローチは、他のすべてのバージョンよりも最もビジーでないスポットを特定するのに効果的であると結論付けました。他のすべての表現では、シンボルを値にデコードして範囲内で比較するために、ある程度の認知的努力がさらに必要です。プロトタイプでいくつかのテストを行うつもりですが、まだ数か月先です。ご協力ありがとうございます。

16
Jay Mann

私は両方のアイデアが好きですが、2番目のデザインの方が傾いています。

最初の設計では、タスク数の多い日は、タスク数の少ない日よりも目立ちます。これは、ユーザーが探しているものとは反対です(忙しくない日)。

最初のデザインを変更する場合は、忙しい日をフェードインして、忙しくない日を見つけやすくします。その日が忙しくなると(または、言い換えると、新しいタスクで使用できなくなると)、透明度は高くなるはずです。

7
myajouri

あなたは一日の「満腹感」を伝えようとしていますが、どちらの視覚化もその情報を一目で提供しません。ヒートマップにはキーが必要で、水平バーは進行状況インジケーターのように感じられます。

パイは広くパンされていますが、「膨らみ」の一般的な指標です。

これは、いくつかの味を与えるための簡単なモックアップです。定義した0〜4個のタスクのルールでうまく機能します。

enter image description here

5
GollyJer

2つの組み合わせをお勧めします。

1つ目は、どの日に何かがあるかを即座に知るのに最適ですが、色合いはユーザーの摩擦であるキーを調べる必要があります

2番目は、数量を知るのに最適ですが、多少忙しいため、何かが一目でわかる日を確認することはそれほど明確ではありません(比較的明確ですが)。

コンボアプローチは、何かが青い色合いであり、下部に小さなバーもあるすべての日になります-それは一目で視覚的にクリーンで直感的だと思います

バーのところでいいアイデア

3
user39437

ドットの使用についてはどうですか?棒グラフと非常によく似ていますが、同じ待機感はありません(通常、進行状況バーはいっぱいになるのを監視しています)。ドットは同じ情報を伝えますが、バーの「進行状況」は伝えません。

また、背景色を使用して今日の日付を表し、境界線を使用して選択した日付を表しました。互いに重複しない2つの異なるもの。

mockup

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

3
Matt Lavoie

1日あたりの定量的なデータを示す他の日付ピッカーデザインがあるかどうかを尋ねました。

以下は、MS Outlookのスケジューリングアシスタントのスクリーンショットです。

Screenshot of Scheduling Assistant from MS Outlook

右側のルームファインダーは、例と非常に似た方法で機能しますが、その日に予定されているタスクではなく、時間に基づいて可用性が表示されるだけです。

私の例は、さまざまな日に利用できる範囲があまりないので素晴らしいものではありませんが、選択した出席者との会議を手配しようとする場合、1月7日は不適切な選択です。 w/c 2月3日は「まあまあ」で、その間の日数は「良い」です。 1月22日が現在選択されている日です。

提案されている2つの例についてはコメントしていないため、これは完全な答えではないことを認識しています。ただし、同様の問題に対処しようとするUIの例としては役立つ場合があります。

2
Squig

提案に基づいてあなたの投稿と改訂を見ました。まだまだ遊べる余地があります。

新しい[〜#〜] ui [〜#〜]要素を提供する代わりに、既存の要素を利用します:日付番号。 enter image description here

このモックアップでは、日付のサイズを可用性を表すようにしました。私の最初の考えは、サイズを逆にすることでしたが、日付が大きいほど優先され、クリックしやすくなります。

色も目立たせることができると思います。

カレンダーに情報密度を追加するためのクールなコンセプトがあります。これは、膨らませることなく、あなたが探しているものを達成するかもしれません。

それが良い方向であるといいのですが。

2
Itumac

あなたの2番目のデザインが最も成功すると思いますが、いくつかの調整を提案します。

日付ピッカーの要点は、日付を選択するプロセスを簡略化することです。

最初のデザインの問題は、ヒートマップは便利ですが、日付ピッカーに加えて、ユーザーは色と意味を説明する色と凡例を処理する必要があることです。色の凡例も、カレンダーの近くではなく、タスクのすぐ下にあるため、関係を確立するためにカレンダーに焦点を当てる3番目の要素になる可能性が非常に高くなります。

2番目の設計により、ユーザーはすぐに何が重要か(日付)に集中できるようになり、青いバーのある日には「何かがある」ことがわかります。

タスクがない場合は灰色のバーを削除して、この2番目のデザインを簡略化します。これにより、タスクがある場合にのみ青が表示されます。これにより、ユーザーは最も混雑していない日を簡単に理解できるようになります。

1