15種類以上のイベントタイプを備えた美しい6か月のカレンダービューをデザインするにはどうすればよいですか？
私は自分の仕事でカレンダーWebアプリケーションを設計しており、それは十分に受け入れられています。私の会社の複数の部門がそれを採用し、それぞれのイベントに独自のカテゴリを要求したほどです。お客様にもご利用いただけるようになりました。
私の問題は、4つの異なる色の素敵なデザインから始まったものが、気が散る色の乱交になり、率直に言って、誰かがスキトルズをかいているように見えます（スキトルズが15色の場合）。私は複数の配色を試しましたが、それは常に実際よりも悪く見えるようになってしまいます。現在のカレンダーは次のとおりです。
これは、左側のメニューから表示を選択することで、すべての部門が関連するカテゴリを選択できるという考え方です。ただし、すべてのカテゴリが表示されている場合でも、カレンダーを美しく見せたいです。
選択できる20色のパレットを作成しようとしましたが、最終的にはさらに悪くなります。私は、より多くの色が最良のオプションではない可能性があること、および放射状または縞模様の色などのさまざまなオプション ここのように が最良のオプションである可能性があると考え始めています。ただし、機能する可能性のあるオプションの例や視覚化を入手したいと思います。列やイベントの間の黒い境界線をドロップするなど、テーブルレイアウト全体を再設計することにも非常にオープンです。
私は自分で良い例を見つけようとしましたが、Googleカレンダーのような月のビュー、または印刷用の空の6か月のカレンダービューしか見つけることができませんでした。
ちなみに、これを設計してくれる人はいないと思います。どこかに、素晴らしい例やインスピレーションがあり、自分でそれを見つけることができなかったと感じているだけです。
更新、2年後：
新しいデザインになりました。これほど多くの色を機能させることができないという事実を受け入れました。次に、同様のカテゴリを、グレーと白のインクを含む合計7色にグループ化しました。ユーザーは引き続き個別のカテゴリの表示を選択できますが、今ではよりプロフェッショナルに見え、Unicorn barfに似ていません。
あまり変更せずにできる改善点がいくつかあります。
- テーブルのすべての境界線を黒ではなく白にします。
- ヘッダーから青緑色の背景を削除します（追加の情報を追加せずにユーザーが処理できる別の色が追加されるだけです）。白い背景に黒いテキストに戻します。
- 赤い背景の代わりに白い背景に赤い数字を使用するように赤い行ヘッダーを変更します。
- カレンダーの新しい色を選んでください。おそらく、Kuler、ColourLovers、または他の同様のサイトを使用して配色を探してみてください。
- 可能であれば、セル全体を色で塗りつぶす代わりに、ラベルの前に小さな色見本（正方形または円形）のみを配置して、カレンダーを毎日レンダリングしてみてください。
- 情報を非常に密に圧縮する理由があるかどうかはわかりませんが、各セルの下部に余分なパディングを追加すると（各セルのコンテンツを上部に垂直に揃えて）読みやすくなります。
キットグロースによって指摘されたように、細胞は完全に色で満たされるべきではありません。正方形や円形のアイデアに加えて、私はしばしば片側に沿ってストライプを使用しています。以下は、ALMツールであるMingleの例ですが、同じ考え方がカレンダーでも機能します。
15種類以上の異なるイベントタイプを使用して、6か月間（毎日）のカレンダービューの要件で美しく機能的なものを作成できるとは思いません。
あなたがすべきことは、ユースケースについて知っていることを使用して、より大きなイベントデータベースへの機能的なインターフェースを構築することです。
たとえば、リリースを計画するときにそれらが重複しないことを確認したい場合は、おそらくいくつかのことを行う必要があります。
- 「リリースの作成」インターフェイスで他のリリースと重複するリリースをスケジュールしようとすると、警告が表示されます
- 重複するリリースがスケジュールされているときに、適切なリリース所有者（および全体的な管理者）に通知をトリガーする
- 短期的に重複するリリースの概要を示すダッシュボードを用意する
これをシステムのユーザーでテストし、小さな部品の作成を開始して、日常的に役立つことを確認する必要があります。それでも巨大なリストを使用している人々を見ているなら、おそらく必要なシナリオを見逃しているでしょう。
これはシステムのさまざまなユーザー向けのダッシュボードである可能性が高いため、O'Reillyによる情報ダッシュボードの設計を一読することをお勧めします。それは古い本ですが、美しい/カラフルなだけでなく、可能なすべての小さな情報を含むのではなく、便利なインターフェースを作成する方法を強調しています。
ああ、あなたはあなたの処分で多くの異なる戦略を持っていますが、それはあなたの最終目的ゴールに依存します。
さまざまなタイプの実装によってグループ化されたいくつかのアイデアと、それらが取り組む問題を投げかけます。それはまったく役に立たないかもしれませんし、あなたにいくつかの新しいアイデアを与えるかもしれません。
周波数
イベントのグループ化
すべてのイベントに同じ色を使用できますが、イベントが積み重なると、より明るい色（ヒートマップのようなもの）を使用できます。これにより、50イベントの日と2〜3の通常の日を簡単に見つけることができます。
イベントの代替表現
最小限の方法でイベントを表示するカレンダーがあります このリンク、最初の画像を参照 。
日中のイベント数は、行の長さで表されます。他のいくつかのカレンダーは、それらを数えるのがより簡単なので、ドットを使用します。 （.... vs ----）
フィルタリング
たぶん、人でフィルタリングする代わりに、チームやその他の意味のあるユニットでフィルタリングを開始できます（すでにそうしているかもしれませんが、スクリーンショットではわかりにくいです）。
色
safe色が必要な場合は、 http://colorbrewer2.org/ にアクセスします。唯一の欠点は、最大色選択できるのは12ですが、それも予想されます。300の簡単に識別できる色はありません。
ワイルドスタッフ-フィッシュアイビュー
さて、免責事項、これらの2つの例は醜いです：D
しかし、キャンバスのすべての部分が同じように重要であるというわけではありません。これを使用して、1つの列（月？）または単一のセルを選択し、それをさらに拡大して、他を縮小して表示する機能を使用できます。その列またはセルのより詳細なデータ。
ユーザーがUIをどのように使用するかに応じて、ユーザーにとって便利であり、ビューを装飾することもできます。それらのすべてを透明な背景で表示し、ユーザーが部門のトグルボタンをクリックして関心のある部門を強調表示できるようにします。名前と色。
これは、ユーザーが一度に1つまたは2つの部門を確認する場合にのみ役立ちます。