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

OK、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

全体的なレイアウトを知らなくても、ドットの付いた円を使用する可能性があります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

そして、より現実的な例です：

編集：（私の提案に対する少しの正当化）

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

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