web-dev-qa-db-ja.com

非常に小さいスペース(32x32)内のユーザーにX / Yムードデータを表す方法は?

IPhone用のムードトラッカーアプリを作成していて、ユーザーエクスペリエンスの問題が発生しています。ユーザーが自分のムードと、垂直の「履歴」内の他のイベントを追跡できるようにしたいと考えています。

私が録音している気分はX-Yスケールで報告され、Xは快感、Yは興奮です(このスケールは、商用ユーザーなしのCCプロジェクトとしてここから入手できます Pictorial Mood Reporting instrument ):

enter image description here

典型的な1〜10の気分スケールでは、スマイリーを使用して気分の強さを伝えることができますが、2次元スケールではそうではありません。

気分の記録を保存すると、後で履歴ビューに1時間ごとに表示され、データは小さな円で表示されます。 iPhone画面のサイズが小さいため、比較的小さい円(32x32)しか表示できません。

小さな32x32円を使用して、上の図からユーザーにXY情報を最もよく伝える方法をさまようしていますか?現在、色相を実験しています/ saturation/lightness of the circle、結果として、さまざまな色の円がさまざまなX、Yの組み合わせを表しますが、多くの色がエンドユーザーにとって非常に直感的であることはわかりません-マスタードサークルとシアンサークルとグリーンサークルの違いは何ですか?アプリで遊ぶことで学習できるかもしれませんが、このようなX、Y情報をユーザーに視覚的に伝えるより良い方法があるかどうか興味がありますか?

enter image description here

円の中央からグリッドのX-Yの位置を指す、円の中に矢印を描くことを考えていました。これは、どんな気分が経験されたかに関して、ユーザーにいくつかの参照を与えます。多分もっと良い方法がありますか?色と矢の組み合わせ?

enter image description here

これが矢印と色を組み合わせたものです。矢印の方向は画面の中心からのタッチの方向を示し、矢印の大きさは距離を示します(遠ざかるほど大きな矢印)。この情報をユーザーに伝えることは可能だと思いますか?

data visualization with polar coordinates and colors

更新:これは、色相/彩度/明るさを変化させて、各個別の領域を一意にする試みです。ユーザーが画面上で指を動かすと、下の図のように、円の色と矢印の方向が変化します。左上はイライラ感と緊張感があり、赤が納得のようです。右下は落ち着きとリラクゼーション、それがブルーです。残りは赤、青、緑の混合で、典型的な「純粋な」緑が絶対的な中心です。

//for x and y ranging from 0 to 1
    hue = 0.33 +(x*1.3)*0.33 - (y*1.3)*0.33;
    saturation = 0.50+ 0.4*(sqrt(x*x+y*y));
    light = 0.1+0.6*(sqrt(0.5*x*x+y*y));

Moods map with color

19
Alex Stone

各色は3つの変数(色相、彩度、明るさ)で記述できるため、これらのペアを使用してX/Yをコーディングすることができます。

良い出発点は、水平方向の次元(快/不快)に色相(緑/赤)を使用し、垂直次元に明るさまたは彩度を使用することです:高=明るい/飽和、低=暗い/不飽和。

2
Vlad

私はあなたが最も直感的なオプションをすぐに除外したと思います。

人間は特に顔を認識するのが得意です。32x32の絵文字で9つの異なる状態をどれだけうまく表現できるかは驚くと思います。

たとえば、次のスマイリーのグループを見てください。

http://gas13.ru/v3/pixelart/smilies_by_gas13.png

または非常に単純に:

http://rookery.s3.amazonaws.com/3390000/3390174_dee6_625x1000.jpg

あなたのアイデアはしっかりしていますが、形状、矢印の長さ、方向、気分の間には直感的なつながりがないため、それらはすべて最適ではありません。色についてはもう少しですが、青は悲しいまたは穏やかなことを表しており、どの色が幸せを表していますか?

垂直線/サイズ/変位オプションも非常にクリエイティブですが、直感的ではありません。ユーザーをトレーニングする必要があります。これは、目的の「クイックリファレンス」機能とは正反対です。

10
Jeremy T

素敵なグラフィックス;)

あなたの質問は興味深く、詳細に答えるのは難しいです。 色と感情の観点からのそれらの認識の直接の組み合わせがあるため、色による気分状態を解決するあなたの方法は人々にとって理解しやすいと思います

これは一種の非常に抽象的な概念なので、私は円の中に矢印を使用しません。その意味を理解するには、xy軸を念頭に置く必要があります。また、矢印の方向は、意図したものとは異なる解釈になる場合があります。右下の矢印は、穏やかでリラックスしたものとは考えられません。私はその気分が悪い、または気分が悪くなると思います。 (またはダウ・ジョーンズが下落している;)

代わりに形状を使用することについてどう思いますか?認識しやすく、意味もあります。

  • ワクワク/元気なスター
  • 緊張した/刺激のある三角形、
  • 悲しい/退屈な正方形、
  • 穏やかな/リラックスした円

さらにいくつかの読書

  • Mapping emotion to color を参照してください。
  • Johannes Itten は、それをさらに調査することで素晴らしい仕事をし、形状と色、および色と感覚の基本的な組み合わせを行いました。

ヨハネス・イッテン

  • 物質の赤い色は正方形に対応しています。赤の重大度と不透明度は、正方形の静的で重い形の一部です。
  • 三角形は思考の象徴であり、明るい黄色はその無重力の特徴に対応しています。
  • 青は地区に対応し、色として一時停止せずに移動します。

    Media Wiki Bauhaus University のBingトランスレータの最後の段落Shape and Color

enter image description here

出典: Media Wikiバウハウス大学(Bing翻訳者)

  • そして確かに、他のリソースがたくさんありますが、この領域は非常に広いです。実際には、大学のスタディデザインで学んだことです。だから、それを1つの記事に凝縮しているリソースを見つけるのは困難です。
4
FrankL

2次元のカラースケールは標準の1次元のスケールよりも直感的ではないため、ムードを表示するために色だけを使用することはしません。また、色は国や文化によって異なる意味を持つ可能性があることに注意する必要があります。参照: http://webdesign.about.com/od/colorcharts/l/bl_colorculture.htm

私たちの認識は顔を区別する能力が非常に高いため、チェルノフの顔を見ることは私の最初の推測でしょう。それらは通常のスマイリーフェイスとは異なり、より単純なデザインです。参照: http://en.wikipedia.org/wiki/Chernoff_face

私は両方の世界のベストを利用して、x軸(快/不快)の1-dカラースケールとy-asix(覚醒)の顔のセットを組み合わせます。軸を厳密に分離することにより、高い識別性を実現でき、単一のパラメーター(快適または覚醒状態)をより適切に特定できます。

3
J_rgen

円の色、サイズ、および中心線からの変位を使用できます。

たとえば、次の画像では、矢印のサイズを円のサイズに変換し、矢印の方向を中線の上または下の変位に変換しています。また、円を中線に細い線で接続していますそれがどのラインに関連しているかが明確になるようにします。

また、グリッドと数字をかなり暗くし、背景にグラデーションを追加して、行を少し離しました。

色はあなた自身の例から保持されていますが、サイズは覚醒の強さを示し、変位は快適さ(線の上)または不快さ(線の下)を示すため、色は気分の唯一の指標ではありません。

したがって、大きなブロブによって感情の高いポイントを、小さなブロブによって落ち着きをすばやく確認できます。そして、線の上に接続されたブロブ(および緑の明るさ)によって快適さを、線の下に接続されたブロブ(および青の明るさ)によって不快さを確認できます。

enter image description here

2
Roger Attrill

境界のある円に固執する。塗りつぶしの色は象限の色であり、境界線は最も近い軸の光線に対応する色です。軸に近いほど境界線は太くなります。中心にほぼ等しい場合、またはニュートラルの場合、おそらくソリッドニュートラルカラーです。しかし、私は白、灰色、または黒を提案するのをためらっています。おそらく茶色。

1
JustinC