距離をグラフィカルにどのように表現しますか?


12

OK、

したがって、これはやや「主観的」かもしれませんが、私はいくつかのアイデアを探しています。

距離を棒グラフ(一種)で表し、人々が近づくにつれて「充実」します。

それらが遠ければ遠いほど、棒グラフは完全ではありません。

私はそれをどう表現するかわかりません。私はこのグラフィックを作成して、私の思考プロセスを示しました。

グラフィカルに表示される距離

人々は理解すると思いますか?「FAR」および「CLOSE」エッジを指定する必要がありますか?または、単に距離を表示しますか?

棒グラフがいっぱいになるにつれて、人々が近くにいることを人々は理解するでしょうか?

実際の距離も指定する必要がありますか?(メートル、キロメートルなど?)または棒グラフを完全に忘れますか?

一見しただけで他の人がどれだけ近くにいるのか、遠くにいるのかがよくわかるように、距離をグラフィカルにどのように表現しますか?

編集:OK、詳細についてクライアントに話したところ、彼らが思いついたのは、@ Scottが提供したサークルに似たものでした。現在のユーザーは「中間」にあり、ユーザーの周りの人々は「軌道」にいます。各ユーザーの距離を表示するのではなく、どこかでそれを見て、それを望んでいます。

したがって、距離のある棒グラフではなく、「150m」や「Nearby」などのテキストを表示する必要があります。

ただし、回答を提供してくれたすべての人にも感謝したいと思いました。いくつかの例は素晴らしく、私はそれらを愛しています。「ブリーフ」は最初のリクエストから多少変更されたため、この質問を編集してフィードバックを提供するのが最善であると考えました。


1
コンテキストを追加すると役立つ場合があります。具体的には、表現しようとしている距離はどのくらいで、どのような目的のためですか。
イルマリカロネン14年

ライアンとスコットブラウンのどちらのソリューションも正しい方向に進んでいると思います。ただし、「far」の色は緑ではなくシアンまたは青にする必要があります。「close」の赤は問題ありません。
サンドラ14年

だけに頼ると、色覚異常や視覚障害のある人にとってはアクセシビリティが損なわれる可能性があることに注意してください。
トールビョーンラヴンアンデルセン14年

3
アプリケーションのコンテキストでは、人々をより近くに置くか、遠くに置くことが目標ですか?望ましい状態が何であるかについて、画面に強い印象を与えたいと思うでしょう。ユーザーがあることを求めているのであれば近い他のユーザーに、あなたはしたくない遠く最強の印象を(つまり、あなたは、人々が近づくにつれてバーを埋める、または近いため、より大きな側とウェッジを使用する)であることを。あなたは実際にux.stackexchange.comでこの質問をしたいと思うかもしれませ、私はあなたがそこで概念についてより良いアドバイスを得ると思うと思います、そして前記概念のグラフィック表現のためにここに戻ってください。
ジェイソンC 14年

「距離」の後に長い行が表示される場合、「遠く」と思うのに対し、あなたのグラフィックは「近い」ことを示すはずです。
デビッドリチャービー14年

回答:


14

ウェッジデザインを使用した例を更新しました。わかりやすくするために、サンプルの距離がグラフに追加され、テキストが削除されました。

ここに画像の説明を入力してください

開始テキストと終了テキストの例

ここに画像の説明を入力してください

小さいサイズはハンドヘルドの要因であるため、2つの100px x 100pxのスペース節約オプションがあります。

ここに画像の説明を入力してください

ここに画像の説明を入力してください


最新の要件に基づいたブレーンストーミング

アプリをドロップダウンに配置するモバイル向けのスペース節約のアイデアを次に示します。ドロップダウンのサイズが大きくなると、マップにはユーザーラベルや距離グリッドなどのより多くの情報を含めることができます。

ここに画像の説明を入力してください


2
おそらく、大きく近く、遠くに薄くなければなりません...近くのアイデアオブジェクトは大きくなる傾向があります。
joojaa

それらの数字は逆ではありませんか?それともラベル?:)
スコット14年

1
ええ、私はそれがただの簡単なモックアップであることを理解しています。スマイリーがいた理由です:)
スコット14年

@Scott、良い提案とフレンドリーなコメントのために+1 :)明確にするために新しいモックアップが追加されました。
トーキングロック14年

12

数年前、F19 Stealth Fighterと呼ばれるAmigaのゲームがありました。これに関するHUDには、あなたが説明したものと非常によく似たものがありました。投下するのではなく投下した爆弾については、ターゲットに近づくにつれて、両端に2つの「ポスト」が接近するラインが表示されました。

シンプルでモダンな表現は次のとおりです。

ここに画像の説明を入力してください


ああ、私はそれがとても好きです。
モニカとライトネスレース14

8

2人の人物間の距離を表示する場合は、おそらく2人の人物間の距離を表示するのが最も直感的です。下の大まかなモックアップにはまだ何らかのバーがありますが、それは後方を指しています。距離は、位置(人を右に移動)とサイズ(人を縮小)で表示されます。

ここに画像の説明を入力してください

より棒状のインジケータが必要な場合は、次のように三角形の一部に色を付けることができます。また、行にラベルを追加できます。

ここに画像の説明を入力してください

おそらく、左側の「参照」者がドロップされる可能性があります。


7

距離アイテムはより良く機能し、はるかに直感的だと思いますが、少し逆にしたいと思います。長距離は長くて赤、短距離は短くて緑でなければなりません。あなたが投稿したものは、これの反対を読んでいるようです。長いバーは​​「遠く」にあり、赤であると思います。

全体的なレイアウトを知らなくても、ドットの付いた円を使用する可能性があります。 ここに画像の説明を入力してください


さて、遠くに長い「赤」の線、近くに短い「緑」の線があります。それで、「Distance」という名前をそのままにしてください。
炭酸飲料14年

1
@fizzydrinkはい。私にとって「遠く」は常に赤です。また、距離が大きいほどバーが長くなります。もちろん、これは単に私の解釈であり、自分で物事を直感的に読む方法です。
スコット14年

1
色調整は役立ちますが、円の方がはるかに役立ちます。移動するオブジェクト間の距離には、IMOを十分に理解するための収束点が必要です
ライアン

サークルはiPhoneアプリ内で「フィット」できますか?それぞれが独自の行を持ち、左側にプロフィール写真がある約100ピクセルの人々のリストを想像してください。サークルを使用できますか?それとも...マップのオーバーレイ上の円のアイデアを使用
発泡性の酒

1
私が投稿したように..全体的なレイアウトについての手がかりがなく、バーが必須であったかどうか:)ある種のように聞こえます。
スコット14年

5

作成されたTalkingrockの画像を使用して:

ここに画像の説明を入力してください

私にとって最も理にかなっているのは、次のように交換することだと思います:

ここに画像の説明を入力してください

遠くから始まり、一緒に近づくと点灯します。テキストを「Far Close」から「Far Apart」、「Together」、「Met」などに変更したり、2人が1つの目的地に到着したことを示すものにしたりすることで、アイデアをさらに伝えることができます。


私の解釈(英語を話す)を見ると、収束点は左端だということです。棒グラフが長くなるほど、右端が遠くなり、距離が表示されます。
スコット14年

最初の「遠近」ではなく、2番目の「距離」について話しますか?
ライアン

そうです、最初のものは私の目には使えません。
スコット

1
大きな終わりを望みのものにしたいでしょ。したがって、このアプリケーションのコンテキストで誰かが遠くにいることが望ましい場合、この例は理にかなっています。誰かが近くにいることが望ましい場合は、元に戻す必要があります。
ジェイソンC 14年

1
@Ryanこのアプリケーションのコンテキストで、ユーザーがより近くにいることが望ましい状態である場合、ユーザーが離れていることをより強く示すと、望ましくない状態により多くの注意が向けられます。ユーザーが目的の状態を達成するように動機づけることが目標である場合、目的の状態を表すより強力なインジケーターを持つことは、その目標と並行します。「4つの小節を」持っている動機は1.持っている動機、常に決してありません-例えば、携帯電話の今、ユビキタス信号強度計も考えて
ジェイソン・C

3

距離を棒グラフ(一種)で表し、人々が近づくにつれて「充実」します。

ただし、棒グラフが示すものとは逆です。値が高いほど、バーが大きくなります。反対のことをしたい場合、実際のデータに混乱や視覚的不協和を追加する可能性があります。

ポイントをもう少し直接的にするには、「far / near」を「big / small」に置き換えます。これはまったく意味をなさないでしょう:

                            ---        
                     ---    | |        
              ---    | |    | |        
       ---    | |    | |    | |
       | |    | |    | |    | |
big    ---    ---    ---    ---     small

そのため、スケールをラベルで「反転」するという考えを捨てる必要があると思います。より長い距離を通信しようとしている場合は、大きなバーにそのことを示してください。最も直感的な相関関係です。

しかし、おそらく解決策は棒グラフではありません。何らかの「ロケーター信号」のメタファーを実装しようとしているようです。近いほど、信号は強くなります。私はそれは良い考えだと思いますが、そのために棒グラフ以外のビジュアルを検討してください。ある種の「ブリップ」(またはドット)かもしれません。


3

距離をグラフィカルに表現する方法を尋ねますが、すべての答えは画像内のテキストに依存しているようです(「遠く」や「近く」などの単語)。したがって、「3マイル離れた」または「200m行く」と書いて、水平方向に表示される「プログレスメーター」の背景を使用することをお勧めします。

数値の距離を与えることは、実際の数値を読む人の観点からは必ずしも有用ではありませんが、数値と測定単位は、測定対象と変化が発生した場合に一目で完全に明確にします。


3

あなたのコンテキストは明確ではありませんが、重要です。概念的に、距離は本当にあなたが表現したいものですか?それとも、実際にユーザーが自分がいることを求めている状態にどれだけ近いかを表すことなのか、「距離」がたまたまそのメトリックなのか。

何をしていることを考慮して、実際に表現するためにしようとすると、ユーザーは望ましい状態を達成するためにどれだけ近いかです。望ましい状態には、画面上で最も強い印象を与える必要があります。

言い換えると、アプリケーションのコンテキストで、ユーザーが他のユーザーに近づくことを求める場合、この印象はユーザーの正反対であるため、距離が長くなるほど強くなるバー(または何か)は望ましくありませんゴール。

これは色にも当てはまります。赤->緑のスキームでは、通常、緑をターゲット状態に対応させ、赤を反対にしたいので、ユーザーが近づきたい場合は、緑をより短い距離にしたいでしょう。

そのことを念頭に置いて、バーまたはウェッジのいずれかを使用しますが、いずれの場合も、目的の状態側でバー/ウェッジを緑色でいっぱいにする(およびウェッジを大きくする)必要があります(たとえば、ユーザーがクローザー)。

これらの線に沿って、アクセシビリティは別にして(これは単なる例です)、実際にやろうとしているのが、距離に関する正確な情報を提供するのではなく、ユーザーが希望の状態にどれだけ近いかの印象を与えることだけである場合、インジケータは赤から黄色にフェードインする静的な四角形のような単純なもので、ターゲット状態で(近くにある場合も遠い場合も)緑色にフェードし、おそらくターゲット状態に[ほぼ]到達するとラベル、境界線、またはアニメーションを取得します。

ここの他の回答の設計オプションはすべて素晴らしいですが、UXの観点からは、それらの設計の使用方法としようとしていることを必ず考えてください:ユーザーがターゲット状態に到達するように促す場合は、たとえば、バーが短くなったり、その状態で消えたりしないようにします。それが反動機です。

逸話的に(私は手元に証拠がありません)また、ユーザーが一目でグループ内の最大のバーを最小のものよりも選択する方が簡単だと疑います。画面に複数のインジケーターがあり、アプリケーションがユーザーに「最適な」(コンテキストに応じて最も近いまたは最も遠い)をすばやく見つけさせたい場合、より強力なインジケーターがより望ましい状態を表すと、この点で役立ちます。

個人的に私はウェッジが好きで、右側が大きい方がいっぱいになると緑色に変わり、近い方が大きい方です(近いことが目標であると仮定)。メーター(4本のバーは刺激的ですが、1本は刺激的ではありません)。


私が欲しいのは、「距離」が表示されている現在のユーザーの距離と比較したユーザーの距離です
炭酸飲料

@fizzydrinkアプリケーションを使用する人にとってこの情報が重要なのはなぜですか?(あなたの編集を見ながら、問題は解決されましたが、このトピックはよりアカデミックになりました。)
ジェイソンC 14

それはあなたの周りの他のユーザーの距離に基づいて結果を得る場所認識アプリです。彼らがあなたの現在の場所にどれだけ近いか、例えば500メートル以内にあります。
炭酸飲料14

3

バーをすべて単色にしてから、矢印などの重要なマーカーを使用するか、異なる色のバーを垂直に重ねて、左側の開始点から右側の終了点までの相対距離を示す必要があると思います。(編集:公式用語はスライダーバーだと思います)

キャラクターアイコンがマーカーとして使用され、複数のマーカーが存在するゲームの例を次に示します。 ソニックA2Bスライダー

そして、より現実的な例です: スライダーバー

編集:(私の提案に対する少しの正当化)

質問で示されている元のバージョンは、距離ではなく進行状況を表すと予想されるプログレスバーに非常に似ています。プログレスバーのように見えるもの(ラベルが付いていても)が後方に移動し始めると、不自然に見え、人々の期待に反するため、一部のユーザーは混乱します。

何らかの形のマーカーを備えた単一の色付きのバーを使用することで、マーカーがフォーカスになり、バーに沿ってどちらの方向にも移動できるようになることがより自然に感じられます。これにノッチを追加すると、何らかの形式の測定が行われているという感覚も得られます(この場合は距離)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.