データのテーブルがあり、各行はいくつかのステータスを持つことができる見積もりを表します。しばらく前、ステータスシステムがそれほど複雑ではなかったとき、ステータスデータを充実させて、色付きのフォントで色付きの背景に錠剤の形で表示するのが最善であると判断しました。この情報は重要であり、RAGカラー内に簡単にフィットするので、概念的には非常に良いと思いました。
ただし、システムがより複雑になったため、さまざまな種類のステータスを追加することが決定されました。たとえば、後日提供される追加情報を基に見積もりを受け入れたり、クエリで拒否したりできます。
視覚的には、テーブルは次のようになります。
ここで主観性は感嘆符で表されます
Asterixはクエリを表します。
Rは更新を表します
見積もりを別の方法で充実させることを考えていたので、たとえば、Rを右上に移動しました。お気に入り: -
同様の問題に対するいくつかの一般的な解決策は何ですか?
このデザインを改善できるいくつかの提案を次に示します。
1-カラーラベルを同じ幅にします!
alignmentによりページ全体をスキャンしやすくなり、無意識のうちに穏やかな読書体験を提供するため、これにより視覚的に魅力的になります。
2-強調色に丸みの少ないボーダー(ボーダー半径)を使用しますmatchにラベルを付けるには、unityと一貫性、全体的に見栄えもよくなります。
3-さて、発言:
a。引用符を右上に移動することはお勧めしません。ステータスではなく[アクション]列に表示されるためです。このようにしては配置されませんので、ユーザーに異なる場所ステータス。
b。混乱を減らすために、色で引用を表すことができます。ステータスはすでに色付きのラベルで強調表示されています。例:Quote-Rを緑色のラベルで表し、Quote- *を赤色のラベルで表します。これは色を利用するための提案です。クエリが赤で強調表示され、オレンジで一度強調表示されているので、使用しているカラーラベルに少し混乱しています。その色を使っているのかどうかはわかりません。
c。色がすでに使用されている場合は、引用符にカラーラベルを付けずに文字または記号を使用できます(つまり、R引用符を赤い色のラベル、文字だけを使用[〜#〜] r [〜#〜]太字)
d。テーブルのセルの適切なheightに気付きました。ステータステキストの右側に引用符を付ける代わりに、ユーザーと考えるユーザーに応じて、引用符の上または下に置くことができます最初にステータステキストまたは引用を読む必要があります。
e。 Quotes列を追加してみませんか?
4- [アクション]列で、アクションが少ない場合は、ドットアイコンをクリックしてアクションを表示し、目的のアクションをクリックすることなく、そこに直接アクションを追加できます。これを見てください:
私はまったく同じものに取り組んでおり、テストを通じていくつかのことを実行しました。
これが私たちが学んだことです
1)色は素晴らしく、失読症のユーザーを支援しますが、視覚的なノイズにも寄与します。信号機タイプのシステムにきちんと分類される相互に排他的な状態の小さなセットがある場合に使用します。カラーブラインドに適した色を使用します。
2)テーブルの優先順位を、他の状態よりも重要な特定の状態にすることをお勧めします。私たちの仕事では、これは「承認待ち」です。
3)フィルターを使用して、表示される状態を制御します。これらは1つのテーブルを超える場合もあれば、タブを使用してインタラクションを分割することもできます。承認/未払いなど