web-dev-qa-db-ja.com

下矢印と上矢印のステータス

私は、カテゴリがあり、特定のカテゴリのステータスの減少と増加を示すiOSアプリを作成する必要があります。

減少させるために、赤い下矢印を使用しました。増加のために私は緑の上向き矢印を使用しました。

ただし、一部のカテゴリでは、下向き矢印が売上に適しています。

そのため、アイコンと色をどうするかで悩んでいます。

私の元のアプローチは、下矢印の色を赤から緑に変更することでした。しかし問題は、色覚異常の人が理解できないことです。

それから私は笑顔と悲しいemojisを配置することを考えました。良いことは微笑み、悪いことは悲しいことです。下矢印と絵文字を一緒に笑顔にします。しかし、これは専門家ではないでしょう。

このスクリーンショットをご覧ください:

various categories, each with a red down arrow or green up arrow

37
Abhishek Sharma

私はこれを答えにして、コメントを拡大できるようにします。

主な問題は、矢印、アイコン、色、絵文字ではありません。あなたの主な問題は概念的なものです:分類法を(実際にはそうです!)絶対的に反対である可能性のあるグラデーションと混合しています。したがって、あなたはユーザーが分類法とグラデーション方式で良いことを伝えるか悪いことを伝えるかをユーザーが解釈する必要がある場合に、負荷を追加します。これは非常に紛らわしく、摩擦のレベルは屋根に行き、遅かれ早かれそれをやり直す必要があります。

代わりに、2つのサブリストを作成します: "up"が良い場所と "up"が悪い場所。現在の矢印の上下の方法を、色を含めて、今と同じように維持できます。また、色が気になる場合は、カラーブラインドセーフニュートラルカラーを選択します。

重要なことは、upはupを意味し、それ以外は絶対に意味がないので、現在の矢印はトリック。次に、定義する必要があるのは、特定のサブセットのアップが良いか悪いかです

それと同じくらい簡単で、複雑なことはありません。

補遺

分類の1つにGoodsWordが含まれていることに気付きました。グラデーションは良い概念と悪い概念の間であるため、非常に注意していくつかの代替案を見つけてください。したがって、この表現によって摩擦がさらに増える可能性があります。またはそうでないかもしれません。念のため、テストする価値があります


補遺2

別の方法として:Gino van de Staaijの答えのようなものを使用するのはどうですか?つまり、客観的な情報を示す明確なアイコン:金額が大きくなっている/金額が減少している。この方法では、主観を追加する必要がなく、アプリは実際のデータを測定します。これが可能かどうかわからないので、これを代替パス/提案として追加します

28
Devin

おそらく、ユーザーが増加または減少を認識できるように矢印に黒だけを使用し、左側に配置してから、右側に「ヘルスバー」スタイルのステータスレポートを使用します。 /ネガティブな側面、さらには重大度。 (色盲の問題が心配な場合は、赤/緑以外の色を使用してください)


(*注意:どの矢印が良い(緑)か、どれが悪い(赤)かを明らかにしようとせずにランダムに行っただけなので、色が矢印の向きと相関しない場合があります)

(また、これらのビジュアル広告を追加している場合、矢印はもう必要ないかもしれません。ソートはパフォーマンスベースに変更できます(つまり、「良い」v「悪い」)方向ベース(つまり、「インクリメント」v「デクリメント」)の代わりに

enter image description here



色が問題である場合、おそらく次のような色に依存しないパフォーマンスインジケーターを使用できます(*注:これらに色を追加して、95%のユーザーがさらに読みやすくすることができます。色覚異常の人でも、色情報がなくても読むことができます)—左側が色覚異常バージョン、右側が色覚異常シミュレーション enter image description here

20
Albert Renshaw

私はいつもこれらのアイコンが好きで、グラフ上の傾向を示しています。矢印の形状と方向を組み合わせたものが、トレンドの進行状況を示しています。 enter image description here

これらはIoniconsから入手しました: http://ionicons.com/

11

上部の良い下部の悪いを入れます(または、悪いことにもっと注意を向けたい場合は、これを逆にします)。このようにして、2つのセクションを明確な概念マッピングで分割します。

主な質問は、「このセクションは増加または減少しましたか?」ではなく、「どの領域で苦労していますか?」の線に沿っていると思います。このデザインにより、ユーザーは明確に理解できます「これらは順調で、これらは順調ではありません。」

矢印はそのままにしておきますが、allの部分の矢印(上と下)を緑色にします。色all BADセクションの矢印(上下)は赤。

これらのセクションにラベルを付けるかどうかはあなた次第です。 (良い/悪い、改善/悪化など)

例:

example up/down/good/bad mockup

私は矢をもっと速く処理されるかもしれないと感じたものに変えました。細い線は、それらが指している方向についての視覚的な手掛かりを提供しません。

7
maxathousand

おそらく専門外の絵文字ではなく、より単純な記号を使用して、良い結果または悪い結果を示すことができます。

この場合、ティックとクロスを使用しました。

enter image description here

しかし、指示はおそらく方向よりも重要であるため、ティックとクロスをより強調することができます。

enter image description here

矢印が小さくなり、背景色に向かって色が薄くなっていることに注意してください。これにより、矢印は良い/悪いアイコンの視覚的に二次的なものになりますが、ユーザーが必要に応じて情報を提供できます。

また、ジーノがジグザグの矢印を使用して上昇または下降トレンドを(グラフのように)伝えるという提案も気に入っていますが、それらを描く時間はありませんでした。

傾向を表示する別の方法は、数値を使用することです:+ 20、-5など。値を表示すると情報が多すぎるように見えるかもしれませんが、大きさのない矢印はになる可能性があると主張できます。誤解を招くまたは危険ですらあります。

たとえば、+ 0.1は+100よりも-0.1に近いですが、矢印は2つの正の変化を同等に表します。同様に、このデータセットの関連する番号は、矢印のみで失われます:+3, +5, +1, -839, +2, +4, -3

数字と矢印の間の妥協案として、両頭矢印は10より大きいスイングに使用でき、三頭矢印は100より大きいスイングに使用できます。

6
joeytwiddle

特に同じ形状の赤/緑の状態を検討する場合は、色だけを使用することは避けてください。

これにアプローチする方法は、矢印の形状を変更することです。これを行う方法はいくつかあります。いくつかの提案として:

1)左右を場に出すことができます。右がプログレッシブ、左が逆行です。上向きと右向きの矢印は正の増分ですが、上向きと左向きの矢印は負の増分です。 (注:これは一般的な使用ではおそらく複雑すぎると思います)

2)矢印の線の太さを変えてみてください。線が太いほど、望ましい効果が得られる可能性があります。

3)ソリッドシェイプを使用して、塗りつぶしとアウトラインを切り替えることができます。

Styling suggestions for arrows representing both positive and negative increments and decrements

これらは、現在のブロックを超えて考えるのに役立ついくつかの提案です-あなたは完全に何か他のものを見つけるかもしれません!

4
Andrew Martin

@Adriano Repettiの答えを基にして、再びStephen Fewによる(== --- ==)Information Dashboard Designから借りて、あなたの見解に関するいくつかの仮定を強調して、提案。

色覚異常ではない人として、すべての矢の意味を理解するのにまだ時間がかかりました!あなたのインターフェースは私を混乱させたので、私があなたが私に何をしようとしているのかを考えようとしました。

したがって、私が最後に更新してから、これらのカテゴリーが増加したのか減少したのかをこのアプリに入力してほしいのはかなり明白だと思いました。また、増減が各項目にプラスまたはマイナスの影響を与えるかどうかについて判断が行われていることも明らかです。

これに続いて、「すべて」ボタンは少し冗長に見えるようになっています。これは、すべてを同時にインクリメントすることはほとんどありません(これがこれを行うものだと思います)。インクリメントとデクリメントが必要な場合があるからです。

上部にある他の2つのボタンのシンボルがリストのアイコンと同じになると、長い間混乱していました。 「すべて」ボタンを使用できることを考えると、おそらく画面の上部にある多くのスペースを占めることが適切な方法です。

他の人が指摘したように、時間の経過に伴う傾向は1つのアイコンで十分に表されないため、おそらく何らかの傾向グラフが理解に役立つでしょう。目標や手段があるので、おそらく弾丸グラフが機能するでしょう。

モックアップをしました。 「右」矢印を削除しました。これは「このカテゴリの詳細を表示する」ことを意味し、ユーザーがカテゴリタイトルをタップするだけで詳細を表示できるようにしました。

Increment/decrement categories

また、重要度を示すためにバーの彩度を変えることもできます-私は意味を与えるために色を使用しないように他の皆と一緒にいます。高彩度は「これは悪いです。注意してください!」という警告を示します。

また、ブレットグラフをspark行に置き換えて、時間の経過とともにどのように変化したかを示すこともできます。

4
cheersphilip

色だけで情報を伝えないようにします。 「上」の緑と「下」の赤は、世界的に受け入れられている普遍的なパターンではありません(そして色覚異常の人々には見えないかもしれません)。あなたが色を必要としないという事実を考えると、私は単にそれを落とします。灰色の記号を使用してください。色は必要ありません。

より良いトレンド感を与える(そしてに記号の意味を明確にするために、混乱しないでくださいmoveアクション)を使用して、スラッシュ矢印を使用できます 。他のオプションはありますか?最も広く理解されている記号を選択してください: + そして -

次に、2つ目のポイントは、ポジティブトレンドが良いことかどうかを強調する方法です。シンボルと色でUIを充電する必要はありません。おそらく必要なのは、トレンドが悪いときのみハイライトするハイライトすることです(= /// =)。このソリューションには、3つのかなり良い結果があります。

  • インターフェースをシンプルに保ち、不要なシンボルは表示されません。必要のない情報でユーザーの脳に過負荷をかけないでください。ダッシュボードだと言ったので、あなたの場合は特にそうです。
  • ユーザーは慣習を学ぶ必要はありません(太い下矢印は不適切、細い下矢印は適切など)。
  • 注意すべき点をすぐに強調します(悪い傾向)。何も表示されない場合、現在のトレンド良いものです。

すべてをモックにまとめるには:

mockup

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

この例では、上向き/下向きのトレンドシンボルを追加しましたが、アプリの全体的なスタイルに応じて、別の位置に移動する場合があります(おそらく、もっと小さくする必要があります)。ビューがフィルタリングされている場合、冗長であるため省略される場合があることに注意してください。

どの記号(! 私の例では)他の多くの要因に依存するのが最善です:それは警告ですか、それとも単にそれを強調したいですか?直ちに行動を起こすべきですか?危険ですか?この余分なシンボルをドロップして置き換えてもよいことに注意してください + そして - (たとえば、色が反転したり、丸で囲まれた/四角で囲まれたアイコン)ですが、アラートがいくつかのアイテムに限定されていない場合は、はっきりしない場合があります(ハイライトされているアイテムとハイライトされていないアイテムをすぐに理解できないため)。他の手法を使用してアイテムを強調表示することもできます。これに関する何百もの投稿が利用可能です。

補遺:Stephen FewによるEffective Dashboard Designを読むことをお勧めします。

2
Adriano Repetti

リストを2つのサブリストに分けることを検討してください。1つは、「増加したときに良いこと」と「増加したときに悪いこと」の1つです。

ここにあなたの正確なビジネスドメインが何であるかはわかりませんが、収入を生み出すアイテムと負債を生み出すアイテムがあるようです。これは、「インライン」で、つまり同じ垂直リストで、ただし分割線を使用して、または別のページで行うことができます。どちらの場合でも、2つのタイプのアイテムを分離すると、より明確になります。

2
Harrison Paine

矢印のカーディナリティや色の影響を考慮せずに、一般的に注意すべき点の1つ:まっすぐ上向きまたは下向きの矢印は、複数の意味を持つ可能性があるため、一般的に混乱します。

  • この行は、矢印をクリックして折りたたんだり展開したりできます。
  • この行は、矢印をクリックして上下に移動できます。
  • この行は前回と比較して値が変化しています。
  • この行の値は、矢印をクリックして変更できます。

問題は、基本的な方向を指し示す矢印が歴史的に異なる意味で使用されてきたことです。ただし、矢印が東のカード間方向、つまり右上または右下を指している場合、矢印は1次元ではなく2次元を意味し、1次元は時間であることを強く示唆しています。

これで問題が直接解決するわけではありませんが、他の側面のあいまいさを解決するのに役立つ、覚えておく価値のあることだと思います。

1
Nzall

数値の変化%を表示しないのはなぜですか?

テキストを緑/赤に着色して、色覚異常のない人が数が良いか悪いかを知るのを助けることができます(1つのカテゴリーでマイナスのパーセンテージが良いものである場合)。色覚障害者は、テキストの色のヒントのおかげで、一目で同じ情報にアクセスできます。

0
DarkSkyForever

単に緑の円が良いこと、赤い円が悪いことはどうですか?私はこれがあなたの矢よりも少ない情報を描写しているのを見ません-彼らがあなたの評価に普遍的に同意していると仮定すると、あるカテゴリーでのダウンは悪く、別のカテゴリーでのアップは悪いです。

0
Duncan Betts

色覚異常の人を気にするのはクールです。ボックスの外側を少し考えて、アプリの設定にcolorblindオプションを含めることをお勧めします。このようにして、より適応した色に切り替えることができます

0
goto