Icons: https://gitlab.transformationsstadt.de/GeoPortal/frontend/tree/dev/src/assets/img/bli

01. Filterfunktion auf Startseite

Filter horizontal unten am Screenrand (funktionieren in der Oberfläche ähnlich in dem Beispiel hier)

01a. Definition Filterfunktion

  • Es kann immer nur ein Filter ausgewählt werden, nicht mehrere gleichzeitig. (keine UND/ODER Verschneidung)
  • Es werden immer alle Orte, die dieser Dimensionen zugewiesen sind hervorgehoben.
    • Es wird also immer global gefiltert unabhängig von der Suchfunktion.

02. Aus-/Einblenden Filter....

Über folgende Inputs werden die Filtericons aus-/eingeblendet:

  • Klick auf den Button "Dimensionen des Guten Lebens" togglet Filter ein- und ausblenden.
  • Klick auf einen Punkt in der Karte, Detailansicht blendet ein → Filter werden ausgeblendet.
  • Auslösen der Suche → blendet Filter aus. (s. Screenbild) 
  • Aufheben der Suche → blendet Filter ein

02ba. ... wenn eine Auswahl getroffen ist.

Ist ein Filtericon ausgewählt wurden und dann der collapse (Ausblenden der Icons) initiiert wurden bleibt dieses Icon auf der Seite auf der es vorher stand (links oder rechts) neben dem Button stehen.

Die zu dieser Dimension zugeordneten Punkte sind weiterhin hervorgehoben.

In diesem Beispiel wurde das Filtericon "Umwelt" ausgewählt, dann ein Pointer auf der Karte angeklickt, die Detailansicht hat sich rechts geöffnet, und die Filtericons sind collapsed, bis auf das ausgewählte Icon:

Das gleiche gilt für die Suche, ein ausgewählte Filter bleibt bestehen:

02b. ... in Abhängigkeit zu Such- und Detailfenster

Wenn Filter eingeblendet werden:

Bewegen sich Detailanzeige und Suchergebnisse aus dem Bild. Das gilt für das Suchfenster nur, wenn bereits eine Suche ausgelöst wurde und Ergebnisse angezeigt werden. Die leere Suchanzeige bleibt stehen.

Hier z. B. werden die Filter vom User eingeblendet (klick auf "Dimensionen des Guten Lebens) und beide Fenster (Suche und Detailanzeige bewegen sich aus dem Kartenausschnitt):

02c. ... Animation/Darstellung (nice to have)

  • Collapse: Icons "huschen" unter den Button "Dimensionen des Guten Lebens"
  • Expand: Icons bewegen sich von unter dem Button "Dimensionen des Guten Lebens" wieder an ihre Position.

03. Hover über Filtericon

HOVER: Die Bezeichnung der Dimension wird über dem Icon eingeblendet. (Hier ist die Liste: Zuordnung: Icons/Bezeichnung BLI-Dimensionen)

NICE TO HAVE HOVER: Die Punkte, die der Dimension zugeordnet sind werden bereits beim hover hervorgehoben (hier als weiße Pointer mit grüner Outline). So kann der User erkennen wie viele Punkte überhaupt dieser Dimension zugeordnet sind, bevor er eine Auswahl trifft.

04. Klick auf Filtericon

Klick auf ein Icon togglet Filter an/aus.

An: Icon wird grün hervorgehoben und Bezeichnung bleibt stehen. Punkte, die dieser Dimension zugeordnet sind, werden hervorgehoben.

05. Hover über ein weiteres Filtericon nach Auswahl

Die Darstellung der Bezeichnung beim Hover überlagert die des aktiven Elements (hier "Sicherheit" über "Zufriedenheit")
ALTERNATIV: Sicherheit springt eine Zeile höher.
wieder NICE TO HAVE HOVER (s. 03) : Die Punkte, die der Dimension (Hier "Sicherheit") zugeordnet sind werden bereits beim hover hervorgehoben.

06. Auswahl neues Filtericon

Wird eine neues Filtericon ausgewählt (hier "Sicherheit" nachdem im Screen vorher "Zufriedenheit" ausgewählt war) werden die Punkte hervorgehoben, die dieser Dimension zugeordnet sind. Die vorherige Auswahl wird aufgehoben.

07. Filter & "Alle Orte sehen" Button

Werden alle anderen Orte ausgeblendet, bleiben die Orte, die der aktuell ausgewählten Dimension (hier "Umwelt") zugeordnet sind stehen.

Ebenso werden, auch wenn alle anderen Orte ausgeblendet sind, immer alle Orte, die zu einer Dimension zugeordnet sind angezeigt, wenn ein Filtericon ausgewählt wird.