フィルターバー(リストに表示するタスクを検索およびフィルターするため)を備えたToDoリストアプリケーションがあり、フィルターバーにステータスが選択されているとします。
ステータスフィルタには、次のいずれかの値を設定できます
「表示されているすべてのタスクを表示」:
否定のために、アイコンに赤の色を使用しました。これに使用したアイコンは次のとおりです。
-すべてのステータス
-開始されていないタスク
-開始されていないタスク
-進行中のタスク
-進行中のタスクではありません
-タスクを完了する
-タスクを完了しない
ご覧のとおり、赤の否定色は見づらく、実際にははっきりと直感的に否定を示していません。それは否定を意味することをあなたに言わなければならないでしょう。
フィルターで否定を表現するためのより明確で直感的な方法はありますか?
[〜#〜]編集[〜#〜]
SNagの提案による最終結果:
複雑にしないでおく。新規(未開始)、開始済み(進行中)、完了したタスクのチェックボックスが付いたアイコンを表示するようにUIを再設計し、ユーザーがすべてまたは何も選択しないか、または任意の組み合わせにチェックマークを付け、それに応じて結果を表示できます。これは、ユーザーが既に他のほとんどのUIに慣れている方法で機能し、学習や混乱はありません。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
何もチェックしない、またはすべてチェックしない場合、All Status
結果、New
とStarted
をチェックすると、ユーザーにNOT Completed
結果は期待どおりです。
あなたは最初に望んでいたように視覚的にアイコンの否定を導入することなく問題を解決します。
更新:
これがUIのチェックボックスのドロップダウンである場合、折りたたまれたときの現在の状態を要約テキストとして表示できます。 3つのチェックボックスの8つの組み合わせすべてのサンプルを次に示します。
概要のコンセプトのインスピレーションは、私のAndroid目覚まし時計アプリの「リピート」機能-月曜から金曜にアラームを繰り返すように設定すると「平日」を表示し、土日に設定すると「週末」を示します。 Mon-Satは「Sunを除くすべての日」などを示します。奇妙な組み合わせは「Mon、Thu、Sat」などのような結果になります。
それはあなたが望む答えではありませんが、この仕事にはテキストを使うことを強くお勧めします。
ご覧のとおり、赤の否定色は見づらく、実際にははっきりと直感的に否定を示していません。それは否定を意味することをあなたに言わなければならないでしょう。
現在、私はanyのアイコンが「本当に明確かつ直感的に」示すものはanything。実際、それらがアクションであることや、フィルターであることを理解したかどうかはわかりません。
チェックボックスのアイコンは、チェックボックスのようなものです。進行中のアイコンは、読み込みインジケータとまったく同じように見えます。中空の円はほとんど伝達しません。
これらすべての場合において、問題は、単一の小さなアイコンを分離して比較的複雑な概念を伝えようとすることによって引き起こされます。私はスペースの制約に感謝していますが、テキストラベルに対応するようにインターフェイスを再設計すると、ほぼ確実にうまく機能します。 Luke Wroblewskiが言うのが好きなので、 obviousは常にwins (そして ない不足がない追加の例 )。
この問題は、2つのアイコンを色だけで区別しようとすることで悪化します。これは、特定の例のコントラストの問題を無視してもお勧めできません。異なるディスプレイ、異なる照明、特に異なる色覚では、色の区別がはっきりしなくなります。アイコンの使用を主張する場合は、このような小さなオーバーレイクロスまたは禁止されたアイコンがより役立ちます。
Let’s Rock With Azure から撮影した画像
Gestalt Principals に続いて、フィルターをグループ化して、すべての無効化されたものを片側でグループ化し、有効化されたグループを反対側でグループ化しましたか?
次に、小さなテキストラベルを追加して、このグループを定義します。