Website-Relaunch: HAMBURG WASSER schafft klaren, informativen und barrierefreien Webauftritt
Mit den Anforderungen an barrierefreie Websites kennen wir uns aus. Dies konnten wir beim Website-Relaunch für HAMBURG WASSER unter Beweis stellen.
In gemeinsamen Workshops wurden in knapp 2 Jahren Konzepte zur Zielgruppen-Analyse, Informationsarchitektur und Wireframes der wichtigsten Seiten konstruiert und daraufhin umgesetzt. Im Fokus der Arbeit stand die digitale Barrierefreiheit. Für die optimale Umsetzung haben wir zusammen mit HAMBURG WASSER die barrierefreie Entwicklung im Fundament – also in unseren Konzepten – verankert.
KUNDE
HAMBURG WASSER
PROJEKTDAUER
2 Jahre
EXPERTISE
- Barrierefreie Umsetzung
- Accessibility
- Agile Arbeitsweise
- CI/Corporate Design
- CX/UI
TECHNOLOGIEN
Der hansestädter Trinkwasserversorger – HAMBURG WASSER
Bei HAMBURG WASSER schließt sich der Wasserkreislauf. Die Trinkwasserversorgung sowie Abwasserbeseitigung werden in einem Unternehmen vereint, das nicht nur höchste Qualität für die Bürgerinnen und Bürger Hamburgs liefert, sondern auch innovative Lösungen für die Herausforderungen von morgen. HAMBURG WASSER ist Lösungspartner auf dem Weg zur blue-green-city, einer Stadt, die sich den Folgen des Klimawandels anpasst. Hierfür vereint HAMBURG WASSER eine Vielzahl von Leistungen der Daseinsvorsorge unter einem Dach. Mit den beiden Unternehmensteilen – den Hamburger Wasserwerken sowie der Hamburger Stadtentwässerung – steht der Gleichordnungskonzern in einer langen Tradition innovativer Lösungen zum Wohle der Hansestadt.
Das älteste öffentliche Wasserversorgungs- sowie Abwasserentsorgungsunternehmen auf dem europäischen Kontinent greift auf 180 Jahre Erfahrung zurück, um eine sichere Wasserversorgung und Abwasserentsorgung für alle Bürgerinnen und Bürger auf höchstem Niveau zu gewährleisten. Dieses Know-how bildet auch die Grundlage dafür, neue Herausforderungen anzugehen, für die HAMBURG WASSER mit den Tochterfirmen CONSULAQUA und servTEC innovative Lösungen anbietet. Mehr Informationen zum Unternehmen finden Sie auf www.hamburgwasser.de.
Die Aufgabe
Barrierefreiheit in TYPO3
Der Hamburger Trinkwasserversorger und Abwasserentsorger wünschte einen Relaunch seines Web-Auftritts.
Konzept und Design des neuen HAMBURG WASSER Auftritts wurden technisch auf der neuesten TYPO3-Version umgesetzt. In erster Linie haben wir uns bei der Erarbeitung verschiedener Wireframes auf die barrierefreie Gestaltung des Frontends konzentriert. So stand am Anfang ein sauberes HTML-Markup auf der Agenda, um bei der Umsetzung auf die technischen Aspekte der Barrierefreiheit zu achten.
Werkzeuge wie Persona- und User-Journey-Entwicklung kamen zum Einsatz, um das Zielgruppenumfeld, die Stärken und Schwächen des bisherigen Auftritts, die Zielgruppenselektion und das UX- und UI-Design zu überprüfen und in die neuen Accessibility-Anforderungen zu integrieren.
Haben Sie eine ähnliche Herausforderung für uns? Dann sprechen Sie uns gern an!
Unsere Lösung
Eine intuitiv strukturierte Website, die uneingeschränkt nutzbar ist
Um als öffentliche Stelle und Dienstleistungsunternehmen für Bürger*innen den Webauftritt – in Einklang mit den Bestimmungen der Hamburgischen Gleichstellungsverordnungen – barrierefrei zu gestalten, wurde die Website von HAMBURG WASSER an ein semantisches HTML angepasst. Der Umsetzung wurden Web Content Accessibility-Guidelines zugrundegelegt. Diese beschreiben einen internationalen Standard zur barrierefreien Umsetzung von Websites. Hier war es das Ziel der Medienwerft, mindestens die Prioritäten-Stufe AA durch den Relaunch zu realisieren.
Und das unter anderem durch folgende Maßnahmen: Für die Wahrnehmung der Textinhalte werden den Nutzer*innen grafische Elemente zur Verfügung gestellt. Zusätzlich ermöglichen angepasste Benutzeroberflächen und Navigationselemente, dass alle Funktionalitäten auch mittels Tastatureingabe abrufbar sind. Klare Fokus-Elemente für die Bedienbarkeit sind für Anwender*innen unmittelbar ersichtlich. Essentiell in der Umsetzung war auch die funktionale Entwicklung der Inhaltselemente, damit Screenreader-Programme diese verarbeiten können.
Die Challenge
Barrierefreiheit umsetzen – die Hürden und Herausforderungen
Eine der größten Herausforderungen, die wir während der Konzeption hatten, war die Ausrichtung der Inhalte auf alle Menschen aus der Metropolregion Hamburg: eine sehr heterogene Zielgruppe, bei der die Erwartungen, Bedürfnisse, Erfahrungen und Informationen zum Thema Wasser stark unterschiedlich ausgeprägt sind. Mithilfe mehrerer Informationsarchitektur-Workshops haben wir jedoch eine Inhaltsstruktur geschaffen, mit der alle ihr Ziel erreichen können und jede Information erreichbar sein sollte. Durch die Erstellung einer barrierefreien Website erstellen wird außerdem die Inklusion im Internet weiter vorangetrieben.
Ein wichtiger Teil der Barrierefreiheit ist der Einsatz von semantischem HTML in der Entwicklung: Es sieht eine klare Struktur mit einer Überschriftenhierarchie vor. Dieser strukturierte Aufbau führt zu einer höheren Konformitätsstufe der Barrierefreiheit, ist aber auch für die Pflege und Weiterentwicklung des Webauftritts wichtig. Der Code wird schlanker, und auch die Suchmaschinenoptimierung profitiert davon. Nicht zuletzt wird die User Experience mit übersichtlichen Seiten verbessert, die ein leichtes Scannen ermöglichen.
HAMBURG WASSER ist damit seiner Zeit voraus: Denn ab 2025 soll es für Unternehmen und Online-Shops verpflichtend werden, Barrierefreiheit in ihre Websites zu integrieren: Elektronische Dienstleistungen müssen dann barrierefrei sein.
Die Zielgruppe
Optimale Informationsabdeckung für alle
Welche Erwartungen haben Bürger*innen an den Webauftritt als erste Anlaufstelle für Fragen und Anliegen rund um die Wasserversorgung in ihrer Region? Wie kann das steigende Informationsbedürfnis der Bürger*innen optimal abgedeckt werden?
Neben der Beantwortung dieser Fragen stellt die Zielgruppe eine Besonderheit dar: Als Wasseranbieter für das Bundesland Hamburg und den Umkreis zählt HAMBURG WASSER alle Bürger*innen zu seinen Kunden. Es konnte also keine klar definierte Nutzergruppe umrissen werden, vielmehr sollten alle angesprochen werden – über alle Altersklassen hinweg, B2B wie B2C.
In Workshops wurden die Zielgruppen eingeteilt: Bürger*innen, die etwa Ablesedaten von ihren Wasserständen erheben oder Informationen über Trinkwasserqualität oder Tipps zum Wassersparen suchen oder Potenzielle neue Mitarbeiter*innen, die HAMBURG WASSER als modernes Unternehmen mit anspruchsvollen Jobangeboten ansprechen wollen.
Sprache
Mehrsprachigkeit als Schlüssel zur Barrierefreiheit
Insgesamt ist es wichtig, dass eine Website für alle Sprachen dieser Welt lesbar ist, um die breite Nutzer*innenschaft des Unternehmens ansprechen zu können und die kulturelle Vielfalt Hamburgs zu fördern. Schließlich ist eine mehrsprachige Website auch ein wichtiger Schritt zur Barrierefreiheit.
Menschen mit unterschiedlichem Sprachhintergrund und Lesefähigkeiten sollten gleichermaßen Zugang zu Informationen haben, die für sie von Bedeutung sind. Eine mehrsprachige Website trägt dazu bei, sicherzustellen, dass alle Menschen unabhängig von ihrer Sprache oder Kultur die gleiche Chance haben, auf wichtige Informationen zuzugreifen.
Für die Umsetzung wurde Google Translate an die Website angebunden, womit die Website-Inhalte in Sekundenschnelle übersetzt werden. Die Übersetzung einer Website geschieht vollautomatisch, wobei Text-Fragmente mithilfe des Google Übersetzers analysiert und anschließend wieder in der gewünschten Zielsprache in die Webseite eingebunden werden. Am grundlegenden Aufbau verändert sich dabei nichts, sodass die Website weiterhin nativ genutzt werden kann.
Digitale CI
Corporate Identity und effizienter Seitenaufbau für starke Online-Präsenz
In mehreren Workshops wurde die Struktur der einzelnen Seitenbereiche erarbeitet und entsprechend in relevante Seitentypen aufgebaut. Parallel dazu erfolgte die Entwicklung des Designs: Die neue Corporate Identity von HAMBURG WASSER war bis dato nur für Printprodukte eingesetzt worden. Wir verlängerten diese nun für die digitale Nutzung auf Websites und Smartphones, so dass HAMBURG WASSER als Marke besser wahrgenommen werden kann.
Dafür wurde der Styleguide für Printprodukte mit Farben, Schriften und Bildsprache für digitale Anwendungen adaptiert und weiterentwickelt, Schriftarten und -größen zum Beispiel für digitale Geräte optimiert und sichergestellt, dass die Kontraste groß genug sind. Es wurden alle Seitentypen wie Start, Service, Magazin und Presse konzipiert und gestaltet und so für die Entwicklung aufbereitet. Eine Komponentenbibliothek kam zum Einsatz, um einen effizienten Aufbau in TYPO3 zu gewährleisten.
Fazit
Agile Weiterentwicklung: Optimierungen und Anforderungen im laufenden Projekt mit HAMBURG WASSER
Das Projekt befindet sich aktuell in der zweiten Phase und wird agil weiter aufgebaut. Ein Beispiel ist die Möglichkeit, Videos im Pressebereich herunterzuladen. Zudem können im Magazinbereich Themen nun mit einer Stichwortsuche gefiltert werden. Es gibt immer wieder neue Anforderungen, wie beispielsweise die Aktualisierung von TYPO3 oder die Schließung von Sicherheitslücken. Der bisherige Erfolg, seit des Relaunches, lies sich bereits an den verbesserten Zugriffen auf den Online-Service messen, wodurch vor allem der Kundenservice entlastet wird. Wir freuen uns auf die weitere Zusammenarbeit mit HAMBURG WASSER und sind gespannt auf kommende Aufgaben und Herausforderungen, die uns in diesem Projekt begleiten werden.
Barrierefreiheit & zeitgemäßes Design
Das Schöne an der Zusammenarbeit mit HAMBURG WASSER ist, dass man hier etwas kreiert, was jeder Bürgerin und jedem Bürger Hamburgs hilft. Eine Website, die unter anderem das Ziel hat, den Umweltschutz voranzutreiben und das Bewusstsein zu schaffen, gewissenhaft mit der wertvollen Ressource Wasser umzugehen – ein Projekt, das motiviert und mit dem man sich gerne identifiziert.
MEDIENWERFT NEWS FREI HAUS!
Trends, Innovationen, Perspektiven & Erfahrungsberichte: Unser Newsletter!
KONTAKT
„Geht es um neue Perspektiven bei der Weiterentwicklung Ihrer prozess- oder transaktionsorientierten Online-Plattformen, beraten mein Team und ich Sie gerne. Ich freue mich darauf, Sie kennenzulernen.“
Geschäftsführer
HENDRIK VAN LAATEN
Tel.: 040 / 31 77 99-0
E-Mail: info@medienwerft.de