Wie würden Sie die Entfernung grafisch darstellen?

12

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.

Entfernung grafisch dargestellt

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.

kohlensäurehaltiges Getränk
quelle
1
Es könnte hilfreich sein, wenn Sie einen Kontext hinzugefügt haben - speziell, welche Entfernung möchten Sie darstellen und zu welchem ​​Zweck?
Ilmari Karonen
Ich denke, die Lösungen von Ryan und Scott Brown gehen in die richtige Richtung. ABER Farbe für "weit" sollte Cyan oder Blau sein, nicht Grün ... Rot für "nah" ist in Ordnung.
Sandra
Beachten Sie, dass die alleinige Verwendung von Farben die Zugänglichkeit für Menschen mit Farbenblindheit und Sehstörungen beeinträchtigen kann.
Thorbjørn Ravn Andersen
3
Ist das Ziel im Rahmen Ihrer Bewerbung, dass die Menschen näher oder weit weg sind? Sie möchten einen stärkeren Eindruck des gewünschten Status auf dem Bildschirm vermitteln . so dass , wenn Benutzer versuchen zu werden näher an andere Benutzer, die Sie nicht wollen weiter den stärksten Eindruck sein (dh Sie wollen eine Bar füllen , wie Menschen einander näher kommen, oder einen Keil mit einer größeren Seite für eine engere verwenden). Vielleicht möchten Sie diese Frage tatsächlich auf ux.stackexchange.com stellen . Ich bin der Meinung, dass Sie dort bessere Ratschläge zum Konzept erhalten und dann zur grafischen Darstellung des Konzepts hierher zurückkehren.
Jason C
Wenn ich "distance" gefolgt von einer langen Linie sehe, denke ich "far away", während Ihre Grafik "close" anzeigen soll.
David Richerby

Antworten:

14

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

Bildbeschreibung hier eingeben

Beispiel mit Start- und Zieltext

Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben

Bildbeschreibung hier eingeben


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.

Bildbeschreibung hier eingeben

Talkingrock
quelle
2
Vielleicht sollte es groß in der Nähe und dünn in der Ferne sein ... Nur eine Idee Objekte in der Nähe neigen dazu, größer zu sein.
Joojaa
sind diese Zahlen nicht rückwärts? Oder die Etiketten? :)
Scott
1
Ja, mir ist klar, dass es nur ein kurzer Versuch war. Deshalb gab es ein Smilie :)
Scott
@Scott, +1 für den guten Vorschlag und den freundlichen Kommentar :) Der Übersichtlichkeit halber wurden neue Modelle hinzugefügt.
Talkingrock
12

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:

Bildbeschreibung hier eingeben

Scott Brown
quelle
Oh, das gefällt mir sehr gut.
Leichtigkeit Rennen mit Monica
8

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.

Bildbeschreibung hier eingeben

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.

Bildbeschreibung hier eingeben

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

djan
quelle
7

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 .... Bildbeschreibung hier eingeben

Scott
quelle
Ok, also eine lange "rote" Linie für fern und kurz und "grün" in der Nähe. Also einfach den Namen "Distance" behalten?
Limonade
1
@fizzydrink ja. Für mich wäre "weit weg" immer rot. Und ein größerer Abstand würde einen längeren Balken bedeuten. Dies ist natürlich nur meine Interpretation und wie ich die Dinge intuitiv selbst lesen würde.
Scott
1
Farbanpassung hilft aber dem Kreis umso mehr. Die Entfernung zwischen sich bewegenden Objekten erfordert einen Konvergenzpunkt, um viel Sinn zu machen. IMO
Ryan
Kann der Kreis in eine iPhone-App "passen"? Stellen Sie sich eine Liste von Personen mit jeweils einer eigenen Zeile vor, ca. 100 Pixel mit dem Profilbild auf der linken Seite. Kann ich den Kreis benutzen? Oder verwenden Sie die
Kreisidee
1
Wie ich geschrieben habe .. keine Ahnung über das Gesamtlayout und ob ein Balken obligatorisch war :) Klingt so, als ob es irgendwie ist.
Scott
5

Mit dem erstellten Bild Talkingrock:

Bildbeschreibung hier eingeben

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

Bildbeschreibung hier eingeben

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.

Ryan
quelle
Sehen Sie, meine Interpretation (englisch sprechend) ist, dass der Konvergenzpunkt der linke Rand ist. Je länger das Balkendiagramm ist, desto weiter entfernt befindet sich der rechte Rand, sodass der Abstand angezeigt wird.
Scott
Du sprichst auf der zweiten, der "Distanz", nicht der ersten "Fern / Nah"?
Ryan
Richtig, der erste ist in meinen Augen unbrauchbar.
Scott
1
Sie möchten, dass das größere Ende das ist, was Sie wollen . Wenn es im Kontext dieser Anwendung wünschenswert ist, dass jemand weit weg ist, dann ist dieses Beispiel sinnvoll. Wenn es wünschenswert ist, dass jemand in der Nähe ist, sollte dies umgekehrt werden.
Jason C
1
@Ryan Wenn der gewünschte Zustand im Kontext dieser Anwendung darin besteht, dass Benutzer näher beieinander sind, wird der unerwünschte Zustand durch eine stärkere Angabe für weiter entfernte Benutzer stärker hervorgehoben. Wenn das Ziel darin besteht, Benutzer zum Erreichen des gewünschten Zustands zu motivieren , ist es parallel zu diesem Ziel, wenn der stärkere Indikator den gewünschten Zustand darstellt. Denken Sie auch zB an das mittlerweile allgegenwärtige Signalstärkemessgerät auf Mobiltelefonen - es gibt immer die Motivation, "4 Balken" zu haben, niemals die Motivation, 1 zu haben.
Jason C
3

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).

DA01
quelle
3

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.

Magnus Smith
quelle
3

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).

Jason C
quelle
Was ich will, ist die Entfernung der Benutzer im Vergleich zur Entfernung des aktuellen Benutzers, zu dem die "Entfernung" angezeigt wird
kohlensäurehaltiges Getränk
@fizzydrink Warum sind diese Informationen für die Person, die die Anwendung verwendet, wichtig? (Obwohl Sie sehen, dass das Problem behoben ist, ist das Thema jetzt akademischer.)
Jason C
Es ist eine ortsbezogene App, bei der Sie Ergebnisse erhalten, die auf der Entfernung der anderen Benutzer in Ihrer Nähe basieren. Wie weit sie von Ihrem aktuellen Standort entfernt sind, sagen wir 500 Meter oder näher.
Limonade
3

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: Sonic A2B Slider

Und hier ist ein realistischeres Beispiel: Schieberegler

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).

Pharap
quelle