マルチパートの進行状況/ステータスバーの色

Question

私は、いくつかのアイテムに対してタスクを実行する際の現在のステータス/進行状況をユーザーに示す必要があるアプリケーションに取り組んでいます。各アイテムが持つことができるつの状態があります。

1. 新規（青）-アイテムはまだ表示または処理されていません
2. 良好（緑）-アイテムは過去に処理され、保留中のタスクが関連付けられていません
3. 期限（赤）-アイテムは過去に処理されましたが、保留中のタスクが関連付けられています

これらのアイテムのコレクションの概要をすばやく把握するために、マルチパートプログレスバーが使用されています。以下の画像は、これらのバーの4つのそのような可能性を示しています。

私の懸念は、いくつかの色が隣同士でうまく機能しないことです-特に色盲の人々にとって。

これを作成するにはどうすればよいですか目にやさしい、さらにアクセスしやすい？

Answer 1

特に赤と緑が並んでいると、色だけで問題が発生することは間違いありません。

ネストされた適切な進行状況バーには、次の質問に対する洗練された答えが必要です。

1. 配列のタイプを修飾するにはどうすればよいですか（new、good、due）？
2. 配列のタイプをどのように定量化しますか？

各タイプに含まれるアイテムの数がわからないため、色だけではどちらのニーズにも不十分なソリューションです（他のアイテムと比較した比率の大まかな測定しかできません）。

注釈付きのセグメント化された進行状況バー

1つのオプションは、追加の視覚的な手がかりとデータをバーに追加して、色がプライマリではなくセカンダリまたはターシャリインジケータになるようにすることです。この場合、テキストラベルを使用してタイプを表示し、次にタイプアイテム数のディスクを表示しました。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

タイプの数量が1または2のみであり、ネストされた進行状況バーの幅がラベルに収まらないほど大きくなく、一部の注釈をバー自体の外側に移動することを数えることは、検討に値する手段かもしれません。

^{bmmlソースをダウンロード}

次に、わずかに異なる実装での同じアイデアの他のいくつかの実際の例を示します。

ソース

ソース

Answer 2

このようなものはどうですか？

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

グレーが出来ました

テクスチャの移動は、保留中のタスク/現在処理されている部品を示します

白は「欠けている」もので、処理する必要があります

Answer 3

JIRAsプログレスバーを見てください：

色はうまく機能し、どの色が何を意味するのか明確なインジケータがあります。ここの数字は、チャールズの回答のようにプログレスバー内に表示するよりも明確で、モバイルデバイスに適しています。また、1つのカテゴリにアイテムがない場合は、その数からすぐにそれを確認することもできます。