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, welche die Mindestvoraussetzung 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 ausreichend Lesbarkeit verfügen. Auch frühzeitige User-Tests haben uns dabei unterstützt, das Interfacedesign zu optimieren und eine gute Basis zu entwickeln.

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.

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.

Interface Design

Um den Interaction-Design-Überlegungen Rechnung zu tragen, wurde auf Basis der UX-Design-Ergebnisse eine Bedienoberfläche ausgearbeitet, die sich in erster Linie auf den Einsatz auf Tablets konzentriert. Natürlich wurde das Thema Responsivität berücksichtigt, um eine hochwertige Nutzung auf größeren Displays zu gewährleisten.

Um die Entwicklung mit den Anwendern evaluieren zu können, haben wir die Bedienoberflächen ebenfalls nach Anwendungsfällen strukturiert erarbeitet und in einfachen Prototypen zur Verfügung gestellt. So konnten wir während des Projektverlaufs mehrere Nutzertests durchführen und die Ergebnisse direkt in die Design-Phase einfließen lassen.

Die einzelnen Design-Komponenten, die während des Design-Prozesses entstanden, haben wir nach jeder Iteration oder nach der Fertigstellung eines Anwendungsfalls in eine Bibliothek zurückfließen lassen, um diese als Ressourcen in den weiteren Schritten einsetzen zu können. So kann einerseits in einem größeren Team gearbeitet und andererseits kann ein konsistentes Design übergreifend garantiert werden.

Progressive Web App

Das Frontend haben wir als Progressive Web App (PWA) umgesetzt, da der Einsatz sowohl den Umgang mit erheblichen Mengen an Geschäftsdaten als auch deren Verfügbarkeit im Offline-Modus erfordert.

Die gesamte Anwendung wurde auf Basis von Web Components (Custom Elements) mithilfe von StencilJs typsicher realisiert. Durch den Verzicht auf den Einsatz eines Frontend-Frameworks wie Angular oder React konnte ein schlankes und äußerst performantes Ergebnis erzielt werden, was dem Nutzungserlebnis sehr zugutekommt. Die Renderperformance – insbesondere von langen Listen und umfangreichen Datensätzen – wurde seitens der Nutzerschaft als echter Pluspunkt bewertet.

Um die Geschäftsdaten clientseitig vorzuhalten, haben wir eine umfangreiche, streng getypte und asynchrone Abstraktionsschicht zwischen die Datensynchronisierung auf Basis von RESTful JSON und die Persistenz mittels Indexed Database API (IndexedDb) implementiert und integriert. So konnten wir die teilweise zur initialen Synchronisierung benötigten über 25.000 Datensätze innerhalb von wenigen Minuten übertragen und speichern. Die Abfrage der vorgehaltenen Daten konnte dann durch eine geschickte Indexierung und Object-Pooling jeweils in wenigen Millisekunden erfolgen. Auch die Integration von Binärdaten ließ sich reibungslos realisieren.

In der Web-Component-Architektur wurden sowohl die View-Controller als auch alle einzelnen Frontend-UI-Komponenten, die im Rahmen des UI-Prozesses definiert wurden, implementiert. So wurde ein nahtloser und stringenter Übergang zwischen Interface-Design und Frontend-Engineering sichergestellt. Jede Entität der Design-Komponenten-Bibliothek hat eine Entsprechung in der Frontend-Komponenten-Bibliothek.

Um in kurzen Zyklen Anpassungen und Erweiterungen behandeln zu können, wurde ein einfacher Integrations- und Verteilungs-Automatismus auf Basis von GitLab CI/CD umgesetzt. So konnten wir im Zuge der Entwicklung regelmäßige Abstimmungen mit den Fachabteilungen wie den Anwendern realisieren.

Nutzungsanalyse

Um manche der Business-Hypothesen belegen zu können, sind Einblicke in die Nutzung der Anwendung erforderlich, die sich zu einem späteren Zeitpunkt auswerten lassen. Zu diesem Zweck wurden ungefähr 50 Nutzungsereignisse definiert, die zusammen mit deren Ereignisdaten pseudonymisiert getrackt werden. Diese Ereignisse erlauben belastbare Rückschlüsse auf den Umgang mit den verschiedenen Produktfunktionen.

Begleitung PoC-Betrieb

Auch im Betrieb während der sechswöchigen PoC-Phase wurden in kurzen Zyklen Fehlerbehebungen und Erweiterungen vorgenommen und jeweils in kürzester Zeit bereitgestellt, um auch in dieser kurzen Nutzungsphase möglichst belastbare Nutzungsdaten und Rückmeldungen zu erhalten. Auch die Kommunikation mit den Anwendern wurde noch einmal intensiviert.

Ergebnis

Um in so kurzer Zeit ein Produkt zu entwerfen und als solide Implementierung zur Verfügung zu stellen sowie nach nur sechs Wochen dessen Nutzung bewerten zu können, muss einiges zusammenpassen. Ein hervorragend vorbereiteter Auftraggeber und eine aufgeschlossene und motivierte Testgruppe haben ein erstklassiges Ergebnis ermöglicht. Die Lösung optimiert für tesa entscheidende Vertriebsprozesse, reduziert administrativen Aufwand, integriert die Vertriebsmitarbeiter und trägt aktiv zur Erreichung der Geschäftsziele bei.

Nächstes Projekt