it-swarm.com.de

Was sind gute UI-Visualisierungen, die in einem Raster für Ranking-Aktivitäten angezeigt werden?

Ich habe ein Raster mit einer Liste von Läufern (eine Person in jeder Reihe) auf einer Webseite. Ich möchte eine Visualisierung in einer Spalte zeigen, um darzustellen, wie viel sie im letzten Jahr gefahren sind. Im Moment zeige ich nur eine Zahl in Meilen als Text, aber ich dachte, es wäre cool, eine Visualisierung zum Darstellen und Vergleichen zu zeigen. Ich dachte zuerst an einen Fortschrittsbalken, aber das scheint nicht zu funktionieren, da es keinen Maximalwert gibt, auf den skaliert werden kann.

Irgendwelche Vorschläge zur Visualisierung von Vergleichsfeldern in einer Spalte in einem Raster?

5
leora

Hier gibt es eine Gelegenheit für ein bisschen Spaß, Lernen und ich wage es zu sagen, Gamification.

Das Problem beim Anzeigen von Entfernungen ist - es ist nur eine Zahl. Es braucht eine Beziehung zu mach es real.

Und wenn Sie einen relativen Prozentsatz im Vergleich zu der Person verwenden, die zum Beispiel die längste Strecke gefahren ist, laufen Sie Gefahr, die Daten zu stark an Ausreißer im Bereich zu binden - zum Beispiel wenn einer Extreme Radfahrer sind eine große Strecke gefahren, dann sehen die relativen Prozentsätze aller anderen winzig aus.

Ich würde empfehlen, eine Skala zu verwenden, die unabhängig anderer Läufer ist, und auch ein paar lustige Fakten in die Visualisierung einzuführen - etwas, das sinnvoll oder interessant ist - etwas, das die Leute beziehen zu.

Hier ist ein Beispiel: Sie können die Entfernung als äquivalent zum Fahren der Breite, Höhe, Länge und des Umfangs eines oder mehrerer US-Bundesstaaten anzeigen, wie im folgenden Beispiel.

Dies fügt ein interessantes Element hinzu, da es eine Herausforderung sein könnte, das Äquivalent zum Fahren in den gesamten USA zu erreichen. Oder es könnte ein Element sein, das sehen möchte, was das nächste Inkrement der Entfernung anzeigen könnte. Wird es mein Lieblingsstaat sein? Wird es Florida sein? Ist es das Leben meines Bruders?

Und es gibt ein Gefühl der Errungenschaft, eine Distanz gefahren zu sein, die der realen Welt ähnelt. Es könnte sogar mit einem Twitter-Button integriert werden: "Im letzten Jahr bin ich das Äquivalent von ... gefahren."

enter image description here

6
Roger Attrill

Die offensichtliche Antwort besteht darin, den Wert des Benutzers zu skalieren, der seit einem Jahr am meisten gefahren ist. Wenn Ihr Maximum "500 Meilen" beträgt und jemand 50 Meilen gefahren ist, ist seine Bar zu etwa 10% voll.

Wenn diese Statistik sehr wichtig ist, besteht eine interessante Möglichkeit zur Anzeige darin, ein Hintergrund-Balkendiagramm zu erstellen, wie folgt:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

4
Myrddin Emrys

Ich denke, die Verwendung von horizontalen Balken wie "Fortschrittsbalken", wie Sie sie beschrieben haben, ist eine gute Idee, zusammen mit dem Vorschlag von @ Myrddin, die Skalierung der Balken automatisch basierend auf der größten Entfernung festzulegen. Die meisten Diagrammtools (z. B. Excel, Google-Diagramme usw.) tun dies standardmäßig, sodass Ihre Zuschauer diese Skalierung wahrscheinlich schon einmal gesehen haben und damit vertraut sind.

Das einzige, was ich hinzufügen möchte, ist, sie zu ordnen: Das heißt, sie nach der Entfernung von oben nach unten zu sortieren. Etwas wie:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ich denke, @ Rogers Vorschlag zu Äquivalenzen könnte auch eine nette Ergänzung sein, aber die einfachen Balken wären zweifellos ein guter Anfang und ich würde die Balken nicht zugunsten von Äquivalenzen entfernen. Da Balkendiagramme für so ziemlich jeden erkennbar und sofort verständlich sind, bieten sie einen großen Mehrwert.

0
Scott Willeke