Die Volkshochschule (vhs) bietet ein umfassendes Weiterbildungsprogramm für Erwachsene in den Bereichen Fremdsprachen, Deutsch und Integration, Gesundheit und Ernährung, Arbeit, Beruf und Karriere, Politik, Gesellschaft und Umwelt. Um aus den tausenden Angeboten den richtigen Kurs zu finden, ist eine gut funktionierende Suchfunktion unerlässlich.
Aufgabe
Entwicklung einer intuitiven und effizienten Such- und Filterfunktion, die Nutzende dabei unterstützt, schnell und unkompliziert relevante Weiterbildungskurse zu finden.
Dabei soll die Filterung eine klare Orientierung bieten, relevante Auswahlkriterien verständlich darstellen und es ermöglichen, die Suchergebnisse gezielt und mit möglichst wenig Aufwand einzugrenzen.
Ziele
Ziel war es, die Suche nach passenden Weiterbildungskursen so intuitiv, effizient und nutzerzentriert wie möglich zu gestalten. Die Nutzer sollten relevante Angebote schnell finden, Suchergebnisse gezielt eingrenzen und jederzeit den Überblick über ihre Auswahl behalten.
Meine Rolle: UX/UI-Designer
Projektdauer: Juli – Oktober 2023
Verantwortlichkeiten
Mein Verantwortungsbereich umfasste die ganzheitliche Optimierung der User Experience, von der Weiterentwicklung der Benutzeroberfläche und der Informationsarchitektur über die Gestaltung intuitiver Interaktionen und eines responsiven Designs bis hin zur Sicherstellung visueller Konsistenz und Barrierefreiheit. Darüber hinaus entwickelte ich Wireframes und interaktive Prototypen, führte Usability-Tests durch und nutzte die gewonnenen Erkenntnisse, um die Lösung iterativ und nutzerzentriert weiterzuentwickeln.
Design
Der bestehende Kursfinder soll im Rahmen des aktuellen Designsystems strukturell umfassend überarbeitet werden. Bisher orientierte sich die Suchfunktion an einer Top-Down-Struktur: Die Filterelemente befanden sich oberhalb der Suchergebnisse. Um Anpassungen vorzunehmen, mussten Nutzende zunächst nach oben scrollen, um Eingaben oder Auswahlen zu ändern, und anschließend wieder nach unten, um die aktualisierten Ergebnisse zu sehen. Dieser Ablauf führte häufig dazu, dass der Überblick über die vorgenommenen Änderungen verloren ging.
Verbesserungen
Usability-Tests zeigten, dass die Filteroptionen klarer strukturiert und verständlicher formuliert werden mussten. Auf Basis des Nutzerfeedbacks optimierten wir die Filter so, dass Suchergebnisse individuell eingegrenzt werden konnten, ohne die Nutzenden mit zu vielen Optionen zu überfordern. Gleichzeitig wurde die Filterlogik für unterschiedliche Bildschirmgrößen optimiert, sodass die Interaktion sowohl auf Desktop als auch auf mobilen Endgeräten intuitiv und konsistent funktioniert. Die iterativen Anpassungen trugen dazu bei, die Orientierung zu verbessern, die Suchzeit zu reduzieren und insgesamt eine reibungslosere User Experience zu schaffen.
1. Übersichtliche Positionierung
Auf dem Desktop wurden die Filter und die Suchergebnisse nebeneinandergestellt, so dass der Nutzende unmittelbar nach Klick auf die Filteroption auch eine Änderung der Suchtreffer in der Ergebnissspalte sieht.
Auf dem Smartphone erscheinen die Filter als Overlay über den Ergebnissen. Schließt man das Overlay (x) behält man die Ergebnisse an gleicher Position im Überblick. Genauso funktioniert auch die Sortierung.
2. Farbmarkierung
Suchanfragen können komplex sein. Die Ergebnisse sind durch die Menge an Daten und der gleichartigen Darstellung i.d.R. unübersichtlich. Um den Überblick zu behalten, werden alle ausgewählten Filterelemente mit einer zusätzlichen Aktiv-Farbe gekennzeichnet. Diese Farbe ist eine völlig neue Farbe, die außerhalb der vhs-Farbwelt liegt. Sie hat ein Kontrastverhältnis von 4,6:1 und erfüllt damit die Anforderungen der Barrierefreiheit.
3. Funktionale Erweiterung
Mit den Optionsfeldern „Vor Ort“, „Online“ und „Hybrid“ können Nutzende die Suchergebnisse im Voraus eingrenzen. Diese Möglichkeit ist sehr praktisch, um die Suchergebnisse einzugrenzen.
Eine besondere Herausforderung ergab sich mit der Vorfilterung der Angebote „Vor Ort“, denn die Anzahl der Suchtreffer unterscheidet sich z. T. erheblich zwischen einer Metropolregion und einem ländlichen Gebiet. Hier benötigten wir eine Möglichkeit den Suchradius stufenlos einzustellen, je nachdem ob es zu viele oder zu wenige Ergebnisse für einen Ort gibt. Dies geschieht nun über einen Schieberegler.
Wirkung
Der neu gestaltete Kursfinder bietet eine benutzerfreundliche und leistungsstarke Möglichkeit, passende Bildungsangebote zu finden. Zu den Verbesserungen gehören:
- Intuitive Bedienung: Durch ein modernes, funktionales Design sind die gewünschten Kurse schneller und einfacher zu finden.
- Umkreissuche: Mit dieser Funktion können Nutzerinnen und Nutzer gezielt nach Kursen in ihrer Nähe suchen.
- Schnellfilter: Diese erleichtern die Navigation und helfen den Nutzenden, passende Angebote schneller zu identifizieren.
Der neue vhs-Kursfinder ist seit Februar 2025 online verfügber:
→ https://www.volkshochschule.de/kursfinder
