Chroma Experience

adira.de – barrierefreie Portallösung für rollstuhlgerechten und barrierefreien Wohnraum

Für den Blinden- und Sehbehindertenverband Niedersachsen e. V. (BVN) entwickelten wir ein Portal zur Vermittlung von rollstuhlgerechtem und barrierefreiem Wohnraum.

Die Umsetzung wurde unter strenger Überprüfung der Richtlinien der BITV (Barrierefreie-Informationstechnik-Verordnung) und WCAG (Web Content Accessibility Guidelines) Testverfahren durchgeführt.

Bild der Fassade eines Mehrfamilienhauses

Auftraggeber

Blinden- und Sehbehindertenverband Niedersachsen e. V. (BVN)

Tätigkeitsfelder

Selbsthilfe- und Interessenverband der Menschen in Niedersachsen, die sehbehindert, blind, mehrfachbehindert, hörsehbehindert oder taubblind sind

Herausforderung

Vermarktung von garantiert barrierefreiem und rollstuhlgerechtem Wohnraum mit Anbindung an etablierte und standardisierte Schnittstellen der Wohnungswirtschaft

Lösung

Erstellung einer Portallösung zur Vermarktung und Vermittlung von barrierefreiem und rollstuhlgerechtem Wohnraum als barriefreier Online-Service gemäß BITV und WCAG Richtlinien inkl. vollständiger Formularstrecke zur Veröffentlichung von Inseraten

Aktivitäten

Beratung, Architektur, UX-Design, UI-Design, Backend-Entwicklung, Frontend-Entwicklung, Produktiv-Betrieb

Technologien

Typo3, Fluid, Sass, JS

Projektzusammenfassung

Herausforderung

Innerhalb der ersten Projektphase galt es, aus einem bereits existierenden Design-Prototypen fachliche und technische Anforderungen für die Realisierung abzuleiten. Insbesondere die allgemein geltenden Richtlinien zur Barrierefreiheit gemäß BIK (barrierefrei informieren und kommunizieren) sollten in diesem Schritt überprüft und in Einklang mit dem zu entwickelnden Produkt gebracht werden.

Die zweite Projektphase umfasste umfangreiche Optimierungen in der gesamten Bedienoberfläche hinsichtlich Barrierefreiheit und Usability.

Vorgehen, Aktivitäten und Lösung

Zunächst wurde eine funktionale Version des im Vorwege entstandenen Design-Prototypen umgesetzt. Diese setzt sich aus einem Service zur Verwaltung von Wohnungsangeboten, einem Redaktionssystem zur Administration der Website und der Bedienoberfläche zusammen, die speziell für die Nutzung von Screenreadern optimiert wurde.

Die erste veröffentlichte Version des Portals wurde in Zusammenarbeit mit blinden und stark sehbehinderten Testpersonen überprüft. Das Feedback wurde mit dem Maßnahmenkatalog der BIK zur Realisierung von barrierefreien Websites abgeglichen. Darüber hinaus wurden die Hinweise der Plattform „leserlich.info“ berücksichtigt.

Daraus resultierend entstand ein neues UI-Konzept, welches gewährleistet, dass erforderliche Kontraste und Schriftgrößen eingehalten werden. Die Struktur der vorhandenen Seiten wurde dahingehend angepasst, dass über Screenreader vorgelesene Inhalte gut verständlich dargestellt wurden.

Ergebnis

Im Zuge der 2. Projektphase konnte mit adira.de ein Portal entwickelt werden, das für Interessenten von rollstuhlgerechtem und barrierefreiem Wohnraum ohne Einschränkungen bedienbar ist. Anbieter solcher Wohnangebote werden über das Eingabeformular informiert, ob ihre Wohnungen den geltenden Anforderungen gerecht werden.

Time to market

6 Monate

Accessibilty Score

100 Punkte

Design Komponenten

241

Screenshots der Plattform adira.de für barrierefreies Wohnen
Hans-Werner Lange
Hans-Werner Lange Geschäftsführer Blinden- und Sehbehindertenverband Niedersachsen e. V., Initiator adira.de

Bei adira.de geht es darum, in alle Richtungen weitestgehend barrierefrei zu sein. Daher ist unsere Aufgabe, zukünftig sowohl den Service immer weiter zu verbessern als auch das Thema Barrierefreiheit noch weiter zu optimieren.

Garantiert rollstuhlgerecht und barrierefrei

Der Service zur Anlage von Wohnungsangeboten beinhaltet in der Basis die relevanten Abfragefelder, um ein Wohnungsangebot allgemein zu beschreiben. Teil der Validierungsautomatik ist die Überprüfung verschiedener Werte, welches die Mindestvoraussetzungen zur Erfüllung der Kriterien für eine rollstuhlgerechte oder barrierefreie Wohnung sind. Als simples Beispiel dafür kann das Vorhandensein eines Aufzuges genommen werden. Dieser ist erforderlich, wenn die Wohnung rollstuhlgerecht sein soll und sich nicht im Erdgeschoss befindet. Eine Vielzahl solcher spezifischer Feldtypen wurde in Abstimmung mit dem BVN in die Eingabemaske integriert und unterstützt Anbieter von Wohnungen dabei, alle notwendigen Angaben zu treffen, die zur vollumfänglichen Beschreibung einer Wohnung nötig sind. Gleichzeitig hilft dieser Validierungsprozess dabei zu gewährleisten, dass keine Wohnungen angeboten werden, die die Kriterien nicht erfüllen.

Phase 2

Die uns bereits bekannten Limitierungen hinsichtlich Barrierefreiheit konnten auf Basis der ersten veröffentlichten Version bestätigt werden. Das Feedback mehrerer Testpersonen wurde konsolidiert und mit dem Maßnahmenkatalog abgeglichen, der Bestandteil der BITV und WCAG Testverfahren ist. Um den darin festgehaltenen Richtlinien gerecht zu werden, war die Zielvorgabe für die zweite Projektphase die Entwicklung eines neuen UI-Konzeptes. In Konsequenz daraus erfolgte die frontendseitige Umsetzung und die Überführung des Formulars zur Eingabe von Wohnungsangeboten in das neue UI. Im Zuge dessen wurde auch das UX-Konzept überarbeitet und das Eingabeformular u. a. auf thematisch gegliederte Einzelschritte verteilt.

Barrierefreies UI

Das bereits existierende und abgestimmte Interfacedesign sollte in puncto Barrierefreiheit optimiert werden. Es sollte demnach kein neuer Entwurf entstehen. Dennoch waren in der Basis alle Bestandteile zu überprüfen, die Auswirkungen auf die Barrierefreiheit haben. Geringe Farbkontraste wurden erhöht, Schriftstärken angepasst, Zeilenabstände erhöht und Interaktionselemente besonders gekennzeichnet. Außerdem wurde das gesamte Erscheinungsbild stärker vereinheitlicht. Innerhalb unseres Toolings halfen uns Erweiterungen dabei, im Design-Prozess herauszufinden, ob die neu definierten Schriftformatierungen über eine ausreichende Lesbarkeit verfügen. Auch frühzeitige User-Tests haben uns dabei unterstützt, das Interfacedesign zu optimieren und eine gute Basis zu entwickeln.

Design-Komponenten – Komponenten
Design-Komponenten – Ressourcen
Design-Komponenten – Kompositionen

Eingabe 2.0

Ebenfalls innerhalb der zweiten Projektphase überarbeiteten wir das Eingabeformular zur Speicherung und Veröffentlichung von Wohnungsangeboten. Im Unterschied zur ersten Lösung, die als eigener Dienst mit eigenem UI entwickelt wurde, integrierten wir das Formular vollständig in das Portal und überarbeiteten die Struktur. Statt alle Eingabefelder auf einer Seite abzufragen, sammelten wir thematisch zusammenhängende Felder und verteilten diese auf einzelne Schritte. Diese UX Anpassung hat zum Ergebnis, dass die Anbieter zu jedem Zeitpunkt wissen, wie viele Schritte noch vor ihnen liegen und welche Art von Information auf dem jeweiligen Schritt abgefragt wird. Bei der nachträglichen Bearbeitung eines Wohnungsangebotes lässt sich komfortabel zu der gewünschten Position navigieren.

Ein weiterer Vorteil der Migration des Eingabeformulars war die deutliche Optimierung von dessen Barrierefreiheit. War die initiale Umsetzung rein funktional, konnten wir in der neuen Version von der UI-Komponenten-Bibliothek profitieren, die bereits in der Basis über ausreichende Kontraste und Schriftgrößen verfügt.

Für das Angebot der Wohnungswirtschaft wurde eine Schnittstelle etabliert, die einen nahtlosen Export von Exposés aus der Immobilien-Software zu adria.de ermöglicht. So lassen sich auch Inserate administrieren, ohne diese parallel auf zwei unterschiedlichen Quellen zu pflegen.

Artikel

User Experience steigern – wie Farben wirken

Mehr erfahren

Wheelmap und weitere Services

Ideen für nützliche Tools und Services im Rahmen des Portals gibt es genügend. So ist geplant, in einer weiteren Ausbaustufe die Wohnungsangebote um eine Wheelmap zu erweitern. Diese stellt basierend auf einer spezifischen GEO-Location Informationen zu rollstuhlgerechten Orten zur Verfügung. Dazu gehören der ÖPNV, Einkaufsmöglichkeiten, Kulturstätten, öffentliche Einrichtungen und Gastronomie. Auch für Screenreader lassen sich diese Informationen verarbeiten, indem die relevantesten Orte anstatt auf einer Karte als Listeneinträge vorgelesen werden.

Auch Usability Features für Interessenten sollen in weiteren Ausbaustufen berücksichtigt werden.

Wir freuen uns in diesem Projekt unsere Expertise in der Entwicklung barrierefreier Lösungen ausgebaut zu haben und sind gespannt, wo die Reise von adira.de noch hingehen wird.

Malte Gärtner
Malte Gärtner Projektleiter adira.de, Blinden- und Sehbehindertenverband Niedersachsen e. V.

Chroma Experience ist gelungen, nicht allein die Wohnungssuche, sondern auch die neue entwickelte Eingabemaske barrierefrei zu gestalten – und so die Anforderungen an unser Portal sogar überzuerfüllen!

Projektmanagement
Paul Lewandowski
Requirements Engineering, UX-Research
Paul Lewandowski, Florian Köppe
Design-Lead
Ilona Maslioukovskagia
Technologie-Lead, Architektur
Andrius Baliutis, Sebastain Reihs
UX-Design
Florian Köppe
Backend-Entwicklung
Andrius Baliutis
UI-Design
Ilona Maslioukovskagia
Frontend-Entwicklung
Sebastain Reihs

Nächstes Projekt

tesa SE - ein Unternehmen von Beiersdorf Beratung ⟶ Architektur ⟶ UX-Design ⟶ UI-Design ⟶ Full-Stack-Entwicklung

tesa FLOW — Digitale Vertriebsunterstütung und Preisfindung

Projekt ansehen