Modernes Webdesign im Jahr 2020 – wie die Digitalisierung das Profil von Städten und Kommunen verändert

2010 wurde hier im Design Tagebuch „die schönste Stadt Deutschlands“ gekürt. Die Relaunchs mehrerer Webauftritte von Großstädten zum Anlass nehmend schauen wir uns einmal an, wie heutzutage digitale Anwendungen von Städten und Kommunen einschließlich eGovernment-Lösungen aussehen und welchen Stellenwert Design dabei einnimmt.

Zehn Jahre sind im digitalen Zeitalter eine Ewigkeit. Nicht nur technologisch hat sich seitdem enorm viel getan, auch der Medienkonsum und das Nutzerverhalten haben sich seitdem verändert. Design muss und kann im Zuge eines solchen Wandelns die passenden Antworten und Lösungen bieten, die in Zeiten zunehmender Komplexität mit schier unüberschaubaren Angeboten gefragt sind. Eine als abgedroschen geltende Formel dient dabei als Richtschnur: weniger ist mehr.

In den letzten Wochen und Monaten haben gleich mehrere Großstädte ihre Webauftritte umfassenden Relaunchs unterzogen, darunter Stuttgart, Frankfurt, Bochum und Bonn. Sie sind ein guter Anlass, um zu schauen, welche Entwicklungen im Bereich Webdesign auf kommunaler Ebene im letzten Jahrzehnt stattgefunden haben und welche weiteren Veränderungen diesbezüglich zu erwarten sind.

Frankfurt: Viel verändert, aber der Systemwechsel bleibt aus

Der Relaunch von Frankfurt.de zog sich wie ein zähes Kaugummi. Mehrere Jahre dauerte die Entwicklung, bis schließlich, nachdem der ursprüngliche Launch-Termin aufgrund technischer Probleme verschoben werden musste, Ende Februar der Schalter umgelegt wurde. Dank „neuer Technik und zeitgemäßem, nutzerfreundlichem Design“ habe man nun die Grundlage für weitere Online-Dienstleistungen der Stadtverwaltung geschaffen, wie es seitens der Stadtverwaltung heißt. 1.4 Millionen Euro standen als Budget für die Entwicklung bereit. Die technische Realisierung erfolgte in Zusammenarbeit mit Avanade.

Der zeitliche wie auch der für hiesige Verhältnisse große finanzielle Aufwand wecken Erwartungen, die der neue Webauftritt der Mainmetropole nur bedingt erfüllt. Sowohl optisch, funktional wie auch inhaltlich wirkt Frankfurt.de keinesfalls „state of the art“, sondern wie ein klassisches Stadtportal. Zwar verfügt der Webauftritt nun – selbstverständlich – über responsives Design, allerdings ist die Anwendung, trotz eigener Bekundung, keinesfalls barrierefrei. Der Inhalt einschließlich der Hauptnavigation lässt sich nicht durchgängig mittels Tastatur bedienen, somit ist die Website nicht „WCAG“-konform. Der Kontrast von Schrift zu Hintergrund ist oftmals zu gering, was die Benutzung insbesondere auf Smartphones erschwert. Die zum Teil aberwitzige Aufbereitung von Inhalten lässt zudem durchblicken, das bei Frankfurt.de zwar vieles verändert wurde, ohne dass dabei allerdings der erforderliche Systemwechsel hin zur Nutzer- und Bedürfnisorientierung stattgefunden hätte.

Stuttgart: ein Schritt in die richtige Richtung

Der erst vor wenigen Tagen relaunchte Webauftritt der Stadt Stuttgart (Stuttgart.de) erfüllt schon eher die Erwartungen hinsichtlich eines modernen Webdesigns und einer zeitgemäßen digitalen Anwendung. Der letzte Relaunch erfolgte 2012. Vom Stadtrat wurden für die Entwicklung 1,16 Millionen Euro bewilligt. Realisiert wurde der Relaunch in Zusammenarbeit mit der Agentur Die Firma (Webdesign, Usability) sowie mit Sitepark als technischem Partner. Im Fokus der neuen Plattform stehe „ein intuitives Angebot an Informationen und Dienstleistungen für die Bürger*innen“, wie es im Rahmen der Vorstellung heißt.

Tatsächlich lässt sich anhand der neuen Umgebung sehr gut die veränderte Ausrichtung hinsichtlich der Informationsarchitektur ablesen, wie sie insbesondere frisch relaunchte Webauftritte von Gemeinden auszeichnet: weg von Verwaltungs- und ämterzentrierten Strukturen hin zu themen- und bedürfnissorientierten Inhalten. Die Ausrichtung auf User-Centered-Design, so scheint es, hält nun endlich Einzug auch in städtische Verwaltungen.

Das Design von Stuttgart.de basiert auf dem bestehenden Corporate Design der Stadt. Ob in Print, im Web oder im Umfeld anderer digitaler Kanäle – die Stadt tritt als EINE Marke in Erscheinung. Mehr und mehr hat sich auch in Gemeinden eine solche One-Brand-Strategie etabliert. Viele Städte, darunter München, Berlin und allen voran Düsseldorf, haben diesbezüglich großen Nachholbedarf und gönnen sich zum Teil zwei, manchmal drei unterschiedliche Identitäten, um mit ihren Bürgern zu kommunizieren, was die Sache natürlich furchtbar umständlich macht, sowohl auf Seiten der Rezipienten wie hinsichtlich des damit verbundenen Pflege- und Mehrkostenaufwandes. Stuttgart hat sich diesbezüglich in die richtige Richtung bewegt.

Das Design der Website wurde nicht nur unter der Prämisse einer Harmonisierung modifiziert, es wurde auch modernisiert, was auf Detailseitenebene ein sehr aufgeräumtes, fast minimalistisches Interface zufolge hat. Großflächige und im Hintergrund liegende Bilder, wie auf der Startseite von Stuttgart.de (auch Bochum.de und Bonn.de), dienen allerdings ausschließlich der Repräsentation. Freilich ist auch Dekoration eine Funktion, aus Anwendersicht sind derlei Bilder allerdings nur bedingt von Wert, weshalb beispielsweise beim Portal der britischen Regierung gov.uk gänzlich auf derlei schmückendes Bildwerk verzichtet wurde.

Bochum: in vielerlei Hinsicht vorbildhaft, dennoch mit Entwicklungspotenzial

Auch wenn der Relaunch von Bochum.de bereits im Herbst 2019 erfolgte, ist die Website im Zusammenhang einer solchen übergeordneten Betrachtung relevant. Laut Strategiepapier (PDF) ist für den Relaunch ein Budget in Höhe von 260.000 Euro vorgesehen gewesen. Realisiert wurde der Relaunch in Kooperation mit der Agentur Oktober (Design) sowie als technischem Dienstleister CONET Solutions. Hinsichtlich der oben genannten Markenstrategie ist Bochum.de vorbildhaft. „Die Website ist das prominenteste Medium der Marke Bochum“, wie es seitens der verantwortlichen Agentur Oktober heißt.

Als einzige der hier vorgestellten städtischen Webauftritte lässt sich die Hauptnavigation vollständig mittels Tastatur bedienen. Wie auch bei Frankfurt und Stuttgart versteckt sich diese hinter dem Hamburger-Icon. Was auf Smartphones mangels Platzangebot oftmals eine Erleichterung darstellt, führt in der Desktop-Umgebung zu unnötigen Klicks und Hin-und-her-geschiebe. Die Ausrichtung auf „Mobile First“ sollte keine Probleme für Tablet- und Computer-Nutzer verursachen, aber genau dies geschieht derzeit im Zuge von Relaunchs am laufenden Band. In anderen Ländern sind Städte bereits weiter und haben aus den Fehlern der Vergangenheit gelernt – dazu später mehr.

Design und Aufbau von Bochum.de sind klar, anwenderfreundlich und ansprechend. Wie auch bei Stuttgart.de ist die Suchfunktion die alles dominierende Funktionseinheit der Website. Der Bedienung insbesondere von E-Commerce-Websites folgend hat sich die Suche samt Filterfunktionalität (Faceted Search) in vielen digitalen Anwendungen zur bestimmenden und prominentesten Navigationseinheit herausgebildet, vor allem da die gezielte Navigation oftmals über zahlreiche Ebenen verzweigt und dadurch zu viel Zeit in Anspruch nimmt. Gleich mit Eingabe der Suchphrase, und das ist in Bochum besser gelöst als in Frankfurt, erscheinen Suchvorschläge. Wer allerdings bei Bochum.de tiefer einsteigt, bekommt es, und das ist nach wie vor Alltag bei digitalen Angeboten deutscher Städte, mit gruselig gestalteten Seiten und Formularen zu tun, die noch mit alter Technik laufen.

Bonn: klares, einheitliches, prototypisches Design

Wenn der im März 2019 relaunchte Webauftritt der Stadt Bonn vom Aufbau und der Grundstruktur her große Ähnlichkeit mit dem neuen Stadtportal Stuttgarts aufweist, kommt dies nicht von ungefähr, denn auch Bonn.de wird von Sitepark und Die Firma betreut (im Zusammenspiel mit der Agentur Lekkerwerken). Der letzte umfängliche Relaunch erfolgte 2006! Die Kosten für die Entwicklung/Umsetzung werden mit 440.000 Euro angegeben.

Bonn gehört zu den wenigen Städten, die über ein durchgängiges visuelles Erscheinungsbild über alle Bereiche, Kanäle und Anwendungen hinweg verfügen. Bürger, Investoren, ortsansässige Gewerbetreibende, Touristen und auch die Mitarbeiter der Stadtverwaltung haben es mit dem selben Absender zu tun – stets bildet die 2008 eingeführte Bonner Dachmarke „Freude“ die Grundlage der visuellen Kommunikation. Das sorgt für Klarheit. In Sachen einheitlicher Markenführung ist Bonn, ebenso wie Bochum, vorbildhaft.

Auch im Webauftritt ist die Dachmarke vollständig implementiert. Bonn.de kann, bezogen auf Deutschland, als Vorreiter einer neuen Generation von Stadtportalen angesehen werden. Der schwere, kleinteilige und vielspaltige Aufbau, wie er für den einst propagierten Portal-Look städtischer Websites charakteristisch ist, ist passé. Die prominente Platzierung der Suchmaske, der Einsatz einer Off-Canvas-Navigation, die Ausrichtung auf die Bedürfnisse der Nutzer, der auf Detailseitenebene minimalistische Aufbau und das damit erzielte klare Design sind prototypisch. Ansätze zur Verbesserung gibt es dennoch.

Neben den zuvor genannten Städten haben im letzten Jahr unter anderem auch Hamm, Düren, Wesel und Krefeld einen neuen städtischen Webauftritt erhalten. Letztgenanntes Angebot ist deshalb nennenswert, da hier die Off-Canvas-Navigation, im Gegensatz zu allen anderen, auf der linken Seite eingehängt wurde. Im Sinne einer bestmöglichen User Experience wie auch vor dem Hintergrund einer im Idealfall barrierefreien Website, gilt es derlei Abweichungen von Konventionen, und eine links angedockte Hauptnavigation stellt im Kontext von Stadtportalen (derzeit) eine Abweichung dar, zu vermeiden. Standards ändern sich im Laufe der Zeit! Städte und Kommunen sollten proaktiv handeln und darauf vorbereitet sein, und nicht erst nach 10, 15 Jahren entsprechende Anpassungen vornehmen, die womöglich zum Zeitpunkt der Umsetzung bereits schon wieder überholt sind.

In Skandinavien und andernorts sind Städte bereits weiter

Es passt ins Bild. Deutschland ist nicht nur in Sachen Breitbandausbau europäisches Entwicklungsland, auch hinsichtlich aktueller Webdesign- und UX-Trends gibt es auf Seiten von Städten/Gemeinden großen Nachholbedarf. Hierzulande erhalten städtische Websites im Zuge jüngster Relaunchs erstmals überhaupt ein responsives Design – anderorts ist man bereits einen Evolutionsschritt weiter.

Stockholm hatte bereits 2007 ein rund 70-Millionen-Euro schweres Investitionspaket auf den Weg gebracht, um den Ausbau von E-Government-Services und des städtischen Breitbandnetzes voranzutreiben. Ende 2019 wurden weitere 4,8 Millionen Euro bewilligt, um den nächsten Entwicklungsschritt der städtischen Webpräsenz anzustoßen. Zur Erinnerung: dies entspricht dem mehr als dreifachen Budget der Stadt Frankfurt. Das Ergebnis ist ein in jedweder Hinsicht überzeugendes digitales Angebot, das über alle Bereiche, Themen und Inhalte hinweg über ein konsistentes und modernes visuelles Erscheinungsbild verfügt. Stockholms Bürger können mittels personalisiertem Zugang alle Services nutzen und die jeweiligen Onlineformulare schnell und unkompliziert ausfüllen. In den meisten Gemeinden in Deutschland hingegen haben Nutzer immer noch mit PDF-Formularen zu kämpfen, die erst ausgedruckt und dann per Fax oder per Brief eingereicht werden dürfen. Selbst in Bochum und Stuttgart laufen, trotz der kürzlich erfolgten Relaunchs, eGovernment-Dienste weiterhin auf technisch veralteten Plattformen.

Da man in der schwedischen Metropole bereits über umfängliche Statistiken in Bezug auf die Nutzung eines responsiven Webauftritts verfügt, konnten das UX- und UI-Konzept entsprechend angepasst werden. Das bislang in Stockholm verwendete Off-Canvas-Menü, welches ähnlich komplex gewesen ist, wie es nun die neuen Lösungen bei Frankfurt.de, Bochum.de oder Stuttgart.de sind, wurde zugunsten einer im Content implementierten Link-Struktur weitestgehend wieder aufgelöst. Alle Inhalte, die in der zweiten Hierarchieebene oder tiefer liegen, werden ausschließlich im Content abgebildet. Das verwirrende Hin und Her beim Wechsel zwischen den Menüpunkten findet nicht mehr statt.

Auch innerhalb der in vielerlei Hinsicht vorbildhaften Webauftritte von Oslo, Uppsala (uppsala.se), Sydney, Auckland und New York dient das hinter einem Hamburger-Icon eingehängte Menü lediglich als Themen-Direkteinstieg bzw. als Meta-Navigation, und nicht als zentrales Navigationswerkzeug. Offenbar hat man auch dort bereits die Erfahrung machen können, dass das Hamburger-Icon keinesfalls selbsterklärend ist, sondern von vielen Nutzern als Kennzeichnung für die Hauptnavigation nicht erkannt wird. In Göteborg müssen sich Nutzer ebenfalls nicht mit den in einem Off-Canvas-Menü integrierten Navigationselementen herumschlagen, denn alle Themen-Links werden auch hier direkt im stets sichtbaren Content-Bereich abgebildet, sowohl in der Desktop- wie auch in der Smartphone-Umgebung. Ein in dieser Weise barrierearme und nutzerfreundliche Ansatz setzt freilich voraus, dass im Content-Bereich tatsächlich auch nur die aus Nutzersicht (!) wichtigen und zentralen Inhalte vorgehalten werden, und keine Veranstaltungshinweise, die Informationssuchende momentan gar nicht interessieren oder Logos von Kooperationspartner und ähnlichen Ballast. Eine Hauptnavigation zu verstecken und stattdessen lediglich ein Hamburger-Icon einzufügen, ist aus vielen Gründen jedenfalls keine gute Idee. Das gilt insbesondere für Angebote mit sehr heterogenen Nutzergruppen, von denen einige nur eine geringe Webaffinität mitbringen.

Die digitale Präsenz der Stadt Stockholm ist zudem deshalb interessant, da mit dem Ende letzten Jahres durchgeführten Relaunch die Umstellung auf eine Multi-Site-Anwendung erfolgt ist. Dabei dient die Domain start.stockholm nunmehr lediglich noch als Einstieg. Themenbezogene Inhalte wurden unter Subdomains wie trafik.stockholm oder forskola.stockholm in eigene kleine Webportale überführt. Das bringt den unschlagbaren Vorteil mit sich, dass auf den einzelnen Sub-Sites tatsächlich ausschließlich themenrelevante Inhalte angeboten werden können, was sowohl den Informationssuchenden freut wie auch hinsichtlich SEO Vorteile mit sich bringt. Das damit einhergehende kontextualisierte Hauptmenü ist deutlich übersichtlicher und schlägt in Sachen Performance jede klassische, meist vollgepfropfte Hauptnavigation. Auch in Bonn verfolgt man das Multi-Site-Konzept, um so mittels eigener Microsites bedarfs- und themenoptimierte digitale Angebote zu liefern, wenn auch nicht in dem Ausmaß und der Konsequenz wie in Stockholm. Ein solches Modell, wie es die Stadt Stockholm nunmehr progressiv verfolgt, erfordert eine ausgeklügelte Informationsarchitektur, entsprechendes Know-how auch innerhalb der städtischen Verwaltung, auf politischer Ebene Voraussicht und den notwendigen Willen und von allen unmittelbar Beteiligten einen sehr langen Atem.

Fazit

Die Coronavirus-Pandemie hat die in weiten Teilen Deutschlands veraltete technische Ausstattung in städtischen Verwaltungen (und in Schulen) zutage befördert. Da Möglichkeiten fehlen, ein Anliegen auf elektronischem Wege zu erledigen, müssen Bürger vielerorts drei und mehr Monate auf einen Termin in einem Bürgeramt warten. Mittlerweile sollte jedem im Land klar sein, welch zentrale Bedeutung eine funktionierende digitale Infrastruktur mit entsprechenden anwenderfreundlichen Lösungen zukommt. Stadträte, die womöglich aus politischem Kalkül dringend notwendige Investitionen in diese systemrelevante Technologie blockieren, gehören ebenso ausgetauscht wie die veralteten Webauftritte deutscher Städte. Die jüngsten Relaunchs in Bonn, Bochum und Stuttgart wecken, trotz der angesprochenen Defizite, vorsichtig Hoffnung, dass der digitale Wandel nun endlich auch das Profil deutscher Städte im Netz zum Besseren, zu nachhaltigeren Lösungen hin verändern wird. Wie das ausschauen kann, zeigt insbesondere Stockholm mit seinem in vielerlei Hinsicht überzeugenden Konzept.

Screenshots der Webauftritte (Mobil)