Ausklappbare Maßnahmenbewertungsdetails innerhalb der Stadtseite

[StrategieLukas]

Es soll sich ein Menü ausklappen mit den angegebenen Kurzinfos zur Maßnahme und ihrer Bewertung, mit Verlinkung zur (generischen) Maßnahmendetailseite, wo dann noch ganz viel Erklärtexte und Details stehen.

Die sollten einzeln ausklappbar sein und wieder einklappbar.

[OttoCFF]

Habe eine Entwurf in Figma eingestellt.

[StrategieLukas]

Von der UX her ist das aktuell viel zu groß/sperrig für so ein ausklappbares Menü, das müssten wir glaub ich nochmal stark komprimieren

und es sollte irgendwo visuell stärker sichtbar sein, dass das ein ausgeklappter Unterpunkt von der Maßnahme ist, aktuell sind es ja einfach große Überschriften in optisch anderem Stil - ggf etwas nach rechts eingerückt und mit farbigem Hintergrund (zB dieselbe Farbe wie die Maßnahme?) hinterlegt, könnte es deutlicher sein

[OttoCFF]

Mein Vorschlag: Die blauen Zwischenüberschriften in 14 pt Roboto Condensed, der andere Text in 12 pt Inter. Eingefasst in einen Rahmen 50 % der HG-Fläche des Maßnahme (in diesem Fall hellgrün). Den Link zu den Details der Maßnahmen als ganz normalen Link darstellen.

[StrategieLukas]

Was meinst du mit 50% der HG-Fläche der Maßnahme?

Also so vom Gefühl her wäre gut, wenn der ausgeklappte/eingefärbte Teil mit den Details nicht mehr als so 3-5x so groß ist wie die Maßnahme

[OttoCFF]

Die Farbe. Die Unterlegung, im Beispiel grün, der Maßnahme hat 20 % der Erfüllungsfarbe. Der Rahmen sollte etwas dunkler sein, also 50 %, hier von Grün (3/3). Das entsprechende bei Olivgrün (2/3), Sonnengelb (1/3) und Rot (0).

Ich mach’ noch eine kleinere Variante.

Um die Fläche zu verkleinern, habe ich die Bewertung der Umsetzbarkeit herausgenommen Weiterhin das Metric-Icon auf 20x30 px verkleinert und die Schriftgröße darunter auf 10 pt gesetzt. Zur besseren Unterscheidung habe ich noch eine Linie in der Farbe der Umrandung in der Stärke 1 px eingefügt.

[StrategieLukas]

Feedbackpunkte von Augsburg:

• Die graue Farbe bei Symbolbildern wirkt etwas trist
• Symbolbild Rathaus wird missverstanden, lieber die 4 Säulen als Regierungssymbol nehmen
• Zusätzliche Infos anzeigen, welche die Bewertung besser erklären (im letzten Bild ist ja zB das mit den 12 Ausbildungskursen schon gegeben, aber in der Praxis ist das ja nur ein Freitextfeld im Backend)

[OttoCFF]

Feedbackpunkte von Augsburg:

* Die graue Farbe bei Symbolbildern wirkt etwas trist

Nein, das ist nicht trist.

• Symbolbild Rathaus wird missverstanden, lieber die 4 Säulen als Regierungssymbol nehmen Da kann man sich streiten. Ein Rathaus ist kein Capitol. Ich würde noch eine Fahne auf das Dach setzen.
• Zusätzliche Infos anzeigen, welche die Bewertung besser erklären (im letzten Bild ist ja zB das mit den 12 Ausbildungskursen schon gegeben, aber in der Praxis ist das ja nur ein Freitextfeld im Backend) Für wen sollen diese zusätzlichen Informationen interessant sein? Es ist nach meiner Auffassung vorrangig keine Dokumentation der Klimaschutzmaßnahmen der Kommune.

[OttoCFF]

@der-On kannst du bitte das icon src/frontend/public/assets/icons/icon_politics.svg austauschen. S.o.

[StrategieLukas]

Das Design hierfür muss noch angepasst werden - aktuell passt das nicht zu dem jeweiligen Punkt:

Auf jeden Fall sollte:

• die ausgeklappte Box den farblichen Hintergrund der ausgeklappten Maßnahmen übernehmen (gelb, rot, grün, ...) - vielleicht in einer anderen Farbschattierung (helleres/dunkleres gelb) aber nicht weiß wie aktuell
• der Inhalt eingerückt sein, so dass es rechts von der roten Linie (s.u.) ist und nicht wie aktuell weiter am linken Rand als die Inhalte darüber. Die Hintergrundfarbe sollte aber in einer Linie mit der Maßnahmenbox sein, also links und rechts mit dem gelb der Box von "Mitglied beim Bundesverband ..." matchen
• von Schriftgröße und Symbolen angepasst, so dass der Text und die Überschriften von dem ausgeklappten Detailtext nicht deutlich größer sind, als der Text der Maßnahme ("Mitglied beim Bundesverband ..."). Evtl könnte hierbei auch die Schriftgröße von dem Maßnahmentext etwas erhöht werden, in der Box ist noch genug Platz, um 1-2 Schriftgrößen größer zu gehen