Wie würden Sie die Entfernung grafisch darstellen?

In Ordnung,

Das mag also etwas "subjektiv" sein, aber ich suche nach Ideen.

Ich möchte die Distanz als Balkendiagramm darstellen, das "voller" wird, je näher die Leute dran sind.

Je weiter sie entfernt sind, desto weniger voll ist das Balkendiagramm.

Ich bin mir nicht sicher, wie ich das darstellen würde. Ich habe diese Grafik erstellt, um Ihnen meinen Denkprozess zu zeigen.

Glaubst du, die Leute würden verstehen? Soll ich die Kanten "FAR" und "CLOSE" angeben? Oder nur Distanz anzeigen?

Würden die Leute verstehen, dass die Leute näher sind, wenn sich das Balkendiagramm füllt?

Soll ich vielleicht auch die tatsächliche Entfernung angeben? (Entweder Meter, km usw.?) Oder ganz auf das Balkendiagramm verzichten?

Wie würden Sie die Entfernung grafisch darstellen, damit die Menschen auf den ersten Blick eine gute Vorstellung davon haben, wie nah oder fern die andere Person ist?

EDIT : Ok, ich habe mit dem Kunden gesprochen, um weitere Details zu erfahren, und sie haben etwas gefunden, das dem von @Scott bereitgestellten Kreis ähnelt, in dem sich der aktuelle Benutzer "in der Mitte" befindet und sich die Personen um den Benutzer im "Orbit" befinden. Sie haben es irgendwo gesehen und wollen es, anstatt die Entfernung für jeden Benutzer anzuzeigen.

Ich muss daher Text wie "150 m" oder "In der Nähe" anstelle eines Balkendiagramms mit der Entfernung anzeigen.

Ich möchte mich jedoch auch bei JEDEM für die Antworten bedanken. Einige der Beispiele sind fantastisch, ich liebe sie und es gibt eine große Auswahl an Ideen, auf die man zurückgreifen kann. Da sich das "Briefing" gegenüber der ursprünglichen Anfrage etwas geändert hat, habe ich mir gedacht, dass es am besten ist, diese Frage zu bearbeiten, um noch mehr Feedback zu geben.

Aktualisiertes Beispiel unter Verwendung eines Keilentwurfs. Der Übersichtlichkeit halber wurden dem Diagramm Stichprobenabstände hinzugefügt und der Text entfernt.

Beispiel mit Start- und Zieltext

Da die geringe Größe ein Faktor für Handhelds ist, gibt es hier zwei platzsparende Optionen (100 x 100 Pixel).

Brainstorming basierend auf den neuesten Anforderungen

Hier ist eine platzsparende Idee für Handys, bei der die App in einer Dropdown-Liste angezeigt wird. Mit der größeren Größe eines Dropdown-Felds kann die Karte mehr Informationen wie Benutzer-Labels und ein Entfernungsraster enthalten.

Vor Jahren hatte ich ein Amiga-Spiel namens F19 Stealth Fighter. Das HUD dazu hatte etwas sehr Ähnliches wie das, was Sie beschreiben. Bei Bomben, die Sie abgeworfen und nicht abgefeuert haben, wurde Ihnen eine Linie mit zwei "Pfosten" an jedem Ende angezeigt, die näher zusammenrücken, je näher Sie einem Ziel kommen.

Hier ist eine einfache moderne Darstellung:

Wenn Sie den Abstand zwischen zwei Personen anzeigen möchten, ist es wahrscheinlich am intuitivsten, den Abstand zwischen zwei Personen anzuzeigen. In der groben Abbildung unten befindet sich noch eine Art Balken, der jedoch nach hinten zeigt. Die Entfernung wird durch Position (durch Bewegen der Person nach rechts) und Größe (durch Verkleinern der Person) angezeigt.

Wenn Sie mehr von einem Balken möchten, können Sie einen Teil des Dreiecks wie folgt einfärben. Und Sie können den Zeilen Beschriftungen hinzufügen.

Vielleicht könnte die Referenzperson auf der linken Seite fallen gelassen werden.

Ich denke, die Entfernungselemente funktionieren besser und sind weitaus intuitiver, aber ich würde die Dinge ein wenig umkehren. Große Entfernung sollte lang und rot sein, kurze Entfernung sollte kurz und grün sein. Was Sie gepostet haben, scheint das Gegenteil davon zu lesen. Ich würde erwarten, dass lange Balken "weit weg" und rot sind.

Ohne Ihr Gesamtlayout zu kennen, besteht eine weitere Möglichkeit, einen Kreis mit Punkten zu verwenden ....

Mit dem erstellten Bild Talkingrock:

Ich denke, was für mich am sinnvollsten wäre, wäre, wenn es so getauscht würde:

Beginnt bei Far Apart und leuchtet auf, wenn Sie sich zusammen nähern. Ich denke, die Änderung des Textes von "Weit Nah" zu "Weit auseinander", "Zusammen" oder "Erfüllt" oder etwas, das darauf hinweist, dass zwei Personen an einem einzigen Ziel ankommen, wird dazu beitragen, die Idee weiter zu kommunizieren.

Ich möchte die Distanz als Balkendiagramm darstellen, das "voller" wird, je näher die Leute dran sind.

Das ist jedoch das Gegenteil von dem, was ein Balkendiagramm zeigt. Je höher der Wert, desto größer der Balken. Wenn Sie genau das Gegenteil tun möchten, kann dies zu Verwirrung oder visueller Dissonanz bei den tatsächlichen Daten führen.

Um den Punkt etwas direkter zu machen, ersetzen Sie 'Fern / Nah' durch 'Groß / Klein'. Das würde einfach keinen Sinn ergeben:

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

Als solches denke ich, müssen Sie die Idee fallen lassen, die Skala mit den Aufklebern "umzudrehen". Wenn Sie versuchen, eine größere Entfernung zu kommunizieren, lassen Sie den großen Balken dies anzeigen. Es ist die intuitivste Korrelation.

Aber vielleicht ist die Lösung überhaupt kein Balkendiagramm. Es hört sich so an, als würden Sie versuchen, eine Art 'Ortungssignal'-Metapher zu implementieren. Je näher Sie sind, desto stärker ist das Signal. Ich denke, das ist eine gute Idee, aber betrachten Sie ein anderes visuelles als ein Balkendiagramm dafür. Vielleicht eine Art 'Blip' (oder Punkt).

Sie fragen, wie die Entfernung grafisch dargestellt werden soll , aber alle Antworten scheinen sich auf den Text im Bild zu stützen (die Wörter "fern" und "nah" usw.). Deshalb schlage ich vor, dass Sie nur "3 Meilen voneinander entfernt" oder "200m vor dem Ziel" schreiben und einen beliebigen "Fortschrittsmesser" -Hintergrund verwenden, der sich horizontal ausfüllt.

Die Angabe des numerischen Abstands ist nicht unbedingt nützlich, wenn eine Person die tatsächlichen Zahlen liest. Die Zahlen und Maßeinheiten machen jedoch auf einen Blick klar, was Sie messen und ob sich etwas ändert.

Ihr Kontext ist nicht klar, aber wichtig. Ist die Distanz konzeptionell wirklich das, was Sie darstellen möchten? Oder geht es tatsächlich darum darzustellen, wie nah ein Benutzer an dem Zustand ist, in dem er sich befinden möchte, wobei "Entfernung" zufällig die Metrik dafür ist?

Bedenken Sie, dass Sie tatsächlich versuchen darzustellen, wie nah ein Benutzer an einem gewünschten Zustand ist. Der gewünschte Zustand sollte den stärksten Eindruck auf dem Bildschirm hinterlassen.

Mit anderen Worten, wenn Benutzer im Kontext Ihrer Anwendung näher an anderen Benutzern sein möchten, möchten Sie keinen Balken (oder etwas anderes), der mit größerer Entfernung stärker wird , da dieser Eindruck das genaue Gegenteil des Eindrucks der Benutzer ist. Tor.

Dies gilt auch für Farben. In einem Rot -> Grün-Schema sollte Grün in der Regel dem Zielzustand entsprechen und Rot im Gegenteil. Wenn Benutzer also näher sein möchten, möchten Sie, dass Grün eine geringere Entfernung aufweist.

In diesem Sinne reichen entweder die Stangen oder der Keil aus, aber in beiden Fällen möchten Sie, dass die Stangen / der Keil auf der gewünschten Zustandsseite grün und voll sind (und der Keil größer ist) (z. B. geringerer Abstand, wenn Benutzer dies wünschen) näher).

Entlang diesen Linien, die Zugänglichkeit zur Seite (dies ist nur ein illustratives Beispiel) , wenn alles , was Sie wirklich zu tun versuchen , ist es, einen Eindruck davon, wie nah ein Benutzer auf ihren gewünschten Zustand ist und nicht gibt genaue Informationen über Distanz, ein Indikator wie sein könnte Einfach wie ein statisches Quadrat, das im Zielzustand von Rot über z. B. Gelb nach Grün übergeht (sei es näher oder weiter) und möglicherweise eine Beschriftung, einen Rand oder eine Animation erhält, wenn der Zielzustand [fast] erreicht ist.

Die Entwurfsoptionen in den anderen Antworten hier sind alle großartig. Aus UX-Sicht sollten Sie jedoch darüber nachdenken, wie Sie diese Entwürfe verwenden und was Sie versuchen: Wenn Sie versuchen, Benutzer dazu zu ermutigen, einen Zielzustand zu erreichen, möchten Sie Sie möchten beispielsweise nicht, dass Ihre Balken kürzer werden und in diesem Zustand verschwinden. Das ist gegen die Motivation.

Anekdotisch (ich habe keine Beweise zur Hand) würde ich auch vermuten, dass es für einen Benutzer einfacher ist, den größten Balken in einer Gruppe auf einen Blick auszuwählen, als den kleinsten. Ich würde mir dann vorstellen, dass, wenn Sie mehrere Indikatoren auf Ihrem Bildschirm haben und Ihre Anwendung Benutzer schnell die "besten" (je nach Kontext am nächsten oder am weitesten entfernten) finden lassen möchte, der stärkere Indikator die wünschenswerteren Zustände in dieser Hinsicht darstellen würde.

Persönlich bevorzuge ich einen Keil, dessen größere Seite rechts grün wird, während sie sich füllt, und dessen größere Seite näher ist ( vorausgesetzt, näher ist das Ziel ), da dies für mich an das mittlerweile bekannte und allgegenwärtige Handysignal erinnert meter (4 bars ist aufregend, 1 ist nicht).

Ich denke, Sie sollten den Balken einfarbig machen und dann einen signifikanten Marker wie einen Pfeil oder einen andersfarbigen Balken verwenden, der vertikal überlagert ist, um den relativen Abstand vom Anfang links und vom Ende rechts anzuzeigen. ( Edit: Ich glaube, der offizielle Begriff ist ein Schieberegler)

Hier ist ein Beispiel aus einem Spiel, in dem Charaktersymbole als Marker verwendet werden und mehr als ein Marker vorhanden ist:

Und hier ist ein realistischeres Beispiel:

Edit: (Ein bisschen Rechtfertigung für meinen Vorschlag)

Die Originalversionen, wie sie in der Frage vorgestellt wurden, ähneln zu sehr Fortschrittsbalken, von denen erwartet wird, dass sie den Fortschritt und nicht die Entfernung darstellen. Wenn etwas, das wie ein Fortschrittsbalken aussieht (auch wenn es beschriftet ist), rückwärts geht, werden einige Benutzer verwirrt sein, weil es zu unnatürlich aussieht und den Erwartungen der Menschen nicht entspricht.

Wenn Sie einen einfarbigen Balken mit einer Art Marker haben, wird der Marker zum Fokus und es fühlt sich natürlicher an, dass er sich in beide Richtungen entlang des Balkens bewegen kann. Das Hinzufügen von Kerben gibt auch den Eindruck, dass eine Art von Messung stattfindet (in diesem Fall Abstand).