it-swarm.com.de

Wie kann man bei einer Web-App "Cluster" -Markierungssymbole von normalen Symbolen auf einer Karte unterscheiden?

Wir haben eine Karte mit etwa einem Dutzend verschiedener Arten von Markierungen, und es gibt zu viele, um sie gleichzeitig anzuzeigen. Daher verwenden wir Cluster-Symbole, um mehrere Markierungen darzustellen, die nahe beieinander liegen.

Was ist der beste Weg, um die von diesen Clustern verwendeten Symbole von den einzelnen Symbolen zu unterscheiden, die sie darstellen?

Screen capture

10
CheapSteaks

Ich würde vorschlagen, Benutzern die Möglichkeit zu geben, ihre Suche nach dem zu filtern, wonach sie suchen. Dies kann helfen, einige Ihrer Marker zu entfernen.

Wenn dies nicht ausreicht, können Sie Symbole zu einer Markierung kombinieren, wenn die Attraktion/Einrichtung an einem zentralen Ort zu nahe ist, um einzelne Markierungen anzuzeigen. Wenn Benutzer die Markierungen vergrößern, können sie aufgeteilt werden, um die Position besser wiederzugeben (wenn möglich).

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

6
JeffH

Wenn ich Ihre Frage richtig verstehe, möchten Sie ein Clustersymbol verwenden, um mehrere einzelne Symbole darzustellen, die zu nahe beieinander liegen und sich ansonsten überlappen und nicht anklickbar/nicht auswählbar wären.

Wenn dies der Fall ist, stelle ich mir immer die roten kugelförmigen Stecknadeln vor, mit denen Menschen Orte auf einer Karte markieren. Für einzelne Standorte, die weit genug von den anderen entfernt sind, können Sie einen einzelnen roten Stecknadel verwenden. Wenn dann viele Standorte zusammengefasst sind, können Sie einen Cluster dieser Pins erstellen, die in alle Richtungen weisen und auf einen "Cluster" hinweisen. Vielleicht könnte ein Benutzer diesen Cluster auswählen und der Bildschirm würde auf diese Stelle zoomen und viele einzelne Stifte freigeben.

Hier ist ein Beispiel für die allgemeine Idee:

enter image description here

An Stelle von:enter image description here

9
PL3X

In einer ähnlichen Situation habe ich die folgende Lösung gewählt:

Clustered simple map markers

Es sind noch einige visuelle Verbesserungen erforderlich, aber das Wesentliche ist, einen nummerierten Marker zu verwenden, der entsprechend der Anzahl der Punkte im Cluster skaliert ist.

Dies ist aufgrund Ihrer komplizierten symbolbasierten Markierungen nicht direkt auf Ihren Fall anwendbar. Ich würde daher empfehlen, die kleinen nummerierten Abzeichen von iOS-Apps auszuleihen, z.

Clustered icon map markers

4
Tom

Ich denke, Ihre aktuellen Symbole sind möglicherweise etwas zu komplex. Überlegen Sie, wie Sie sie vereinfachen können.

Am besten verwenden Sie Farbe und Zahl, ähnlich wie im Diagramm Yallow. Aber jede Farbe bezog sich auf einen der zwölf Typen.

An Orten, an denen Sie nur einen hatten, wurde das Symbol angezeigt, und an Orten, an denen es mehr gab, wurden Farbe und Nummer angezeigt.

Ich denke, ich würde keine Volltonfarbe verwenden, da dies überwältigend sein könnte, aber eine Mischung aus einem farbigen Kreis mit einer weißen Füllung könnte funktionieren.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Update

Hatte noch ein paar Gedanken dazu ... Wenn Sie Farbe verwenden, möchten Sie möglicherweise die Farbe auf der Karte deaktivieren ... eine Graustufen- oder leicht gedämpfte Karte funktioniert möglicherweise besser.

Ich dachte auch, dass 12 Arten von Elementen viel sind. Es muss einige geben, die wichtiger sind als andere. Warum nicht nur die Top 5 anzeigen und die anderen in einer "erweiterten" oder "mehr" Einstellung ausblenden?.

Ich werde jetzt aufhören darüber nachzudenken!

mockup

bmml Quelle herunterladen

3
Lisa Tweedie