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, effizienten und benutzerfreundlichen Suchfilterung, die den Nutzenden hilft, schnell und einfach die für sie relevanten Informationen 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
In der bestehenden Webseite soll der Kursfinder umfassend strukturell optimiert werden. Die Suchfunktion der Kurse folgte bisher der übrigen Struktur top down, d.h. die Suchergebnisse standen unter den Filtern. Um Änderungen vorzunehmen mussten Nutzende zu den Eingabe- und Auswahlfeldern hochscrollen und für die Ergebnisse wieder nach unten scrollen. Dabei verlor man leicht den Überblick über die Änderungen.
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. Probleme gab es 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
