web-dev-qa-db-ja.com

フィルターのステータスを簡潔に描写し、有効または無効にするオプションを表示するにはどうすればよいですか?

フィルターバー(リストに表示するタスクを検索およびフィルターするため)を備えたToDoリストアプリケーションがあり、フィルターバーにステータスが選択されているとします。

enter image description here

ステータスフィルタには、次のいずれかの値を設定できます

「表示されているすべてのタスクを表示」:

  1. すべてのステータスタスク(ステータスに関係なく)
  2. 開始されていないタスク
  3. 開始されていないタスク(開始されていないタスクを除くすべて)
  4. 進行中のタスク
  5. NOT進行中のタスク(進行中のタスクを除くすべて)
  6. タスクを完了する
  7. 未完了のタスク(完了したタスクを除くすべて)

否定のために、アイコンに赤の色を使用しました。これに使用したアイコンは次のとおりです。

enter image description here -すべてのステータス
enter image description here -開始されていないタスク
enter image description here -開始されていないタスク
enter image description here -進行中のタスク
enter image description here -進行中のタスクではありません
enter image description here -タスクを完了する
enter image description here -タスクを完了しない

ご覧のとおり、赤の否定色は見づらく、実際にははっきりと直感的に否定を示していません。それは否定を意味することをあなたに言わなければならないでしょう。

フィルターで否定を表現するためのより明確で直感的な方法はありますか?

[〜#〜]編集[〜#〜]

SNagの提案による最終結果:

enter image description here

5
richard

複雑にしないでおく。新規(未開始)、開始済み(進行中)、完了したタスクのチェックボックスが付いたアイコンを表示するようにUIを再設計し、ユーザーがすべてまたは何も選択しないか、または任意の組み合わせにチェックマークを付け、それに応じて結果を表示できます。これは、ユーザーが既に他のほとんどのUIに慣れている方法で機能し、学習や混乱はありません。

mockup

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

何もチェックしない、またはすべてチェックしない場合、All Status結果、NewStartedをチェックすると、ユーザーにNOT Completed結果は期待どおりです。

あなたは最初に望んでいたように視覚的にアイコンの否定を導入することなく問題を解決します。

更新:
これがUIのチェックボックスのドロップダウンである場合、折りたたまれたときの現在の状態を要約テキストとして表示できます。 3つのチェックボックスの8つの組み合わせすべてのサンプルを次に示します。

mockup

bmmlソースをダウンロード

概要のコンセプトのインスピレーションは、私のAndroid目覚まし時計アプリの「リピート」機能-月曜から金曜にアラームを繰り返すように設定すると「平日」を表示し、土日に設定すると「週末」を示します。 Mon-Satは「Sunを除くすべての日」などを示します。奇妙な組み合わせは「Mon、Thu、Sat」などのような結果になります。

7
SNag

それはあなたが望む答えではありませんが、この仕事にはテキストを使うことを強くお勧めします。

ご覧のとおり、赤の否定色は見づらく、実際にははっきりと直感的に否定を示していません。それは否定を意味することをあなたに言わなければならないでしょう。

現在、私はanyのアイコンが「本当に明確かつ直感的に」示すものはanything。実際、それらがアクションであることや、フィルターであることを理解したかどうかはわかりません。

チェックボックスのアイコンは、チェックボックスのようなものです。進行中のアイコンは、読み込みインジケータとまったく同じように見えます。中空の円はほとんど伝達しません。

これらすべての場合において、問題は、単一の小さなアイコンを分離して比較的複雑な概念を伝えようとすることによって引き起こされます。私はスペースの制約に感謝していますが、テキストラベルに対応するようにインターフェイスを再設計すると、ほぼ確実にうまく機能します。 Luke Wroblewskiが言うのが好きなので、 obviousは常にwins (そして ない不足がない追加の例 )。

この問題は、2つのアイコンを色だけで区別しようとすることで悪化します。これは、特定の例のコントラストの問題を無視してもお勧めできません。異なるディスプレイ、異なる照明、特に異なる色覚では、色の区別がはっきりしなくなります。アイコンの使用を主張する場合は、このような小さなオーバーレイクロスまたは禁止されたアイコンがより役立ちます。

Overlay icons in Windows
Let’s Rock With Azure から撮影した画像

2
Kit Grose

否定の場合は、正のアイコンにスラッシュを付けてみてください。例えば...

アイコンではなくテキスト検索の使用も検討してください。たとえば、「開かれていない」を検索する代わりに「state:open OR state:closed」を検索する場合があります(ほとんどの場合、直感的ではありません)。

1
Michael Hogan

Gestalt Principals に続いて、フィルターをグループ化して、すべての無効化されたものを片側でグループ化し、有効化されたグループを反対側でグループ化しましたか?

次に、小さなテキストラベルを追加して、このグループを定義します。

1
RobbyReindeer