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
Entwurf einer intuitiven und effizienten Suchfilterung, die den Nutzenden hilft, schnell und einfach die für sie relevanten Weiterbildungskurse zu finden.
Ziele
Das Ziel war, die Nutzerzufriedenheit zu maximieren, indem eine reibungslose, fehlerfreie Interaktion und eine schnelle Auffindbarkeit von Informationen ermöglicht wird.
Meine Rolle: UI-Designer
Projektdauer: Juli – Oktober 2023
Verantwortlichkeiten
Optimierung der Benutzeroberfläche, responsives Design, visuelle Konsistenz, Gestaltung interaktiver Elemente, Barrierefreiheit, Prototyping und Testing
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
Wir wollten klare und leicht verständliche Filteroptionen schaffen, die eine individuelle Anpassung der Suchergebnisse ermöglichen, ohne den Nutzenden zu überfordern. Zudem sollte das Design sicherstellen, dass die Filter sowohl auf Desktop- als auch auf mobilen Geräten gut funktionieren, um eine konsistente Nutzererfahrung zu gewährleisten.
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
